Tricks for Building Design System in Figma

10/12/2025

This article summarizes some of my practical experiences and tips from building a design system in Figma. Some points are subjective — please reference them according to your own needs. If it inspires you in any way, all the better.

Before Building

• A design system includes more than Figma components. It should also cover design guidelines, usage documentation, color, spacing, and most importantly, code implementation. Designers should stay aligned with developers to avoid working in isolation.
• Designers often try to componentize every layer, the more purple the safer. But Figma's current system doesn't support a fully closed structure. Allow flexibility — let component consumers detach components when necessary to improve efficiency.
• Plan ahead for variable and component organization. Whether they're stored in the same file affects scalability and maintenance later.

During Building

• Avoid overly complex components. Break them down into smaller, reusable building blocks.
• Limit the number of component properties. Especially when managing multiple variants, prioritize clarity and maintainability. Simple variant selection is often more efficient than setting many adjustable properties.
• For components with uncertain quantities (e.g., lists), avoid covering every possible variation, which can lead to performance issues. Follow the previous principle — stay moderate.
• Build internal plugins to improve efficiency within the team's workflow and solve the previous problem.
• Copy and place commonly used variables (especially colors) near the top to reduce lookup time.
• When creating variants, name states as true and false to enable switch-like toggling behavior.
• Prefix component names with an underscore _ or dot . to automatically hide them when publishing.
• Union icon components and name them Vector to prevent color replacement issues when switching icons.

After Building

TBD