Требования

• Node.js и npm (скачайте и установите с официального сайта)
• nvm (Node Version Manager) для управления версиями Node.js (установите, следуя инструкциям из репозитория nvm на GitHub)
• TypeScript компилятор (установите с помощью npm)

---

Установка и сборка проекта

В папке script_and_plugin_example находится скрипт src/node.ts, позволяющий сгенерировать конфигурацию дизайн документа Figma на основе персонального токена и идентификатора проекта.

Скрипт src/plugin.ts создает базовый пример плагина, который содержит поле ввода текста и возможность установки размера шрифта.

Генерация конфигурации:

1. Переключитесь на нужную версию Node.js:

   nvm use
   

2. Установите зависимости:

   npm install
   

3. Скомпилируйте TypeScript файл:

   npm run build
   

4. Запустите скомпилированный файл:

   npm start
   

5. Введите данные: Если вы запускаете проект первый раз, программа запросит персональный токен и идентификатор документа Figma. Эти данные будут сохранены в файл .figma-access-conf, и при повторном запуске спрашиваться не будут.

Если вы увидели строчку "Configuration file generated.", значит должен появиться файл configuration.json с информацией о страницах и компонентах дизайн документа.

Добавление плагина в Figma:

1. Если еще не скомпилировали файлы:

   npm run build

Файл plugin.js должен появиться в директории dist

2. Добавьте плагин в Figma:

   • Запустите Figma и откройте любой файл или создайте новый
   • В верхнем меню выберите Plugins -> Development -> Import plugin from manifest
   • Загрузите manifest.json
   • Убедитесь, что плагин появился в списке установленных плагинов
   • Запустите плагин, чтобы проверить его работу

---

Проект plugin_configuration создает плагин, который генерирует конфигурацию дизайн документа и сохраняет её в файл configuration.json на устройстве. Далее с помощью скрипта generate_css.ts генерируется файл variables.css, содержащий информацию о CSS-переменных.

1. Переключитесь на нужную версию Node.js:

   nvm use
   

2. Установите зависимости:

   npm install
   

3. Добавьте плагин в Figma:

   • Запустите Figma и откройте любой файл или создайте новый
   • В верхнем меню выберите Plugins -> Development -> Import plugin from manifest
   • Загрузите manifest.json
   • Убедитесь, что плагин появился в списке установленных плагинов
   • Запустите плагин, откроется окно сохранения документа. Сохраните его с названием configuration.json в папку проекта!

4. Скомпилируйте TypeScript файл:

   npm run build
   

5. Запустите скомпилированный файл:

   npm start
   

Если вы увидели строчку "CSS file generated successfully", значит должен появиться файл variables.css с информацией о CSS-переменных.