Grid for tilda publishing как пользоваться
Обновлено: 04.07.2024
разбираем все подробности и нюансы процесса переноса дизайна сайта на примерах и доступным языком.
Буквально недавно команда Тильды выкатила, наверное, свою главную киллер фичу перед другими конструкторами сайтов – это быстрый и удобный экспорт ваших дизигнов прямо из Figma.
Ни для кого не секрет, что конструкторы сайтов вроде Tilda созданы в первую очередь для дизайнеров, хотя сайт может сделать кто угодно и без навыков дизайна. И все же философия платформы базируется на отказе от кода, что сильно удешевляет и упрощает работу над проектами. Поэтому, имея в своем арсенале уникальные инструменты, с помощью Тильды у дизайнеров развязываются руки на полную.
О преимуществах Tilda мы уже писали тут , если кому-то интересно обязательно ознакомьтесь, а мы разберем особенность последнего нововведения.
Как работает перенос дизайна из Figma
- Нужно получить API Access токена Figma в настойках своего аккаунта;
- Передать этот токен в настройках экспорта своего зеро-блока;
- PROFIT.
А теперь поподробнее
Чтобы получить токен Figma мы отправляемся в настройки своего аккаунта (Main menu > Help and account > Account settings).
Далее, пролистайте до пункта Personal access tokens и пропишите там любое название, например, Tilda.
Через пару секунд, сформируется токен (выделено желтым). Теперь нужно скопировать этот токен и передать его в Тильду. Для этого открываем ваш проект и создаем зеро-блок. Переходим в его редактирование и выбираем в меню параметр Import .
В открывшемся окне нужно будет вставить полученный токен и ссылку на конкретный фрейм из вашего макета, который вы хотите экспортировать. Для этого выделите нужный фрейм, нажмите кнопку Share и скопируйте ссылку на него в открывшемся поп-апе, нажав на ссылку Copy link :
Как только вы указали токен и ссылку на фрейм, нажимайте кнопку Import и ожидайте загрузку. Готово!
Теперь токен будет привязан к проекту на Tilda. Когда вам потребуется в следующий раз выгрузит очередной блок из Figma, то вы создадите новый зеро-блок, откроете параметры экспорта и укажите лишь ссылку на нужный блок в Figma и все!
Требования к макетам Tilda
Чтобы ваши дизайны корректно экспортировались, нужно соблюдать некоторые правила. У Тильды есть подробная статья об этом. Правда я дам более расширенное описание этих требований, потому что некоторые вещи не описаны в гайде от Тильды, я выявил их самостоятельно:
1. Делайте ваши блоки в отдельных фреймах, а не группах, так как ссылка в Figma формируется именно на фрейм.
2. Не объединяйте фреймы ваших блоков в один общий фрейм страницы, иначе при экспорте в зеро-блок загрузится дизайн всей страницы, а не нужный вам блок.
3. Любую группу и фрейм можно экспортировать как картинку, так и svg. Для этого им нужно присвоить название Image или Svg .
4. Придерживайтесь ширины фрейма 1200 пикселей. Tilda похоже работает на сетке Bootstrap или очень на неё похожей. Так что можете использовать для Figma настройки 12-ти колоночной сетки (12/70/30). Поэтому если даже ваши фреймы будут размером, например, 1920px, но выравнивание будет по такой сетке, то они все равно корректно экспортируются. Единственное после экспорта нужно будет лишь слегка подвинуть загруженное.
5. Если хотите, чтобы картинка внутри блока экспортировалась как картинка, то назовите её (или группу её элементов) как Image . Работает и с фреймом.
6. Если хотите, чтобы ваши векторные элементы экспортировалась как векторы, то назовите их (или группу их элементов) как Svg . Работает и с фреймом.
7. Если хотите, чтобы простейшие формы и фигуры внутри блока экспортировались как фигуры (шейпы), то назовите их Shape .
8. Чтобы кнопки экспортировались как кнопки, нужно объединить текстовый фрейм и фигуру в одну группу с название Button . При этом ширина фрейма текста, должна быть растянута на всю длину фигуры.
9. Любые группы объектов переносятся в зеро-блок тоже сгруппированными.
10. Не применяйте к элементам эффекты, которые не смогли бы сами воссоздать на Tilda. Тогда при экспорте они перенесутся 1 в 1.
11. Цвет фона вашего фрейма переносится как цвет бэкграунда в зеро-блок. Помните это, потому что это поможет не создавать лишние элементы в слоях зеро-блоков.
Чем хорош сайт на Тильде? И почему не надо лезть в дорогостоящие решения
Не часто приходится замечать решения предложенные на платформе Tilda, а зря. Почему так? Что такое вообще Tilda и для кого она?
Публикация составлена совместно с командой Годунова.
Сразу отметим, что данный материал ни в коем случае не является рекламным, а представляет из себя анализ Тильды, как решение для бизнеса.
Если говорить коротко - это конструктор сайтов, который приобрел большую популярность в последние годы на территории России и стран СНГ в частности. Конечно, основной офер компании заключается в том, что любой новичок никогда до этого не имеющий опыта в web- разработке и в целом digital, сможет сделать для себя или своего небольшого начинания посадочную страницу. Казалось бы, причем тут вообще могут быть агентства или студии? Давайте разбираться.
Давайте сначала определимся с типажом заказчика, который обращается за данной услугой. Возьмем за основу «новичка», который ранее не имел опыта в создании собственного сайта, не знает о всех тонкостях и нюансах. В свою очередь максимум, что ранее ему приходилось слышать о сайтах - нужен человек, разбирающийся в компьютерах и что там есть какой-то пресловутый код. В большинстве своем именно по этой причине в дальнейшем заказчик будет противиться и стараться нивелировать любые попытки сделать сайт ни на коде. Так как для него это почему-то очень важно.
По факту в более чем 50% случаев от всех задач бизнеса в медиа пространстве, ваш сайт не нуждается в том, чтобы он был разработан кодом. Не обязательно ставить такие условия где необходимо будет привлекать верстальщика или программиста. В таких проектах обычно нуждается средний или крупный бизнес, так как к тому времени у компании сформировалось представление и сложные многоуровневые задачи, которые решаются только таким же сложными решениями.
Если ваша задача начинается со слов:
«Чтобы продавать. » или «Нужна презентация. » - вам не нужен код.
Tilda в свою очередь тоже не является панацеей и не возведена в абсолютное значение, можно пользоваться другими решениями похожими на Тильду.
Что чаще всего приходится слышать про Тильду?
1. «Тильда? - ну это как-то несерьезно для компании. »
Во-первых, это вполне себе компактное и быстрое решение которое позволит незатратно для компании реализовать задуманное. В среднем сайт на Тильде стоит в 2 раза дешевле чем на CMS. Пользователю абсолютно неважно на чем разработан сайт, он пришел за конкретным товаром или услугой. Имеет смысл делать упор на предложение и на сервис. Сайт это всего лишь один из инструментов в вашем бизнесе.
Во-вторых, скорее всего меня могут закидать тухлыми помидорами, но серьезная компания не будет стараться «выгрызать» серьезный сайт за условные 20.000 рублей. Тут 2 пути: или компания не такая серьезная, или же у директора нет понимания, что такое сайт и для чего он нужен.
2. «Не, Тильда не подойдет, у нее слишком урезанный функционал. »
Да, вы правы, Тильда имеет большое количество ограничений, но как правило если вы обращаетесь к профессионалам то выбор данного решения будет не случайным. Мы не просто так уделяли этому внимание в статье - «4 этапа разработки сайта, или 4 круга ада?"
«Очень часто уровень брифинга коррелирует с качеством самого конвейера, чтобы убедиться в этом можете попробовать обсудить проект с фрилансером, затем с какой-нибудь студией. Спойлер - фрилансер не задаст вам и половины вопросов, на которые вам придется ответить в студии, фрилансеру попросту нечего делать с этой информацией.»
Отсюда вы сразу сможете понять профессионализм человека с которым обсуждаете будущий сайт еще на этапе брифинга. И насторожиться в случае если вам не задали ни одного вопроса относящегося к вашим пожеланиям, но почему-то сразу назвали тильду.
Тогда скорее всего вы общаетесь с командой, которая работает только на этой платформе или же с непрофессионалом.
3. “Да нет, Тильда - это как-то слишком просто, там не сделать хороший дизайн. »
Отвечая коротко - сделать. Такое представление сложилось из-за того, что данная платформа создавалась ни для дизайнеров, а в первую очередь для обычных пользователей. Поэтому встретить зачастую похожие сайты на Тильде довольно просто, так как стандартный набор библиотек весьма ограничен. Но во всем остальном дизайнер сможет разработать уникальный дизайн конкретно под вас.
Теперь, когда мы прониклись всей серьезностью данного решения. Сформулируем реальную ситуацию и ряд задач с которыми пришлось столкнуться заказчикам.
Рассмотрим параллельно 2 ситуации, которые могут показаться разными, но по факту объединены одним и тем же.
1. Заказчик не имеет серьезного бюджет, но ему срочно необходим небольшой сайт для мероприятия, которое стартует уже в конце недели.
2. Заказчик имеет серьезный бюджет, но у него отсутствуют амбициозные задачи и в целом планы на будущий сайт. Сроки не превышают 14 дней, но для простоты понимания давайте приведем также к 7 дням.
Задача
По факту перед нами стоит задача, как сделать симпатичный MVP-проект, в срок не превышающий 7 дней.
«Да, давайте здесь не будем заострять внимание и формировать представление, что вся web-разработка такая же быстрая и не затратная. В данной ситуации разбираются частные случаи, чтобы показать, что даже казалось бы в безвыходной ситуации есть решение»
Чтобы у вас сформировалось правильное представление о продуктах на рынке web-разработки крайне советуем ознакомиться со следующим материалом - "Сколько стоит сайт?"
День 1. Подбор референсов и обсуждение проекта
Для экономии времени и ресурсов приступаем к аналитике, но акцентируем внимание только на самых важных моментах, а именно:
- какова будет общая концепция продукта;
- какие есть конкуренты и что они из себя представляют;
- Что нравится целевой аудитории;
- что из референсов может лучше всего подойти.
Конец дня ознаменовывается обсуждением выбранных решений с заказчиками. На каждый из этапом тратим примерно по 2 часа.
День 2. Прототипирование
Так как у нас выделен только 1 день на прототип - прибегаем к быстрому решению при помощи Figma. В рамках этого сервиса есть уже готовые ui киты, другими словами блоки, которые можно компоновать в дальнейшем как угодно. Опираемся на те примеры сайтов, которые утвердили с заказчиками на предыдущем этапе и на основе их логики / структуры - переносим все это на наш прототип в Figma. В завершении идем презентовать и защищать структуру перед заказчиками.
День 3-4. Дизайн
На данном этапе делаем акцент, выделяя под него 2 суток. Так как он является самым основным в рамках работы на Тильде. Определяемся с 3 наиболее интересными и продуманными работами в данной нише, предварительно все это согласовав с заказчиками. Первый день занимает подбор и поиск будущих элементов сайта, а именно:
- Иконки
- Изображения
- иные визуальные элементы, которые нельзя отнести к чему-то конкретному, но от этого они не становятся менее важными
Все должно быть объединено общей идей, сочетаться между собой, что также отсылает нас к проработке первичной логики по которой уже идет дальнейший отбор элементов. На чем первый день удачно заканчивается. Собрав бэкграунд элементов, вспоминаем о тех исходных работах, которые мы взяли, как ориентир. После чего объединяем удачные идеи этих сайтов с теми элементами, что мы нашли, находясь в свободном плавании на ресурсах для дизайнеров.
В Figma появился плагин, генерирующий сетку Тильды
Веб-дизайнер The Architect Александр Щетинин создал плагин в Figma, который генерирует сетку для платформы Tilda Publishing.
Вообще я просто хотел понять, как работают плагины) Задачу взял именно эту, потому что раньше нужно было либо запоминать значения сетки, либо копировать ее документом. А сейчас достаточно нажать одну кнопку.
Чтобы создать сетку, просто запустите плагин:
The plugin generates. set styles for the Tilda Publishing platform. To generate a grid, simply…Подписывайтесь на наш инстаграм:
451 Followers, 12 Following, 57 Posts - See Instagram photos and videos from The Architect…Что мешает или чем не подходит сразу делать страницу в визуальном редакторе Тильды?
В фигме удобнее делать дизайн и согласовывать его: совместная работа группой дизайнеров, работа с компонентами, проектирование и создание прототипов интерфейсов, иллюстраций и другое.
Совместная работа есть и в Тильде. Всё остальное — общие слова.
То есть в вашем кейсе дизайнер(ы):
1. Делают макеты в Фигме.
2. Эти же дизайнеры или верстальщики верстают этот макет в визуальном редакторе Тильды?
3. Изменения вносят сначала в Фигме, затем в Тильде.
И это не считается двойной работой и считается целесообразнее, чем сразу в Тильде сделать конечную страницу и вносить изменения сразу в ней?
Весь дизайн согласовывается в фигме. После уже согласованный дизайн верстают на Тильде. ред.
Это ответ на какой вопрос?
Можно сказать на все три)
Наш кейс такой.
1. Дизайнер рисует дизайн в фигме.
2. Правки и изменения дизайнер делает в фигме.
3. После согласования с заказчиком, верстает макет на Тильде.
Тильда — инструмент верстки
Фигма — инструмент дизайна
Выборочно отвечаете, повторю:
И это не считается двойной работой и считается целесообразнее, чем сразу в Тильде сделать конечную страницу и вносить изменения сразу в ней? ред.
Если вам удобнее работать иначе, ни кто не против.
Да я тоже не против, "верстайте" в Тильде, особенно когда одной кнопкой макет Figma можно экспортировать в HTML.
Всегда считал связку Figma + Tilda — бесполезной тратой времени и проделыванием двойной работы.
Design realistic prototypes faster, with Anima for FigmaДмитрий, что вы подразумеваете под совместной работой в Тильде?
До сих пор непонимающе почему я должен пересаживать со скетча на браузерную фигму. Ни интерфейсом, ни прочими плагинами она меня пока не заинтересовала. А тем более - вау тильда. вы серьезно?
Интерфейс даже скорее отталкивает.
User flow и прототипы делаю в скетче и flinto.
Для девелоперов купили zeplin.
Зачем мне эта хипстерская программа?
вот я был лох тупой. простите меня небеса, был молод и глуп
Интересно узнать, что же изменилось за полгода)
я давно не включал фигму не интересовался ей пру лет уж точно. все скетч да скетч, не было времени ит мотивации заниматься другими инструментами. а тут еще вопрос с GDPD - фигма шпионит жестко и прродает данные. В европе она находится в серой зоне и это тормозит ее использование. Но тут решил попробовать и в итоге работает быстрее и приятнее - перевел все проекты в фигму и пользуемся всей компанией теперь
Многие ждали этого плагина, я полагаю.
запускаю и ничего не происходит(
Вот это интересно, попробуем.
Затестим, ране просто юзал готовый шаблон с сеткой
Скоро будут плагины, чтобы начертить прямую линию)
То есть чтобы накинуть grid на канвас в фирме нужно скачать svg файл с дильдошной, поразительная оптимизация процессов!
Веб-дизайнер Александр Щетинин втирает про один клик? нуну.
применять плагин нужно непосредственно на фрейме? ничего не происходит при использовании
Просто нужно запустить плагин, и он создаст 5 стилей сетки. Потом нужно стиль сетки просто к фрейму применить)
Работает, все пять стилей. Да, применять на фрейме. Правда для начала нужно активировать плагин — зайти в меню - плагины - Тильда колумнс
Просто большое человеческое Спасибо!
После применения плагина, когда нажимаю на поле рядом с фреймом, у меня в правом поле появляется на выбор 5 гридов, но как блин применить их к фрейму. Я просто беру параметры (из 5)гридов и во фрейме в лояйлт грид их выставляю. Как я понимаю, что есть волшебная кнопка, которая мне не по глазам.
надо было на четыре точки нажать рядом с лояут гридом, а не на плюс
Спасибо добрый Человек..)) 15 минут мучался)
Все сервисы из экосистемы переименовывать не будут, но свяжут их единым стилем.
Как создать собственный дизайн для сайта на Тильде
Контроль каждого элемента. Вы можете контролировать каждую деталь блока (текст, изображения, кнопки, плашки): в каком месте, какого размера и на экранах с каким разрешением она будет находиться.
Слои. Удобный инструмент для создания глубины на странице с помощью наложения элементов друг на друга и теней.
Привязка к краям экрана или сетки. Каждый элемент сайта можно позиционировать относительно сетки или экрана.
Сложная типографика. У дизайнеров есть полная свобода в создании нестандартных типографических решений.
Прозрачность. Задавайте прозрачность элементам и теням под ними. Индивидуальная настройка адаптивности. Меняйте все в зависимости от разрешения экрана: композицию, набор видимых элементов.
Плашки. Добавляйте цветные плашки, карточки для контента или загружайте изображения внутрь геометрических форм.
Видео. Добавляйте на сайт видео из youtube или vimeo. В Zero Bock вы сможете регулировать его пропорции и положение на странице.
Вставка HTML. Добавляйте любые элементы в Zero Block при помощи вставки HTML кода и настраивайте позиционирование этих элементов на каждом экране.
Tooltip. Используйте этот интерактивный инструмент, чтобы добавить всплывающие подсказки. Вы можете настроить цвет, тень, размер, выбрать или загрузить иконку, которая будет отображаться внутри кружка, а также загрузить изображение, которое будет всплывать при наведении.
Форма обратной связи. Вы можете добавить поля для ввода, подключить сервисы приема данных, задать стиль формы и применить к ней анимацию.
Анимация появления элементов. Добавляйте анимацию при появлении элементов: через прозрачность, увеличение, появление снизу, сверху, справа или слева экрана.
Пошаговая анимация. Используйте пошаговую анимацию, чтобы сделать страницу интереснее и динамичнее. Анимацию можно добавить по клику, по скроллу, при наведении на элемент и при появлении элемента на экране.
Параллакс. Применяйте к элементам параллакс при скролле и параллакс при движении курсора мышки.
Фиксация при скролле. Применяйте к элементам фиксацию во время скролла. Вы можете задать расстояние, во течение которого элемент будет зафиксирован, и его расположение.
Читайте также: