Organizing components and variants
We wrap all levels (atoms, molecules, organisms) into components (indicated in Figma by the ❖ icon).
Creating and naming components
The main advantage of working with components is the ability to make changes to all instances of the project at once, changing only the master component. This speeds up the workflow and makes the project’s design system more consistent, simplifies its maintenance and cooperation with other designers.
When creating a new component, do not forget to assign it a corresponding name for more practicaland faster searching in the component database in the future. It is best to name components according to the resolution for which they are made, the name of the entity and its parameter, for example, 1440/Button/Small. Make sure you write the сriteriathrough the slash, as Figma recognizes this as folders.
In the example above, it will work as follows: the 1440 folder will contain all nested folders with components for this resolution, and the Button folder will contain all possible buttons. This will speed up further component search.
A complete list of all created components can be seen in the Assets tab, located in the upper corner of the left panel.
The simplest component is buttons and icons (atoms). It is important to remember that its appearance should not change when switching from screen to screen.
Button component
More complex components (molecules and organisms) are, for example, footer, header, modal windows, feedback forms.
A complex component can be endowed with various properties depending on the tasks:
- Layers: hide or show.
- Instance replacement: replace one element with another.
- Changing text strings: specify which text strings can be edited.
Component property types
Boolean properties: allow you to enable or disable certain functions or elements.
Instance swap properties: allow you to replace one instance of a component with another.
Text properties: allow you to change text elements within a component.
Variant properties: used to switch between different variants of a component.
After adding, they will be displayed on the right panel with the component settings.
Using component properties, especially boolean properties, helps significantly reduce the file size of the library, optimizing the work with layouts.
Variants of components
Variants allow you to group and organize similar components into one container. This simplifies the component library and makes them easier to find. Switching between variants occurs by selecting the desired item in the instance properties.
Radio button variants (sizes and states)
Why is it convenient? There can be as many options as needed to complete the tasks designers face. These can be both component states and more detailed settings for each of them.
Structuring variants
Each variant has a set of certain characteristics and properties. These parameters are assigned depending on the task being solved. The basic characteristics are Type, State, Size, Breakpoint.
Some states can be displayed in a separate switch with True and False settings. For example, this is suitable for quickly enabling or disabling an icon in a button (if it is always in a certain place, and not in several)
Two variant properties with dropdowns
Naming variants
It is important to consider that in the variants of the master component, you need to correctly sign the elements in the layers list. If you use the same names for different variants, errors may occur due to which the component will not be able to work correctly.
Error in the name of variants
Nested components
After we have figured out the concept, behavior, and capabilities of component variants, we can safely move on to working with nested or atomic components. They are a component that is partially or fully assembled from other components. Such a construction simplifies and speeds up design.
The simplest example of an atomic component is a bulleted list where each line is an instance of another component. If you need to change the appearance of bullets, just make changes to the master component of the string, and not edit each string in the list separately.
Example of an atomic component, bulleted list
There are also more complex examples of creating molecules and organisms. All of them are united by one simple rule: we create the complex from the simple. Everything that may undergo changes in the future is better to disassemble into small components, and assemble more complex ones from them.
Job card component. Assembled from other small components.
You can also set additional characteristics for layers in components.
Additional characteristics in layers