Справочный центр
Импорт из Figma
Как автоматически импортировать макет
из Figma в Zero Block
из Figma в Zero Block
С помощью плагина Figma to Tilda можно переносить полноценные макеты и слои из Figma сразу в Zero Block в один клик. Рассказали в инструкции подробно, как работать с плагином.
Добавление плагина Tilda в Figma
В вашем аккаунте Figma в нижней панели инструментов нажмите на Actions и выберите пункт Plugins & widgets. В поиске впишите название плагина Figma to Tilda и нажмите на него или добавьте плагин по ссылке.
Нажмите на кнопку «Run», чтобы активировать плагин.
Готово! Теперь вы можете переносить слои и элементы на Тильду.
Рекомендации к макету в Figma для переноса в Тильду
- Размер Frame должен быть 1200px для корректного переноса.
- Разбейте большой Frame на несколько отдельных Frame.
- Для корректного переноса кнопки, назовите группу элементов button.
Важно: Перенести можно не более 6 уровней вложенных групп (если уровней вложенности больше, они не будут перенесены).
Перенос слоев из Figma в Zero Block
После добавления плагина, выберите нужный слой в макете. Выбранный слой будет отображаться в окне плагина в поле Selected layers.
Обратите внимание: При копировании можно выбрать как один слой, так и несколько. Это может быть корневой Frame целиком или отдельный элемент — например, изображение, кнопка или текст.
В окне плагина нажмите на кнопку Prepare to copy, чтобы подготовить слои к переносу.
Когда Frame будет готов для переноса, нажмите на кнопку Copy to clipboard.
Перейдите в Тильду → откройте Zero Block и нажмите сочетание клавиш: Ctrl+V на Windows или Command+V на Mac.
Особенности импорта слоев в Zero Block
Импортировать Frame можно как отдельную группу или с применением настроек к артборду и заменой всех текущих элементов.
Если артборд уже содержит элементы, то Frame можно вставить также как группу, но при этом удалить все элементы с артборда.
При выборе пункта «Применение настроек к артборду», в Zero Block будут применены настройки корневого слоя Frame: изменится цвет фона или фоновое изображение, Auto Layout и другие настройки, которые поддерживаются Тильдой.
Если артборд уже содержит элементы, то Frame можно вставить также как группу, но при этом удалить все элементы с артборда.
При выборе пункта «Применение настроек к артборду», в Zero Block будут применены настройки корневого слоя Frame: изменится цвет фона или фоновое изображение, Auto Layout и другие настройки, которые поддерживаются Тильдой.
При вставке нескольких Frame, попап с вариантами импорта отображаться не будет.
Вставить элементы можно как на артборд в виде отдельных слоев, так и внутрь группы. При импорте нескольких элементов, они будут сохранять расстояние между друг другом.
Например, если в Figma расстояние между кнопкой и текстом было 40px — на Тильду они будут перенесены с таким же отступом и положением относительно друг друга.
Например, если в Figma расстояние между кнопкой и текстом было 40px — на Тильду они будут перенесены с таким же отступом и положением относительно друг друга.
Вставка отдельного элемента внутрь уже существующей группы.
Импорт слоев из Figma по API
Получение API Access токена
Перейдите на главную Figma и нажмите под фотографией своего профиля View Profile → Settings.
Далее перейдите на вкладку Security, перейдите к блоку Personal access tokens и нажмите на Generate new token.
В новом окне впишите название токена Tilda и выберите срок его действия. Например, на 1 день, 7 дней, 30 дней и 90 дней.
В области применения (Scopes) поставьте галочки напротив пунктов Current user, Dev resources, File content, File versions, Library assets, Library content и Projects. Теперь нажмите на Generate token — создать токен.
В области применения (Scopes) поставьте галочки напротив пунктов Current user, Dev resources, File content, File versions, Library assets, Library content и Projects. Теперь нажмите на Generate token — создать токен.
Скопируйте этот ключ после создания, чтобы указать в настройках Import на Tilda. Посмотреть ключ повторно нельзя, только создать новый.
Импорт макета в Zero Block
Нажмите на меню с тремя точками внутри Zero Block и нажмите на пункт Import.
Перейдите в Figma. Откройте макет (Layout), выберите нужный Frame, в адресной строке скопируйте ссылку на Frame.
Чтобы импорт происходил корректно, необходимо добавлять в один Zero блок один Frame из Figma
В открывшемся окне добавьте ссылку на Frame и API токен, полученный в настройках Figma.
Подождите, пока макет импортируется.
Если вы добавили правильную ссылку и со стороны API Figma не происходили ошибки, то макет импортируется в Zero Block.
Обратите внимание, что по умолчанию изображения грузятся с серверов Figma, поэтому для загрузки их в Тильду нужно зайти в настройки элементов с изображениями и нажать на кнопку Upload to Tilda.
Требования к макету и особенности импорта
Макет (Layout)
Макет необходимо создавать на фрейме с шириной в 1200 px.
Импортировать макет лучше блоками, а не добавлять весь макет в один блок.
Импортировать макет лучше блоками, а не добавлять весь макет в один блок.
Группы элементов
Любую группу можно импортировать картинкой, для этого в названии нужно указать image. Если указать svg, то будет svg формат.
Доступен импорт групп, если внутри есть другие группы, то все элементы будут в группе первого уровня
Доступен импорт групп, если внутри есть другие группы, то все элементы будут в группе первого уровня
Кнопки и шейпы
Для импорта кнопки необходимо объединить шейп и текст в группу и добавить в название button, учитывается выравнивание текста, так что текст лучше делать шириной как шейп
Если на шейпе есть эффект, который нельзя воспроизвести в Zero, то он импортируется с изображением эффекта на фоне.
Если на шейпе есть эффект, который нельзя воспроизвести в Zero, то он импортируется с изображением эффекта на фоне.
