When embarking on the design process, Figma is an excellent tool to kick things off.
Begin by obtaining the Cherry template from Figma Community. This serves as your foundation for all design work.
Figma's working areas are organized into Sections:
Cherry uses Figma variables to store design values. These values create design tokens. Variables are organized into groups:
| Variable Group | Purpose |
|---|---|
| Colors | Color values for dark and light themes |
| Font Family | Font families for text, headings, and monospace |
| Font Sizes | Font size definitions for mobile and desktop |
| Font Weights | Font weights for text, headings, and buttons |
| Grid Gaps | Grid gaps for visually appealing layouts |
| Line Heights | Line height definitions for mobile and desktop |
| Max Width | Max width values for xs and xxl |
| 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 |
Adjust typography definitions from Figma variables. You'll see a live preview on the Typography page.
Local styles are only used for shadows. There are two sets: one for dark mode and one for light mode.
Beyond the working areas, you'll find specific preview pages:
Cherry has its own Figma Plugin to extract design tokens automatically. The plugin gives you the theme file - just copy and paste.