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

Константин Булгаков Подружиться

12 Дек.2022

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

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

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

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

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