https://github.com/atls/figma
Figma generation tools
https://github.com/atls/figma
Last synced: 9 months ago
JSON representation
Figma generation tools
- Host: GitHub
- URL: https://github.com/atls/figma
- Owner: atls
- License: bsd-3-clause
- Created: 2022-01-21T15:21:15.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2025-06-25T14:33:44.000Z (12 months ago)
- Last Synced: 2025-06-25T14:37:09.684Z (12 months ago)
- Language: TypeScript
- Homepage:
- Size: 437 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Генератор данных из Figma
## Генератор темы
Пакет `@atls/figma-theme-cli` является энтрипоинтом по созданию темы.
Пререквизиты:
- ID файла Figma. Можно найти в ссылке на любой объект внутри файла Figma, например:
https://www.figma.com/file/SHoss54mn2SZLnI0e3OiJj/...
ID = SHoss54mn2SZLnI0e3OiJj
- папка `theme` рядом с местом исполнения скрипта
- Access Token от
Figma. [Инструкция тут](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens)
. Токену необходимы доступы
к чтению `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. [Инструкция тут](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens)
. Токену необходимы доступы
к чтению `File content` и `Dev resources`
Необходимо запустить
скрипт `generate-assets` с первым аргументом - ID файла Figma, из которого будет браться тема, а
вторым - ID документа.
Первым промптом с вас спросят Access Token.
## Генератор фрагментов
Пакет `@atls/figma-fragments-cli` является энтрипоинтом по созданию фрагментов. Для создание `` фрагмента из дизайна берутся ноды c типом `FRAME`, для `` с типом `TEXT`, `` и `` с типом `INSTANCE` с условием, что в название ноды есть имя создаваемого фрагмента, например `Pattern/Button`.
Пререквизиты:
- ID файла Figma. Можно найти в ссылке на любой объект внутри файла Figma, например:
https://www.figma.com/file/SHoss54mn2SZLnI0e3OiJj/...
- Node ID фрагмента Figma можно найти в сёрч параметрах ссылки
- Access Token от
Figma. [Инструкция тут](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens)
. Токену необходимы доступы
к чтению `File content` и `Dev resources`
Необходимо запустить
скрипт `generate-fragments` с первым аргументом - ID файла Figma, из которого будет браться темаЮ, и обязательными опциями, просмотр всех `--help`.
Первым промптом с вас спросят Access Token.
## Архив
Figma generation tools
# Figma generation tools
## Colors generator
### 1. Название главного фрейма
Для того чтобы найти кнопки в фигме, необходимо привязываться к названию главного фрейма¹. Это
название будет служить в качестве ID, с помощью которого получим все кнопки находящиеся внутри этого
фрейма.
### Что нужно сделать?
Необходимо в самой фигме назвать главный фрейм¹ с кнопками `Desktop / Buttons`.
### Пример
#### главный фрейм¹
### 2. Компоновка кнопок
#### Правильная компоновка
#### Неправильная
### Что нужно сделать?
Чтобы из неправильной сделать правильную, необходимо разбить неправильную на две независимые части,
т.е будет два вида кнопок, как в правильном варианте, только с названиями `Other / Location On`
и `Other / Location Off`
Figma modern colors tools
## Colors generator
### 1. Название главного фрейма
Для того чтобы найти кнопки в фигме, необходимо привязываться к названию главного фрейма¹. Это
название будет служить в качестве ID, с помощью которого получим все кнопки находящиеся внутри этого фрейма.
### Что нужно сделать?
Необходимо в самой фигме назвать главный фрейм¹ с кнопками `Generator/Button`.
Пример: главный фрейм¹
### 2. Названия и свойства кнопок
У кнопок должны быть корректные свойства, дублирующеися в их название. Для кнопок обязательные свойства `Style`, `State` и `Text`, для инпутов `Type` и `State`.
Пример: правильных кнопок
Пример: неправильных кнопок