Guides for Developers
Although Figma is a design tool, its architecture and philosophy is based around reducing the barrier between design and development.
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
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.
We make use of pages within files to clearly separate our work with key indicators that are easy to scan.
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.
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.
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.
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.
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 provides a thorough walkthrough of their interface in this short video, this is further detailed below.
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.
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.
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.
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.
If you are trying to export a component you will require view only access to the component library files too.
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.
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.