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. Working Areas: Sections
Figma's working areas are organized into Sections:
- Site Images - Icons associated with a website or application. Favicons, open graph images, etc.
- Web - Overall web design.
- Components - Reusable design elements that streamline your workflow.
3. Figma Variables
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 |
4. Text Styles
Adjust typography definitions from Figma variables. You'll see a live preview on the Typography page.
5. Local Styles
Local styles are only used for shadows. There are two sets: one for dark mode and one for light mode.
6. Preview Pages
Beyond the working areas, you'll find specific preview pages:
- Colors - Preview color variations
- Typography - Explore different text styles
- Buttons - Button variations and states
- Inputs - Input variations and states
- Shadows - Various shadow elevation styles
7. Extract Design Tokens
Cherry has its own Figma Plugin to extract design tokens automatically. The plugin gives you the theme file - just copy and paste.