Overview

Figma is the industry-standard tool for digital design. We use it for all of our Design work.

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.