Как перенести сайт из figma в tilda

Как импортировать дизайн из Figma в Tilda. Пошаговый гайд

Как владельцы сайтов и дизайнеры знают, красивый и привлекательный дизайн — это ключевой фактор для успешного онлайн-бизнеса. Один из самых популярных инструментов для создания дизайна веб-сайтов – Figma, позволяет дизайнерам создавать профессиональные макеты в наглядном формате, который легко редактировать и экспортировать. Однако, само создание дизайна – только половина битвы. Чтобы веб-сайт выглядел так же привлекательно, как на макете, дизайн нужно перенести на платформу для создания сайтов, такую как Tilda. Именно в этом процессе часто возникают сложности, и поэтому в этой статье мы рассмотрим, как быстро и эффективно импортировать дизайн из Figma в Tilda.

Подготовка дизайна в Figma для импорта в Tilda

Прежде чем начать импортировать дизайн из Figma в Tilda, необходимо убедиться, что дизайн подготовлен правильно. Вот несколько советов, которые помогут вам подготовить дизайн в Figma для импорта в Tilda:

1. Используйте правильные размеры и разрешение: Проверьте размеры и разрешение дизайна в Figma, чтобы убедиться, что они соответствуют размеру вашего Tilda-проекта. Рекомендуем использовать размеры 1200×800 пикселей или 1920×1080 пикселей.
2. Группируйте элементы: если вы работаете с большим макетом, убедитесь, что все элементы группируются и названы правильно. Это поможет вам легко найти нужные элементы в процессе импорта в Tilda. Если ваш макет будет состоять только из одного фрейма, то импорт в Тильде будет неэффективным. Необходимо, чтобы каждая секция (блок) сайта была в отдельном фрейме. Это позволит разбить макет на отдельные zero блоки в Tilda Publishing.
3. Экспортируйте отдельные элементы: если у вас есть несколько элементов, которые вы хотите экспортировать из Figma, вы можете сделать это, выделив эти элементы и экспортировав их в отдельные файлы. Это может существенно упростить процесс импорта.
4. Используйте названия слоев: Назовите все слои и группы в Figma, чтобы легко понимать, какие элементы соответствуют каким частям вашего Tilda-сайта. Например: главный экран, второй блок, контакты, подвал и т.д.

После того, как дизайн в Figma подготовлен, вы можете начать процесс импорта в Tilda.

Как и где получить API Token, чтобы импортировать дизайн из Figma в Tilda

Итак, предположим, что вы разбили макет в Figma на отдельные фреймы (сгруппировали) и полностью подготовили его к импорту.

Дальше вам необходимо выполнить следующие шаги:

1. Нажмите на иконку в виде домика в левом верхнем углу окна фигмы, чтобы попасть в главное меню.
2. В правом верхнем углу нажмите на иконку вашего аккаунта и выберите раздел «settings».
3. Пролистайте вниз и найдите раздел «Personal access tokens».
4. В поле «Create a new personal access token:» введите слово «Tilda» и нажмите клавишу «Enter».
5. Вы сгенерировали уникальный API Token для импорта дизайна в тильду.

Начало работы с Tilda: импорт дизайна из Figma

После того, как вы подготовили дизайн в Figma и получили API ключ, вы можете начать процесс импорта в Tilda. Вот шаги, которые нужно выполнить для импорта дизайна из Figma в Tilda:

1. Откройте конструктор Тильда и создайте zero block.
2. Войдите в редактор зеро блока и удалите из него элементы по умолчанию.
3. В правом верхнем углу нажмите на кнопку с тремя точками и выберите раздел «Import».
4. Скопируйте и вставьте полученный в Figma API ключ в поле «API TOKEN».
5. Откройте в Figma импортируемый макет.
6. В правом верхнем углу нажмите на кнопку «Share».
7. В открывшемся окне нажмите на «Copy link».
8. Вернитесь в редактор zero block и вставьте скопированную ссылку в поле «LAYOUT URL».
9. Нажмите на кнопку «Import».
10. Спустя некоторое время ваш Figma макет автоматически импортируется в зеро блок.

Оптимизация импортированного дизайна из Figma в Tilda

После того, как вы импортировали дизайн из Figma в Tilda, необходимо оптимизировать его для достижения лучшего результата. Вот несколько советов, которые помогут вам оптимизировать импортированный дизайн:

Разделите макет на несколько блоков

После импорта макет будет отображаться только в одном зеро блоке. Если вы подготовили макет правильно и разделили его на отдельные фреймы или группы, то вы можете легко разбить макет на несколько отдельных зеро блоков. Для этого:

1. Продублируйте zero block с макетом.
2. Зайдите в первый блок, в меню со слоями удалите все фреймы, кроме первого. Таким образом, в первом зеро блоке у вас будет только один блок из вашего макета.
3. После этого измените высоту зеро блока так, чтобы она соответствовала размерам одного блока вашего макета и учитывала все предусмотренные отступы.
4. Продублируйте второй zero block с макетом, чтобы получить третий такой же.
5. Во втором блоке ужалите все фреймы, кроме второго, соответственно. И так до тех пор, пока не разделите весь макет на отдельные зеро блоки.

Проверьте и сократите размеры файлов

Проверьте, что размеры импортированных изображений соответствуют размерам блоков на вашем Tilda-сайте. Если изображения слишком большие, это может замедлить загрузку страницы. Рекомендуется использовать изображения с размерами, близкими к размерам блоков на вашем Tilda-сайте. Если вы обнаружили, что размер файлов изображений слишком велик, вы можете использовать специальные инструменты для сжатия изображений, такие как TinyPNG или Compressor.io, чтобы уменьшить размер файлов без ущерба для качества.

Следуя этим советам, вы сможете оптимизировать импортированный дизайн из Figma в Tilda и достичь лучшего результата на вашем Tilda-сайте.

Заключение

Импорт дизайна из Figma в Tilda — это быстрый и удобный способ создать красивый и профессиональный сайт. С помощью нашего гайда вы можете легко импортировать дизайн из Figma в Tilda и быстро настроить его в соответствии со своими потребностями. Однако, не забывайте, что процесс импорта — это только начало вашего пути к созданию сайта. После того, как вы импортировали дизайн, необходимо настроить его и оптимизировать сайт для поисковых систем.

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

Мы надеемся, что наш гайд поможет вам создать отличный сайт на Tilda с дизайном из Figma! А если вы хотите узнать больше о функциональности Figma, то советуем почитать нашу статью с подборкой интересных плагинов и расширений для Fugma.

Перенос макета из Figma в Tilda

Ни для кого не секрет, что конструкторы сайтов вроде Tilda созданы в первую очередь для дизайнеров, хотя сайт может сделать кто угодно и без навыков дизайна. И все же философия платформы базируется на отказе от кода, что сильно удешевляет и упрощает работу над проектами. Поэтому, имея в своем арсенале уникальные инструменты, с помощью Тильды у дизайнеров развязываются руки на полную.

О преимуществах Tilda мы уже писали тут, если кому-то интересно обязательно ознакомьтесь, а мы разберем особенность последнего нововведения.

Как работает перенос дизайна из Figma

1. Нужно получить API Access токена Figma в настойках своего аккаунта;
2. Передать этот токен в настройках экспорта своего зеро-блока;
3. PROFIT.

А теперь поподробнее

Чтобы получить токен Figma мы отправляемся в настройки своего аккаунта (Main menu > Help and account > Account settings).

Далее, пролистайте до пункта Personal access tokens и пропишите там любое название, например, Tilda.

Через пару секунд, сформируется токен (выделено желтым). Теперь нужно скопировать этот токен и передать его в Тильду. Для этого открываем ваш проект и создаем зеро-блок. Переходим в его редактирование и выбираем в меню параметр Import.

В открывшемся окне нужно будет вставить полученный токен и ссылку на конкретный фрейм из вашего макета, который вы хотите экспортировать. Для этого выделите нужный фрейм, нажмите кнопку Share и скопируйте ссылку на него в открывшемся поп-апе, нажав на ссылку Copy link:

Как только вы указали токен и ссылку на фрейм, нажимайте кнопку Import и ожидайте загрузку. Готово!

Теперь токен будет привязан к проекту на Tilda. Когда вам потребуется в следующий раз выгрузит очередной блок из Figma, то вы создадите новый зеро-блок, откроете параметры экспорта и укажите лишь ссылку на нужный блок в Figma и все!

Требования к макетам Tilda

Чтобы ваши дизайны корректно экспортировались, нужно соблюдать некоторые правила. У Тильды есть подробная статья об этом. Правда я дам более расширенное описание этих требований, потому что некоторые вещи не описаны в гайде от Тильды, я выявил их самостоятельно:

1. Делайте ваши блоки в отдельных фреймах, а не группах, так как ссылка в Figma формируется именно на фрейм.

2. Не объединяйте фреймы ваших блоков в один общий фрейм страницы, иначе при экспорте в зеро-блок загрузится дизайн всей страницы, а не нужный вам блок.

3. Любую группу и фрейм можно экспортировать как картинку, так и svg. Для этого им нужно присвоить название Image или Svg.

4. Придерживайтесь ширины фрейма 1200 пикселей. Tilda похоже работает на сетке Bootstrap или очень на неё похожей. Так что можете использовать для Figma настройки 12-ти колоночной сетки (12/70/30). Поэтому если даже ваши фреймы будут размером, например, 1920px, но выравнивание будет по такой сетке, то они все равно корректно экспортируются. Единственное после экспорта нужно будет лишь слегка подвинуть загруженное.

5. Если хотите, чтобы картинка внутри блока экспортировалась как картинка, то назовите её (или группу её элементов) как Image. Работает и с фреймом.

6. Если хотите, чтобы ваши векторные элементы экспортировалась как векторы, то назовите их (или группу их элементов) как Svg. Работает и с фреймом.

7. Если хотите, чтобы простейшие формы и фигуры внутри блока экспортировались как фигуры (шейпы), то назовите их Shape.

8. Чтобы кнопки экспортировались как кнопки, нужно объединить текстовый фрейм и фигуру в одну группу с название Button. При этом ширина фрейма текста, должна быть растянута на всю длину фигуры.

9. Любые группы объектов переносятся в зеро-блок тоже сгруппированными.

10. Не применяйте к элементам эффекты, которые не смогли бы сами воссоздать на Tilda. Тогда при экспорте они перенесутся 1 в 1.

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

Вывод

Белоусов Сергей, дизайнер сайтов на Tilda

Перенос макета из Figma в Tilda: как сделать быстро

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

Тем не менее, существуют определенные ограничения и особенности процесса переноса, которые необходимо знать до его начала. В нашей статье мы расскажем про принципы работы сервисов Figma и Tilda и подробно опишем правила и этапы переноса макета из одного в другой.

Преимущества и возможности сервиса Tilda

Tilda представляет собой новейший конструктор сайтов. Его главная особенность заключается в удобстве пользования.

Пользователь может выбрать один из трех тарифов, а именно:

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

Преимущества и возможности сервиса Tilda

Какие особенности есть у Tilda:

• Привлекательный внешний вид страницы. С помощью имеющихся шаблонов получится оптимизировать сайт с учетом ваших пожеланий.
• Визуальный контент подается наиболее удачным образом. В библиотеке есть огромное количество изображений, которые можно установить на страницу. Все что вам нужно – это перетащить файл, после чего ваши материалы будут загружены на ресурс. Чтобы пользователю было удобнее, есть коллекции иконок.
• Можно устанавливать видео- и аудиоконтент. Это поможет добавить оригинальности сайту, данный момент особенно важен, если вы занимаетесь бизнесом. Tilda может работать с другими сервисами, чтобы вы могли задействовать их возможности.
• Информация разделена по блокам. Такое решение позволяет сделать эксплуатацию сайта максимально удобной. Все что нужно сделать — это рассортировать данные, и процессы оптимизируются.

Достоинства Тильды не ограничиваются вышеперечисленным. Если говорить про тариф Personal, чтобы им пользоваться в течение 30 дней, придется заплатить 500 р. Месячное использование Business обойдется уже в 1 000 р.

Достоинства конструктора сайтов Тильда:

• Этим сервисом просто пользоваться. Данный конструктор сайтов удобен и понятен, даже если вы новичок, быстро справитесь со своей задачей. Функционал разделен на несколько блоков, поэтому вы сможете своими руками создать сайт действуя интуитивно. Есть огромное количество готовых шаблонов, причем с каждым годом их становится все больше. Чтобы сделать сайт, потребуется только пройти регистрацию, а затем выполнить простую последовательность действий. Не обязательно знать языки программирования. Процесс конструирования визуализирован, главное выбрать то, что вы хотите.
• С помощью Тильда получится сделать привлекательный и необычный сайт. Такой результат вы получите, даже если будете конструировать его из шаблонов. Результат будет еще более великолепным, если вы разбираетесь в веб-дизайне, можете создать пошаговые анимации, понимаете, как это будет функционировать на сайте. Поэтому ресурс будет привлекать пользователей за счет красивой визуальной составляющей, даже если полезного контента на сайте пока недостаточно.

Преимущества работы в Figma

Figma используют специалисты, занимающиеся дизайном, а также рекламисты, менеджеры или веб-разработчики. Какие достоинства есть у Фигма и почему многие предпочитают данный конструктор сайтов? Поговорим об этом далее.

Преимущества работы в Figma

В Figma получится отрисовать элементы интерфейса, сделать интерактивный макет сайта и приложения, иллюстрации, векторную графику. Большинство веб-дизайнеров создают в Фигме прототипы сайтов для Tilda.

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

В Figma получится продемонстрировать клиенту, как сайт будет смотреться на разных устройствах.

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

Скачивайте и используйте уже сегодня:

Топ-30 самых востребованных и высокооплачиваемых профессий 2023

Поможет разобраться в актуальной ситуации на рынке труда

Подборка 50+ ресурсов об IT-сфере

Только лучшие телеграм-каналы, каналы Youtube, подкасты, форумы и многое другое для того, чтобы узнавать новое про IT

ТОП-100 площадок для поиска работы от GeekBrains

Список проверенных ресурсов реальных вакансий с доходом от 150 000 ₽

Данный конструктор сайтов подходит не только для веб-дизайнеров. Чтобы узнать, в каких нестандартных ситуациях можно использовать Фигму, можно посмотреть в разделе Templates.

Преимущества работы в Figma

Если вы занимаетесь бизнесом, SMM или же работаете менеджером проектов, то сможете вести в Figma проекты с Диаграммой Ганта, разрабатывать рекламу с шаблонами для Фейсбука*.

Веб-разработчики оценят режим Developer Handoff, в котором можно использовать направляющие для определения дистанции до объектов, их параметры, копировать CSS-стили элементов, а также код для Android и iOS.

В Фигме создана единая среда, чтобы можно было работать совместно с коллегами, разрабатывая дизайн. Это – главное отличие данного конструктора от других графических редакторов. Благодаря этой особенности разработчики всегда будут знать, что макет был изменен, а менеджер сможет отслеживать, на каком этапе находится создание проекта, заказчик будет комментировать дизайн непосредственно в конструкторе.

Почему многие выбирают Figma, чтобы работать вместе с командой:

1. Это конструктор является кроссплатформенным. Вы сможете работать в нем как из браузера, так и с планшета с любой ОС. Не придется устанавливать приложения и согласовывать дизайн.
2. Облачный сервис. Поскольку Figma является онлайн-конструктором, итоговые результаты хранятся в облаке, поэтому доступ к проекту открыт всем членам команды. Каждый из них может увидеть внесенные корректировки, восстановить резервную копию, если это потребуется.
3. Фидбек. Пользователи имеют возможность комментировать проект прямо в макете и получать обратную связь от других членов команды. История переписки будет сохранена, получится быстро согласовать макет.

В ряде случаев требуется перенос макета из Figma в Tildа. К примеру, если вам необходима гибкая интерфейсная графика.

Правила переноса макета из Figmaв Tilda и небольшие нюансы

Чтобы правильно выполнить перенос макета из Figma в Tildа, придерживайтесь следующих рекомендаций:

• Выбирайте ширину фрейма в Figma 1200 px. Если этот параметр превышает данное значение, необходимо рядом сделать фрейм с требуемой шириной, скопировать все в него и сделать выравнивание по центру. На данном этапе у вас не возникнет сложностей, так как сетку в этом конструкторе, если проектируют дизайн под Тильду, делают 12 колоночную. Также можно постараться уместить все в 1160 пикселей.
• Смысловые блоки либо экраны разбивайте на фреймы. Когда дизайн сайта выполнен в Фигме в одном фрейме, следует разбить на каждый по отдельности фрейм. Идеально, когда ширина фрейма 1200, а высота нового фрейма такая же, как высота блока из готового дизайна.
• Кнопки в Figma следует объединять в группу слоев, также кнопки необходимо назвать Button. Таким образом кнопка в Фигме будет иметь шэйп (Rectangle) и текстовую составляющую. При этом у текста ширина контейнера должна равняться этому параметру у шейпа.
• Для импорта нескольких изображений следует назвать группу image или svg.

Следуйте этим простым правилам и тогда у вас получится сделать перенос макета из Figma в Tildа.

Правила переноса макета из Figma в Tilda

При переносе макета из Figma в Tildа обращайте внимание на следующие моменты:

• Не переносите формы.
• Группы из Фигмы можно перенести в Тильду следующим образом: если внутри одной группы есть другие группы, необходимо все переносить в первую.
• Придется адаптировать макет под остальные разрешения самостоятельно.
• Когда в Фигме на элементе установлен эффект, но при этом его нет в Тильде, эффект можно импортировать картинкой.
• Когда перенесете дизайн в Тильду, необходимо залить изображения на ее сервер, уведомление об этом появится в верхней части конструктора, нужно выбрать разрешение экрана, нажав соответствующую кнопку.
• Когда фотография не залита на сервер Тильды, изображения будут храниться один месяц.
• Не получится сделать импорт анимации из Figma в Tildа. Это значит, что вам нужно настроить анимацию вручную.
• Импортируя дизайн, элементы в Тильда нужно располагать по левому верхнему краю (Left, Top).
• Когда необходимо перенести верстку из Figma в Tildа, при этом изображение должно быть как фоновое, его следует загрузить во Frame. После этого выбираем Фрэйм, в Fill где выбор цвета, с Solid нужно переключить на Image. Когда изображение загружается как изображение, оно будет перенесено в новый конструктор как стандартная картинка. Тогда придется в настройках изменять позиционирование и параметры, к примеру, если нужно растянуть изображение на все разрешение экрана.

Этапы переноса макета из Figma в Tilda

Как сделать перенос дизайна из Figma в Tildа:

1. Прежде всего получаем API Accessтоке на Figma в настойках вашего аккаунта;
2. Передаем токен в настройках экспорта ваешго зеро-блока.

Для получения токена Figma заходим в настройки вашего аккаунта (Mainmenu>Helpandaccount>Accountsettings).

Пролистываем до пункта Personalaccesstokens, указываем название, к примеру, Tilda.

Спустя 2-3 секунды токен будет сформирован. Вы должны скопировать его выполнить перенос из Figma в Tildа. Чтобы сделать это, нужно открыть проект и создать зеро-блок. Затем необходимо перейти в его редактирование и выбрать параметр Import.

Импорт из Figma

Макет необходимо создавать на фрейме с шириной в 1200 px.

Импортировать макет лучше блоками, а не добавлять весь макет в один блок.

Любую группу можно импортировать картинкой, для этого в названии нужно указать image. Если указать svg, то будет svg формат.

Доступен импорт групп, если внутри есть другие группы, то все элементы будут в группе первого уровня

Для импорта кнопки необходимо объединить шейп и текст в группу и добавить в название button, учитывается выравнивание текста, так что текст лучше делать шириной как шейп

Если на шейпе есть эффект, который нельзя воспроизвести в Zero, то он импортируется с изображением эффекта на фоне.