Skip to content

Latest commit

 

History

History
48 lines (27 loc) · 2.98 KB

DESIGN_SYSTEM.md

File metadata and controls

48 lines (27 loc) · 2.98 KB
Raw

Design System

We use Figmage to generate our design system from Figma. (Developed by our one and only Temzasse 🎉⚡️)

How to connect your project to Figma

  1. Create a new Figma project based on the Design System Template by duplicating it or join the existing Figma project for your app.

  2. Get your Figma API token from here.

  3. Get the file id of the Figma file. You can find it in the URL of the Figma file. For example, if the URL is https://www.figma.com/file/vEO1Adp6j0nHiiq9BiexE1/Design-System-Template, then the file id is vEO1Adp6j0nHiiq9BiexE1.

  4. Paste the access token and the file id in the .env.figma file located in the config folder of your project.

    FIGMA_ACCESS_TOKEN="xxxxx-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx"
FIGMA_FILE_ID="xxxxxxxxxxxxxxxxxxxxxx"

How to generate the design system

You can generate the design system by running the script design-system:sync in the root of your project.

This command runs the following scripts, that you can run individually if you want to:

  • design-system:tokenize: This script will tokenize the Figma file and generate a tokens.json file in the src/design-system folder of your project. This file contains all the tokens of the Figma file.

  • design-system:: This script will generate the design system code based on the tokens.json file. It will generate files in the src/design-system folder of your project that you can then use in your app.

  • design-system:format: This script will format the design-system.ts file using Prettier.

How to customize what is generated

It is possible to customize what is generated by the design system. We can for example exclude some unused tokens (like the web typography tokens). The customization is done in the figmage section in the package.json file of your project.

For more details on how to customize it, check the Figmage README.

How to use the design system

We use a UI Kit to make reusable components that we use in the app. Those UI Kit components are were most of the design system is used. It means that we should always use the UI Kit components (text, buttons etc.) so that a change in the design in Figma will be immediately available in the app after running the sync command.

How to add a new token

Note: Tokens should be created and updated by designers. What is safe to create without designer approval are the icons.

  1. Add the token in Figma. Make sure it is a component and that it is named correctly. The name of the token will be used as the name of the variable in the code.
  2. Run the design-system:sync command.
  3. Use the token in the UI Kit components.