Skip to main content

Figma File Setup

This page will give you a brief run down of how our Figma files and components are setup.

Figma Design Libraries​

You can find the Design System libraries in Figma here.

The project has 3 Figma files that we use:

  • Atlas Core - all core components and tokens
  • UI Icons - our icon library
  • Utilities - helper elements such as pointer icons and spec templates

Atlas Core​

Components Index​

The Atlas Core library is where all of the core components live, we have grouped component types into the the following categories:

  • actions
  • data
  • feedback
  • input
  • layout
  • navigation
  • typography
  • helpers
  • token

Each category has index pages set up to display the the component, including all states and examples. You can find the templates for the Index page art boards in the Utilities library (or just duplicate an existing component card).

Design Tokens​

This is where we setup and document all of the tokens and styles for the Atlas design token library. The examples on this page do not really have any impact on other Figma components and are purely for documentation purposes, as developers need to make sure our internally used design tokens stay in sync with the tokens in the npm package.

UI Icons​

We create all of our icons separately and save them in this library. This keep the the core library clean and easier to manage. We have both small and medium versions of each icon. All new icons added to this library need to follow our design guidelines for icons.

Utilities​

This Figma library contains components that can be used to visualize a specific flow, or adds important information to document a design for development handover.