Правила построения модульной сетки в Фигме
Одним из важнейших инструментов любого web-дизайнера является модульная сетка, которая позволяет грамотно зонировать пространство, затрачивая на этом минимум времени и сил. Многие разработчики для создания сайта пользуется программой Figma, с помощью которой можно легко создавать прототипы сайтов и приложения, использовать иллюстрации и векторную графику. Зная, как правильно пользоваться в Фигме модульными направляющими, можно по максимуму использовать все ее преимущества.
Для чего задействуется модульная сетка в веб-дизайне
Любая модульная сетка определяет внешний вид будущего макета, а также задает места расположения на web-странице разных элементов, включая текст, иллюстрации, заголовки, кнопки, прочие информационные и графические объекты. Сетка в Фигме представляет собой систему непечатаемых горизонтальных, диагональных, а также вертикальных линий, проходящих по странице.
Как можно догадаться, модульная сетка представляет собой основу для любого дизайн-макета. Она также может состоять из простых геометрических фигур — модулей определенного размера, которые располагаются в требуемом порядке. С ее помощью можно лучше организовать пространство и подчинить элементы определенной последовательности. Между прочим, при помощи данного инструмента можно сделать пространство более объемным, что гарантированно улучшает восприятие сайта со стороны посетителей.
Особенности модульной сетки в Figma
В отличие от других программ, Фигма имеет дополнительные функциональные возможности. Благодаря этому обеспечивается гибкая настройка. Это открывает расширенные возможности для web-дизайнера, который может свободно настраивать ее под себя. Примечательно, что при желании здесь применяют не одну, а несколько направляющих, причем к разным фреймам, задавая видимость и глубину линий.
Многоуровневость – весомый плюс сетки в Фигме, поскольку ее можно уверено применять к фреймам верхнего уровня, а также к фреймам, расположенным внутри компонентов. Используя разные типы модулей, в одном фрейме можно детально проработать дизайн и гармонично распределить разные элементы согласно выбранной схеме. При этом пользователь может даже задавать внешний вид, контролируя свет и уровень прозрачности, дифференцируя его под себя и свои предпочтения.
Основные типы модульных сеток в Фигме
Для лучшего понимания особенностей, рассмотрим их основные виды:
1. Uniform grid. Позволяет создавать серию одинаковых и равномерно распределенных полей по всей поверхности фрейма. Лучшим примером является тетрадный лист в клетку. При этом размер клеток указывает сам веб-дизайнер.
2. Column Grid. Делит макет вертикально, что позволяет получить «газетный» формат, актуальный для новостных сайтов.
3. Row Grid. Делит макет горизонтально, причем также с возможностью задавать высоту по конкретному уровню индивидуально.
С помощью сетки можно контролировать положение и масштабирование текста на странице, выравнивая его наилучшим образом для комфортного восприятия посетителем. Она позволяет быстро и удобно выровнять макет, причем с визуальным контролем, прямо в режиме online.
Базовые сетки
Это обычные направляющие, основанные на базовых строках, с которыми работать очень легко. С их помощью создаются определенные визуальные подсказки в дизайне, что облегчает масштабируемость, позволяя оперативно настраивать шрифт и его высоту. В Фигме по умолчанию используется базовая строка 4pt.
Многие веб-дизайнеры устанавливают большее число строк, что позволяет размещать длинный скролл фреймов. При этом специалист может выделять чередующиеся строки, используя разные комбинации по свойствам высоты или цвета.
Вложенные сетки
Это достаточно интересная функция в Фигме. Она позволяет веб-дизайнеру не ограничиваться единой сеткой на уровне «артборда». Ведь сетку можно применять к любым фреймам, включая те, которые вложены внутри дизайна. Соответственно, создается определенного вида «матрешка».
Данной функцией можно и нужно пользоваться, поскольку она позволяет задавать разные сетки, используя их как визуальные подсказки. При этом пользователь может самостоятельно задавать цвет и прозрачность для каждой из них по отдельности.
Активировать сетку несложно, для чего выделяют фрейм. На панели управления нажимают «+» в блоке Layout Grid. С этой же целью можно использовать горячие клавиши «Ctrl + Shift + 4» (для Windows) или «Ctrl + G» (для Mac OS).
Особенности применения для мобильных устройств
С целью создания удобного дизайна для планшетов и смартфонов обычно используется сетка с 9-ю, 6-ю или 3-я колонками. При этом ширина фреймов здесь составляет 1180 px, 880 px и 446 px соответственно. Модульные сетки также можно задавать с разными стилями, успешно применяя самые разные их вариации.
Выводы
Гибкая система настроек модульной сетки в Фигме дает возможность веб-дизайнеру сконцентрироваться на разработке грамотной структуры сайта. Удобная навигация позволяет легко научиться работать в программе и активно использовать ее для создания web-страниц.
Первые шаги в Figma: настраиваем сетку на макете
Figma — мощный инструмент для проектирования, который предоставляет широкий набор функций и возможностей для дизайнеров. Одной из этих функций является возможность использования сетки, которая помогает выравнивать и привести в порядок все элементы на макете. В этой статье мы разберёмся, как быстро поправить параметры сетки, быстро её включать на поле макета и выключать по необходимости.
Сетка в Figma: коротко о главном
Сетка представляет собой визуальное поле, состоящее из горизонтальных и вертикальных направляющих, которые можно использовать в качестве опоры при размещении разных деталей будущего дизайнерского макета. Она помогает создавать симметричные графические файлы, а также облегчает работу графических дизайнеров с разными разрешениями экранов.
Если вы хотите начать карьеру графического дизайнера, то советуем посмотреть подборку онлайн курсов по графическому дизайну.
Как включить и убрать сетку в Figma
Включение и отключение сетки в Figma очень просто. Для включения сетки необходимо выбрать инструмент «Layout Grid» из панели инструментов слева или использовать сочетание клавиш «Ctrl + Shift + 4» для компьютеров на операционной системе Windows и «Ctrl + G» для Mac Os. После этого на макете появится сетка, которую можно настроить под свои нужды.
Чтобы убрать сетку, достаточно нажать на значок «—» около сетки. Если вы используете несколько сеток, вы можете убрать только ту, которая вам не нужна, оставив основную без изменений.
Чтобы удалить не нужную сетку в Фигме, нажмите на иконку «—», напротив той сетки, которую хотите удалить.
Чтобы создавать уникальные и профессиональные макеты можно начать с изучения разных статей и видео в интернете, но велика вероятность, что вы наткнётесь на устаревшую или лишнюю информацию. Мы собрали лучшие онлайн-курсы с сайта tutortop:
- «Figma» от Contented
- «UX/UI-дизайнер» от Synergy Academy
- «Figma» от Pentaschool
- «Основы дизайна в Figma» от Яндекс Практикума
Сейчас мы дарим 10 000 ₽ на обучение в любой из школ-партнёров, представленных на сайте tutortop. При покупке через tutortop вы также получите курсы стоимостью 20 000 ₽ абсолютно бесплатно.
Получите онлайн-курсы стоимостью 20 000 ₽ абсолютно бесплатно и промокод 10 000 ₽ на обучение.
Нажимая на кнопку «Получить», я соглашаюсь на обработку моих персональных данных.
Спасибо! Мы получили вашу заявку. Скоро с вами свяжемся.
Настраиваем сетку
Настройки сетки позволяют дизайнеру изменить количество направляющих, расстояние между ними и их цвет.
- Создаём сетку. Для этого вам нужно кликнуть на фрейм и справа откроются широкие настройки. В настройках ищем кнопку «Layour grid» и нажимаем на значок плюса. После этого появляется сетка. Чтобы настроить сетку, необходимо кликнуть рядом со словом «Grid» на иконку с сеткой. Далее работаем с настройками сетки.
- После создания сетки мы переходим в настройки и ищем кнопку «Columns», после чего мы можем менять количество колонок. Кроме того, вы можете выбрать цвет, чтобы направляющие были более заметными или менее заметными на вашем ui проекте.
- Если вы хотите разместить колонки в центре макета, вам нужно поставить значок «Center» в блоке настроек. Программа автоматически ставит «Stretch», благодаря которому сетка растягивается по умолчанию по всей ширине макета и делает стандартный отступ.
- Для того, чтобы сетка установилась справа или слева нужно поставить в фрейм-поле «Right» или «Left» соответственно.
Когда вы настроили сетку под свои потребности, вы можете использовать её для выравнивания и организации элементов ux проекта. Просто перемещайте элементы вдоль линий сетки, чтобы уравнять их, направлять, менять размер или выровнять относительно других элементов. Это позволит, например, подготовить для дальнейшей вёрстки сбалансированные изображения, создать уникальный модульный стиль, который будет выглядеть профессионально и эстетически приятно.
Начать работу с Figma можно на бесплатном интенсиве «Основы Figma» от Нетологии. Во время обучения вы выполните два самостоятельных задания и получите начальные знания для работы в Figma.
Как сделать сетку из 6 колонок в Figma
В Figma существуют несколько способов создания сетки и сейчас мы рассмотрим самый простой и эффективный.
- Создайте новый рабочий файл в Figma, нажмите на иконку сетки, и найдите значение «Count» из панели инструментов слева.
- В значении «Count» вбейте нужную цифру. В нашем случае это цифра 6. После чего вы получите 6 колонок сетки.
- Чтобы сетка была по центру в значении «Type» нужно поставить «Center».
- После того, как вы отцентровали вашу сетку, можете применять её для своих дизайнов. Она будет помогать вам выравнивать и упорядочить элементы на вашем проекте.
- При необходимости вы можете подтянуть ширину и расстояние между колонками в сетке. Для этого выберите кнопку «Edit Grid» (Редактировать сетку) из контекстного меню, щёлкнув правой кнопкой мыши на сетке.
Итоги
Сетка в Фигме — полезный элемент, который помогает дизайнерам быстро добиваться симметричности на макете с большим количеством мелких деталей, а также при использовании bootstrap. Включение, убирание и настройка сетки в Фигме производятся легко и быстро, главное — знать горячие клавиши и расположение основных кнопок в программе. Профессия веб-дизайнер может быть непростой, но если вы приложите усилия, у вас всё обязательно получится и вы сможете делать логотипы, проекты сайтов и другие творческие задачи. Используйте сетку, чтобы оптимизировать ваш рабочий процесс и сделать макеты ещё более эффектными и профессиональными.
Сетка в фигме: как включить, сделать, убрать, настроить сетку в Figma
В этом уроке разберем инструмент «Сетка» в фигме (Figma). Вы узнаете как её включить, убрать и настраивать для дизайна сайтов. Также я поделюсь с вами готовыми шаблонами с сетками, которые вы можете использовать в своих проектах.
Как сделать сетку в фигме
Чтобы сделать сетку в фигме выберите фрейм и в правой панели напротив надписи «Layout grid» нажмите на иконку плюса. Появится сетка в виде клеток размерами 10 на 10 пикселей.
Как настроить сетку в фигме
Чтобы настроить сетку в фигме нажмите в правой панели на иконку сетки. В появившемся окне вы сможете изменять размеры, цвет и прозрачность сетки. Также делать сетку в виде горизонтальных или вертикальных колонок.
Чтобы задать колоночную сетку, вместо значения «Grid» (сетка), выберите надпись «Columns» (колонки или столбцы).
Если хотите чтобы колонки были вертикальными, то следует задать значение «Rows» (что переводится как строки, ряды).
Как сделать сетку из 12 колонок в Figma
Чтобы сделать сетку из 12 колонов в Figma, выберите фрейм. Справа нажмите на иконку сетки, затем в значении «Count» выберите цифру «12» из списка. Таким образом вы зададите 12 колонок.
Сетку можно размещать по центру, если внизу надписи «Type» поставить «Center». По умолчанию стоит «Stretch». В этом случае сетка будет растягиваться на всю ширину.
Если хотите сделать сетку справа, то выберите из списка «Right».
Если хотите, чтобы сетка быра размещена в левом краю, то установите значение «Left».
Чтобы изменить ширину колонок, задайте значение в пикселях внизу надписи «Width» (ширина). Например я ставлю 80 пикселей. В этом случае сетка из 12 колонок будет иметь ширину 1180 px. Ширина фрейма 1920 px для настольных компьютеров.
Если хотите добавить новую сетку поверх первой, то снова нажмите на плюс в правой панели, напротив надписи «Layout grid».
Как удалить сетку в фигме
Чтобы удалить не нужную сетку в фигме, нажмите на иконку минуса, напротив той сетки, которую хотите удалить.
Как создать стиль сетки в фигме, чтобы использовать её повторно
Для создания стиля сетки, выберите фрейм, где есть сетка и справа, напротив надписи «Layout grid» нажмите на иконку с четырьмя точками. Появится всплывающее окно. Задайте имя стиля (например 12 колонок).
Чтобы использовать сетку повторно, выберите новый фрейм, затем нажмите на иконку с четырьмя точками в правой панели, напротив надписи «layout grid» и выберите созданный ранее стиль.
Как влючить и отключить сетку в фигме
Чтобы включить или отключить сетку в фигме нажмите на комбинацию горячих 3 клавиш «Ctrl + Shift + 4» для Windows и «Ctrl + G», если у вас операционная система Mac Os.
Шаблоны сеток в 12, 9, 6, 3 колонки для Figma.
Какие сетки использую лично я в своей работе? Специально для этой статьи я сделал шаблоны сеток. Вы можете дублировать этот файл по ссылке, чтобы посмотреть какие сетки и размеры фреймов я использую при создании дизайна сайтов (Landing Page).
Какие размеры фреймов с сетками я использую в фигме?
Хочу поделиться размерами своих сеток, которые использую. Мне удобно с ними работать и адаптировать дизайн для мобильных устройств с их помощью. Можете использовать другие сетки, но мой вариант тоже рабочий. Берите на вооружение.
Сетка в фигме в 12 колонок для компьютера (десктопа)
Ширина фрейма для компьютера (десктопа) — 1920 px. Я использую сетку в 12 колонок. Размеры столбцов 80 px. Расстояние между колонками — 20 px. Размер 12 колонок получается 1180 px.
Сетка 9 колонок для планшетов и мобильных устройств.
Далее идет фрейм с 9 колонками для планшетов и мобильных устройств. Таким образом удобно перестраивать элементы дизайна, которые у меня в 12 колоночной сетке. Здесь ширина фрейма — 1180 px. Аналогично ширине 12 колоночной сетки. 9 колонок. Ширина колонки также 80 px. Разрыв между колонками 20 px. Ширина сетки и рабочая область, где размещаю контент 880 px.
Сетка 6 колонок для мобильных устройств
Размеры фрейма для сетки с 6 колонками — 880 px. Количество столбцов 6. Ширина столбца 80 px, разрыв между столбцами 20 px. Ширина сетки из 6 колонок составляет 580 px.
Сетки из 3 колонок для мобильных устройств
Ширина фрейма — 446 px. Ширина одной колонки 80 px. Расстояние между колонками 20 px. Ширина 3 колонок для мобильных устройств — 280 px.
Все, что вам нужно знать о сетках в Figma
Когда я был начинающим дизайнером, одной из первых книг, которую я приобрел, была «Модульные системы в графическом дизайне» Йозефа Мюллера-Брокмана. Она была очень увлекательной, потому что помогла систематизировать множество способов, которыми сетка может обеспечить структуру и согласованность, улучшить читаемость и создать акцент и иерархию вашего дизайна. Это первая публикация, которая кратко формализует многие из этих концепций, и, вероятно, это одна из самых важных книг на эту тему.
Тщательно создавая сетку, подходящую для вашего контента, вы можете определить структуру, иерархию и ритм своего дизайна. Если все сделано правильно, «строительные леса» сеток избавят вас от необходимости угадывать многие аспекты вашего процесса. Различные типы сеток также могут помочь вам установить рациональный подход к масштабированию, позиционированию, размеру и интервалу.
Хотя эти принципы возникли в относительно «жесткой» печатной форме, я по-прежнему убежден в их важности. В эпоху цифрового дизайна сетки могут играть важную роль в обеспечении согласованности для устройств и областей просмотра самых разных размеров, особенно для команд, которым необходимо создать единообразный дизайн для нескольких продуктов и платформ.
Несмотря на все преимущества систем сеток, в течение долгого времени я мучился пытаясь эффективно подстроить их под свой процесс проектирования – они часто не давали мне той гибкости, которую я хотел (в других инструментах проектирования). Поэтому представьте мое счастье, когда я обнаружил, как сетки работают в Figma. Figma предлагает дополнительные функциональные возможности, например, стили, которые устраняют большую часть проблем, которые я испытывал ранее.
В Figma вы можете применить более одной сетки, в качестве свойства, к любому фрейму (и независимо переключать ее видимость). Это изменило правила игры и быстро стало неотъемлемой частью моего рабочего процесса. Общаясь с другими пользователями Figma, я узнал, что до сих пор многие пользователи не открыли для себя полезные возможности этой функции. Поэтому я решил поделиться несколькими способами использования сеток для ускорения процесса проектирования – от изменения размеров фреймов до визуализации интервалов и отступов.
Основы
Прежде чем углубиться в более сложные варианты использования, давайте рассмотрим основы того, где и как применять сетки. Если вы профессионал в этом вопросе, перейдите к следующему разделу.
Макет сетки можно применять только к фреймам. Это означает, что вы можете применять их к любым фреймам верхнего уровня, задающие размер устройства (настольный компьютер, мобильный телефон, планшет), фреймам, вложенным в ваш дизайн, или даже фреймам внутри ваших компонентов.
Несколько сеток на фрейме – Вы можете добавить на фрейм много разных сеток. Это означает, что вы можете размещать различные типы сеток на одном фрейме. Каждая из этих сеток также может быть выбрана и вставлена в другие фреймы, поскольку они применяются так же, как и другие свойства в правой боковой панели.
Внешний вид сетки – Вы можете контролировать внешний вид (цвет и непрозрачность) каждой сетки, чтобы их было легко дифференцировать.
Типы сеток
Существует три вида сетки на выбор: uniform grid, column grid и row grid. Uniform grid создает серию равномерно распределенных полей по всему фрейму (представьте лист бумаги в сетку) любого размера, который вы укажете. У остальных есть еще несколько вариантов создания столбцов и строк. В column и row сетках вы также можете контролировать их положение и масштабирование. Мы рассматривали эти вопросы подробнее в этой статье, поэтому здесь мы не будем вдаваться в детали, но вот краткая таблица, выделяющая некоторые ключевые различия.
Базовые сетки
Базовая сетка – это сетка, основанная на базовых строках, на которых располагается ваша типографика. Они выступают в роли визуальных подсказок в дизайне. Интервал, во многом зависит от масштаба типографики и высоты строк. Во многих системах сеток 8pt используется базовая строка 4pt. Этот базовый модуль делает математические вычисления легкими и масштабируемыми, когда вы начинаете настраивать различные размеры шрифта и комбинации высоты строки.
Базовая сетка может помочь вам выровнять элементы, а также даст единицу измерения, чтобы определить размеры и расстояние между элементами. Во многих дизайн-системах, таких как Material Design от Google, базовая сетка является основополагающей при определении соотношения размера шрифта и высоты строки, а также интервалов для полей и отступов.
Есть несколько способов создать базовую сетку в Figma с помощью row grid:
- Создание сетки на основе высоты линий
- Создание сетки на основе фактической базовой строки, на которой расположен текст
Поскольку у вас есть определенный контроль над внешним видом ваших сеток, вы можете создать подходящий вид сетки для любого подхода. Используя row grid с type set «Top», мы можем создать основу для базовой сетки. Обычно хорошим решением является установка большого числа строк, что позволит вам разместить более длинный скролл фреймов. Здесь вы можете выделить чередующиеся строки или тонкие линии, используя комбинацию свойств высоты, желоба между столбцами и цвета, как показано ниже.
Приведенные выше настройки сетки иллюстрируют различные подходы к стилизации базовой сетки.
Вложенные сетки
Теперь, когда мы рассмотрели основы, давайте посмотрим, как мы можем объединить их, поделиться ими и использовать их различными способами.
В отличие от других инструментов, вы не будете ограничены одной сеткой на уровне «артборда». Поскольку вы можете применить сетку к любому фрейму, это означает, что вы можете применить их к фреймам, вложенным в ваш дизайн. Поэтому не стесняйтесь делать из своего дизайна матрёшку и создавайте сетки в сетках внутри сеток.
Как только вы начнете использовать этот прием, вы получите бесконечные способы использования сеток в качестве визуальных подсказок в определенных областях вашего дизайна. Вы можете помочь различать их, задав цвет и непрозрачность отдельно для каждой сетки.
Применение ограничений к сеткам
Когда вы применяете ограничения в Figma, они помогают вам определять поведение элементов при изменении размера по отношению к их родительскому фрейму. Поэтому, если вы хотите, чтобы элемент оставался прикрепленным к верхнему правому углу фрейма (например, к кнопке закрытия), применение ограничений гарантирует, что элемент будет сохранять свое расстояние от верха и правой стороны фрейма без изменения его размера по мере увеличения или сжатия фрейма.
Напротив, когда вы применяете ограничения к элементу внутри фрейма, который имеет макет сетки, ваши ограничения будут относиться к ближайшему столбцу (а не к границам родительского фрейма). При использовании растягивающихся сеток это позволит вашим элементам оставаться прикрепленными к столбцам или строкам и поддерживать фиксированное пространство между ними (желоб). Это приводит к гораздо более реалистичному поведению при масштабировании, как вы можете видеть на gif-файле ниже.
Правильно устанавливая ограничения, вы можете изменять размеры элементов относительно сетки, что помогает поддерживать фиксированные желоба и поля столбцов
Правильно устанавливая ограничения, вы можете изменять размеры элементов относительно сетки, что помогает поддерживать фиксированные желоба и поля столбцов.
Используя этот же метод, мы можем добавить ограничения к нашему предыдущему примеру, что выделяет вложенные фреймы (каждый со своими сетками). Это позволяет вам независимо определять поведение при изменении размеров определенных областей дизайна.
После того как сетки и фреймы настроены, мы можем добавить в наш дизайн элементы, которые также могут изменять размеры относительно сеток в родительских фреймах.
Использование сеток для визуализации внутренних отступов
Иногда вам нужно визуализировать внутренние отступы, чтобы гарантировать, что содержимое остается равноудаленным от границ элемента. Для этого вы можете создать сетки, стилизуя column и row grid с одной строкой / столбцом, устанавливая желоба в 0 и поле с нужным интервалом. Если ваша дизайн-система имеет стандартизированные значения интервалов для отступов, вы можете быстро добавить их и применить их к фреймам или компонентам своего дизайна.
Совместное использование сеток со стилями
Когда вы создаете сетки, вы можете захотеть сделать разные вариации для макетов устройств разных размеров или других распространенных случаев использования. Чтобы упростить применение этих сеток к фреймам, файлам и проектам, вы можете объединить несколько сеток в единый стиль сетки. Этим стилем можно поделиться из командной библиотеки, как и другими стилями и компонентами. Очень просто.
Используйте сетки
Вот и все. Я надеюсь, что эти советы помогли вам узнать менее известные способы использования сеток в Figma, и я хотел бы увидеть, как вы их используете. Обязательно поделитесь своим опытом с сообществом Figma на Spectrum.