When embarking on the design process, Figma is an excellent tool to kick things off. Here are some essential steps to get started:
Begin by obtaining a template from Figma Community. This serves as your foundation for the design work.
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.
Colors are stored using Figma variables. You can directly modify them within the variable popup panel.
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.
Adjust Effect styles used for shadows. You’ll see a live preview of the changes on the ☁️ Shadows page.
Figma variables also handle other design parameters:
All these variables are neatly organized into their respective groups.
Beyond the working areas, you’ll find specific pages:
Remember, Figma empowers you to create beautiful designs efficiently. Happy designing!
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.