Go back

Figma Design Strategies

Design components need to be scalable for various use cases, both present and future. Most importantly, they need to be usable by UI library consumers. A good indicator of component usage is the frequency of broken instances. When a designer breaks an instance, the component likely didn’t meet their needs. A pattern of broken instances indicates a need for component improvement. Broken instances disconnect components from the master, losing critical properties such as interactive states, responsive variants, theming, language, as well as not receive component updates.

We want to prevent component detaching. This can be achieved by better organizing nested elements, which helps designers understand component structure, and enhances organization while optimizing and saving Figma file memory. This is achieved through better structuring, organizing, and optimizing complex design components by applying the following applicable strategies.

Note: We plan to list all strategies here, regardless of whether they are currently effective or not.

Design Strategies for Complex Components in Figma

1. Concept of base components Not recommended
2. Comparing base components, variants, and slot components
3. Base components best practices Not recommended
4. Building scalable variants using base components Not recommended
5. Building flexible components with slots
6. Best practices for component props
7. Creating and organizing variants
8. Using variants effectively
9. Slot components best practices:
   1. Thread 1
   2. Thread 2
   3. Thread 3
   4. Thread 4
   5. Thread 5
10. Example of using slot components
11. Template components in Figma
12. Component properties best practices
    1. Thread 1
    2. Thread 2
13. Repeating children
14. Pseudo slots
15. Nested elements and instance swap
16. Structure and clarity