Update Oct 2023

Version 3.1.0 - New variables, more colors, new pages. Check our latest updates!

Components

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.

People helping each other with building blocks

Table of contents

Logos

Here you will define your brand logos.

1
Define your types

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

2
Define your color variations

For each type, define your color variations. Use the Figma Feature Variants.

DONE

Congratulations! Your Logo is ready to be used.

Examples of a logo with different variations
Placeholder Logos

Buttons

Here is a basic start for the button, probably the most used component in your system.

1
Adapt styles & customize

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

2
Refine Variants & Properties

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.

3
Generate documentation

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.

DONE

Congratulations! You can now start to use your buttons.

Example of the button component with different variations
Button and variants
Figma component properties

Component documentation

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.

1
Name & describe

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.

2
Anatomy

This is where you describe every part that compose the component (without styling).

3
Properties

Component properties are the changeable aspects of a component. You can learn more about this in this Figma article.

4
Layout and spacing

This section will be especially helpful for developers to show them how the spacings are set inside but also outside a component.

DONE

Congratulations! You have successfully established your component documentation.

Button component documentation example using the EightShapes Specs Figma plugin
Documentation Template