Все, что вам нужно знать о сетках в Figma
Когда я был начинающим дизайнером, одной из первых книг, которую я приобрел, была «Модульные системы в графическом дизайне» Йозефа Мюллера-Брокмана. Она была очень увлекательной, потому что помогла систематизировать множество способов, которыми сетка может обеспечить структуру и согласованность, улучшить читаемость и создать акцент и иерархию вашего дизайна. Это первая публикация, которая кратко формализует многие из этих концепций, и, вероятно, это одна из самых важных книг на эту тему. Тщательно создавая сетку, подходящую для вашего контента, вы можете определить структуру, иерархию и ритм своего дизайна. Если все сделано правильно, «строительные леса» сеток избавят вас от необходимости угадывать многие аспекты вашего процесса. Различные типы сеток также могут помочь вам установить рациональный подход к масштабированию, позиционированию, размеру и интервалу. Хотя эти принципы возникли в относительно «жесткой» печатной форме, я по-прежнему убежден в их важности. В эпоху цифрового дизайна сетки могут играть важную роль в обеспечении согласованности для устройств и областей просмотра самых разных размеров, особенно для команд, которым необходимо создать единообразный дизайн для нескольких продуктов и платформ. Несмотря на все преимущества систем сеток, в течение долгого времени я мучился пытаясь эффективно подстроить их под свой процесс проектирования – они часто не давали мне той гибкости, которую я хотел (в других инструментах проектирования). Поэтому представьте мое счастье, когда я обнаружил, как сетки работают в Figma. Figma предлагает дополнительные функциональные возможности, например, стили, которые устраняют большую часть проблем, которые я испытывал ранее. В Figma вы можете применить более одной сетки, в качестве свойства, к любому фрейму (и независимо переключать ее видимость). Это изменило правила игры и быстро стало неотъемлемой частью моего рабочего процесса. Общаясь с другими пользователями Figma, я узнал, что до сих пор многие пользователи не открыли для себя полезные возможности этой функции. Поэтому я решил поделиться несколькими способами использования сеток для ускорения процесса проектирования – от изменения размеров фреймов до визуализации интервалов и отступов.
Основы
Прежде чем углубиться в более сложные варианты использования, давайте рассмотрим основы того, где и как применять сетки. Если вы профессионал в этом вопросе, перейдите к следующему разделу. Макет сетки можно применять только к фреймам. Это означает, что вы можете применять их к любым фреймам верхнего уровня, задающие размер устройства (настольный компьютер, мобильный телефон, планшет), фреймам, вложенным в ваш дизайн, или даже фреймам внутри ваших компонентов. Несколько сеток на фрейме – Вы можете добавить на фрейм много разных сеток. Это означает, что вы можете размещать различные типы сеток на одном фрейме. Каждая из этих сеток также может быть выбрана и вставлена в другие фреймы, поскольку они применяются так же, как и другие свойства в правой боковой панели. Внешний вид сетки – Вы можете контролировать внешний вид (цвет и непрозрачность) каждой сетки, чтобы их было легко дифференцировать.
Типы сеток
Существует три вида сетки на выбор: uniform grid, column grid и row grid. Uniform grid создает серию равномерно распределенных полей по всему фрейму (представьте лист бумаги в сетку) любого размера, который вы укажете. У остальных есть еще несколько вариантов создания столбцов и строк. В column и row сетках вы также можете контролировать их положение и масштабирование. Мы рассматривали эти вопросы подробнее в этой статье, поэтому здесь мы не будем вдаваться в детали, но вот краткая таблица, выделяющая некоторые ключевые различия.
Базовые сетки
- Создание сетки на основе высоты линий
- Создание сетки на основе фактической базовой строки, на которой расположен текст
Поскольку у вас есть определенный контроль над внешним видом ваших сеток, вы можете создать подходящий вид сетки для любого подхода. Используя row grid с type set «Top», мы можем создать основу для базовой сетки. Обычно хорошим решением является установка большого числа строк, что позволит вам разместить более длинный скролл фреймов. Здесь вы можете выделить чередующиеся строки или тонкие линии, используя комбинацию свойств высоты, желоба между столбцами и цвета, как показано ниже.
Приведенные выше настройки сетки иллюстрируют различные подходы к стилизации базовой сетки.
Вложенные сетки
Теперь, когда мы рассмотрели основы, давайте посмотрим, как мы можем объединить их, поделиться ими и использовать их различными способами.
В отличие от других инструментов, вы не будете ограничены одной сеткой на уровне «артборда». Поскольку вы можете применить сетку к любому фрейму, это означает, что вы можете применить их к фреймам, вложенным в ваш дизайн. Поэтому не стесняйтесь делать из своего дизайна матрёшку и создавайте сетки в сетках внутри сеток.
Как только вы начнете использовать этот прием, вы получите бесконечные способы использования сеток в качестве визуальных подсказок в определенных областях вашего дизайна. Вы можете помочь различать их, задав цвет и непрозрачность отдельно для каждой сетки.
Применение ограничений к сеткам
Когда вы применяете ограничения в Figma, они помогают вам определять поведение элементов при изменении размера по отношению к их родительскому фрейму. Поэтому, если вы хотите, чтобы элемент оставался прикрепленным к верхнему правому углу фрейма (например, к кнопке закрытия), применение ограничений гарантирует, что элемент будет сохранять свое расстояние от верха и правой стороны фрейма без изменения его размера по мере увеличения или сжатия фрейма.
Напротив, когда вы применяете ограничения к элементу внутри фрейма, который имеет макет сетки, ваши ограничения будут относиться к ближайшему столбцу (а не к границам родительского фрейма). При использовании растягивающихся сеток это позволит вашим элементам оставаться прикрепленными к столбцам или строкам и поддерживать фиксированное пространство между ними (желоб). Это приводит к гораздо более реалистичному поведению при масштабировании, как вы можете видеть на gif-файле ниже.
Правильно устанавливая ограничения, вы можете изменять размеры элементов относительно сетки, что помогает поддерживать фиксированные желоба и поля столбцов
Правильно устанавливая ограничения, вы можете изменять размеры элементов относительно сетки, что помогает поддерживать фиксированные желоба и поля столбцов.
Используя этот же метод, мы можем добавить ограничения к нашему предыдущему примеру, что выделяет вложенные фреймы (каждый со своими сетками). Это позволяет вам независимо определять поведение при изменении размеров определенных областей дизайна.
После того как сетки и фреймы настроены, мы можем добавить в наш дизайн элементы, которые также могут изменять размеры относительно сеток в родительских фреймах.
Использование сеток для визуализации внутренних отступов
Иногда вам нужно визуализировать внутренние отступы, чтобы гарантировать, что содержимое остается равноудаленным от границ элемента. Для этого вы можете создать сетки, стилизуя column и row grid с одной строкой / столбцом, устанавливая желоба в 0 и поле с нужным интервалом. Если ваша дизайн-система имеет стандартизированные значения интервалов для отступов, вы можете быстро добавить их и применить их к фреймам или компонентам своего дизайна.
Совместное использование сеток со стилями
Когда вы создаете сетки, вы можете захотеть сделать разные вариации для макетов устройств разных размеров или других распространенных случаев использования. Чтобы упростить применение этих сеток к фреймам, файлам и проектам, вы можете объединить несколько сеток в единый стиль сетки. Этим стилем можно поделиться из командной библиотеки, как и другими стилями и компонентами. Очень просто.
Используйте сетки
Вот и все. Я надеюсь, что эти советы помогли вам узнать менее известные способы использования сеток в Figma, и я хотел бы увидеть, как вы их используете. Обязательно поделитесь своим опытом с сообществом Figma на Spectrum.
Давайте поговорим немного о сетках.
Сетка. Сетки. Сетки. Сетка. Надо использовать модульные сетки. Надо работать с сеткой. А ты используешь сетку? Быть может, вы уже слышали не раз о сетках и, быть может, вы уже даже пробовали с ними работать. А, возможно, наоборот, вы сейчас не понимаете, о чем я, собственно, веду речь. Итак, давайте разбираться вместе, что это такое и зачем они нужны, сетки эти.
Что такое сетка?
Если говорить простыми словами, сетка — это инструмент, который помогает структурировать рабочий процесс в дизайне. Заметьте, я не сказала в каком именно дизайне она используется, а знаете почему? Потому, что она используется буквально везде! Просто в каждом дизайне есть свой вид и тип сетки или аналогичный инструмент. Например, если мы говорим с вами про графический дизайн, то в нем используются сразу несколько типов сеток.
1. Золотое сечение, построенное на принципе системы чисел Фибоначчи (0 1 1 2 3 5 8 13 и т.д.). Это «божественная пропорция». Спираль, данная последовательность прослеживается везде: от природы до самого человека, собственно. Возможно поэтому нашему человеческому глазу приятно видеть предметы, построенные на этой пропорции. Например греки, как утверждается, строили Парфенон также придерживаясь пропорции золотого сечения. Толщина и высота колонн, расстояние между ними — все соответствует пропорции, в основе которой лежит число Фибоначчи.
Как найти частное от деления двух последующих чисел Фибоначчи (т.е. 8 делим 5 или 5 делим 3), результат очень близок к золотому сечению 1,6 или φ (фи). Посмотрите, например, на свою ладонь. Средняя длинна ваших четырех пальцев будет равна 1,6 к длине ладони.
Как его использовать? На самом деле, тут можно много и долго расписывать, потому что способов применения у данного инструмента очень много.
Как применять золотое сечение в логотипе?
Давайте посмотрим ряд примеров и начнем с построения логотипа. Проведите внимательный анализ и принцип построения логотипа на базе числа Фибоначчи и золотого сечения.
Примеры выстроенных логотипов
Как применять золотое сечение в тексте?
Перед вами стоит задача подобрать идеальный размер подзаголовка и заголовка для набора текста. Предположим, что для основного текста вы используете размер шрифта 12 кегль. Чтобы высчитать размер подзаголовка, мы 12 умножаем на 1,6 и получаем 19. Чтобы высчитать размер заголовка, проделаем то же самое, только перемножив значение подзаголовка на число φ (фи). Готово! У нас с вами есть теперь идеально пропорционально подобранные кегли шрифта.
Однако, спешу заметить, что, к сожалению, далеко не со всеми гарнитурами эта пропорция будет работать. Так как сейчас очень большое кол-во разнообразных гарнитур, и они имеют очень разные пропорции. Данное правило будет неплохо работать в отношении классических гарнитур с универсальными пропорциями, как правило, это антиквы, шрифты с засечками.
Как применять золотое сечение в UI?
Возможно вы уже догадались, что данную пропорцию можно вкладывать в основу построения сетки. То есть при расчете ширины колонок сетки и межколончатого расстояния, вы будете придерживаться пропорции золотого сечения. Все то же самое, как и в случае использования в работе с текстом.
Однако, есть тоже одно НО. Не забываем про респонсив! Ваши колонки, как и ваш макет в целом, будет всегда динамичен относительно разных экранов монитора. То есть спроектировать 1 макет, вкладывая в его основу округленные значения относительно пропорции золотого сечения, вполне себе реально, но невозможно покрыть все разрешения экранов. То же самое касается использования спирали.
Посмотрите примеры. Да, именно на этом разрешении оно будет работать! Смотрится отлично! А что если мы делаем под мобайл? Или что если мы откроем данный сайт на очень вытянутом мониторе? Поэтому данные примеры для интерфейсов с наложением спирали выглядят немного нелепо. Но с другой стороны, они помогают распределить массы и концентрацию объектов, пусть не идеально на все возможных разрешениях, но какую-то часть смогут покрыть.
Примеры использования золотого сечения в UI
Правило третей
Принцип работы данного вида сетки очень прост. Сперва необходимо поделить макет на 9 одинаковых частей. Затем, расположить основные элементы на точках, которые образуются при пересечении прямых. Проанализируйте примеры использования третей. Данная сетка отлично будет работать в рекламных баннерах, плакатах, фотографиях. Если вы хотите еще больше приблизить вашу работу к идеальной, стороны вашего макета и стороны у 9 получившихся прямоугольников при делении должны быть пропорциональны соотношению 1:1,6.
Примеры использования третей
Иерархическая сетка
Свободный вариант использования сетки. Вы берете за основу прямоугольник (желательно в пропорциональном соотношении 1:1,6) и начинаете его вращать и располагать, основываясь на ваших чувствах. Безусловно, не забываем про расстояния между прямоугольниками. Желательно, в данные расстояния привнести тоже какую-то логику (использовать одинаковое расстояние или в пропорциональном увеличении). Далее, когда вы закончите работу над сеткой, просто помещаем в нее основные элементы вашего дизайна. Отлично подойдет при разработке плаката или какой-то абстракции.
Модульная сетка
И вот мы наконец потихоньку подходим к нужной нам сетке! Почти. Давайте разбираться. Модульная сетка — это сетка, в основании которой лежит модуль. Модуль — это условная единица, шаг в ритме сетке. Модуль образуется за счет пересечения вертикалей и горизонталей. Модульная сетка выглядит как ирландский пледик в квадратик. Модульная сетка — это универсальный инструмент организации пространства. Данную сетку всегда используют в графическом дизайне при верстке журналов, книг, в дизайне плаката и т.д.
А используют ли ее в проектировании интерфейсов? Ответ — и да и нет. В UI дизайне используется колончатая сетка, которая, в зависимости от разрешения экрана, немного видоизменяется. Многие интерфейс-дизайнеры ошибочно говорят, что они работают с модульной сеткой. Да, они безусловно могут работать (и надо работать!) не только с колонками, но и соблюдают ритм относительно горизонталей. Однако, когда данные круто спроектированные макеты приходят к разработчику. они не используют и не смотрят на горизонтальную сетку, а работают только относительно вертикалей, то есть колонок.
Так как тогда быть дизайнеру? И какой смысл использовать горизонтальную сетку? Вы, скорее, должны выработать определенную структуру отступов между элементов. Безусловно, если у вас идеальная дизайн-система (например, как в material, где все построено на 8 пиксельной сетке), и ваши отступы имеют структурированные пропорциональные значения при расположении относительно горизонтальной сетки (когда нет такого, что есть отступ в 13 пикселей, а все остальные кратны двум), то тогда вперед! Используем горизонтальную сетку для удобства. Но, если выше перечисленные условия не соблюдаются, то можно просто работать с системой отступов. Например, между заголовком H1 и текстом вы всегда делаете отступ в 30 пикселей, а между текстом и кнопкой 40.
Сетки в Figma. Часть 1
Как работать с сеткой в Figma, ее настройки, и что такое Grid Style.
Сетка — один из важных инструментов при создании хорошего дизайна сайта. Она помогает нам дизайнерам, расставить все по местам и облегчает расчеты.
Figma дает нам очень удобный инструмент Layout Grid, которым очень легко пользоваться. Сочетанием горячих клавиш скрывать и отображать сетку (Ctrl+G), а также масштабировать её на разную ширину макета, что незаменимо при создании адаптивного дизайна.
Как создать сетку в Figma
Сетка может быть применима к фреймам или внтури компонентов. Так что в первую очередь нам необходимо создать фрейм и выделить его, кликнув по названию. Фрейм подсветится синей рамкой, в правой боковой панели Design появится пункт Layout Grid.
Добавляем новую сетку “+” и жмем на нее. Появляется окно настроек.
По умолчанию Figma создает сетку типа Grid. Она удобна при создании мобильных приложений. Нас, как веб-дизайнеров, интересует вторая вкладка Columns. Выбираем ее и видим следующие настройки.
Настройки
- Count — количество колонок
- Width — ширина колонки
- Gutter — межколоночный отступ
- Margin — оступ сетки от правого и левого края макета
Ну это, я думаю вы и без меня прекрасно поняли.
�� Интересная и важная настройка это Type. В выпадающем списке можно выбрать:
- Stretch–резиновая сетка, ширина колонки задается автоматически программой. А это значит что не надо самому считать и учитывать полупиксели если вдруг блоки не делятся поровну ��
- Center–сетка центруется. При выборе этого пункта становится активным окошко Width.
- Left–тут понятно. Одно время Артемий Лебедев пропагандировал сайты прижатые к левому краю, вряд ли это в его честь, но наверное кому-то будет полезно.
�� Можно создать много сеток в одном фрейме, если нужно!!
Бомба!
А теперь уберите от экранов слабонервных.
Выбираем Stretch сетку с нужными параметрами и начинаем изменить размер фрейма. Это же просто отрыв башки, извините. Сетка тянется вслед за макетом.
Растянули макет, подровняли элементы дизайна по новым размерам, бум, профит, новое разрешение макета готово!
Grid Style
Наверное вы заметили, что при наведении на пункт Layout Grid, рядом с плюсом, появляется еще одна иконка (4 точки). Суть в том что нашу сетку мы можем сохранить как стиль.
Жмем появившуюся иконку (после того как создали сетку или несколько сеток в вашем фрейме), даем название стилю, готово. Теперь при нажатии на иконку из 4х точек, в выпадающем меню появится ваш стиль сетки. Можете применять ее к любому новому фрейму.
Поностальгируем
А давайте вспомни как мы все раньше работали с сетками в Фотошопе.
В лучшем случае это был отдельный слой, который всегда терялся и его приходилось искать в куче других слоев, в худшем — сетка из направляющих, которая мешала выбирать и трансформировать элементы. Сколько проблем, неправда ли?
Figma избавляет нас от этой боли в заднице. Спасибо ей за это! Теперь мы можем больше времени уделять непосредственно дизайну, а не поиску слоя с сеткой.
Правила построения модульной сетки в Фигме
Одним из важнейших инструментов любого web-дизайнера является модульная сетка, которая позволяет грамотно зонировать пространство, затрачивая на этом минимум времени и сил. Многие разработчики для создания сайта пользуется программой Figma, с помощью которой можно легко создавать прототипы сайтов и приложения, использовать иллюстрации и векторную графику. Зная, как правильно пользоваться в Фигме модульными направляющими, можно по максимуму использовать все ее преимущества.
Для чего задействуется модульная сетка в веб-дизайне
Любая модульная сетка определяет внешний вид будущего макета, а также задает места расположения на web-странице разных элементов, включая текст, иллюстрации, заголовки, кнопки, прочие информационные и графические объекты. Сетка в Фигме представляет собой систему непечатаемых горизонтальных, диагональных, а также вертикальных линий, проходящих по странице.
Шаблоны сеток облегчат работу любому web-дизайнеру
Как можно догадаться, модульная сетка представляет собой основу для любого дизайн-макета. Она также может состоять из простых геометрических фигур — модулей определенного размера, которые располагаются в требуемом порядке. С ее помощью можно лучше организовать пространство и подчинить элементы определенной последовательности. Между прочим, при помощи данного инструмента можно сделать пространство более объемным, что гарантированно улучшает восприятие сайта со стороны посетителей.
Особенности модульной сетки в Figma
В отличие от других программ, Фигма имеет дополнительные функциональные возможности. Благодаря этому обеспечивается гибкая настройка. Это открывает расширенные возможности для web-дизайнера, который может свободно настраивать ее под себя. Примечательно, что при желании здесь применяют не одну, а несколько направляющих, причем к разным фреймам, задавая видимость и глубину линий.
Панель настроек Layout Grid
Многоуровневость – весомый плюс сетки в Фигме, поскольку ее можно уверено применять к фреймам верхнего уровня, а также к фреймам, расположенным внутри компонентов. Используя разные типы модулей, в одном фрейме можно детально проработать дизайн и гармонично распределить разные элементы согласно выбранной схеме. При этом пользователь может даже задавать внешний вид, контролируя свет и уровень прозрачности, дифференцируя его под себя и свои предпочтения.
Основные типы модульных сеток в Фигме
Для лучшего понимания особенностей, рассмотрим их основные виды:
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-страниц.