Из Figma в Tilda
Как перенести дизайн из редактора Figma на сайт Tilda Publishing.
Содержание
Шаг №1. Получение API Access токена в Figma
Открываем Figma в браузере.
Переходим на главную Figma и нажимаем на фотографию своего профиля → Settings.
Переходим на главную Figma и нажимаем на фотографию своего профиля → Settings.
Во вкладке Account переходим к блоку Personal access tokens
Вводим название токена, например, Tilda.
Копируем значение токена, чтобы использовать его для импорта.
Шаг №2. Импорт макета в Zero Block Tilda
В пустом Zero Block нажимаем на меню с тремя точками внутри Zero Block и нажимаем на пункт Import.
В открывшемся окне в поле API Token вставляем наш токен из Figma.
Переходим в Figma. Открываем наш макет, выберите нужный Frame, в адресной строке копируем ссылку на Frame.
В открывшемся окне на Tilda добавляем ссылку на Frame в поле Layout URL.
Нажимаем кнопку Import.
Нажимаем кнопку Import.
Ждем, пока макет импортируется.
Если мы добавили правильную ссылку и со стороны API Figma не происходили ошибки, то макет импортируется в Zero Block.
Обратите внимание, что по умолчанию изображения грузятся с серверов Figma, поэтому для загрузки их в Тильду нужно зайти в настройки элементов с изображениями и нажать на кнопку Upload to Tilda.
Требования к макету и особенности импорта
Макет (Layout)
Макет необходимо создавать на фрейме с шириной в 1200 px.
Импортировать макет лучше блоками, а не добавлять весь макет в один блок.
Импортировать макет лучше блоками, а не добавлять весь макет в один блок.
Группы элементов
Любую группу можно импортировать картинкой, для этого в названии нужно указать image. Если указать svg, то будет svg формат.
Доступен импорт групп, если внутри есть другие группы, то все элементы будут в группе первого уровня.
Доступен импорт групп, если внутри есть другие группы, то все элементы будут в группе первого уровня.
Кнопки и шейпы
Для импорта кнопки необходимо объединить шейп и текст в группу и добавить в название button, учитывается выравнивание текста, так что текст лучше делать шириной как шейп
Если на шейпе есть эффект, который нельзя воспроизвести в Zero, то он импортируется с изображением эффекта на фоне.
Если на шейпе есть эффект, который нельзя воспроизвести в Zero, то он импортируется с изображением эффекта на фоне.
Все доступные названия для элементов
button - для кнопок
image - для картинок
vector или svg - для иконок
shape - для фона и шейпов
image - для картинок
vector или svg - для иконок
shape - для фона и шейпов