Creating new components

Our free Figma kit includes 40 generic components, each with multiple variants, allowing you to design interfaces in minutes. However, as we always emphasize, every project has its unique needs, so custom components are key.

To create new components, we recommend the following steps:

1. Follow our Atomic Design methodology for naming and classifying components: (Quarks - Atoms - Molecules - Organisms - Templates)

   
2. Name component tokens in the variables following the convention mentioned in the methodology definition. Remember that to continue seeing each component token as a folder, you must separate each group with a (/), for example: button/background-color/primary/default.

   
3. Explore all our Atoms, Molecules, and Organisms. These components are designed for you to continue creating new elements smoothly, almost like assembling pieces of Lego.