Practical Notes on Building a Design System in Figma

Before Building

• A design system includes more than Figma components. It also includes guidelines, documentation, color, spacing, and code. Design and engineering need to remain aligned.
• Not every layer needs to become a component. Figma's component model is not a fully closed system, so product designers should be allowed to detach components when necessary.
• Plan how variables and components will be organized. Whether they live in the same file directly affects future maintenance and expansion.

During Building

• Avoid overly complex components. Prefer smaller, reusable foundations.
• Limit component properties, especially in components with many variants. Explicit variants are often easier to maintain than a large set of adjustable properties.
• For structures with an unknown number of items, such as lists, do not enumerate every possible case. Preserve composition and avoid unnecessary performance costs.
• Use internal plugins for frequent operations when they can reduce the cost of using the system.
• Duplicate frequently used variables, especially colors, and place them near the beginning to reduce lookup time.
• Name boolean variant states true and false to provide switch-like controls.
• Prefix component names with _ or . to hide them during publishing.
• Union icon components and name the result Vector to prevent color replacement issues when switching icons.

After Building

TBD