Как перенести макет из Figma в Tilda: полный гайд
Чтобы создать красивый и функциональный сайт, не обязательно верстать его в Tilda. Иногда достаточно перенести готовый дизайн-макет из редактора Figma. В пошаговом гайде вместе с дизайнером Contented Ириной Лехнер разбираемся, почему перенос лучше делать по блокам и сколько это займет времени.
освойте профессию
веб-дизайнер с нуля
Содержание
- Преимущества и возможности Figma
- Преимущества и возможности Tilda
- Зачем переносить макет из одного конструктора в другой
- Правила переноса макета из Figma в Tilda
- Этапы переноса макета из Figma в Tilda
- Разница между ручным и автопереносом
- Полезные советы для переноса макета
- Ошибки и ограничения при импорте макета
Преимущества и возможности Figma
профессия веб-дизайнер
Станьте опытным повелителем веб-пространства
Figmа — графический редактор, в котором можно отрисовать макет сайта, добавить векторную графику и иллюстрации. Именно им чаще всего пользуются веб-дизайнеры для создания первичных моделей своих проектов.
- Интуитивно понятный интерфейс. Можно научиться им пользоваться за несколько часов.
- Десктоп и онлайн-версии. Работа в приложении или в браузере.
- Автоматическое сохранение изменений. Функция поможет не потерять данные.
- Ускорение рабочего процесса с помощью компонентов иавтолейаутов — инструментов для автоматической корректировки размеров фрейма по мере изменения его содержимого. Это помогает объектам внутри фрейма не вылезать на поля, поэтому не придется каждый раз подгонять их вручную.
профессия веб-дизайнер
Станьте опытным повелителем веб-пространства
Преимущества и возможности Tilda
Tilda — это удобный конструктор сайтов. Именно Tilda делает макет рабочим инструментом — туда дизайнер переносит дизайн и настраивает его под заданные цели. Например, что будет происходить при нажатии на кнопку, куда приходят заявки и так далее.
- Легко разобраться. Сверстать сайт можно даже интуитивно. Знать языки программирования или английский для этого не обязательно.
- Создание персональной дизайн-системы. В Tilda можно сохранять сверстанные блоки в собственную библиотеку, чтобы можно было использовать их повторно, не копируя все настройки вручную. Она появится на главном экране рядом со стандартной библиотекой. Загрузить можно до двухсот своих блоков.
- Библиотека готовых изображений. Бесплатные иллюстрации, иконки и векторы для своего сайта можно найти, кликнув по иконке с лупой или перейдя по ссылке «Искать в библиотеке».
Зачем переносить макет из одного конструктора в другой
У этих инструментов разные цели, задачи и функционал. В Figma можно собирать прототипы сайтов и делать их интерактивными, отрисовывать дизайн-макеты сайтов и приложений, редактировать растровые изображения. А также сразу показать, как будет выглядеть дизайн на компьютере, планшете или смартфоне.
Но опубликовать в интернете сайт не получится, и выполнять свои функции он не будет. Это просто статичная картинка, удобная, например, для демонстрации дизайна заказчику. Чтобы все элементы стали активными, можно найти верстальщика, который переведет изображение в HTML и предоставит готовый сайт. Но гораздо проще и дешевле перенести макет в Tilda. Там можно собрать сайт полностью самостоятельно.
Кажется, что еще проще было бы собрать макет сразу в Tilda, но у такого решения есть много минусов:
- На сервисе нет возможности фиксировать параметры внутри блока, поэтому при изменении текста другие элементы могут сместиться. В ZeroBlock они не подстраиваются автоматически.
- Нет библиотеки стилей, которая позволяет настроить все блоки в едином стиле. Каждый придется настраивать вручную.
Правила переноса макета из Figma в Tilda
Первое и важное правило: размеры должны совпадать. В Figma нужно создать фрейм с таким же размером и сеткой, как вTilda. Размеры фрейма: ширина обязательно должна быть 1200px, высота — на ваше усмотрение. Обычно используется 650px.
Сетка для этого фрейма — 12 колонок. Ширина колонки, которая регулируется параметром Width — 60px, межколонник под параметром Gutter — 40px. Далее сетку нужно расцентровать посередине. За это отвечает параметр Type-center. Размеры шрифтов нужно поставить на 1:1.
У элементов должны быть правильные названия, чтобы они сохранили свой формат при импорте. Изображения нужно назвать «Image», векторы — «Svg», а фигуры и формы — «Shape». Блоки нужно делать в отдельных фреймах, а не собирать в группы, потому ссылки в Figma создаются на фреймы.
какая профессия
в дизайне вам подойдет?
Ответьте на 10 вопросов и узнайте, какая дизайн-специальность вам подходит
Пройти тест
Этапы переноса макета из Figma в Tilda
-
Отрисовка макета Сначала самое творческое — отрисовываем макет в Figma. Когда он готов, переходим в настройки аккаунта — «settings».
Генерируем в Figma токен Это уникальный IP, по которому браузер понимает к какому аккаунту нужно обращаться. Он нужен для подтверждения подлинности пользователя — что от его лица можно совершать операции с макетом. Для этого пролистываем вниз до раздела «personal access token».
Подготовка токена Нажимаем на «generate new token». В появившемся окне задаем название токена, например, Tilda и нажимаем на «generate token». Она находится чуть ниже. Токен готов.
Копируем токен Копируем его, нажав на текст под ним — «copy this token».
Выбираем «import» Переходим в Tilda, заходим в ранее созданный Zero Block. «Нулевой блок» — это встроенный конструктор, который дает возможность располагать элементы интерфейса в свободном порядке, делать страницы сайта многослойными, использовать анимации и сложную типографику. Нажимаем на иконку многоточия. Здесь нужно выбрать пункт «import».
Вставка токена В появившемся окне в поле «API TOKEN» вставляем наш токен из Figma.
Выбираем блок для переноса Возвращаемся в Figma и выбираем блок, который хотим перенести. Нажимаем кнопку «share».
Копируем ссылку В появившемся окне копируем ссылку на этот блок. Она будет в самом низу слева — надпись «copy link» со значком скрепки.
Импортируем макет Снова переходим в Tilda и добавляем эту ссылку в поле «LAYOUT URL». Оно будет в том же окне, куда мы добавляли «API TOKEN» — иконка многоточия, список с горячими клавишами. Нажимаем на кнопку «import», немного ждем и готово.
В дальнейшем эта процедура станет еще проще, потому что «API TOKEN» нужно указывать в браузере только один раз. Дальше он будет отображаться по умолчанию. Нужно будет только менять «LAYOUT URL» на блоки.
Разница между ручным и автопереносом
| Автоперенос | Импорт вручную |
|---|---|
| Гораздо быстрее, чем ручной способ. | Повторная сборка сайта еще и в Tilda будет двойной работой. |
| При создании лендинга с нуля, его проще собрать в Figma, согласовать с заказчиками и перенести в Tilda. В Figma проще вносить изменения текста, структуры и верстки. Сразу видно, где и какой блок сайта лучше смотрится, как стоит расположить в нем контент и какой цвет задать. | Подойдет для случаев, когда лендинг уже сверстан и работает, но нужно добавить новый блок или сделать редизайн готового. Возвращаться обратно в Figma будет слишком долго, поэтому проще заменить некоторые элементы вручную. |
Полезные советы для переноса макета
Импорт изображений
Изображения лучше импортировать отдельно из Figma на компьютер и уже с него загружать в Tilda. Это касается и векторных, и растровых картинок. Векторы не всегда загружаются как нужно, а растровые изображения лучше еще и уменьшить в весе, чтобы сайт быстрее грузился.
Перенос кнопок
Кнопки и формы тоже лучше не экспортировать из Figma в Tilda. Это связано с особенностями системы: они переносятся туда не как единый готовый элемент, а как отдельные единицы — тексты и шейпы. Формы и кнопки лучше создать уже в самой Tilda.
Поблочный перенос макета
Импорт макета сайта лучше делать поблочно, так как полное копирование приводит к тому, что создается единый Zero Block. Если такое случится с лонгридом на несколько тысяч пикселей, то работа по разделению на блоки займет много времени. Еще часть придется потратить на адаптацию.
Ошибки и ограничения при импорте макета
Ошибиться достаточно сложно, ведь макет сайта все равно перенесется. В худшем случае, его придется немного подправить, но это не критично.
Перенос уникальных эффектов
Если в макете используется эффект, который невозможно воспроизвести в ZeroBlock, он перенесется в виде картинки.
Импорт анимаций
Анимации не получится импортировать одним кликом. В Tilda их все равно придется настраивать вручную.
Срок хранения фотографий
Если не сохранить фотографии на сервере Tilda, они будут храниться всего один месяц. Поэтому лучше позаботиться об этом сразу. При переносе дизайна уведомление об этом появится в верхней части экрана.
Загрузка фонового изображения
Фоновую фотографию нельзя загружать как обычную картинку. Она перенесется в Tilda как стандартное изображение и все параметры придется подгонять вручную. Поэтому нужно загрузить ее в отдельный фрейм и в параметре выбора цвета переключиться с «Solid» на «Image».
Научитесь придумывать крутые сайты, отличающиеся от однотипных конструкторов — от стильных иконок до продуманного UX/UI. И получите опыт, который поможет начать карьеру.
КАК ИЗ ФИГМЫ ПЕРЕНЕСТИ В ТИЛЬДУ
Чтобы перенести дизайн, созданный в Figma, в Tilda, необходимо выполнить следующие шаги:
1. Экспортировать дизайн из Figma в формате PNG или JPG. Для этого выберите нужный макет и нажмите «Export» в верхнем меню слева. Затем выберите нужный формат и размер изображения, подходящий для сайта на Tilda.
2. Создать блок на странице Tilda, который будет соответствовать размеру и расположению дизайна из Figma. Для этого воспользуйтесь инструментами редактирования страницы Tilda.
3. Загрузить экспортированное изображение в созданный блок. Для этого нажмите на созданный блок, выберите «Загрузить картинку» и выберите загруженное ранее изображение.
4. Необходимо также настроить интерактивные элементы в Tilda, такие как кнопки и ссылки, которые соответствуют дизайну из Figma, чтобы соблюдать единый стиль.
Автоматический импорт макета из Figma в Tilda — Как быстро перенести дизайн из фигмы в тильду?
Как перенести дизайн сайта из Figma на Tilda — Из фигмы в тильду
Фигма или Тильда? Зачем нужна Figma, если есть Tilda?
Импорт макета из figma в tilda — Tilda Zero Block
Импорт макета из Figma в Tilda — Подробная инструкция — 7 минут урок
Как автоматически перенести дизайн из Figma в Tilda
Figma с нуля за 1 час! (уроки веб дизайна для начинающих)
ИМПОРТ ИЗ FIGMA В TILDA — ПЕРЕНОС В КОНСТРУКТОР
Бесплатный курс по Тильда с нуля. Перенос макета из Figma в Tilda. 1 урок (1 часть)
Импорт из 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 ₽
Получить подборку бесплатно
Уже скачали 24145
Достоинства Тильды не ограничиваются вышеперечисленным. Если говорить про тариф Personal, чтобы им пользоваться в течение 30 дней, придется заплатить 500 р. Месячное использование Business обойдется уже в 1 000 р.
Важно! В случае, когда вы хотите приобрести тариф на год, в качестве подарка вам предоставят домен.
Достоинства конструктора сайтов Тильда:
- Этим сервисом просто пользоваться. Данный конструктор сайтов удобен и понятен, даже если вы новичок, быстро справитесь со своей задачей. Функционал разделен на несколько блоков, поэтому вы сможете своими руками создать сайт действуя интуитивно. Есть огромное количество готовых шаблонов, причем с каждым годом их становится все больше. Чтобы сделать сайт, потребуется только пройти регистрацию, а затем выполнить простую последовательность действий. Не обязательно знать языки программирования. Процесс конструирования визуализирован, главное выбрать то, что вы хотите.
- С помощью Тильда получится сделать привлекательный и необычный сайт. Такой результат вы получите, даже если будете конструировать его из шаблонов. Результат будет еще более великолепным, если вы разбираетесь в веб-дизайне, можете создать пошаговые анимации, понимаете, как это будет функционировать на сайте. Поэтому ресурс будет привлекать пользователей за счет красивой визуальной составляющей, даже если полезного контента на сайте пока недостаточно.
Читайте также
Преимущества работы в Figma
Figma используют специалисты, занимающиеся дизайном, а также рекламисты, менеджеры или веб-разработчики. Какие достоинства есть у Фигма и почему многие предпочитают данный конструктор сайтов? Поговорим об этом далее.
В Figma получится отрисовать элементы интерфейса, сделать интерактивный макет сайта и приложения, иллюстрации, векторную графику. Большинство веб-дизайнеров создают в Фигме прототипы сайтов для Tilda.
Прототип представляет собой модель сайта либо приложения. Заказчик оценивает прототип, чтобы понять, насколько пользователям будет удобно работать с продуктом. Для создания прототипа дизайнер должен отрисовать экраны и связать их друг с другом.
В Figma получится продемонстрировать клиенту, как сайт будет смотреться на разных устройствах.
Элементы интерфейса являются внешним видом сайта. С помощью этого конструктора сайтов получится сделать кнопки, иконки, формы обратной связи, а также выполнить настройку эффектов. К примеру, создать кликабельные кнопки, раскрыть списки, сделать анимацию для блоков и попапов.
В этом конструкторе сайтов вы найдете все необходимые инструменты, чтобы работать с векторными изображениями, с помощью Фигмы можно экспортировать их в формат SVG, импортировать векторные изображения из AdobeIllustrator или редактора Sketch.
Для вас подарок! В свободном доступе до 26.11 —>
Скачайте ТОП-10
бесплатных нейросетей
для программирования
Помогут писать код быстрее на 25%
Чтобы получить подарок, заполните информацию в открывшемся окне
Данный конструктор сайтов подходит не только для веб-дизайнеров. Чтобы узнать, в каких нестандартных ситуациях можно использовать Фигму, можно посмотреть в разделе Templates.
Если вы занимаетесь бизнесом, SMM или же работаете менеджером проектов, то сможете вести в Figma проекты с Диаграммой Ганта, разрабатывать рекламу с шаблонами для Фейсбука*.
Веб-разработчики оценят режим Developer Handoff, в котором можно использовать направляющие для определения дистанции до объектов, их параметры, копировать CSS-стили элементов, а также код для Android и iOS.
В Фигме создана единая среда, чтобы можно было работать совместно с коллегами, разрабатывая дизайн. Это – главное отличие данного конструктора от других графических редакторов. Благодаря этой особенности разработчики всегда будут знать, что макет был изменен, а менеджер сможет отслеживать, на каком этапе находится создание проекта, заказчик будет комментировать дизайн непосредственно в конструкторе.
Дарим скидку от 60%
на обучение «Дизайнер» до 26 ноября
Уже через 9 месяцев сможете устроиться на работу с доходом от 150 000 рублей
Почему многие выбирают Figma, чтобы работать вместе с командой:
- Это конструктор является кроссплатформенным. Вы сможете работать в нем как из браузера, так и с планшета с любой ОС. Не придется устанавливать приложения и согласовывать дизайн.
- Облачный сервис. Поскольку Figma является онлайн-конструктором, итоговые результаты хранятся в облаке, поэтому доступ к проекту открыт всем членам команды. Каждый из них может увидеть внесенные корректировки, восстановить резервную копию, если это потребуется.
- Фидбек. Пользователи имеют возможность комментировать проект прямо в макете и получать обратную связь от других членов команды. История переписки будет сохранена, получится быстро согласовать макет.
Только до 27.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а:
- Прежде всего получаем API Accessтоке на Figma в настойках вашего аккаунта;
- Передаем токен в настройках экспорта ваешго зеро-блока.
Как видите, ничего сложного нет, но чтобы стало понятнее, рассмотрим детально.
Для получения токена Figma заходим в настройки вашего аккаунта (Mainmenu>Helpandaccount>Accountsettings).
Пролистываем до пункта Personalaccesstokens, указываем название, к примеру, Tilda.
Хотите создавать собственные визуальные шедевры? Вам по плечу стать веб-дизайнером с нашим курсом. Погрузитесь в мир композиции, типографики и UX, научитесь воплощать идеи в Figma, Photoshop и Tilda, и сделайте первые шаги к созданию уникальных сайтов.
Спустя 2-3 секунды токен будет сформирован. Вы должны скопировать его выполнить перенос из Figma в Tildа. Чтобы сделать это, нужно открыть проект и создать зеро-блок. Затем необходимо перейти в его редактирование и выбрать параметр Import.