Skip to main content

Structure your Figma file for better code

The Figma MCP server gives your agent structured context from your Figma files. The quality of what your agent builds depends on that context and on how you ask. Use these best practices to get clearer, more consistent code that fits your design system and codebase.

tip

Figma’s skills build many of these practices into reusable instructions for your agent. Install them first, then use the practices below to fine-tune your results.

A well-structured file tells your agent what each part of the design is and how it should behave.

  • Use components. Make anything that repeats, like buttons, cards, inputs, and nav items, a component. This keeps the file clean and lets your agent reuse the same code for each instance.
  • Connect components to code with Code Connect. This is the most effective way to get your agent to reuse your real components. Without it, your agent has to guess which code component matches.
  • Use variables for spacing, color, corner radius, and typography, so your agent can reference your tokens instead of hardcoded values.
  • Give layers and components clear names. Replace default names like Frame1268 or Group5 with names that describe their purpose, like CardContainer, ProductImage, or CTA_Button. This helps your agent understand what each layer is and how it should work.
  • Use auto layout. Auto layout shows how your design should respond to different sizes and avoids absolute positioning, which usually leads to cleaner, more predictable code. Before generating code, resize the frame to check that it behaves the way you expect.
  • Add annotations to explain things that are hard to show visually, like how an element should behave, align, or respond.
  • Add dev resources to layers in Dev Mode, so your agent gets links to related documentation, code, or tickets.