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

<span style="mso-bidi-font-size: 14.0pt;">1. Для загрузки сцены из </span><span lang="EN-US" style="mso-bidi-font-size: 14.0pt; mso-ansi-language: EN-US;">Figma</span><span lang="EN-US" style="mso-bidi-font-size: 14.0pt;"> </span><span style="mso-bidi-font-size: 14.0pt;">первым делом добавьте в </span><span lang="EN-US" style="mso-bidi-font-size: 14.0pt; mso-ansi-language: EN-US;">Figma</span><span style="mso-bidi-font-size: 14.0pt;"> плагин «</span><span lang="EN-US" style="mso-bidi-font-size: 14.0pt; mso-ansi-language: EN-US;">toJSON</span><span style="mso-bidi-font-size: 14.0pt;">». </span>

<span lang="EN-US" style="mso-bidi-font-size: 14.0pt; mso-ansi-language: EN-US; mso-no-proof: yes;">![](https://wiki.fora.sg/uploads/images/gallery/2026-04/embedded-image-e5wxojoh.png)</span>

<span style="mso-bidi-font-size: 14.0pt;">2. Затем создайте фрейм, размеры которого совпадают с размером сцены (или меньше), иначе расположение элементов на сцене будет неправильным. Лучше всего, сделать фон фрейма чёрным, чтобы было понятно, как будут выглядеть элементы в Дизайнере.</span>

<span style="mso-no-proof: yes;">![](https://wiki.fora.sg/uploads/images/gallery/2026-04/embedded-image-jm5pypbx.png)</span>

<span style="mso-bidi-font-size: 14.0pt;">3. В Дизайнере есть следующие типы объектов: Изображение, Текст, Видео, Трансляция, Таймер, Время суток, Группа, Плейлист. Напрямую через фигму можно добавить только текст, изображение, таймер, время суток или группу.</span>

<span style="mso-bidi-font-size: 14.0pt;">4. Для того чтобы создать объект текста, необходимо выбрать на панели сверху слева элемент Текст и разместить его на нашей сцене. Альтернативным путем будет размещение элемента текста с префиксом &lt;Text&gt; в названии элемента. Аналогично происходит работа с изображением. Первый способ создания – выбрать добавление изображения, в этом случае </span><span lang="EN-US" style="mso-bidi-font-size: 14.0pt; mso-ansi-language: EN-US;">Figma</span><span style="mso-bidi-font-size: 14.0pt;"> предложит выбрать изображение сразу, и впоследствии оно автоматически загрузится внутрь сцены после импорта. Второй способ – создать Rectangle с префиксом &lt;Image&gt;, в этом случае изображение можно будет выбрать только после импорта. Выглядит это примерно так:</span>

<span style="mso-bidi-font-size: 14.0pt; mso-no-proof: yes;">![](https://wiki.fora.sg/uploads/images/gallery/2026-04/embedded-image-trgjglfe.png)</span>

<span style="mso-bidi-font-size: 14.0pt;">5. Для добавления видео, трансляции или плейлиста создайте </span><span lang="EN-US" style="mso-bidi-font-size: 14.0pt; mso-ansi-language: EN-US;">Rectangle</span><span style="mso-bidi-font-size: 14.0pt;"> с необходимыми размерами, в названии объекта в </span><span lang="EN-US" style="mso-bidi-font-size: 14.0pt; mso-ansi-language: EN-US;">Figma</span><span style="mso-bidi-font-size: 14.0pt;"> укажите в начале нужный тег: &lt;Video&gt;, &lt;Live&gt; или &lt;Playlist&gt;. После импорта эти элементы будут соответствовать объектам Дизайнера.</span>

<span style="mso-bidi-font-size: 14.0pt;">6. Для создания объекта со временем дня (текущее время на устройстве) используйте элемент Text с префиксом &lt;TimeOfDay&gt;. В тексте time of day укажите формат времени, на текущий момент доступно два варианта: hh:mm:ss, hh:mm. Пример:</span>

<span lang="EN-US" style="mso-bidi-font-size: 14.0pt; mso-ansi-language: EN-US; mso-no-proof: yes;">![](https://wiki.fora.sg/uploads/images/gallery/2026-04/embedded-image-r7trxqgv.png)</span>

<span style="mso-bidi-font-size: 14.0pt;">7. Для того, чтобы объединить элементы в группы, необходимо через </span><span lang="EN-US" style="mso-bidi-font-size: 14.0pt; mso-ansi-language: EN-US;">ctrl</span><span lang="EN-US" style="mso-bidi-font-size: 14.0pt;"> </span><span style="mso-bidi-font-size: 14.0pt;">или </span><span lang="EN-US" style="mso-bidi-font-size: 14.0pt; mso-ansi-language: EN-US;">shift</span><span lang="EN-US" style="mso-bidi-font-size: 14.0pt;"> </span><span style="mso-bidi-font-size: 14.0pt;">выбрать элементы для объединения, нажать по ним правой кнопкой мыши и в меню выбрать </span><span lang="EN-US" style="mso-bidi-font-size: 14.0pt; mso-ansi-language: EN-US;">Group</span><span lang="EN-US" style="mso-bidi-font-size: 14.0pt;"> </span><span lang="EN-US" style="mso-bidi-font-size: 14.0pt; mso-ansi-language: EN-US;">selection</span><span style="mso-bidi-font-size: 14.0pt;">. Другой способ – нажать правой кнопкой мыши на любой одиночный элемент, снова выбрать </span><span lang="EN-US" style="mso-bidi-font-size: 14.0pt; mso-ansi-language: EN-US;">Group</span><span lang="EN-US" style="mso-bidi-font-size: 14.0pt;"> </span><span lang="EN-US" style="mso-bidi-font-size: 14.0pt; mso-ansi-language: EN-US;">selection</span><span style="mso-bidi-font-size: 14.0pt;">, после чего в созданную группу мышкой перетащить остальные объекты. </span>

<span lang="EN-US" style="mso-bidi-font-size: 14.0pt; mso-ansi-language: EN-US; mso-no-proof: yes;">![](https://wiki.fora.sg/uploads/images/gallery/2026-04/embedded-image-sljyelnp.png)</span>

<span style="mso-bidi-font-size: 14.0pt;">8. Для импортирования полученной сцены будем использовать плагин </span><span lang="EN-US" style="mso-bidi-font-size: 14.0pt; mso-ansi-language: EN-US;">toJSON</span><span style="mso-bidi-font-size: 14.0pt;">, установленный в первом пункте. Снимите выделение со всех элементов и фреймов, откройте плагин. Затем кликните на название фрейма, который нужно импортировать. В списке плагинов нажать на «</span><span lang="EN-US" style="mso-bidi-font-size: 14.0pt; mso-ansi-language: EN-US;">toJSON</span><span style="mso-bidi-font-size: 14.0pt;">», откроется его окошко, после чего кликните в тот фрейм, который требуется сохранить:</span>

<span lang="EN-US" style="mso-bidi-font-size: 14.0pt; mso-ansi-language: EN-US; mso-no-proof: yes;">![](https://wiki.fora.sg/uploads/images/gallery/2026-04/embedded-image-tjehf6ou.png)</span>

<span style="mso-bidi-font-size: 14.0pt;">После того, как фрейм выбран, нажмите кнопку «</span><span lang="EN-US" style="mso-bidi-font-size: 14.0pt; mso-ansi-language: EN-US;">Create</span><span style="mso-bidi-font-size: 14.0pt;">» в верхней части. Будет сохранён архив “</span><span lang="EN-US" style="mso-bidi-font-size: 14.0pt; mso-ansi-language: EN-US;">scenes</span><span style="mso-bidi-font-size: 14.0pt;">.</span><span lang="EN-US" style="mso-bidi-font-size: 14.0pt; mso-ansi-language: EN-US;">zip</span><span style="mso-bidi-font-size: 14.0pt;">” (если такой файл в загрузках уже есть, в скобках будет добавлен номер копии).</span>

<span style="mso-bidi-font-size: 14.0pt;">9. Перейдите в Дизайнер и создайте или выберите сцену, в которую будут загружены объекты из сохраненного в </span><span lang="EN-US" style="mso-bidi-font-size: 14.0pt; mso-ansi-language: EN-US;">Figma</span><span style="mso-bidi-font-size: 14.0pt;"> архива. Нажмите «Загрузить», выберите в выпавшем меню «Загрузить </span><span lang="EN-US" style="mso-bidi-font-size: 14.0pt; mso-ansi-language: EN-US;">Figma</span><span lang="EN-US" style="mso-bidi-font-size: 14.0pt;"> </span><span style="mso-bidi-font-size: 14.0pt;">сцену» и в открывшемся окне выберите сохраненный на предыдущем шаге архив. Все элементы будут на тех же местах, на которых они были расположены в </span><span lang="EN-US" style="mso-bidi-font-size: 14.0pt; mso-ansi-language: EN-US;">Figma</span><span style="mso-bidi-font-size: 14.0pt;">:</span>

<span style="mso-bidi-font-size: 14.0pt; mso-no-proof: yes;">![](https://wiki.fora.sg/uploads/images/gallery/2026-04/embedded-image-rrkujpy3.png)</span>

<span style="mso-bidi-font-size: 14.0pt;"> </span>

<span style="mso-bidi-font-size: 14.0pt;">Если в </span><span lang="EN-US" style="mso-bidi-font-size: 14.0pt; mso-ansi-language: EN-US;">Figma</span><span style="mso-bidi-font-size: 14.0pt;"> был использован какой-то шрифт, которого нет в системе локально, то для его отображения скачайте и установите этот шрифт перед импортом. В противном случае, шрифт, который недоступен Дизайнеру, будет заменён на стандартный.</span>