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.
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.