{"id":20573727,"url":"https://github.com/atls/figma","last_synced_at":"2025-09-14T03:24:52.816Z","repository":{"id":44572831,"uuid":"450540531","full_name":"atls/figma","owner":"atls","description":"Figma generation tools","archived":false,"fork":false,"pushed_at":"2025-06-25T14:33:44.000Z","size":458209,"stargazers_count":2,"open_issues_count":7,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-25T14:37:09.684Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/atls.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-01-21T15:21:15.000Z","updated_at":"2025-06-25T13:38:13.000Z","dependencies_parsed_at":"2024-08-26T06:48:47.412Z","dependency_job_id":"7eed8cee-7d01-4faf-ad6f-2d68815b310b","html_url":"https://github.com/atls/figma","commit_stats":null,"previous_names":[],"tags_count":92,"template":false,"template_full_name":null,"purl":"pkg:github/atls/figma","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atls%2Ffigma","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atls%2Ffigma/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atls%2Ffigma/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atls%2Ffigma/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/atls","download_url":"https://codeload.github.com/atls/figma/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atls%2Ffigma/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":275056593,"owners_count":25397894,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-14T02:00:10.474Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-16T05:28:47.440Z","updated_at":"2025-09-14T03:24:52.793Z","avatar_url":"https://github.com/atls.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Генератор данных из Figma\n\n## Генератор темы\n\nПакет `@atls/figma-theme-cli` является энтрипоинтом по созданию темы.\n\nПререквизиты:\n\n- ID файла Figma. Можно найти в ссылке на любой объект внутри файла Figma, например:\n\nhttps://www.figma.com/file/SHoss54mn2SZLnI0e3OiJj/...\n\nID = SHoss54mn2SZLnI0e3OiJj\n\n- папка `theme` рядом с местом исполнения скрипта\n- Access Token от\n  Figma. [Инструкция тут](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens)\n  . Токену необходимы доступы\n  к чтению `File content` и `Dev resources`\n\nНеобходимо запустить\nскрипт `generate-theme` с первым аргументом - ID файла Figma, из которого будет браться тема. Для генерации темы по современным паттернам создания компонентов в Figma использовать параметр `--method=secondary`.\n\nПервым промптом с вас спросят Access Token.\n\nПосле генерации вы получите в папке `theme` файлы с собранными данными из Figma файла, которые\nможно использовать в проекте.\n\n## Генератор ассетов\n\nПакет `@atls/figma-assets-cli` является энтрипоинтом по созданию темы.\n\nПререквизиты:\n\n- ID файла Figma. Можно найти в ссылке на любой объект внутри файла Figma, например:\n\nhttps://www.figma.com/file/SHoss54mn2SZLnI0e3OiJj/...\n\nID = SHoss54mn2SZLnI0e3OiJj\n\n- ID документа Figma\n- Access Token от\n  Figma. [Инструкция тут](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens)\n  . Токену необходимы доступы\n  к чтению `File content` и `Dev resources`\n\nНеобходимо запустить\nскрипт `generate-assets` с первым аргументом - ID файла Figma, из которого будет браться тема, а\nвторым - ID документа.\n\nПервым промптом с вас спросят Access Token.\n\n## Генератор фрагментов\n\nПакет `@atls/figma-fragments-cli` является энтрипоинтом по созданию фрагментов. Для создание `\u003cBox\u003e` фрагмента из дизайна берутся ноды c типом `FRAME`, для `\u003cText\u003e` с типом `TEXT`, `\u003cButton\u003e` и `\u003cInput\u003e` с типом `INSTANCE` с условием, что в название ноды есть имя создаваемого фрагмента, например `Pattern/Button`.\n\nПререквизиты:\n\n- ID файла Figma. Можно найти в ссылке на любой объект внутри файла Figma, например:\n  https://www.figma.com/file/SHoss54mn2SZLnI0e3OiJj/...\n- Node ID фрагмента Figma можно найти в сёрч параметрах ссылки\n- Access Token от\n  Figma. [Инструкция тут](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens)\n  . Токену необходимы доступы\n  к чтению `File content` и `Dev resources`\n\nНеобходимо запустить\nскрипт `generate-fragments` с первым аргументом - ID файла Figma, из которого будет браться темаЮ, и обязательными опциями, просмотр всех `--help`.\n\nПервым промптом с вас спросят Access Token.\n\n## Архив\n\n\u003cdetails\u003e\n\u003csummary\u003eFigma generation tools\u003c/summary\u003e\n\n# Figma generation tools\n\n## Colors generator\n\n### 1. Название главного фрейма\n\nДля того чтобы найти кнопки в фигме, необходимо привязываться к названию главного фрейма¹. Это\nназвание будет служить в качестве ID, с помощью которого получим все кнопки находящиеся внутри этого\nфрейма.\n\n### Что нужно сделать?\n\nНеобходимо в самой фигме назвать главный фрейм¹ с кнопками `Desktop / Buttons`.\n\n### Пример\n\n\u003cdetails\u003e\n\n#### главный фрейм¹\n\n![image](https://user-images.githubusercontent.com/35490768/203013265-652ad96c-cd14-4f0b-aaf7-8554f849f85d.png)\n\n\u003c/details\u003e\n\n### 2. Компоновка кнопок\n\n#### Правильная компоновка\n\n\u003cdetails\u003e\n\n![image](https://user-images.githubusercontent.com/35490768/202783638-1694d196-c166-4aad-ace4-cdbf399b41be.png)\n\n\u003c/details\u003e\n\n#### Неправильная\n\n\u003cdetails\u003e\n\n\u003cimg width=\"593\" alt=\"image\" src=\"https://user-images.githubusercontent.com/35490768/202784049-7e1e2595-e556-42f5-b4c8-60beae4bf540.png\"\u003e\n\n\u003c/details\u003e\n\n### Что нужно сделать?\n\nЧтобы из неправильной сделать правильную, необходимо разбить неправильную на две независимые части,\nт.е будет два вида кнопок, как в правильном варианте, только с названиями `Other / Location On`\nи `Other / Location Off`\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eFigma modern colors tools\u003c/summary\u003e\n\n## Colors generator\n\n### 1. Название главного фрейма\n\nДля того чтобы найти кнопки в фигме, необходимо привязываться к названию главного фрейма¹. Это\nназвание будет служить в качестве ID, с помощью которого получим все кнопки находящиеся внутри этого фрейма.\n\n### Что нужно сделать?\n\nНеобходимо в самой фигме назвать главный фрейм¹ с кнопками `Generator/Button`.\n\n\u003cdetails\u003e\n\u003csummary\u003eПример: главный фрейм¹\u003c/summary\u003e\n\n![image](https://github.com/user-attachments/assets/5d5a0a50-534a-4a8f-8c69-2926c25a2c6b)\n\n\u003c/details\u003e\n\n### 2. Названия и свойства кнопок\n\nУ кнопок должны быть корректные свойства, дублирующеися в их название. Для кнопок обязательные свойства `Style`, `State` и `Text`, для инпутов `Type` и `State`.\n\n\u003cdetails\u003e\n\u003csummary\u003eПример: правильных кнопок\u003c/summary\u003e\n\n![image](https://github.com/user-attachments/assets/11ccc7f0-c3a8-4c02-bf04-09370608f6dd)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eПример: неправильных кнопок\u003c/summary\u003e\n\n\u003cimg width=\"593\" alt=\"image\" src=\"https://user-images.githubusercontent.com/35490768/202784049-7e1e2595-e556-42f5-b4c8-60beae4bf540.png\"\u003e\n\n\u003c/details\u003e\n\n\u003c/details\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatls%2Ffigma","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fatls%2Ffigma","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatls%2Ffigma/lists"}