# Figma

> Get started with the Cherry Design System Figma template and plugin for extracting design tokens.

Source: https://cherry.al/figma

> For the complete documentation index, see [llms.txt](https://cherry.al/llms.txt).

# Figma

When embarking on the design process, Figma is an excellent tool to kick things off.

## 1. Download the Template

Begin by obtaining the Cherry template from Figma Community. This serves as your foundation for all design work.

<Button href="https://www.figma.com/community/file/943862931766586094/Cherry-Design-System" icon="pen-tool" iconPosition="left">
  Figma Template
</Button>

## 2. File Structure: Pages

The template is organized into four pages:

- **🎨 Foundations** - The design primitives, grouped into sections: **Color** (the full palette previewed in light and dark mode), **Typography** (heading and body styles at desktop and mobile sizes), and **Elevation** (shadow styles).
- **🧩 Components** - Reusable design elements that streamline your workflow. Every component is a variant set bound to the Figma variables, so all of them adapt to dark mode automatically: Button, IconButton, Input, Password, Textarea, Select, Checkbox, Radio, Toggle, Range, ThemeToggle, Modal, Toast, Accordion, Tabs, Dropzone, and AvatarDropzone. The section also includes the assembled Tabs component and a Box helper.
- **🌍 Examples** - A sample landing page composed entirely of Cherry components, provided in light and dark mode.
- **🌐 Assets** - Icons associated with a website or application: the favicon, Apple touch icon, Google manifest icons, and the Open Graph social image.

## 3. Figma Variables

Cherry uses Figma variables to store design values. These values create design tokens. Variables are organized into collections:

| Variable Collection | Purpose                                                                                                                |
| ------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| **Colors**          | Color values grouped into Primary, Secondary, Tertiary, Gray, and UI, with a Light Mode and a Dark Mode                |
| **Font Family**     | Font families for text, headings, and monospace                                                                        |
| **Font Sizes**      | Font size definitions with `lg` (desktop) and `xs` (mobile) modes                                                      |
| **Font Weights**    | Font weights for text, headings, and buttons (Figma preview only - the extracted theme file has no font-weight tokens) |
| **Grid Gap**        | Grid gaps for visually appealing layouts                                                                               |
| **Line Heights**    | Line height definitions with `lg` (desktop) and `xs` (mobile) modes                                                    |
| **Max Width**       | Max width values for `xs` and `xxxl`                                                                                   |
| **Media Queries**   | Breakpoints: `xs`, `sm`, `md`, `lg`, `xl`, `xxl`, `xxxl`                                                               |
| **Padding**         | Padding sizes for `xs` and `lg`                                                                                        |
| **Radius**          | Border radius for `xs`, `lg`, and `xl`                                                                                 |

## 4. Typography

Inside Figma, typography is driven by the Font Family, Font Sizes, Font Weights, and Line Heights variables. Adjust the definitions there and you'll see a live preview in the Typography section of the Foundations page. Keep in mind that Font Weights only affect the Figma preview: the theme file has no font-weight tokens, since weights are set directly in each component's CSS.

## 5. Local Styles

Local styles are only used for shadows. There are two sets of five elevations (`XS` to `XL`): one for light mode and one for dark mode (`Dark/XS` to `Dark/XL`). They are previewed in the Elevation section of the Foundations page.

## 6. Extract Design Tokens

Cherry has its own **Figma Plugin** to extract design tokens automatically. The plugin gives you the theme file - copy it into your app's theme file (for example `app/theme.ts`) and pass it to the theme provider. See the [Theme](/code/theme) page for how to consume a custom theme object.

<Button href="https://www.figma.com/community/plugin/1091785956842659849/Cherry-Theme-Generator" icon="puzzle" iconPosition="left">
  Figma Plugin
</Button>