Импорт из Фигмы в Тильду Недавно сделал новый лендинг франшиз | Design & Management

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

Недавно сделал новый лендинг франшизы для автоматов Бофт. Макеты рисовал в Фигме, собирал в Тильде. Наконец, попробовал импорт в Тильду прямо из Фигмы и это, конечно, круто

За несколько секунд экран макета КОРРЕКТНО переноситься в Зиро блок, остаётся только настроить анимации и залинковать кнопки. Магия

Расскажу о тонкостях, чтобы у вас с первого раза получилось перенести все правильно:

1. Установите нужный шрифт в настройках сайта. Так при переносе ничего не поедет и текст сразу отобразиться с нужными характеристиками.

2. Макеты в фигме сверстайте под ширину 1200 — это дефолтная сетка в Тильде.

3. Чтобы кнопки в Тильде отразились элементом «Кнопка» (а не просто текст на прямоугольнике) и вы могли задать им ховеры, в слоях макета переименуйте их в «button».

4. Перед импортом замените в Фигме изображения на оптимизированные (например, через tinypng.com), чтобы потом не переделывать это в Тильде.

Зачем оптимизировать? — Чтобы изображения весили меньше и сайт грузился быстрее.

5. Форма приема данных не переносится, ее придётся собирать руками в Тильде.

6. Я использовал градиент в тексте заголовков (задавал в CSS стилях для страницы) и на Айфонах этот градиент не применялся, заголовки просто не были видны. Если что, надо вот так:

background-image: linear-gradient(225deg, #hex, #hex, #hex);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
--main-color: #hex;
--accent-color: #hex;
--final-color: #hex;

Отдельно отмечу:
- теперь элементам можно задавать CSS-классы и прописывать стили не по айдишникам для каждого элемента, а по-человечески;
- анимации по скролу в Тильде пока не так хороши как в РМ и могут подтупливать, так что лучше подумайте как их минимизировать или адаптировать так, чтобы этого тупняка не было;

Подробнее раскрываю в видео —