Overview
Figma is the industry-standard tool for digital design. We use it for all of our
Figma is web based and easily accessible even without signing up for an account. Its real time collaboration is currently unmatched. Stakeholders can review designs in real time and leave feedback in the tool directly. Figma is usually pretty fast and also perfectly suited for building and managing design systems. It also has a version history feature which is very useful when multiple people work on a large file.
📏 Rules for Figma
✅ Do…
- Keep all Cantilever design work in Figma
- Put all Cantilever files into the Cantilever workspace
- Use FigJam for collaboration
- Keep files super clean, using components, variants, and styles to ensure files are easy to modify
- Group designs in ‘Pages’. It can be difficult to navigate through many screens at once, so guide the visitor through the designs by giving them context.
- Define styles early in the project and adjust them as needed. Apply the styles to all UI elements as much as possible.
- Create components and reuse them as often as possible. Designing consistent UI is key.
- Give layers clear names whenever possible.
- Invite clients to provide feedback when appropriate.
- Take advantage of Figma’s toolkit. Do not use Figma like you use other design tools.
- Try to always use components for handling repeated elements that are the same. Try to never repeat a large group of elements – use a component instead.
- Use auto-layout by default for handling any sort of layout needs. Most container elements should use auto-layout.
- Try to never use raw colors – use shared color styles instead
- Try to use shared text styles as much as possible
- When components share lots of attributes, create sub-components to consolidate their shared bits, or make them variants
- Don’t make elements that act as the background of a frame/group. Instead, use the Background property of the frame/group and layer all the backgrounds you want.
Our Figma Approach
🚫 Don’t…
- Add “Editor”-level users unecessarily. We get charged for every editor on the account.
In general, the ‘Components’ page is where all the UI content layers will be defined. Most projects have a Components page. The ‘Scrap Work’ page usually stores older mockups that the designer experimented with.
The ‘Components’ page is usually very important as lots of a website’s components will be children of a master component. Master components are usually stored on this page. UI Assets, such as icons will be master components. They are usually exported from the Figma file and uploaded to Google Drive so that everyone can access them at anytime.
In some cases, depending on the complexity of the project, the designer might use different indicators to highlight the status of a design.
In the case above, the yellow marks a screen that is in progress, while the green marks a design that has been approved. We also recommend the Figma plugin ‘Is it done yet?’ for marking the status of a design.
Using the ‘Comments’ feature, we also use Figma to receive client feedback or ask for details on how a feature might work. Some clients prefer not to use Figma for that, so emailing/slacking them might be a better option.
Copywriters can work together with designers on a Figma file. Copywriters can leave comments and designers can implement the suggested copy in the designs. Sometimes, this is done during the development phase to save time.
Same goes for QA, as engineers will often review designs in Figma and report issues using the comment feature.
Typography, colors and grids are defined by the designer early in the project. Figma calls these definitions ‘Styles’ and they can be viewed when not having an element selected. These will be useful when developing the site.
Once the designs have been QA’ed and are approved by the client, the project moves into the development phase.
Performance Tips
Figma create a feeling of total freedom that you can keep creating more and more elements without restriction. However, if your file gets really big, you will run into performance and memory issues, and Figma may start crashing on you.
To avoid this...
- Try to have very few elements that contain lots of small elements. For example, if you have a pattern of dots, you can construct that by making thousands of dot elements, or you could use a repeating background image. The background image will be much faster.
- Try to avoid components that are extremely deeply nested, or have complex nesting chains that extend across too many files.
- When you know you are not going to come back to a part of a file (scratch work) feel free to delete that stuff or move it to a new file.