Blog - Design Systems & Design Tokens

Guides and deep dives on design tokens, design system architecture, and keeping design and code in sync - written by the team building Flash DSM.

Articles

Your Figma is half a system and your app isn't live yet - A real case: a Figma file with a few variables, no text styles and fonts set by hand, and a widget that only runs on localhost. How both become one Flash system and a style guide. Plain text: https://flashdsm.com/blog/figma-without-variables-and-a-local-build.md
Sync Figma from Claude Code or Cursor with Figma's MCP server and Flash - Connect Figma's MCP server and Flash's to the same coding agent, add one skill, and build or update a Figma file's variables from your editor. Plain text: https://flashdsm.com/blog/figma-mcp-with-flash-in-your-editor.md
Build Figma variables from Flash with the Figma agent - Connect Flash to Figma's agent, then have it build your collections, modes, variables and text styles from your system, and send the file's edits back for review. Plain text: https://flashdsm.com/blog/figma-agent-build-variables.md
Flash now works inside the Figma agent - Add Flash as a connector in the Figma agent, sign in once, and the agent reads your design system live and builds the file's variables from it. Plain text: https://flashdsm.com/blog/flash-in-the-figma-agent.md
The Flash plugin or the Figma agent? Use the one that fits the moment - Two ways to get your Flash system into Figma. The plugin builds the whole file and keeps it following; the agent does it from a sentence. They write the same thing. Plain text: https://flashdsm.com/blog/figma-plugin-or-figma-agent.md
Import a design system from your live website - Your live site already holds a design system, spread across old stylesheets. Scan it into tokens, then clean up what years of drift left behind. Plain text: https://flashdsm.com/blog/import-design-system-from-website.md
Edit foundations without breaking them - Colour ramps, semantic aliases and per-theme values all depend on each other. Edit them in the right order and one fix won't undo another. Plain text: https://flashdsm.com/blog/editing-foundations.md
Ask Flash prompts that change real tokens - A prompt with a target and a number gets you a patch worth applying. "Make it pop" gets you one you'll throw away. Plain text: https://flashdsm.com/blog/ask-flash-prompts.md
Keep a Figma file in sync with Flash - The plugin draws your system into Figma with Light and Dark variables, then keeps the file following Flash while the panel is open. Plain text: https://flashdsm.com/blog/figma-plugin-live-sync.md
Get your tokens into code - Export opens five destinations and Sync adds two more. Which one to use depends on how often your tokens change and who reviews them. Plain text: https://flashdsm.com/blog/export-tokens-to-code.md
Hand off to Lovable, v0 and Bolt - Launch Lovable, v0 or Bolt with your tokens already loaded. What the sync link makes public, and how to catch a builder up when your tokens change. Plain text: https://flashdsm.com/blog/handoff-lovable-v0-bolt.md
Invite your team and keep a history - Admin, Editor or Viewer on each system, and a named version before every big change so a restore is one click. Plain text: https://flashdsm.com/blog/team-roles-and-history.md
Primitive and semantic colour tokens - Ramps hold every colour you're allowed to use. Semantic tokens say which one goes where, and point at different steps in light and dark. Plain text: https://flashdsm.com/blog/primitive-vs-semantic-colour-tokens.md
Name design tokens so nobody has to guess - Put the parts of every token name in one fixed order and people can guess names instead of looking them up. Renames go through an alias, never a break. Plain text: https://flashdsm.com/blog/naming-design-tokens.md
WCAG AA contrast in a real design system - 4.5:1 and 3:1 are easy to quote. Most failures hide in placeholders and dark mode, and the fix is to ship colour pairs that already pass. Plain text: https://flashdsm.com/blog/contrast-wcag-aa-in-practice.md
Type scales that survive real content - A ratio gives you the sizes, but only real content tells you whether they work. Test your scale against long German words and columns of numbers before you ship it. Plain text: https://flashdsm.com/blog/type-scales-for-real-content.md
Pick a spacing base and stop arguing - Use a 4pt base with an 8pt rhythm, name space by the job it does, and density modes cost you nothing. Plain text: https://flashdsm.com/blog/spacing-scale-4pt-8pt.md
Dark mode is a second theme, not an inverted one - Flip a light palette and you get a dark mode that glares and fails contrast. Build dark as its own theme on the same semantic names instead. Plain text: https://flashdsm.com/blog/dark-mode-is-a-second-theme.md
Components should reference tokens, not values - A hard-coded value in a component is a bug. How to take a button apart and put every property, states included, on tokens. Plain text: https://flashdsm.com/blog/components-reference-tokens.md
Version your design system like an API - A removed token doesn't throw an error. Your cards just lose their background. How to version tokens so that never ships as a patch. Plain text: https://flashdsm.com/blog/versioning-a-design-system.md
Screen generators give you mockups. You still need a design system. - AI screen tools make convincing mockups fast, but not the decisions every future screen should share. When a screen is enough and when you need the system underneath. Plain text: https://flashdsm.com/blog/screens-vs-design-system.md
Generate a design system from one prompt - One specific prompt and two setup questions get you real tokens in your CSS in about ten minutes. Plain text: https://flashdsm.com/blog/generate-design-system-from-prompt.md
Keep Cursor and Claude Code on your tokens - Coding agents make up values when they can't see your tokens. Connect them to Flash over MCP and make them check their own output. Plain text: https://flashdsm.com/blog/cursor-design-tokens-on-brand-ai.md
Design tokens, from primitive to component - A token is a design decision with a name. Primitive, semantic and component tokens each hold a different kind of decision, and each points only at the tier below. Plain text: https://flashdsm.com/blog/design-tokens-explained.md