Как сделать сетку в фигме как в тильде
Обновлено: 07.07.2024
Гибко настраивайте модульную сетку для одного блока или всего проекта. Можно задать любое количество колонок, их ширину, расстояние между ними, отступы, цвет линий и другие параметры.
Сетка помогает определить базовую структуру дизайна страницы и ускорить работу с макетом. Она создаёт единую схему расположения всех элементов и блоков сайта и помогает сохранить визуальный порядок.
По умолчанию в Тильде используется 12-колоночная сетка. Чтобы настроить уникальную сетку, перейдите в Zero Block, откройте настройки Artboard и найдите кнопку Zero block settings. Разберёмся, для чего нужно каждое поле.
Columns — количество колонок в сетке.
Column Width — ширина колонок. При изменении ширины, меняется значение межколоночного расстояния Column Gutter и наоборот.
Column Margins — отступы слева и справа от края артборда для колонок.
Также вы можете настроить горизонтальную сетку. Она обычно используется для типографики.
Row Baseline — шаг горизонтальной сетки. Обычно это значение берётся исходя из базового размера вашего шрифта. Например, если для основного текста вы используете шрифт размером 14px с межстрочным расстоянием 20px, то и расстояние между линиями будет 20px.
Module Height пригодится, если вы используете повторяющиеся модули в дизайне. Например, если указать значение 5, то через каждые пять рядов будет пустая строчка, а модуль будет начинаться заново.
Row margins — отступ сверху и снизу от края артборда.
Для каждого разрешения экрана сетка настраивается отдельно: она будет разной на десктопе и на мобильных устройствах. Включить и выключить сетку можно нажав G или перейдя в раздел с трёмя точками в верхнем правом углу экрана.
По умолчанию настройки сетки задаются для всего проекта. Если мы создадим новый Zero block, то увидим в нём ту модульную сетку, которую только что настроили. Это удобно, чтобы сохранить единство дизайна на разных страницах проекта.
Но если вам нужна уникальная сетка для конкретного блока, то вернитесь в настройки сетки и выберите для параметра Use for опцию Current Block. Тогда настройки применятся только к текущему блоку.
Вы всегда можете сбросить изменения и вернуть сетку по умолчанию. Для этого нажмите на кнопку Reset в самом низу панели настроек и сохраните изменения.
В Фигме сетка уже вшита в систему и не нужно ничего докачивать, как это было с одной очень известной программой. Тут все под рукой. К тому же сетка у нас не в виде отдельного слоя, который может потеряться, а существует, как отдельная структура сайта.
Нужно отдельно написать, что сетка в Figma и линейка в Figma — это разные вещи. Если ты привык работать в программе для редактирования фото, то ты знаешь, что там есть направляющие, которые постоянно мешаются и цепляются к курсору, зато их можно включать и выключать. Так же в той проге ты мог скачивать и отдельным слоем устанавливать колонки в слои, но там они постоянно терялись и то же было не очень удобно работать. Не понимаю, почему ты до сих пор работаешь в той ужасной и не удобной программе.
Сетка в Figma
Включить grid Figma можно только на фрейм. Выбери фрейм и вот тут увидишь то, что нужно и тут уже в настройках можно настроить сетку именно под себя. Создать все, что угодно, хоть бутсрап, хоть еще что-то. Настраивается все гибко и интуитивно понятно.
Настройка сетки Layout Grid Figma
Кликаешь + и видишь настройки. По умолчанию создается именно сеточка с шагом в 10 пикселей. К слову сказать, любые объекты в Фигма, если ты их будешь двигать стрелочками, двигаются на 1 пиксель, а если будешь зажимать при этом Shift то двигаться они будут на 10 пикселей. Так что, если поменяешь тут значение на какое-то другое ( некоторые любят ставить размеры 8 и в этом есть разумное зерно) то придется изменить и настройки перемещения объекта с шифтом на 8. Делается это вот тут в меню
Настройка расстояния перемещения объекта
Как ты понимаешь, нужно поставить одинаковый шаг сетки и Nudge Amount, чтобы было удобнее перемещать объекты и они всегда были выровнены, как нужно, ну а если ты любишь работать в 10 пиксельной вселенной, то ничего отдельно настраивать не нужно.
Колонки в Фигме
С сеткой понятно, теперь давай разберемся с колонками. На второй вкладке ты можешь настроить колоночную сетку в Фигме.
Колонки в Фигме
У нас тут такие настройки:
Count — количество колонок
Width — ширина колонки (при выбранном Type Stretch задать ширину колонки не получится — только межколоночное расстояние)
Gutter — межколоночный отступ ( он всегда у нас будет неизменным, на то это и колонки)))
Margin — отступ сетки от правого и левого края макета, в случае колонок, если ты настраиваешь горизонтальную сетку, то Margin будет отодвигать твои строки сверху и снизу. Теперь давай рассмотрим, что же у нас кроется в выпадающем списке Type
Настройка колонок в Figma
Stretch– тянущаяся или резиновая сетка. Колонки растягиваются на всю ширину фрейма. Можно задать только межколоночное расстояние, ширина такой колонки будет подстраиваться под ширину фрейма. Очень крутая штуковина для создания резиновый макетов и адаптива. Можно задать определенный отступ справа и слева, если говорим о колонках.
Center–Сетка по центру макета, можно настроить ширину самой колонки, но при этом при изменении ширины фрейма ширина сетки и расстояния между ними будет неизменной.
Left–тут все и так понятно.
Обрати внимание, что в одном фрейме можно создать сразу много сеток, хоть миллион.
Включить-Выключить сетку на Windows Ctrl+Shift+4. На Mac Cmd+g
Колонки bootstrap 4 Figma
Как создавать колонки разобрались, теперь давай создадим модульную систему сеток под бутстрап 4 в Фигме. Делается это очень просто. Создай фрейм, любой, какой тебе нравится. Я создал для примера с шириной 1920. Мы знаем, что ширина рабочей области в bootstrap 4 для десктопа составляет 1140 пикселей, (!)30рх по краям контейнера я не учитываю. Поэтому я просто создам прямоугольник длиной 1140 и центрую его во фрейме.
Место, где у нас будет сетка выбрали, теперь давай создадим ее, родимую… по номенклатуре ширина колонки бутстрап не указана, зато есть расстояние между ними 30. Создать ручками в режиме Center такую сетку невозможно. Поэтому, создаем модульную сетку bootstrap 4 в figma по средствам Stretch, который примет любую ширину колонки. Просто задаем нужные параметры в настройках и все. Вот и эти параметры: 12 колонок с межколоночным расстоянием в 30 пикселей. Тут все понятно, а вот как быть с марджином? То же проблем никаких нет. Просто меряешь расстояние от краев прямоугольника до краев твоего фрейма и такой выставляй марджин. В моем случает это 390. Если что — посмотреть расстояние прямоугольника до краев фрейма можно при нажатом Alt
Сетка bootstrap 4 Figma
Теперь сеточка становится просто идеально, как нам и нужно. Точно так же можно создать и под другие разрешение, но не беспокойся — я уже все сделал за тебя и скачать модульную сетку bootstrap 4 в figma можешь тут. Пользуйся на здоровье. Там и под десктоп и под планшет, все есть.
Все те же настройки и логика процесса работает и с горизонтальными сетками, поэтому расписывать что там и как я не стану.
Обрати внимание, что ты можешь вкладывать фрейм во врем и во вложенном настраивать отдельную сетку под свои нужды. Куда там динозавру фш до такого.
Колоночная сетка для каждого фрейма
Линейка в Figma
Это нечто иное и работает так же, как в нашем общем друге фш. Предустановленных линеек в фигме нет, но ты всегда можешь вытащить их слева или верха рабочей области и использовать по назначению, а именно для того, чтобы выравнивать контент.
Линейка в Figma
Странно как-то получается… зачем нужны и модульные сетки из колонок с кучей настроек и направляющие линейки в Фигме? На самом деле ничего странного тут нет. Линейки — это просто линейки по которым ты ровняешь блоки, а Layout grid Figma работают в тесной связке с constraints, что позволяет тебе быстренько создавать адаптивы.
Включение сетки Одна включенная сетка
Нажимте на иконку слева от названия сетки, чтобы настроить ее:
Настройка сетки
Вы можете изменить плотность, цвет и прозрачность сетки.
Вы можете добавлять несколько сеток, чтобы создать более сложную разметку.
Несколько сеток
На канале “Дизайн со скриптами” опять вышла крутая вещь.
Буквально за пару действий полностью перенос верстки из Фигмы в Тильду
23 тыс. 3 Печать Жалоба
Комментарии 3
Огонь. А будет такой для xD?
Хотите взять максимум?
Активируй Premium и получи 9 преимуществ
Для участников PREMIUM регулярно проводятся закрытые трансляции с профессионалами. Остальным они доступны только за деньги.
Возможность устраивать голосование с прогрессивным рейтингом. Возможность создавать викторины (скоро).
Хотите узнавать
обо всех событиях?
Выберите, куда хотите получать уведомления
Получи скидку 15%
на планшет HUION
Более 50 моделей для самого требовательного пользователя
© Creativo, 2022 г.
Все права защищены
Разделы
Информация
Статистика
Переход по внешней ссылке
Creativo не несёт ответственности за безопасность за пределами нашего сообщества.
Будьте осторожны и внимательны.
Вы можете выбрать до > вариантов. Голос будет распределён равномерно между всеми выбранными.
Создать опрос
Название опроса
Ответ <<(index + 1)>> Удалить ответ
Сортировка:
Опрос
По вашему запросу ничего не найдено
Попробуйте изменить критерий поиска, или сбросить фильтры.
Комментарии
Комментарии >
Видео к работе
Популярные работы автора:
Работа получила награды:
Курсы автора:
Уроки автора:
Спасибо! Ваше обращение ушло на рассмотрение.
Используя данный сайт, вы даёте согласие на использование файлов cookie, данных об IP-адрес, помогающих нам сделать его удобнее для вас. Подробнее
Читайте также: