Загрузка сцен из Figma

1. Для загрузки сцены из Figma первым делом добавьте в Figma плагин «toJSON».

2. Затем создайте фрейм, размеры которого совпадают с размером сцены (или меньше), иначе расположение элементов на сцене будет неправильным. Лучше всего, сделать фон фрейма чёрным, чтобы было понятно, как будут выглядеть элементы в Дизайнере.

3. В Дизайнере есть следующие типы объектов: Изображение, Текст, Видео, Трансляция, Таймер, Время суток, Группа, Плейлист. Напрямую через фигму можно добавить только текст, изображение, таймер, время суток или группу.

4. Для того чтобы создать объект текста, необходимо выбрать на панели сверху слева элемент Текст и разместить его на нашей сцене. Альтернативным путем будет размещение элемента текста с префиксом <Text> в названии элемента. Аналогично происходит работа с изображением. Первый способ создания – выбрать добавление изображения, в этом случае Figma предложит выбрать изображение сразу, и впоследствии оно автоматически загрузится внутрь сцены после импорта. Второй способ – создать Rectangle с префиксом <Image>, в этом случае изображение можно будет выбрать только после импорта. Выглядит это примерно так:

5. Для добавления видео, трансляции или плейлиста создайте Rectangle с необходимыми размерами, в названии объекта в Figma укажите в начале нужный тег: <Video>, <Live> или <Playlist>. После импорта эти элементы будут соответствовать объектам Дизайнера.

6. Для создания объекта со временем дня (текущее время на устройстве) используйте элемент Text с префиксом <TimeOfDay>. В тексте time of day укажите формат времени, на текущий момент доступно два варианта: hh:mm:ss, hh:mm. Пример:

7. Для того, чтобы объединить элементы в группы, необходимо через ctrl или shift выбрать элементы для объединения, нажать по ним правой кнопкой мыши и в меню выбрать Group selection. Другой способ – нажать правой кнопкой мыши на любой одиночный элемент, снова выбрать Group selection, после чего в созданную группу мышкой перетащить остальные объекты.

8. Для импортирования полученной сцены будем использовать плагин toJSON, установленный в первом пункте. Снимите выделение со всех элементов и фреймов, откройте плагин. Затем кликните на название фрейма, который нужно импортировать. В списке плагинов нажать на «toJSON», откроется его окошко, после чего кликните в тот фрейм, который требуется сохранить:

После того, как фрейм выбран, нажмите кнопку «Create» в верхней части. Будет сохранён архив “scenes.zip” (если такой файл в загрузках уже есть, в скобках будет добавлен номер копии).

9. Перейдите в Дизайнер и создайте или выберите сцену, в которую будут загружены объекты из сохраненного в Figma архива. Нажмите «Загрузить», выберите в выпавшем меню «Загрузить Figma сцену» и в открывшемся окне выберите сохраненный на предыдущем шаге архив. Все элементы будут на тех же местах, на которых они были расположены в Figma:

Если в Figma был использован какой-то шрифт, которого нет в системе локально, то для его отображения скачайте и установите этот шрифт перед импортом. В противном случае, шрифт, который недоступен Дизайнеру, будет заменён на стандартный.