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.
Cherry uses Figma variables to store design values. These values are then used to create design tokens. Figma variables are organized into groups, each with a specific purpose.
xs
and xxl
.xs
, sm
, md
, lg
, xl
, xxl
, xxxl
.xs
and lg
.xs
, lg
and xl
.Adjust typography definitions from the Figma variables. You’ll see a live preview of the changes on the ✍️ Typography page.
Local styles are only used for shadows. You’ll see a live preview of the changes on the ☁️ Shadows page. There are two sets of shadows, one for dark mode and one for light mode.
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.