Буквально недавно команда Тильды выкатила, наверное, свою главную киллер фичу перед другими конструкторами сайтов – это быстрый и удобный экспорт ваших дизигнов прямо из Figma. Ни для кого не секрет, что конструкторы сайтов вроде Tilda созданы в первую очередь для дизайнеров, хотя сайт может сделать кто угодно и без навыков дизайна. И все же философия платформы базируется на отказе от кода, что сильно удешевляет и упрощает работу над проектами. Поэтому, имея в своем арсенале уникальные инструменты, с помощью Тильды у дизайнеров развязываются руки на полную.
О преимуществах Tilda мы уже писали тут, если кому-то интересно обязательно ознакомьтесь, а мы разберем особенность последнего нововведения.
Как работает перенос дизайна из Figma
Нужно получить API Access токена Figma в настойках своего аккаунта;
Передать этот токен в настройках экспорта своего зеро-блока;
PROFIT.
А теперь поподробнее
Чтобы получить токен Figma мы отправляемся в настройки своего аккаунта (Main menu > Help and account > Account settings).
Далее, пролистайте до пункта Personal access tokens и пропишите там любое название, например, Tilda. Через пару секунд, сформируется токен (выделено желтым). Теперь нужно скопировать этот токен и передать его в Тильду. Для этого открываем ваш проект и создаем зеро-блок. Переходим в его редактирование и выбираем в меню параметр Import.
В открывшемся окне нужно будет вставить полученный токен и ссылку на конкретный фрейм из вашего макета, который вы хотите экспортировать. Для этого выделите нужный фрейм, нажмите кнопку Share и скопируйте ссылку на него в открывшемся поп-апе, нажав на ссылку Copy link:
Как только вы указали токен и ссылку на фрейм, нажимайте кнопку Import и ожидайте загрузку. Готово!
Теперь токен будет привязан к проекту на Tilda. Когда вам потребуется в следующий раз выгрузит очередной блок из Figma, то вы создадите новый зеро-блок, откроете параметры экспорта и укажите лишь ссылку на нужный блок в Figma и все!
Требования к макетам Tilda
Чтобы ваши дизайны корректно экспортировались, нужно соблюдать некоторые правила. У Тильды есть подробная статья об этом. Правда я дам более расширенное описание этих требований, потому что некоторые вещи не описаны в гайде от Тильды, я выявил их самостоятельно:
1. Делайте ваши блоки в отдельных фреймах, а не группах, так как ссылка в Figma формируется именно на фрейм.
2. Не объединяйте фреймы ваших блоков в один общий фрейм страницы, иначе при экспорте в зеро-блок загрузится дизайн всей страницы, а не нужный вам блок.
3. Любую группу и фрейм можно экспортировать как картинку, так и svg. Для этого им нужно присвоить название Image или Svg.
4. Придерживайтесь ширины фрейма 1200 пикселей. Tilda похоже работает на сетке Bootstrap или очень на неё похожей. Так что можете использовать для Figma настройки 12-ти колоночной сетки (12/70/30). Поэтому если даже ваши фреймы будут размером, например, 1920px, но выравнивание будет по такой сетке, то они все равно корректно экспортируются. Единственное после экспорта нужно будет лишь слегка подвинуть загруженное.
5. Если хотите, чтобы картинка внутри блока экспортировалась как картинка, то назовите её (или группу её элементов) как Image. Работает и с фреймом.
6. Если хотите, чтобы ваши векторные элементы экспортировалась как векторы, то назовите их (или группу их элементов) как Svg. Работает и с фреймом.
7. Если хотите, чтобы простейшие формы и фигуры внутри блока экспортировались как фигуры (шейпы), то назовите их Shape.
8. Чтобы кнопки экспортировались как кнопки, нужно объединить текстовый фрейм и фигуру в одну группу с название Button. При этом ширина фрейма текста, должна быть растянута на всю длину фигуры.
9. Любые группы объектов переносятся в зеро-блок тоже сгруппированными.
10. Не применяйте к элементам эффекты, которые не смогли бы сами воссоздать на Tilda. Тогда при экспорте они перенесутся 1 в 1.
11. Цвет фона вашего фрейма переносится как цвет бэкграунда в зеро-блок. Помните это, потому что это поможет не создавать лишние элементы в слоях зеро-блоков.
Вывод
Теперь вы умеете работать с экспортом в Тильду. Надеюсь эта статья была для вас полезной. Лично я не перестаю радоваться и удивляться вот таким нововведениям и интеграциях между инструментами. Надеюсь команда Тильды не перестанет удивлять нас своими обновлениями. Белоусов Сергей, дизайнер сайтов на Tilda
