Главная
Сегодня, вместо того, чтобы заниматься версткой готового макета сайта, созданного в Фигма, можно самостоятельно экспортировать прототип в Тильду, сэкономив силы и время, чтобы без лишних ожиданий приступить к использованию сайта. Как показывает практика, перенос дизайна занимает не более чем 1 день – достаточно воспользоваться простой инструкцией по импорту макетов в этот популярный конструктор https://www.dmt.ru/publications/perenos-maketa-iz-figmy-v-tildu/.
Итак, как перенести макет из Фигмы в Тильду? Для начала, чтобы подгрузка всех частей прошла успешно и без ошибок, необходимо выполнить предварительные настройки. Разберем пример, состоящий из восьми блоков – в таком случае для каждого из них понадобится создание отдельного фрейма шириной 1200 точек с любой длиной, с модульной сеткой из 12 колонок – тогда при переносе макета ничего не съедет и не придется подгонять элементы друг к другу. Достаточно воспользоваться Layout grid.
Далее:
• Копируем необходимый нам блок целиком и вставляем в контейнер.
• Разгруппировываем все дочерние фреймы интересующего блока, чтобы их можно было изменять в Тильде, иначе они будут не кликабельны. Если переносится фрейм кнопки button, важно проследить за совпадением ширины текстового элемента и шейпа.
• Конвертируем все векторно-фигурные элементы в формат svg, все изображения – в формат jpg.
• Для корректной переноски линий дизайна задаем им критерий outline stroke.
• Ответственные картинки скачиваем из редактора и загружаем в Тильду отдельно – это позволит не портить исходное качество графики.
Как перенести фрейм макета в Тильду из Фигмы? Для этого нужно получить токен, сделать это легко по адресу Main Menu -> Help and account -> Account settings -> Personal access tokens -> Generate new token. Токен должен иметь имя. Сгенерированный ключ копируем в Тильду, создав новый zero block и выполнив import, предварительно нажав на точки в правом верхнем углу. Откроется окно с полем API Token для вставки ключа, и с полем Layout URL для добавления ссылки на фрейм макета, который ожидает переноса.
Загрузка фрейма занимает несколько минут, а иногда всего лишь 15 секунд – это зависит от особенности и числа его элементов. Повторяем операцию необходимое количество раз, создавая блоки zero block для вставки. Онлайн конструктор Тильда запомнит токен «по умолчанию» без необходимости копировать его каждый раз – придется только вписывать соответствующие ссылки для каждого нового фрейма. Такой простой способ переноса макета из Фигмы в Тильду подойдет для владельцев сайтов, не разбирающихся в верстке и дизайне.