Figma Crawler

Выгрузка стилей из Figma.

Основано на figma-to-web.

Выгружаемые категории токенов

Название	Описание	Зависимость
typography	Названия семейств шрифтов для: текста, заголовков и контролов
text	Текстовые стили
color	Цвета (solid only)
effect	Эффекты (shadow only)
grid	Сетка
button	Компонент кнопка	typography text color effect
references	Набор референсов (алиасов)

references используется в параметре include Style Dictionary для предотвращения ошибки о несуществующем алиасе при генерации стилей платформ. Создаётся только при необходимости.

Сеты

Токены делятся на сеты. Наименования и состав сетов зависят от исходного файла Figma. Наменование сета содержится в имени токена, например text@common.tokens.json

На текущий момент используются два вида сетов:

1. Сет платформ. Позволяет собрать токены:

• под конкретные платформы, режим split:

Платформа	Уровень
common	common
phone	common + phone
tablet	common + tablet
desktop	common + desktop
desktop-large	common + desktop-large

• наследуемые (адаптив), режим join:

Платформа	Уровень
common	common
phone	common + phone
tablet	common + phone + tablet
desktop	common + phone + tablet + desktop
desktop-large	common + phone + tablet + desktop + desktop-large

2. Сеты цветов

Сет	Уровень
common	common
inverse	common + inverse

Да кто такие эти ваши уровни

Конфиг

Файл figmacrawler.config.json

{
  "fileKey": "",
  "output": "tokens",
  "clear": false,
  "type": "files",
  "colorFormat": "css",
  "colorTailwind": false,
  "platformsMode": "split",
  "platformsOrder": [
    "desktop-large",
    "desktop",
    "tablet",
    "phone"
  ],
  "filter": []
}

Параметр	Тип	Описание	Значение по-умолчанию
fileKey	String	Id Figma файла. Находится в урле: `https://www.figma.com/file/< fileKey >`	""
output	String	Путь вывода	tokens
clear	Boolean	Флаг рекурсивного удаления пути вывода перед записью	false
type	String<'files' | 'teams'>	Тип Figma проекта. Тип `teams` не тестировался	files
colorFormat	String<'css' | 'postcss'>	Формат цвета	css
colorTailwind	Boolean	Добавить значения цветов (только для тех, что без альфа-канала) в формате только rgb только с цветовыми каналами для Tailwindcss. Будут созданы с суффиксом -tailwind. Пример: color.content.base = { "value": "#333333", "group": "color" } color.content.base-tailwind = { "value": "51 51 51", "group": "color" }	false
platformsMode	String<'split' | 'join'>	Режим генерации сетов платформ: `split` — для отдельных платформ. В нём набор платформ отстаётся неизменным; `join` — для адаптивных (медиа-запросы) платформ. В данном режиме из платформы большей по ширине вьюпорта, исключаются токены с значением, совпадающим у следующей нижестоящей платформы. Для определения порядка использует параметр `platformsOrder`. Пример: набор платформ sets: { desktop: { a: 1, b: 2 }, tablet: { a: 1, b: 1 }, phone: { a: 3, b: 1, c: 8 } } в режиме `join` станет: sets: { desktop: { b: 2 }, tablet: { a: 1 }, phone: { a: 3, b: 1, c: 8 } }	split
platformsOrder	String[]	Массив платформ в порядке убывания ширины вьюпорта. Используется при platformsMode === "join"	["desktop-large", "desktop", "tablet", "phone"]
filter	String|String[]	Фильтр категорий токенов, в случае передачи будут выгружены только переданные категории (и из зависимости), остальные — проигнорируются. По-умолчанию выгружаются все. Не влияет на категорию references	[]

Установка

Должен быть настроен @atwinta npm package registry.

npm i -D @atwinta/figma-crawler

Использование

TL;TR

Перед запуском:

1. Добавить девелоперский токен Figma в качестве переменной окружения FIGMA_DEV_TOKEN
2. Создать конфиг figmacrawler.config.json.

USAGE
  $ node figma-crawler/main.js

OPTIONS
  -c, --config    Путь к конфигу. Значение по-умолчанию: figmacrawler.config.json
  -f, --file-key  Id Figma файла. В случае передачи переопределяет значение из конфига.
  -t, --type      Тип Figma проекта. В случае передачи переопределяет значение из конфига. Значение по-умолчанию: files
  -o, --output    Путь вывода. В случае передачи переопределяет значение из конфига. Значение по-умолчанию: tokens

Пример использования находится в директории example

Подробнее

1. Создать девелоперский токен в Figma подробнее см. здесь

2. В корне проекта создать в случае отсутсвия .env файл (можно скопировать .env.example из примера):

cp ./node_modules/@atwinta/figma-crawler/example/.env.example ./.env

3. Добавить переменную FIGMA_DEV_TOKEN в файл .env со значением своего девелоперского токена от Figma:

FIGMA_DEV_TOKEN=<YOUR_TOKEN>

4. Создать конфиг figmacrawler.config.json.

5. Запускаем:

node node_modules/@atwinta/figma-crawler/main.js -c figmacrawler.config.json

Генерация стилей

Пример генерации с помощью Style Dictionary находится в директории example

node ./style-dictionary.config.js

Подключение стилей

В адаптивном режиме (join), подключить сгенерированные стили с помощью postcss-import с указанием media query:

@import './common/color.css';
@import './common/color_override_inverse.css';
@import './common/root.css';
@import './phone/root.css';
@import './tablet/root.css' (min-width: 768px);
@import './desktop/root.css' (min-width: 1280px);
@import './desktop-large/root.css' (min-width: 1680px);

Полезные ссылки

• Figma API
• Style Dictionary
• Design tokens with Figma
• Introducing: Figma to React
• Figma-api-demo
• Figmagic
• Figma-to-web
• Figma to React: система эффективной доставки изменений дизайна в код (HolyJs)
• Figma to React: система эффективной доставки изменений дизайна в код (IT Nights)
• Figma-SCSS-Generator
• themekit