Figma - Design

When embarking on the design process, Figma is an excellent tool to kick things off. Here are some essential steps to get started:

1. Download the Template from Figma Community

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

2. Working Areas in Figma: Sections

Keep in mind that Figma’s working areas are organized into Sections. These are distinct spaces where you’ll create and manage different aspects of your design.

• 🌐 Favicons: This section deals with the small icons associated with a website or application.
• 🌍 Web: Here, you’ll focus on the overall web design.
• 🧩 Components: Components are reusable design elements that streamline your workflow.

3. Color Management with Figma Variables

Colors are stored using Figma variables. You can directly modify them within the variable popup panel.

4. Text Styles

Adjust typography styles by editing the Text styles directly. You’ll see a live preview of the changes on the ✍️ Typography page. For each style there are two values, XS for mobile and LG for desktop or large screens.

5. Effect Styles

Adjust Effect styles used for shadows. You’ll see a live preview of the changes on the ☁️ Shadows page.

6. Fine-Tuning with Variables:

Figma variables also handle other design parameters:

• Media Queries: Adapt your design for different screen sizes.
• Grid Gaps: Control spacing between elements.
• Max Width Values: Set maximum content width.
• Border Radius: Customize rounded corners.
• Global Paddings: Maintain consistent spacing.

All these variables are neatly organized into their respective groups.

7. Additional Pages for Preview

Beyond the working areas, you’ll find specific pages:

• 🎨 Colors: Preview color variations.
• ✍️ Typography: Explore different text styles.
• 👆 Buttons: Button variations and states.
• 👉 Inputs: Inputs variations and states.
• ☁️ Shadows: Various shadow evelevation styles.

Remember, Figma empowers you to create beautiful designs efficiently. Happy designing!

8. Extract Design Tokens

Once you are done with your designs, Cherry has it's own Figma Plugin to extract design tokens automatically. The plugin will give you the theme file, all you have to do is copy and paste it. Easy game! You can install the plugin from the Figma Community.