Как перенести сайт с Фигмы на Тильду

Tilda сделала инструмент, который так долго ждали дизайнеры, верстальщики, любители конструктора Тильда, в общем все, кто когда-то работали с Тильдой и Фигмой.

Да, теперь дизайнерам не нужно никаких дополнительных расширений, платных сервисов, кодов, модификаций. Макет, в два клика можем перенести из графического редактора Figma в Тильду. В конце статьи, будет видео, как я переношу этим способом дизайн на Тильду. А в этой статье, все по пунктам распишу, какие есть нюансы и правила для переноса.

И так приступаем. Эта самая подробная инструкция по переносу. Даже подробней, чем официальная от Тильды.

В конце самый сок – это все я делаю в формате скринкаста

Важные правила, которых нужно придерживаться:

То есть если у вас ширина больше, а это скорей всего так, то в таком случае, нужно создать рядом фрейм с шириной 1200 пикселей, скопировать все туда и выравнить по центру. С этим проблем ни у кого не должно возникнуть, потому что сетку в Фигме, если проектируют дизайн под Tilda, обычно используют 12 колоночную, либо стараются все уместить в 1160 пикселей.

Если у вас дизайн страницы в Figma в одном фрейме, то лучше разбить на каждый по отдельности фрейм. Я делаю так - создаю фрейм с шириной 1200, а высоту нового фрейма делаю такой, как высота блока из готового дизайна.

Если вы это не сделали ранее. И кнопкам дать им название Button. То есть кнопка в Фигма должна состоять из шэйпа (Rectangle) и текста. И важно, у текста, ширина контейнера должна быть такая же как и у шейпа.

Это все правила.

1. Насколько я понял, формы пока переносить нельзя
2. Группы из Фигмы переносятся в Тильду, только иерархия такая: если внутри одной группы, есть еще группы, то все перенесется в первую
3. Адаптацию макета под остальные разрешения придется делать самому
4. Если есть эффект на элементе в Figma, но этого эффекта нет в самом конструкторе, то эффект импортируется картинкой
5. Формат инфографики в SVG у меня, почему то импортируется странно, возможно потому что они у меня были компонентами
6. После переноса дизайна в Тильду, изображения нужно залить на сервер Tilda, платформа об этом сообщит вверху, где выбираем разрешения экрана. Это можно сделать одним кликом.
7. Если не залить фото на сервер Тильды, то они хранятся 30 дней.
8. Анимацию проекта импортировать в редактор нельзя. Придется ее потом настраивать в ручную
9. При импорте дизайна, элементы в Tilda позиционируются по левому верхнему краю (Left, Top)
10. Если хотите при переносе верстки в Тильду, чтобы картинка была как фоновая, то ее надо загрузить во Frame. Выбрать Фрэйм, в Fill где выбор цвета, с Solid переключаем на Image. Если картинку загрузить как картинку, то она перенесется в Тильду обычной картинкой и вам нужно будет в настройках переключать позиционирование и размер, если нужно будет, чтобы она растягивалась на все разрешение экрана

Давайте разбираться, как же технически настроить импорт макета

Тут все просто, главное придерживаться шагов, описанных в этой инструкции

Вот так нас обрадовали разработчики Тильды. То, что у нас отнимало кучу времени, сейчас можно сделать автоматически двумя щелчками мыши. 

На этой странице, для сравнения, есть видео, где я переношу в ручную дизайн из фигмы. И только десктопная версия у меня по времени в переносе заняло порядка 60 минут. 

С автопереносом от Тильды это займет не более 30 минут. 

Так что друзья, Тильда, очень активно развивается, у них пополняется штат разработки

А вот само видео. Там я подробными разъяснениями, я показываю шаг за шагом автоперенос из Фигмы в Тильду. 

Время просмотра 40 минут.

Вот старое видео, где я вручную переношу веб-дизайн
Время просмотра – 65 минут