Figma Style Guide

Owned by Stephanie Li
Last updated: Mar 27, 2023
3 min read

This is still a work in progress!

Here is the link to the style guide on Figma:

https://www.figma.com/file/SfJC96upoEaXOwPEzIKipC/Style-guide?node-id=0%3A1&t=VfMGzHcxTO9edjbX-1 (More of my progress is on Figma)

 

There’s a cool Dashboard sample by Figma: https://www.figma.com/file/bMuOBWRPgh5OSo3gR3jiSH/Dashboards-%E2%80%93-Untitled-UI-(untitledui.com)?node-id=0-1&t=sTU5CLfdWaBXrKvB-0 , Figma dashboard examples | Untitled UI

Colour palette 🎨

The colour palette contains the main colours (and their tints and shades) for the dashboard. The hex codes and the HSB (Hue, saturation, brightness) of the colour swatches are shown under the coloured circle.

  • Primary: The main colour that will be used for the dashboard. It’s pink. Deal with it :)

  • Secondary: Used in combination with the pimary colour to draw attention

  • Accent: Colour used the least

The colours used for error/success messages are green, yellow, and red.

Typography 📝

The two fonts used in the typography for the dashboard are Coolvetica and Metropolis.

Fun fact: Metropolis is used by Firefox.

Iconography ✨

Iconography consists of the icons that the dashboard will be using.

The icons used for iconography are from Flaticon, which provides HTML/CSS integration. Most of the icons included in the iconography are related to the weather/route model modules.

More icons will be added based on what is needed.

Buttons 🔴

The buttons are for buttons that you might have to click on the dashboard. Primary buttons are for the “Affirmative” choices, and the secondary button is for the “Cancel” option.

 

Input fields 📝

Input fields are used to enter things as text, like your name!

Input fields can be used with or without the little magnifying glass icon on the left.

 

Error messages ❌

Error messages are used to accompany errors on the dashboard, such as selecting something insufficient, or needing more information to complete a request. The four types of errors shown are success, more information required, warning, and error.

 

Checkboxes ✅

Checkboxes are used to select things. For example, they could be used on the dashboard to select options to filter by on a graph.