Cherry Theme Generator « Сайт по фигме, но автор отношения к ним не имеет! Not affiliated with Figma

установить плагин для Фигмы Cherry Theme Generator

Плагин Cherry Theme Generator генерирует токены дизайна темы Cherry.

Sass

Генерирует переменные темы для Sass;

Сохраняет переменные как theme.scss;

Выходной формат:

$screen-sm: 576px;
$color-primary: #f43f5e;
$size-h1-desktop: 40px;

PostCSS

Генерирует переменные темы для PostCSS;

Сохраняет переменные как theme.css;

Выходной формат:

@custom-media --screen-sm (min-width: 576px);
:root {
  --color-primary: #f43f5e;
  --size-h1-desktop: 40px;
}

React Components

Создает тему JSON для компонентов React с помощью Emotion.js (css-in-js);

Сохраняет переменные как theme.js;

Выходной формат:

{
  breakpoints: [0, 576, 768, 992, 1200, 1440, 1920],
  colors: {
    primary: "#f43f5e"
  },
  sizes: {
    h1: {
      size: {
        desktop: "62px"
      }
    }
  }
}

Ознакомьтесь с документацией по адресу: cherry.design/

Sass

PostCSS

React Components

Плагины из той же категории