This section includes various components, which will enable you to build new layouts and blocks rapidly. Components are interchangeable, including each variant within the component. You can also change specific properties within a new instance of a component, allowing you to be versatile with your design and creativity.

2.1 Icons

Within Studio Figma’s icon section, you will see the FontAwesome icons used in creating the prebuilt designs. Each icon is in its component, and each component will have three variable sizes:

  • Base
  • Medium
  • Large

These icons will allow you to maintain a consistent look and feel throughout your design. You can add more component icons to the current set by using the FontAwesome Free Icons set and creating your component icon using the following naming convention:

  • .Icons/[name]
  • E.g..Icons/chevron-down

When you have created the new icon component, you will need to convert them into a component variant. Each of these variants will have three sizes, base, medium and large:

  • Base
  • Medium
  • Large

We have also included a section for other icons which don’t currently fit into the set. You can use this area for miscellaneous icons which do not fit into your design or may have a one-off use.

2.2 Buttons & States

This section includes buttons which include their states and a secondary outlined version, as a best practice we have also included buttons with bootstraps various warning colours as buttons.

The button components help the design process along when creating inputs and modal popups which require user notification of an optional, primary or secondary action.

Button text is readily editable when a new instance of a button component is created. The button width will automatically fit around the text, making resizing the new instance a simple.

2.3 Forms & Inputs

This section includes form inputs which include a disabled state. Adhering to best practices and making the design process easier for you we have kept with Bootstraps sizing.

2.4 Item Layouts

Within this section, we have used the main components from previous sections.

Doing this, we have created item layouts. Item layouts are components which will be used repeatedly within a design, e.g. a blog card or a particular form. Item layouts also carry the advantage of specific properties that are editable within a new instance of itself.

Related Documents:

Did this answer your question?