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

Мы перенесли дизайн двух страниц за 1 день и решили написать инструкцию, по которой, даже без опыта, получится быстро импортировать макеты в из Фигмы в онлайн-конструктор.

Настройки параметров фрейма для Тильды в Фигме

Чтобы элементы корректно подгрузились в Тильду, предварительно необходимо подготовить макет. Предположим, что один прототип состоит из 8 блоков. Тогда, для каждого блока, нужно создать отдельный фрейм со специальными настройками.

Параметры фрейма:

1. Размер: ширина 1200 пикселей, длина может быть любой.
2. Сетка 12 колонок. Поскольку в Тильде по дефолту используется 12-колоночная модульная сетка, чтобы при переносе ничего не съехало и не пришлось подгонять элементы, во фрейме ее тоже важно добавить. Сделать это можно через «Layout grid».

На скрине прописаны параметры сетки, при которых содержимое фрейма перенесется с сохранением заданного расположения и отступов элементов.

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

После настройки фрейма можно приступить к работе над контентом блока. Для этого нужно скопировать целиком интересующий блок и вставить в контейнер. Дальше начинается самая длительная и кропотливая часть работы в панели слоев, расположенной слева.

1. Все дочерние фреймы блока, кроме кнопки, расгруппировываем. Если этого не сделать, элементы, при переносе, не будут кликабельны и их нельзя будет редактировать в Тильде. Для ускорения процесса можно использовать горячие клавиши ctrl / cmd + shift + G.

Если после расгруппировки элементы в Фигме съезжают, то можно оставить фрейм, вытащив за его пределы текстовые элементы. В таком случае, текст подгрузится правильно и ему можно будет задать любое значение и расположение в Тильде.

2. Для переноса кнопки фрейм не нужно расгруппировывать. Убедитесь, что он называется «Button». Важный момент: чтобы перенести кнопку из Фигмы правильно, ширина текстового элемента должна совпадать с шириной шейпа. В противном случае, Тильда не поймет, что это Button и расценит ее двумя раздельными элементами: вектором и текстом. В целом, в конструкторе Тильды легко настроить кнопку самостоятельно. Поэтому, использовать ли способ Фигмы — на ваше усмотрение.

3. Все векторы и фигуры необходимо переименовать в svg, а картинки в jpg. Быстрые клавиши для смены названия пачки выделенных элементов — ctrl / cmd + R.

4. Если в дизайне есть линии, для их корректного переноса нужно задать параметр «Outline stroke». Это можно сделать, кликнув на элемент в левом меню правой кнопкой мыши. В случае, если по какой-то причине линия все равно переносится криво, можно переименовать в svg или добавить вручную в Тильде.

5. Сложные векторы и картинки лучше выгружать из редактора и самостоятельно заливать в Тильду. Это значительно сэкономит время и сохранит качество элемента.

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

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

Для переноса фрейма необходимо получить токен Фигмы. Для этого переходимо перейти в:

1. Main Menu;
2. Help and account;
3. Account settings;
4. Скролл до Personal access tokens;
5. Клик по Generate new token.

В окне задаем название для токена и кликаем Generate.

Теперь, скопированный ключ из Фигмы добавляем в Тильду. Для этого создаем новый Zero Block, нажимаем на 3 точки в правом верхнем углу и выбираем «Import».

В открывшемся окне в поле API Token добавляем полученный ключ, а в поле Layout URL добавляем ссылку на фрейм, который хотим перенести.

Процесс загрузки фрейма зависит от количества и сложности элементов, может длиться от 15 секунд до нескольких минут.

Таким образом, для каждого фрейма создаем новый Zero Block для импорта. Тильда «запомнит» токен и будет прописывать его по дефолту. Обновлять будет необходимо только ссылку на переносимый фрейм.

Что еще нужно знать об экспорте из Фигмы в Тильду

После переноса на Тильду, макет все равно придется немного подгонять и доделывать.

1. Оптимально, перед экспортом подгрузить шрифты дизайна в настройках сайта на Тильде, чтобы потом не тратить время на корректировку типографики в каждом блоке с нуля. Несмотря на это, дорабатывать внешний вид текста все равно придется. Если в одном текстовом элементе используется несколько видов начертаний, то в Тильду подтянется только один. Остальное уже нужно будет дорабатывать руками.
2. Графические элементы могут быть немного сдвинуты, но это некритично и можно быстро исправить.
3. При переносе дизайна десктопной версии, адаптировать визуал блока под другие разрешения придется вручную. Если в мобильной версии задумана анимация или элементы отличаются от десктопа, тогда следует создать отдельный блок для показов на мобильных устройствах.
4. Для перенесенных изображений из Figma нужно будет подтвердить загрузку на Тильду. Это связано с тем, что картинки подтягиваются с серверов графического редактора. Подтвердить можно, выделив картинку и кликнув в настройках по кнопке «Upload to Tilda».

Такой оперативный способ переноса дизайна отлично подойдет маркетологам и другим «недизайнерам», желающим замерить конверсионность новых лендингов и многостраничников. Получается, своего рода, тест-драйв, во время которого можно проанализировать взаимодействие пользователей с сайтом и доработать его до переноса на Битрикс или другую CMS.