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

How to Import a Figma Design to Your Website

Click on the three dots menu in the upper right corner in Zero Block and select «Import» from the drop-down menu.

On Figma, select the Layout you want in the Layers panel and copy its link from the browser address bar.

Paste this link to the Layout URL field and add the API token obtained in the Figma settings to the API Token field.

Wait until the layout is imported.

If you have entered the correct link and there are no errors on the Figma API side, the layout will be imported to Zero Block.

Note: By default, images are downloaded from the Figma servers. So if you want to upload them to Tilda, you need to go to the settings of the elements containing images and click on Upload to Tilda.

Layout requirements and import features

Layouts must be created on a frame with a width of 1200px.

We recommend importing the layout to several blocks rather than adding the entire layout to just one.

Any group can be imported as an image. For this, you need to specify «image» in the group name on Figma. If you specify «svg,» it will be imported as an SVG file.

You can import groups, too. If there are other groups inside, all elements will be in the first-level group.

Shapes and buttons

To import a button, you need to merge the shape and text into a group and name it as «button.»

The text alignment property will also be imported, so we recommend that you make the width of the text element the same as the shape.

If the shape has an effect that cannot be reproduced in Zero Block, it will be imported with the effect image in the background.

Импорт из Figma

Во вкладке Account перейдите к блоку Personal access tokens и введите название токена, например, Tilda.

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

Импорт макета в Zero Block
Нажмите на меню с тремя точками внутри Zero Block и нажмите на пункт Import.

Перейдите в Figma. Откройте макет (Layout), выберите нужный Frame, в адресной строке скопируйте ссылку на Frame.

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

Подождите, пока макет импортируется.

Если вы добавили правильную ссылку и со стороны API Figma не происходили ошибки, то макет импортируется в Zero Block.

Обратите внимание, что по умолчанию изображения грузятся с серверов Figma, поэтому для загрузки их в Тильду нужно зайти в настройки элементов с изображениями и нажать на кнопку Upload to Tilda.

Требования к макету и особенности импорта
Макет (Layout)

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

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

Группы элементов

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

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

Кнопки и шейпы

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

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

Разделы «Справочного центра»:

• Как устроена Тильда
• Настройки сайта
• Редактирование страницы
• Продвижение сайта

• Домен и сертификат
• Интернет-магазин
• Формы приёма данных
• Статистика сайта

• Zero Block
• Конструктор писем
• Тарифы и платежи

• Потоки и новости
• Личный кабинет
• Разработчикам

Сообщить о нарушении прав

Если вы считаете, что пользователь Tilda Publishing нарушает ваши права, отправьте нам сообщение через форму

Как связаться с поддержкой

Для консультаций по функциям платформы используйте форму обратной связи в вашем личном кабинете или напишите на team@tilda.cc

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

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

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

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

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

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

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

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

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

Узнай, какие ИТ — профессии
входят в ТОП-30 с доходом
от 210 000 ₽/мес
Павел Симонов
Исполнительный директор Geekbrains

Команда GeekBrains совместно с международными специалистами по развитию карьеры подготовили материалы, которые помогут вам начать путь к профессии мечты.

Подборка содержит только самые востребованные и высокооплачиваемые специальности и направления в IT-сфере. 86% наших учеников с помощью данных материалов определились с карьерной целью на ближайшее будущее!

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

Павел Симонов
Исполнительный директор Geekbrains

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

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

Подборка 50+ бесплатных нейросетей для упрощения работы и увеличения заработка

Только проверенные нейросети с доступом из России и свободным использованием

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

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

Получить подборку бесплатно
Уже скачали 24076

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

Важно! В случае, когда вы хотите приобрести тариф на год, в качестве подарка вам предоставят домен.

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

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

Читайте также

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

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

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

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

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

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

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

Для вас подарок! В свободном доступе до 19.11 —>
Скачайте ТОП-10
бесплатных нейросетей
для программирования
Помогут писать код быстрее на 25%
Чтобы получить подарок, заполните информацию в открывшемся окне

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

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

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

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

Дарим скидку от 60%
на обучение «Дизайнер» до 19 ноября
Уже через 9 месяцев сможете устроиться на работу с доходом от 150 000 рублей

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

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

Только до 23.11
Скачай подборку материалов, чтобы гарантированно найти работу в IT за 14 дней
Список документов:

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

20 профессий 2023 года, с доходом от 150 000 рублей

Чек-лист «Как успешно пройти собеседование»

Чтобы зарегистрироваться на бесплатный интенсив и получить в подарок подборку файлов от GeekBrains, заполните информацию в открывшемся окне

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

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

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

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

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

При переносе макета из 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.

Хотите создавать собственные визуальные шедевры? Вам по плечу стать веб-дизайнером с нашим курсом. Погрузитесь в мир композиции, типографики и UX, научитесь воплощать идеи в Figma, Photoshop и Tilda, и сделайте первые шаги к созданию уникальных сайтов.

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

Разработка сайта для РО «Стоп Займ» и переезд на Тильду

С тульским филиалом компании Стоп Займ мы начали сотрудничество примерно с апреля 2021 года. Мы оказывали услуги ведения рекламной кампании в Яндекс.Директе. Еще на этапе запуска рекламы мы четко дали понять, что её успех будет во многом зависеть от посадочной страницы. Мы даже предлагали разработать посадочную страницу под рекламу у нас, но ребята решили приобрести готовый сайт у другого филиала. Конечно это дало возможность быстрее запустить продажи, ведь сайт уже был настроен и готов к обработке посетителей.

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

Что мы предложили

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

Проблемы исходного сайта

У сайта были разного рода технические недоработки, но не критичные для его работоспособности сайта. Поправить их все же было важно, но что самое критичное – это то, что влияет на впечатление и продажи соответственно, а именно интерфейс и косяки в UI/UX.

Проблемы интерфейса:

1. сильно пустая шапка сайта (хедер);
2. в области промо экрана за внимание пользователя конкурируют 2 разных действия;
3. в некоторых местах перебор с выделениями;
4. некоторые блоки сильно перегружены информацией;
5. футер сайта перед картой очень сухо призывает оставить заявку.

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

К моменту переработки сайта, реклама набрала определенную статистику по трафику. У сайта уже был достигнут определенный уровень конверсии, в частности, как из-за дизайна, так и из-за функционала самого сайта.

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

Особенности проекта

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

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

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

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

Также, на этом проекте мы опробовали революционное обновление Тильды – перенос макетов из Фигмы в зеро-блоки Тильды, через Api своего токена. Чуть подробнее о том, как это делается в нашей статье: «Перенос макета из Figma в Tilda».

На этапе верстки дизайна 12 из 16 блоков пришлось делать с помощью ZeroBlock модулей. Остальные 4 блока собирались с помощью стандартных блоков, для удобства заполнения контентом.

Так как большая часть сайта состояла из Zero-блоков, их понадобилось адаптировать под мобильные устройства. Это означает переверстать по 4 раза каждый блок из всех 12-ти под четыре разные мобильные разрешения — 320, 480, 560 и 980 пикселей.

Сверстанный и адаптивный сайт осталось настроить до боевой готовности. В работу по настройке обычно входят:

• модальные окна;
• фавикон;
• обложки страниц;
• страница 404;
• страница политики обработки персональных данных;
• HEADER и FOOTER;
• подключение домена;
• заголовки (TITLE) и описания (DESCRIPTION) страниц;
• формы приема заявок;
• базовые анимации;
• CRM-система Тильды (Tilda);
• SSL-сертификат Тильды (Tilda).

Итого сайт был запущен, на все про все у нас ушло ровно 5 дней, а результат порадовал всех. Проведенное А/Б тестирование показало, что конверсия на новом сайте стала лучше.

Да и самое главное мы теперь можем легко, не завися от программистов, развивать и расширять сайт.

Вывод

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

И как мы видим Тильда успешно справилась с такой задачей.

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