Дизайн сайта из Figma в Tilda

Часть 1

Доброго времени суток! В этой статье речь пойдет о моем опыте создания дизайна сайта в Figma и его импорте в Tilda. Здесь будет сказано о том, с какими трудностями я столкнулся и как их решал.
После того как был проведен анализ конкурентов и сделал портреты пользователей я приступил к созданию прототипа.
И так первое о чем мне бы хотелось сказать это размер фрейма который я установил в figma, а именно 1440px на 1080px так же использовал свою стандартную сетку для этого размера:

<i>моя сетка для размеров 1440px</i>
моя сетка для размеров 1440px

Но у tilda есть свой собственный размер (это 1200px в ширину) и своя установленная сетка которую нельзя изменить, предоставлю её ниже:

<i>Сетка для tilda на размер 1200px</i>
Сетка для tilda на размер 1200px

Я думаю вы хотели бы знать об этом заранее, до того как начали разрабатывать дизайн для tilda, а не после того как все уже готово (как это было в моем случае). Эта сетка необходима для того что бы при импорте в tilda все встало ровно.

После того как целиком был создан дизайн сайта в figma нужно было импортировать его в tilda, на удивление здесь все произошло без проблем, на всякий случай демонстрирую как это сделать:

Для начала переходим в настройки профиля
Для начала переходим в настройки профиля
Скроллим вниз и жмем "Generate new token" даем ему имя (например tilda)
Скроллим вниз и жмем "Generate new token" даем ему имя (например tilda)
Копируем данный токен
Копируем данный токен

После чего мы переходим в tilda создаем zero блок, в нем нужно будет удалить все лишнее

Дизайн сайта из Figma в Tilda

Затем жмем 3 точки справа вверху и импорт

Дизайн сайта из Figma в Tilda

Вводим наш токен

Дизайн сайта из Figma в Tilda

Возвращаемся в figma копируем код страницы, которую хотим перенести в tilda, для этого на нужно выделить страницу нажать пкм и копируем код как на скриншоте

Дизайн сайта из Figma в Tilda

Переходим обратно в tilda, и вставляем нашу ссылку в верхний пункт

Дизайн сайта из Figma в Tilda

Поздравляю! вы перенесли дизайн из фигмы в тильду!
Во второй части я расскажу какие проблемы у меня возникли с анимациями на tilda и как я их решил.

11
1 комментарий

А вторая часть..(