Создание: 30.06.2021
Обновлено: 26.10.2021
Автор:
Кирилл Сатулин
Просмотров:
13 612
Время прочтения:
15 мин.

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

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

Импорт макета из Фигмы в Тильду

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

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

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

Автоперенос из Фигмы в Тильда

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

  1. Ширина фрейма в Фигме должна быть 1200 px

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

2. Каждый смысловой блок или экран, разбивать на отдельные фреймы

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

3. Кнопки в Фигме нужно объединить в группу слоев

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

4. Чтобы импортировать группу картинкой, нужно группе дать название image или svg


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

Какие нюансы есть при импорте дизайна

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

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

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

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

Получаем в Фигме API Access токен

  1. Переходим на Главную в Figma (нажимаем домик)
  2. В правом верхнем углу, нажимаем на иконку своего профиля
  3. Нажимаем на Setting
  4. Во вкладке Account листаем вниз до «Personal access tokens»
  5. Там в окошке «Create a new personal access token:» пишем любое название нашей интеграции
  6. Жмем Enter и ждем одну-две секунды, пока сформирует редактор нам ключ

Интегрируем с платформой Tilda

  1. Копируем его и идем в Тильду
  2. Создаем Zero-блок
  3. Удаляем весь контент и нажимаем на три точки справа вверху
  4. Import
  5. В поле API Token вставляем наш скопированный из Фигмы токен
  6. Не закрываем это окно, так как нам нужно теперь вставить ссылку на файл в графическом редакторе Figma

Переносим дизайн

  1. Открываем фигму в браузере
  2. Находим наш проект с дизайном и подготовленным для импорта макетом
  3. Выбираем наш фрейм, который мы хотим экспортировать
  4. Жмем на ссылку в браузере
  5. Вставляем ее в окно Layout URL, где мы вставляли API ключ
  6. Жмем кнопку Import и ждем
  7. Готово

Итог

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

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

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

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

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

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

Перенос макета из Figma в Tilda (Zero block)

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

Комментарии к статье

Возможно YouTube скоро работать не будет
У меня есть канал в Rutube. Переходите и подписывайтесь на него. Там я аналогично выкладываю все видео. Давайте не теряться ;) Мой канал Рутуб
Рекомендуемые статьи
Из-за ограничений в Youtube, приходится переходить на другие платформы:
Rutube
VK
VK
Все мои соц сети и мессенджеры:
Последние видео с канала

Подпишитесь на новинки

Материалы, которые не публикуются больше нигде, кроме телеги!
Made on
Tilda