First, define how many types of your logo you have. By default, we placed a full version and a mark version. We also advise to already adjust the size to fit your needs (like the size of your logo inside the header).
Version 3.1.0 - New variables, more colors, new pages. Check our latest updates!
Components in a design system refer to modular and reusable elements that are used to build consistent user interfaces. These components are pre-designed and pre-defined elements that can be combined and arranged to create various UI layouts and patterns.
Here you will define your brand logos.
First, define how many types of your logo you have. By default, we placed a full version and a mark version. We also advise to already adjust the size to fit your needs (like the size of your logo inside the header).
For each type, define your color variations. Use the Figma Feature Variants.
Congratulations! Your Logo is ready to be used.
Here is a basic start for the button, probably the most used component in your system.
We've provided a simple starting point for building your Button component. Customize the background color, apply border-radius as necessary, adjust fonts, and include as many states as required. Additionally, we've utilized auto layout to ensure the button adapts to its content automatically
We created 3 main variant types that are common to most of UIs: Primary, Secondary and Text. We also added the optional icon on the left side that you can turn off or on. This is linked to the Icon library.
On the left side, you can see a compact documentation of the Button component that we generated automatically using the plugin EightShapes Specs. Once you are done, you can delete this page and re-generate the documentation.
For more details, read our section below.
Congratulations! You can now start to use your buttons.
The Component documentation is generated instantly using EightShapes Specs. This will help you document your components and communicate to your team how a component should be used and implemented.
Start by checking that your naming is correct and give a short description about the purpose of this component. You can get inspiration from other online design systems or check the component gallery.
This is where you describe every part that compose the component (without styling).
Component properties are the changeable aspects of a component. You can learn more about this in this Figma article.
This section will be especially helpful for developers to show them how the spacings are set inside but also outside a component.
Congratulations! You have successfully established your component documentation.
