Design
Cherry provides a UI Kit template in Figma with all the standard web elements. The document template is divided in a few pages to keep everything organized.
- Branding - Contains the colors definition and all the typography styles, both for desktop and mobile.
- Interface - You can find all the form elements, buttons, inputs, checkboxes, radio buttons and drop-down selects.
- Patterns - The desktop and mobile header can be found here.
- Icons - Cherry uses open source icons from Ionicons.
- Spacing & Grid - Spacing definitions and Cherry Grid, the 12 column layout system.
- Meta Images - Favicon and all the rest of icons required for metadata.
Figma UI Kit
Figma Plugin
Cherry has its own Figma Plugin to generate design tokens automatically with a click of a button. Cherry Theme Generator exports all values of the design system. It supports PostCSS, Sass, and React Components.
Cherry Theme Generator