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

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

  • автор:

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

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

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

Сначала потребуется получить API Access токен. Найти его можно в настройках аккаунта в вашей Фигме.

  1. Перейдите на главную страницу Фигмы и нажмите на фотографию профиля и выберете пункт Settings.
  2. Во вкладке Account перейдите к блоку Personal access tokens и введите любое название для токена, например, Tilda.
  3. Скопируйте полученный токен, он нам потребуется для переноса.
  4. Теперь выберите нужный для переноса Frame и скопируйте ссылку на него из адресной строки браузера.

Получение API Access токена в настройках Фигмы

На втором шаге переходим в Тильду и открываем нужный проект.

  1. Создайте новый Zero Block и нажмите на меню с тремя точками в правом верхнем углу. Здесь потребуется пункт Import.
  2. В открывшемся окне добавьте скопированную ранее ссылку на Frame и API токена, полученный в настройках Figma.

Импорт макета в Тильде

На этом собственно и всё. Если вы указали всё правильно, то макет импортируется в Зеро блок в течение 5-10 секунд.

Когда я верстаю рабочие макеты, то регулярно замечаю проблемы с переносом некоторых графических элементов. Например SVG переносятся с потерей цвета, а некоторые картинки имеют вес по 5-7мб, что недопустимо для веба.

После импорта макета рекомендую графику перезаливать уже с локального компьютера, предварительно хорошенько оптимизировать размер доступными онлайн инструментами.

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

Что важного в диджитал на этой неделе?

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

Статьи по теме:

  • Как настроить автоматическую смену даты с помощью скрипта
  • Как подготовить макет в Фигме к переносу в Тильду
  • Как кастомизировать заголовок в Тильде с помощью CSS
  • Как передать дополнительные поля из Тильды в Вебинар.ру

Автор */ Константин Булгаков —> Опубликовано 14/12/2022 20/02/2023 Рубрики Материалы, Практикум

Импорт из 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

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

Сегодня рассмотрим основные требования к макету в Фигме для последующего корректного импорта в Тильду.

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

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

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

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

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

Что важного в диджитал на этой неделе?

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

Статьи по теме:

  • Как кастомизировать заголовок в Тильде с помощью CSS
  • Как передать дополнительные поля из Тильды в Вебинар.ру
  • Как импортировать макет из Фигмы в Тильду
  • Как настроить автоматическую смену даты с помощью скрипта

Автор */ Константин Булгаков —> Опубликовано 12/12/2022 20/02/2023 Рубрики Материалы, Практикум

Как перенести в Тильду макет из Figma?

Чтобы автоматически импортировать макет из Figma в Zero Block требуется:

  1. Получить API Access токен
  2. Получить ссылку на frame
  3. Перейти в редактор Zero Block > Import
  4. Вставить ключ и ссылку и дождаться окончания импорта
  5. Перенести изображения по кнопке Upload to Tilda

Видео-инструкцию и информацию о требованиях к макету можно найти в Справочном центре https://help-ru.tilda.cc/zero/figma-import

Похожие вопросы
  • Как добавить стрелку в Zero Block?
  • Есть ли слои в Zero Block?
  • Как добавить направляющие линии в Zero Block?
  • Как в Zero Block настроить увеличение изображения по клику?
  • Что такое Tooltip (тултип) в Zero блоке?

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *