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

Константин Булгаков
Константин Булгаков
12 Дек.2022
Сегодня рассмотрим основные требования к макету в Фигме для последующего корректного импорта в Тильду.

С болью и ностальгией вспоминаю времена, когда приходилось верстать блоки и подгонять пиксели для каждого элемента вручную — было долго и кропотливо, так и работали.

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

  1. Ширина фрейма в Фигме для десктопного макета должна быть 1200 px, а контент лучше уместить в 1160 px, учитывая безопасные отступы;
  2. Для мобильной верстки ширину фрейма лучше задать 320 px, а ширину контейнера с контентом задать 300 px;
  3. Каждый смысловой блок в макете лучше делать отдельным фреймом, чтобы импортировать макет блоками в отдельные zero для удобства верстки и последующей адаптации;
  4. Чтобы кнопка перенеслась правильно, нужно подложку и текст объединить в отдельную группу и назвать её «button». При этом ширина шейпа и текстового контейнера должны быть одинаковы;
  5. Для импорта группы элементов в виде картинки или SVG нужно задать название группы «image» или «svg», чтобы элементы перенеслись в соответствующем формате;
  6. Шрифты в макете лучше сразу использовать такие как планируется в верстке в Тильде, чтобы потом не перевёрстывать содержимое блоков.

Желательно отрисовать отдельно макеты для десктопа и мобильных девайсов. Так вы сильно сэкономите время на адаптации блоков под разные типы устройств.

Этот список поможет правильно подготовить макет к импортированию. В следующей части разберем как переносить готовый макет в Тильду и что нужно, чтобы всё получилось.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *