Генератор данных из Figma

Генератор темы

Пакет @atls/figma-theme-cli является энтрипоинтом по созданию темы.

Пререквизиты:

• ID файла Figma. Можно найти в ссылке на любой объект внутри файла Figma, например:

https://www.figma.com/file/SHoss54mn2SZLnI0e3OiJj/...

ID = SHoss54mn2SZLnI0e3OiJj

• папка theme рядом с местом исполнения скрипта
• Access Token от Figma. Инструкция тут . Токену необходимы доступы к чтению File content и Dev resources

Необходимо запустить скрипт generate-theme с первым аргументом - ID файла Figma, из которого будет браться тема. Для генерации темы по современным паттернам создания компонентов в Figma использовать параметр --method=secondary.

Первым промптом с вас спросят Access Token.

После генерации вы получите в папке theme файлы с собранными данными из Figma файла, которые можно использовать в проекте.

Генератор ассетов

Пакет @atls/figma-assets-cli является энтрипоинтом по созданию темы.

Пререквизиты:

• ID файла Figma. Можно найти в ссылке на любой объект внутри файла Figma, например:

https://www.figma.com/file/SHoss54mn2SZLnI0e3OiJj/...

ID = SHoss54mn2SZLnI0e3OiJj

• ID документа Figma
• Access Token от Figma. Инструкция тут . Токену необходимы доступы к чтению File content и Dev resources

Необходимо запустить скрипт generate-assets с первым аргументом - ID файла Figma, из которого будет браться тема, а вторым - ID документа.

Первым промптом с вас спросят Access Token.

Генератор фрагментов

Пакет @atls/figma-fragments-cli является энтрипоинтом по созданию фрагментов. Для создание <Box> фрагмента из дизайна берутся ноды c типом FRAME, для <Text> с типом TEXT, <Button> и <Input> с типом INSTANCE с условием, что в название ноды есть имя создаваемого фрагмента, например Pattern/Button.

Пререквизиты:

• ID файла Figma. Можно найти в ссылке на любой объект внутри файла Figma, например: https://www.figma.com/file/SHoss54mn2SZLnI0e3OiJj/...
• Node ID фрагмента Figma можно найти в сёрч параметрах ссылки
• Access Token от Figma. Инструкция тут . Токену необходимы доступы к чтению File content и Dev resources

Необходимо запустить скрипт generate-fragments с первым аргументом - ID файла Figma, из которого будет браться темаЮ, и обязательными опциями, просмотр всех --help.

Первым промптом с вас спросят Access Token.

Архив

Figma generation tools

Figma generation tools

Colors generator

1. Название главного фрейма

Для того чтобы найти кнопки в фигме, необходимо привязываться к названию главного фрейма¹. Это название будет служить в качестве ID, с помощью которого получим все кнопки находящиеся внутри этого фрейма.

Что нужно сделать?

Необходимо в самой фигме назвать главный фрейм¹ с кнопками Desktop / Buttons.

Пример

Details

главный фрейм¹

2. Компоновка кнопок

Правильная компоновка

Details

Неправильная

Details

Что нужно сделать?

Чтобы из неправильной сделать правильную, необходимо разбить неправильную на две независимые части, т.е будет два вида кнопок, как в правильном варианте, только с названиями Other / Location On и Other / Location Off

Figma modern colors tools

Colors generator

1. Название главного фрейма

Для того чтобы найти кнопки в фигме, необходимо привязываться к названию главного фрейма¹. Это название будет служить в качестве ID, с помощью которого получим все кнопки находящиеся внутри этого фрейма.

Что нужно сделать?

Необходимо в самой фигме назвать главный фрейм¹ с кнопками Generator/Button.

Пример: главный фрейм¹

2. Названия и свойства кнопок

У кнопок должны быть корректные свойства, дублирующеися в их название. Для кнопок обязательные свойства Style, State и Text, для инпутов Type и State.

Пример: правильных кнопок

Пример: неправильных кнопок