Overview

Although Figma is a design tool, its architecture and philosophy is based around reducing the barrier between design and development.

Core Concepts

Engrained into Figma are some core concepts that aim to create a more consistent approach to digital design and share similarities to development practices.

• Styles - These use naming conventions that are easily transferable to design tokens, CSS classes and variables.
• Components & Variants - A standout feature of Figma is that UI elements can be componentised and have multiple variants, much like props, to create a consistent system language. These are shared across the entire Figma workspace.
• Auto Layout - This is an alignment tool for containing elements but mimics the properties of flex box and grid.
• Branching - Like Git, Figma files can be branched and merged to keep a consistent source of truth

How We Use Figma

Compound, our design system, endeavours to use the current live components as the source of truth. Whilst there will continually be ideation and exploration on the system on branches our published “main” branch is always the reference point for work.

Page Naming

We make use of pages within files to clearly separate our work with key indicators that are easy to scan.

Example of our page naming and icons

The main file should be inline with what is live or in production and branches are used for exploration.

Note that the naming conventions in project and component files are slightly different.

Using Components

Example of our Tabs component in Figma

We are working to build up our component library for web and native platforms. Components will be the building blocks for all our UI and we heavily govern their creation to align with developed components and their conventions. Particularly in the naming of components and variants.

Styles as Design Tokens

Variables are the backbone of any coding language and this has also transitioned into the design world, particularly Figma. We heavily use styles with our own naming convention that we aim to mimic variable values. Our BP90 style is the key to the #147CB3 hex value. We use styles that mimic design tokens for: