Фреймворк
для
server-driven UI
с открытым кодом
Divkit Figma Plugin

Плагин для Figma от DivKit

DivKit Figma Plugin – это инструмент для дизайнеров и разработчиков приложений. Плагин позволяет получить zip. архив с JSON-кодом вашего приложения в несколько кликов.
Как это работает
1
Заполните форму и получите письмо с плагином на вашу почту
2
Оформите макеты вашего приложения в figma
3
Получите JSON файл с вашим UI
1
Заполните форму и получите письмо с плагином на вашу почту
2
Оформите макеты вашего приложения в figma
3
Получите JSON файл с вашим UI

Оставьте заявку

От дизайна до готового кода вашего приложения в несколько кликов
Скачать
Установка плагина
  1. Откройте десктопное приложение Figma
  2. Откройте меню учетной записи в правом верхнем углу.
  3. Выберите Плагины, чтобы открыть модуль управления плагинами.
  4. В разделе В разработке нажмите .
    • Выберите Новый плагин, чтобы создать плагин на основе шаблона
    • Выберите Импортировать новый плагин из манифеста, если у вас на компьютере уже есть исходный код.

  5. Следуйте инструкциям по созданию виджета.
  6. Когда вы создадите плагин, он будет в модуле управления плагинами, в разделе В разработке.

Когда вкладка «Разработка» появится в модуле «Плагины», вы можете нажать на , чтобы создать новый плагин. Нажмите на  рядом с плагином, чтобы Опубликовать его, или выберите Показать в Finder, чтобы просмотреть код плагина.
Работа с плагином
Для начала работы с плагином необходимо выделить в макете узел, который содержит в себе дочерние элементы.
Если нужно дополнительно разметить некоторые элементы, как изображения, то это можно сделать через секцию Mark as image.
При клике на кнопку «Generate» сгенерируется DivJson и появится секция превью с возможностью открыть DivJson в плэйграунде.
По умолчанию в плагине сохраняются загруженные ранее изображения, если необходимо заново сгенерировать и загрузить изображения, необходимо выставить флаг «Re-upload images». Изображения сохраняются на серверах Figma, время хранения — 30 дней.
Ранее сгенерированные DivJson сохраняются в плагине, переключаться между ними можно выделяя элементы внутри макета.
Для того, чтобы в плагин генерировал DivJson вместе с палитрой, необходимо открыть файл с библиотекой стилей и сохранить стили в плагин через экран настроек. По-умолчанию стили для светлой и темной темы имеют префиксы [Light] и [Dark] соответственно.
Для начала работы с плагином необходимо выделить в макете узел, который содержит в себе дочерние элементы.
Если нужно дополнительно разметить некоторые элементы, как изображения, то это можно сделать через секцию Mark as image.
При клике на кнопку «Generate» сгенерируется DivJson и появится секция превью с возможностью открыть DivJson в плэйграунде.
По умолчанию в плагине сохраняются загруженные ранее изображения, если необходимо заново сгенерировать и загрузить изображения, необходимо выставить флаг «Re-upload images». Изображения сохраняются на серверах Figma, время хранения — 30 дней.
Ранее сгенерированные DivJson сохраняются в плагине, переключаться между ними можно выделяя элементы внутри макета.
Для того, чтобы в плагин генерировал DivJson вместе с палитрой, необходимо открыть файл с библиотекой стилей и сохранить стили в плагин через экран настроек. По-умолчанию стили для светлой и темной темы имеют префиксы [Light] и [Dark] соответственно.

Правила оформления макетов

Лэйаут элементов
Для правильной адаптивной вёрстки нужно явно указывать у элементов размер Fill, если нужно, чтобы элемент растягивался; Hug — чтобы элемент имел размер внутреннего контента; Fixed — чтобы элемент имел фиксированный размер;
Отступы между элементами лучше задавать через параметры auto-layout, а не через искусственные пустые прозрачные блоки в макете;
Поддержанные типы узлов
Vector and image nodes (конвертируется в PNG)
Frame nodes (autolayout and non-autolayout)
Text nodes
Component nodes, component instances
Group nodes
Ограничения DivKit
Нет поддержки Spacing mode со значением Space between
Нет поддержки градиентов с типом Angular и Diamond
Нет поддержки шейпов: Ellipse, Polygon и т. д.
Wed Jun 21 2023 14:24:26 GMT+0300 (Moscow Standard Time)