{"id":14285,"url":"\/distributions\/14285\/click?bit=1&hash=346f3dd5dee2d88930b559bfe049bf63f032c3f6597a81b363a99361cc92d37d","title":"\u0421\u0442\u0438\u043f\u0435\u043d\u0434\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u0442\u044c \u043d\u0430 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0435 \u0438\u043b\u0438 \u043f\u0443\u0442\u0435\u0448\u0435\u0441\u0442\u0432\u0438\u044f","buttonText":"","imageUuid":""}

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

Часть 1

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

моя сетка для размеров 1440px

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

Сетка для tilda на размер 1200px

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

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

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

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

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

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

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

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

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

0
Комментарии
-3 комментариев
Раскрывать всегда