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.
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: favicons, Apple touch icons, 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 page for how to consume a custom theme object.