Импорт из 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?
Как показал опрос, каждый пятый начинающий дизайнер не понимает, зачем нужна Фигма, если можно дизайнить сразу в Тильде? У опытных этот вопрос вызовет недоумение, а начинающим сложно. Давайте разбираться)
Если вам нужен дизайнер сделать сайт на Тильде — напишите нам. Мы пришлём контакты наших выпускников, кто поможет: t.me/StudyKvoBot
С одной стороны в Tilda есть редактор нулевого блока — Zero block и он похож на Фигму. Те же слои, инструменты, панель настроек. Но их возможности и назначение настолько отличаются, что сравнивать их будет некорректно.
Вся путаница возникает по одной причине — дизайнеры не понимают, как выстраивать процесс работы. Как работать с референсами, как экспериментировать с блоками, генерировать варианты и т. д. Кажется, что у Тильды и у Фигмы равные функции, но они созданы для разных этапов. Фигма — для генерации и дизайна, Тильда — для сборки чистовика.
Поэтому в видео помимо разницы Фигмы и Тильды разберём ещё то, как лучше всего выстраивать процесс работы. Чтобы и с таким вопросом разобраться, и чтобы дизайн был качественнее.
В ЧЕМ ОТЛИЧИЯ МЕЖДУ ДЕСКТОПНОЙ И БРАУЗЕРНОЙ ВЕРСИИ FIGMA
Графический редактор Figma доступен в двух версиях — десктопной и браузерной. Основное отличие заключается в мобильности и доступности платформы. Десктоп-версия позволяет работать с файлами на локальном компьютере и не требует доступа в Интернет.
Браузерная версия, в свою очередь, позволяет работать с проектами в любой момент времени и с любым устройства, где есть доступ в Интернет. Эта версия лучше всего подходит для командной работы над проектом, так как позволяет всем членам команды работать в реальном времени над одним и тем же прототипом или макетом.
Кроме того, пользователю не нужно устанавливать приложение на свой компьютер для работы с браузерной версией, так как все данные хранятся на сервере. Это позволяет быстро и легко подключиться к проекту в любой точке мира.
Однако, десктопная версия Figma имеет более широкие возможности по работе с файлами и интеграцию с другими приложениями на локальном компьютере. Например, работа с большими файлами может быть неудобной в браузерной версии, а на десктопе это происходит гораздо быстрее.
Каждая версия имеет свои преимущества и недостатки, и выбор зависит от конкретных условий и задач, которые необходимо решить.
Что выбрать? Photoshop, Sketch, XD или Figma?
Фигма или Тильда? Зачем нужна Figma, если есть Tilda?
Figma vs. Figjam – When to use which design tool?
Figma VS Adobe XD (2020) — Best Web Design Tool
Синхронизация макетов в фигме. Как открыть ссылку из браузера в декстопном приложении и наоборот
Что такое Figma и для чего она нужна?
Дизайн-система и UI-кит: в чем же разница?
Какой размер фрейма выбрать при создании дизайна сайта
Figma vs. Adobe Xd Design with Me — How different are they?
Можно ли давать полный доступ в Фигме? Сравнение тарифов Фигмы. Действительно ли Figma бесплатная?
Что такое Тильда и как она поменяла мой подход к веб-дизайну
Несмотря на то, что этот сервис был давно на слуху, я не воспринимал его в серьез. Не думал, что в конструкторе сайтов может быть что-то интересное. Но теперь почти все дизайнерские проекты я делаю на Тильде. Только изредка ко мне обращаются старые клиенты, которым нужен только макет сайта. Я рассматриваю Тильду не как конструктор сайтов, а как полноценный сервис, который упрощает работу дизайнера-фрилансера. В Тильде есть большой выбор готовых шаблонов, но я ни разу их не открывал. Больше всего Тильда меня привлекла инструментом «zero block». Это своего рода браузерная версия графического редактора. Благодаря этому инструменту в Тильде можно создать практический любой сайт. Конечно же речь не идёт о сервисах, крупных порталах или сайтах со сложной анимацией (хотя об этом позже). Лендинги, промо-сайты, корпоративные сайты, небольшие интернет-магазины — все это можно делать в Тильде.
Работа одному
Весомой причиной перехода на Тильду стала возможность работать одному. Когда я создавал сайты на wordpress, на согласования всех деталей с верстальщиком уходило кучу времени и сил. Кому-то нравится работать в команде, но я предпочитаю работать одному, если есть такая возможность. На Тильде можно создать проект под ключ без сторонних специалистов. Иногда приходится сотрудничать с иллюстраторами, копирайтерами или директологами. Часто нужна помощь программиста, чтобы написать код какого-нибудь калькулятора или слайдера (в Тильду можно добавлять свой html-код, если не хватает функционала).
Намного быстрее
Хотя не совсем… Инструмент «zero block» хоть и напоминает функционал графических редакторов, но это всё-таки браузерный редактор. Например, нельзя увеличивать масштаб, что сильно мешает. В Фигме я создаю макет намного быстрее. Аналогичная работа в Тильде занимает примерно в 2 раза больше времени. НО, когда дизайн создан на Тильде, это уже готовый сайт. Проект будет запущен в разы быстрее, чем по традиционной схеме: дизайн + вёрстка + CMS + выявление багов. Долгая работа в Тильде компенсируется мгновенным запуском сайта.
Как выстроена работа
Первое время я создавал дизайн сразу в «zero block», но со временем заметил, что мои работы стали похожи друг на друга. В браузере куда меньше «свободы», чем в графическом редакторе. Поэтому я решил изначально делать дизайн в Фигме, а потом переносить его в Тильду. Может показаться, что на работу в двух сервисах будет уходить слишком много времени, но это не так. В Фигме ничего «писксель в писксель» не выравниваю, в ней создаю структуру сайта, а всю «ювелирную работу» делаю в Тильде.
Готовый продукт, а не картинка
Один из самых больших плюсов Тильды — вы работаете сразу с готовым сайтом, а не с картинками. Если отступы, размеры шрифтов и элементов в редакторе выглядят нормально, то в браузере всё по-другому. Я это замечаю после переноса дизайна из Фигмы в Тильду с сохранением всех пропорций. Визуально размеры в графическом редакторе и в браузере сильно отличаются. В Тильде всё происходит в режиме онлайн. Можно сразу посмотреть на разных разрешениях, как отображаются шрифты, выглядят тени и работает анимация.
Отображение на разных устройствах
В процессе создания сайтов больше всего мне не нравился этап вёрстки и выявления багов. В единичных случаях всё работало хорошо с первого раза. Нужно было следить за тем, чтобы на всех устройствах и во всех браузерах сайт работал так, как задумывалось. В некоторых проектах на это тратилось бóльшая часть времени. Плюс Тильды в том, что во всех браузерах сайт будет отображаться одинаково. Также хорошо реализована работа с адаптивными версиями. Можно адаптировать страницу на 5 разрешений, которые охватывают все устройства.
Анимация
Не разобравшись с анимацией, она может показаться слишком простой. Но функционала анимации в Тильде более чем достаточно. Нужно научиться с ней работать, комбинировать разные виды анимации, чтобы придумывать интересные идеи для сайтов. К тому же к стандартной анимации добавили пошаговую. В «step by step» к каждому элементу можно присвоить анимацию по скролу, по клику, анимацию при наведении и при появлении. Нужно долго и упорно «ковыряться» в пошаговой анимации, чтобы полностью её освоить. Возможностей анимации хватит почти на любой проект, но завоевать топы awwwards не получится.
Tilda Experts
В Тильду добавили биржу, которая соединяет заказчиков и исполнителей. Клиент заполняет бриф и указывает бюджет проекта, а система выдает исполнителей, готовых взяться за заказ. Все в восторге от нововведения, но есть один важный момент, о котором никто не говорит. У каждого, кто зарегистрируется в Tilda Experts, появится индивидуальный идентификатор. Чтобы в портфолио эксперта отображался сайт, нужно в настройках этого сайта добавить свой код. Так система определяет создателя сайта. Добавить идентификатор можно только оплатив один из тарифов Тильды. Если же срок тарифа истек, то работа больше не будет отображаться в вашем профиле.
Представьте ситуацию: вы сделали работу нескольким заказчикам и у вас есть портфолио эксперта. Через какое-то время заказчики решили, что им больше не нужны сайты и перестали продлевать тариф. В итоге ваше портфолио опустеет и будет зависеть от заказчиков. Поэтому я бы не возлагал большие надежды на биржу, в которой заказчики решают, будет ли находится работа в вашем портфолио.
Работа с клиентами
Со своими клиентами я работаю так: после получения предоплаты в размере 50%, я создаю новую почту и аккаунт на Тильде. Когда работа утверждена, клиент переводит вторую часть оплаты, и я передаю данные от почты и аккаунта. Иногда у заказчика уже имеется оплаченный аккаунт, и он просит работать на нём. В таком случае я прошу переводить сразу всю сумму.
Конечно, у Тильды есть свои минусы, но для меня плюсов оказалось больше. В первую очередь сервис позволил работать одному. Раньше идею создания сайтов без верстальщика пытались воплотить множество конструкторов. Самым массовым был Adobe Muse, но из-за большого количества косяков, разработчики перестали поддерживать продукт. Я работал на Muse, и это было очень больно… Есть Readymag, который больше Тильды подходит для дизайнерских сайтов, но в нём не хватает функционала для бизнеса.
Спасибо за внимание. Если материал был для вас интересным, то подписывайтесь на мой телеграм-канал, где я пишу о дизайне и визуальном искусстве.