Figma
Figma is a cloud-based design tool that is similar to Sketch in functionality and features, but with big differences that make Figma better for team collaboration.
Overview
Figma will be used primarily by designers to prototype pages, layouts, and components. Developers will use Figma solely for visual expectations of their component. The UX team will work with client's to establish branding and update a predefined set of tokens to match the client's branding.
Developers will pull these tokens into the design system using a packaged script called figmagic which reads and translates each token's name and value into a key|value pair. These tokens are output in JS variables which are imported into the Theme
Developer requirements
A member of the UX department assigned to your team is responsible for setting up figma.
As a developer there are two variables you need to set in your design-system repo's .env file:
FIGMA_URL=
FIGMA_TOKEN=
FIGMA_URL -> This is a misleading and terrible variable name, but it comes from figmagic, so we have to use it. This is actually JUST the ID part from the url for your figma project.
Example: figma URL is: https://www.figma.com/design/DYc1Uiilf640Nrp5olVLGN/ClarkDietrich-DS?node-id=2605-12&t=EPkDFvxm0aka6LeE-0
Your ID is going to be: DYc1Uiilf640Nrp5olVLGN
FIGAM_TOKEN -> This is a personal access token that you can create. Because we only need to run figmagic to update the tokens when they change, this will only be done by a developer on their machine.
To create a FIGMA_TOKEN/personal access token, follow these steps:
- Log into figma
- Click your profile, click settings
- Scroll down to Personal access tokens
- Generate, copy that, and put it in the FIGMA_TOKEN variable in .env file.
Now, you should be able to run pnpm figmagic from the design-system repo, without passing any arguments.