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:
- Colours and gradients.
- Typography.
- Shadows.
Building from Design Files
Requesting Access
If it is the first time you are accessing a file you must request view-only access for a member of the design team. You will be sent an invite from Figma via email inviting you to set up a free account. View-only access allows a user to navigate files and prototypes as well as inspect or export assets.
Please note only those with an “@standardlife.com” or "@phoenix.com" email will have access to all our files. Users with other domain names will have to request access for each file.
Export Access
Figma requires that view-only users be given access to export and copy assets. Make sure that the file creator has followed the export access steps and enabled it on the file.
Figma Walkthrough
Figma provides a thorough walkthrough of their interface in this short video, this is further detailed below.
View Only Mode
View-only mode example
Free accounts offer a “View-Only” mode that allows you access to browse the file and the additional information listed below.
You can click around the Figma interface to inspect the contents without making any changes to file.
Inspecting Files
The panel on the right-hand side is the Inspect Panel and this provides additional data to the elements selected in the design.
Figma provides a lot of information, that can be useful or overwhelming. Where possible the design tokens and component information provided should always be prioritised over the specific information generated by Figma. This will maintain alignment with our design system.
In the example below the inspect panel shows a number of key pieces of information:
- It is a List Component.
- The variants show the props that are being used on the component.
- The brand colour is displayed with the design token of BP40.
Figma’s inspect panel
Redlines
Figma has inbuilt redlines.
View only access allows the user to navigate through the layers in the left panel to find specific elements.
Navigating to a desired elements in the main area will allow the user to interrogate the design and measure elements or spacing to neighbouring elements using the dynamic redlines.
The Inspect panel updates with each selected element to provide additional data.
Exporting Assets
Users can export assets in a variety of formats
Figma removed the need to request bitmap and SVG assets from the design team in different sizes and formats. Elements embedded in the design that are exportable will appear in the Inspect Panel.
Users can then select the element and one or more formats to export the assets. The range of options will vary depending on the format of the original element.
Accessing a component example
If you are trying to export a component you will require view only access to the component library files too.
Launching Prototypes
Launch a prototype from the right panel
Prototypes are a valuable tool in demonstrating how a flow or functionality should behave. If you wish to launch the prototypes in a file click the play button in the top right bar. This will launch a prototype with additional hotspots to guide you through the flow.
Prototype example
Using Comments
Commenting on a design
Real-time collaboration is a key feature in Figma and inline commenting is one of the quickest and simplest tools on offer.
Clicking on the speech bubble in the top left of pressing “C” on the keyboard launches the comment mode. The user can then click on a specific element or drag around a number of elements on the screen.
This launches a text panel that allows comments to be added around the selected element(s) and provide context. Comments accept “@” comments if you wish to direct feedback to specific users. Links and emojis can also be added in this field to provide context or tone to your comments.
Figma official video
Additional resources