Design Systems Implementation

I have spent hundreds of hours analyzing design systems. One of the things that confused me for many years is how to structure color scales and tokens. I have experimented with multiple structures at different sizes of design systems, and at a high-level recommend the following approach: 1. Primitive Colors Your design system foundations should always start with a full color scale that is based on your brand identity. We call these colors Primitives, and your variable/token collection should look like this: - purple-600 - purple-500 - purple-400 - And so on.. To create a Primitives palette you will want to start from your main brand colors and use a tool like UIColors, Supapalette, Colorbox to expand to the full scale. (links in comments) This is a great foundation to have, as it gives you a set of shades that can be used in different ways, and ensures all of them have consistent hues, saturation and brightness. However, Primitive colors are simply not effective when used directly in your designs: - They create ambiguity - Their names have no contextual meaning - They are often misused due to similarity If you have had the “why are there 20 different shades of gray?” conversation with an engineer, you know what I mean. So let’s see how we can improve that. 2. Semantic Colors This is my default recommendation to all product design teams that don’t have a highly complex design system. What you will want to do here is create a new variable collection named Semantic, which is what’s visible in your design files, and comprises of: - Brand / Action - Text - Link - Border - Icon - Surface / Background - Bias - Data / Charts Each color should point to a primitive value, e.g. - text-primary → gray-800 - text-secondary → gray-600 - text-tertiary → gray-400 This takes a bit of setting up, but creates immense long-term value. A great example of a simple, theme-level Semantic structure is Shopify’s Polaris (link in comments) 3. Component-level Semantic Lastly, if you are working on a design system with a lot of complexity and, ideally, a dedicated design systems team, you might want to add another level of hierarchy and specify colors at a component-level. In this structure, you would want to create color tokens based on how they are used in each component. - input-text-filled → text-primary - input-text-placeholder → text-secondary - input-text-disabled → text-tertiary This eliminates all guesswork, but also increases the complexity exponentially. It does serve a purpose though. As design systems scale, you may find that: - A theme-level semantic structure is too restrictive - There is still some guesswork - Decisions need to be documented. An example of this is Uber’s Base and Adobe’s Spectrum design system, linked in the comments. I’m curious to know, what structure are you using for your design system and what has worked well for you? — If you found this useful, consider reposting ♻️ #uidesign #designsystems #productdesign

Essential Git: The 80/20 Guide to Version Control Version control can seem overwhelming with hundreds of commands, but a focused set of Git operations can handle the majority of your daily development needs. Best Practices 1. 𝗖𝗼𝗺𝗺𝗶𝘁 𝗠𝗲𝘀𝘀𝗮𝗴𝗲𝘀    - Write clear, descriptive commit messages    - Use present tense ("Add feature" not "Added feature")    - Include context when needed 2. 𝗕𝗿𝗮𝗻𝗰𝗵 𝗦𝘁𝗿𝗮𝘁𝗲𝗴𝘆    - Keep main/master branch stable    - Create feature branches for new work    - Delete merged branches to reduce clutter 3. 𝗦𝘆𝗻𝗰𝗶𝗻𝗴 𝗪𝗼𝗿𝗸𝗳𝗹𝗼𝘄    - Pull before starting new work    - Push regularly to backup changes    - Resolve conflicts promptly 4. 𝗦𝗮𝗳𝗲𝘁𝘆 𝗠𝗲𝗮𝘀𝘂𝗿𝗲𝘀    - Use 𝚐𝚒𝚝 𝚜𝚝𝚊𝚝𝚞𝚜 before important operations    - Create backup branches before risky changes    - Verify remote URLs before pushing Common Pitfalls to Avoid 1. Committing sensitive information 2. Force pushing to shared branches 3. Merging without reviewing changes 4. Forgetting to create new branches 5. Ignoring merge conflicts Setup and Configuration Essential one-time configurations: # Identity setup git config --global user. name "Your Name" git config --global user. email "your. email @ example. com" # Helpful aliases git config --global alias. co checkout git config --global alias. br branch git config --global alias. st status ``` By mastering these fundamental Git operations and following consistent practices, you'll handle most development scenarios effectively. Save this reference for your team to maintain consistent workflows and avoid common version control issues. Remember: Git is a powerful tool, but you don't need to know everything. Focus on these core commands first, and expand your knowledge as specific needs arise.

In Figma, we use variables. But are they the same as tokens? And what is that JSON file developers keep talking about? Let’s understand this for a better workflow: 1. Variables in Figma Variables let you define values like colours, spacing etc. --> Example (Figma): color/danger = #FF0000 This keeps designs consistent inside Figma. 2. So what is a token? A design token is a simple name + value pair that describes a design decision in a format code can use. --> Example (JSON): "moon-color-text-danger": "#FF0000" 3. Isn’t that the same? Not quite. Tokens are intentionally simpler. Each token represents one decision: one value only. • A colour token maps a single hex value • A spacing token maps a single pixel value • A radius token maps a single corner value This simplicity is what makes tokens portable across platforms. They don’t carry Figma-specific logic like modes or variable aliasing. 4. The JSON file This is the container for tokens. Think of it as the dictionary of all design decisions in your system. Inside it, every decision is expressed in a consistent, structured format. Why it matters: • JSON is machine-readable • JSON is tool-agnostic • SON becomes the single source of truth for both designers and developers 5. What works well today in Figma • Variables can be grouped, aliased, and scaled across files • They can be applied to styles and components • With plugins such as Token Studio, variables can be exported into JSON 6. Where it falls short • Figma does not yet export a “true” token file natively • JSON export requires plugins or manual workflows • Bi-directional sync (design ↔ code) is still early • Naming conventions are not enforced, which risks drift between design and dev 7. How it connects Here’s the flow today: • Designers create variables in Figma (design intent) • These variables are exported (manually or via plugin) into JSON (structured tokens) • Developers translate that JSON into platform code (iOS, CSS, Android, etc.) When the JSON updates, every platform can stay in sync 👉 The takeaway Figma variables are a flexible design tool. Tokens are the code-friendly format. JSON is where those tokens live as the single source of truth. The pieces are coming together, but we are not yet at a perfect one-click sync between design and code. How is your team handling this today? Are you exporting variables into tokens, or still managing JSON separately with developers? Any handy tools I might have missed?

For the longest time, every new project meant starting from scratch. New colors. New typography. New spacing. New everything. And honestly, it took a lot of time that could’ve been better spent designing for users. So I decided to create a 𝐦𝐚𝐬𝐭𝐞𝐫 𝐅𝐢𝐠𝐦𝐚 𝐟𝐢𝐥𝐞, one that works like my personal design foundation. Here’s what I set up:  🎨 𝐂𝐨𝐥𝐨𝐫 𝐭𝐨𝐤𝐞𝐧𝐬 - primary, secondary, tertiary, semantic colors, and a detailed gray palette.  🔡 𝐓𝐲𝐩𝐨𝐠𝐫𝐚𝐩𝐡𝐲 𝐭𝐨𝐤𝐞𝐧𝐬 - scalable system with clear hierarchy.  📏 𝐏𝐫𝐢𝐦𝐢𝐭𝐢𝐯𝐞𝐬 - border widths, spacing, radii, number scales.  📑 𝐃𝐨𝐜𝐮𝐦𝐞𝐧𝐭𝐚𝐭𝐢𝐨𝐧 - all neatly organized in one place. Now, every time I start a new project, I simply duplicate this file, and in just a few clicks, I update the tokens using variables, and everything across the file reflects instantly. Easy peasy. It sounds simple, but it’s been a game-changer: 𝐍𝐨 𝐦𝐨𝐫𝐞 𝐢𝐧𝐜𝐨𝐧𝐬𝐢𝐬𝐭𝐞𝐧𝐭 𝐬𝐭𝐲𝐥𝐞𝐬 creeping in. 𝐍𝐨 𝐦𝐨𝐫𝐞 𝐰𝐚𝐬𝐭𝐞𝐝 𝐡𝐨𝐮𝐫𝐬 redefining basics. And handing over to developers? So much smoother. If you’re someone who juggles multiple projects back-to-back, setting up a reusable token-based system in Figma might just save you a lot of time (and sanity). #uxdesign #variables #tokens #typography #colorstyles #freelance

🔧 Version Control with Azure Repos: Best Practices for Managing Source Code with Git 🔧 In today’s fast-paced development environment, effective version control is crucial for maintaining code quality and collaboration. Azure Repos, coupled with Git, provides a robust solution for managing your source code. Here are some best practices to help you get the most out of Azure Repos: Branching Strategy: Adopt a clear branching strategy like GitFlow or GitHub Flow to streamline your development process. This helps in organizing work, managing features, and ensuring smooth integration. Commit Often and Meaningfully: Make frequent, small commits with descriptive messages. This makes it easier to track changes, understand the history, and revert if necessary. Pull Requests (PRs) and Code Reviews: Use pull requests to review code before merging. This not only ensures code quality but also fosters collaboration and knowledge sharing among team members. Use Tags for Releases: Tag specific commits to mark releases. This practice helps in tracking release history and simplifies the deployment process. Enforce Branch Policies: Implement branch policies to enforce standards such as mandatory code reviews, build validations, and required work item linking before merging. Automate with CI/CD Pipelines: Integrate Azure Pipelines with your Azure Repos to automate builds and deployments. This ensures consistent and reliable delivery of your code. Monitor Repository Health: Regularly clean up stale branches and unused repositories to maintain a healthy and manageable codebase. Security and Permissions: Set up appropriate permissions to ensure that only authorized team members can make changes to critical branches. Documentation and ReadMe: Keep your repository well-documented with a comprehensive ReadMe file. This helps new contributors understand the project setup and guidelines. Leverage Azure DevOps Integration: Take advantage of Azure DevOps’ integration capabilities to link work items, track changes, and manage your entire development lifecycle from a single platform. By following these best practices, you can enhance your development workflow, ensure high-quality code, and improve team collaboration. Azure Repos and Git together offer a powerful version control system that supports your DevOps journey. 𝐅𝐨𝐥𝐥𝐨𝐰 𝐮𝐬 𝐨𝐧 𝐋𝐢𝐧𝐤𝐞𝐝𝐈𝐧 👉🏻 https://lnkd.in/e2sq98PN https://lnkd.in/e-9dJf8i 𝐅𝐨𝐥𝐥𝐨𝐰 𝐮𝐬 𝐨𝐧 𝐅𝐚𝐜𝐞𝐛𝐨𝐨𝐤 👉🏻 https://lnkd.in/eWcXVwAt 𝐅𝐨𝐥𝐥𝐨𝐰 𝐮𝐬 𝐨𝐧 𝐈𝐧𝐬𝐭𝐚𝐠𝐫𝐚𝐦 👉🏻https://lnkd.in/ehA5ePqX Do you happen to have any other tips or experiences with Azure Repos? Share them in the comments! 👇 #AzureDevOps #AzureRepos #Git #VersionControl #DevOps #BestPractices #SoftwareDevelopment #ContinuousIntegration #ContinuousDelivery

I mass-deleted an entire folder of code on my personal computer last year and fixed it in 40 seconds all because I knew these 10 git commands. That's it. 10 commands that cover 95% of everything you'll ever do with version control as a data scientist. Most people learn git from documentation or YouTube. They memorize commands they'll never use and skip the ones that matter. Here's the approach that actually works: 1/ Five commands handle your everyday work: git init starts a project git add stages your changes git commit saves a snapshot git push sends it to GitHub git pull grabs the latest from your team Edit, add, commit, push. Start work, pull. That cycle is 90% of your day. 2/ Learn branching for teamwork. Three commands let you collaborate without breaking each other's code. git branch creates a parallel version. git switch moves between branches. git merge combines them when you're done. 3/ Memorize the rescue commands. git stash hides unfinished work temporarily. git reset unstages files you added by mistake. git revert undoes a commit without erasing history. These three turn a 2-hour panic into a 40-second fix. 📌 Most bootcamps spend a week on this and you can learn it in 15 minutes with a hands-on exercise that I wrote down here: https://lnkd.in/gkMUWREE

🚀 𝐆𝐢𝐭 & 𝐆𝐢𝐭𝐇𝐮𝐛: 𝐓𝐡𝐞 𝐒𝐤𝐢𝐥𝐥 𝐄𝐯𝐞𝐫𝐲 𝐃𝐞𝐯𝐞𝐥𝐨𝐩𝐞𝐫 (𝐚𝐧𝐝 𝐍𝐨𝐧-𝐃𝐞𝐯𝐞𝐥𝐨𝐩𝐞𝐫) 𝐒𝐡𝐨𝐮𝐥𝐝 𝐌𝐚𝐬𝐭𝐞𝐫 I recently went through a fantastic Git & GitHub crash course from Hamburg Coding School, and it's a great reminder of why version control is one of the most underrated superpowers in tech. Here's the TL;DR 👇 🔹 What is Git? A version control system that lets teams work on the same codebase without stepping on each other's toes. Think of it as "track changes" for code but exponentially more powerful. 🔹 The Core Workflow Untracked → Staged → Committed → Pushed git add → git commit -m "message" → git push Simple, but it's the backbone of every modern software team. 🔹 Branches = Freedom to Experiment Want to build a new feature without breaking production? Create a branch: git checkout -b feature/user-login Work in isolation, then merge back into the master when it's ready. No fear, no chaos. 🔹 GitHub ≠ Git Git is the tool. GitHub is where you host it, collaborate via Pull Requests, run code reviews, and even publish websites for free with GitHub Pages. 🔹 Mistakes Happen — Git Has Your Back - git checkout -- <file> → undo local changes - git reset --soft HEAD~1 → undo a commit (keep the changes) - git revert → undo safely without rewriting history 🔹 Conflicts Aren't Scary When two people edit the same line, Git just asks a human to decide. That's it. No magic, no panic — just <<<<<<< markers waiting for a decision. 💡 Why this matters: Whether you're a developer, PM, designer, or founder, understanding Git changes how you think about collaboration, iteration, and accountability. It's not just a tool — it's a mindset for building things safely, together. Which Git command has saved you the most? Mine is definitely git stash 😅 #Git #GitHub #SoftwareDevelopment #VersionControl #Coding #TechEducation #WebDevelopment

When it comes to managing design systems in Figma, there’s an aspect I’ve noticed trips up a lot of beginners: Figma doesn’t technically have “design tokens,” but you can absolutely create and manage them using Figma’s variables. In practice, design tokens are named values for things like color, typography, spacing, and more. Designers like them because they’re reusable, consistent, and easy to hand off to dev. Basically: Your design decisions made once and then applied system-wide. In Figma, variables let you define visual styles once and apply them everywhere. So instead of coding #D84F2B as the background color for every button, you use a variable like ‘color.primary’. Here’s how design tokens help: ✅ Consistency: Every component pulls from the same source ✅ Scalability: Make a change once, and it updates everywhere ✅ Dev collaboration: Variables make your design language exportable and codable How to get started: 1. Set up variables for core values (color, type, spacing) 2. Name them clearly (ex: color.text.secondary) 3. Apply them across your components Optional: Use a plugin like Tokens Studio to connect with dev tools. If you’re building or maintaining a design system, using variables to manage design tokens is the key to scaling without chaos. Start small. Stay consistent. And name your tokens like future-you has to live with them. Still wrapping your head around variables? Or love them already? Let’s compare notes below. 👇 #FigmaFriday #Figma #designsystems #uxdesign #uidesign #productdesign #webdesign #variables #uxui ⸻ 👋 Hi, I’m Dane—sharing design guides & strategies. ❤️ Found this helpful? 'Like’ it to support me. 🔄 Share to help others (& save for later). ➕ Want more? Follow me for free DAILY insights.

Ever feel lost trying to manage your code changes? Let’s talk about Git and how to use it effectively for version control in your software projects! Here’s a simple guide to get you started: 1. Create a Repository Start by initializing your project with git init. This is the first step to tracking changes. 2. Branching Use branches to work on different features without affecting the main codebase. You can create a branch with: git branch <branch-name> Switch to your branch using: git checkout <branch-name> 3. Committing Changes When you make changes, stage them using: git add <file-name> Then, commit your changes with a clear message: git commit -m "Your message here" 4. Merging Once your feature is ready, merge it back to the main branch using: git checkout main Then run: git merge <branch-name> This is where you can see your hard work come together! 5. Resolving Conflicts If you run into conflicts during merging, Git will let you know. Open the conflicting files, fix the issues, and then use: git add <file-name> followed by: git commit -m "Resolved merge conflict" to complete the merge. 6. Best Practices ✔ Commit often with meaningful messages. ✔ Pull changes frequently to keep your local copy up to date. ✔ Use .gitignore to exclude unnecessary files from your repository. By following these steps, you can manage your projects smoothly and collaborate with your team like a pro! What’s your favorite Git command? Share in the comments below! PS: Git might seem tricky at first, but with practice, you’ll master it! Feel free to share your tips or ask questions below! #softwareengineer

Chatbots guess pixels. Claude reads blueprints. That’s the shift we’re seeing with Figma’s new Dev Mode + Claude’s support for the Model Context Protocol (MCP). Instead of screenshotting a frame and guessing, Claude reads: The full component tree Design tokens Auto-layout rules Variables …and writes React code that mirrors your system. It’s not “generative UI”, it’s design-informed code translation. Why it matters (if you ship software): 1️⃣No more handoff fog. Design tokens and components flow straight into usable code scaffolds. No more reverse-engineering color math or spacing hacks. 2️⃣It works in your real stack. The MCP server runs in Figma Dev Mode. Claude Code now supports remote access, no local server maintenance, no babysitting. 3️⃣It’s more than pretty. Figma’s latest updates even support snapshot/edit diffs, useful for PR reviews, test flows, and fast iteration. How to ship a first win this week: ✅Enable the MCP server in Dev Mode ✅Connect Claude Code via remote server ✅Pick a frame → generate TSX with tokens + layout constraints ✅Auto-generate tests (Jest/Playwright) + PR descriptions ✅Review + ship behind a feature flag This isn’t mockups-to-pixels. It’s system-to-code. Mockups → Merges. Which screen in your app would you translate first?