И в продолжении темы сеток опубликованным мной несколько дней назад, предлагаю ознакомиться со статьей Томаса Лоури, дизайнера из команды Figma.
Как начинающий дизайнер, одной из первых книг, которые я приобрел, была «Система сеток в графическом дизайне» Йозефа Мюллера-Брокмана. Книга была увлекательной и помогла усвоить многие способы, которыми сетка могла создать структуру и согласованность, улучшить читаемость и создать акцент и иерархию в дизайне. Это первый текст, который определяет многие из этих понятий в краткие слова, и, вероятно, один из самых важных томов по этой теме. В мире дизайна есть распространенная шутка, что вы можете определить, как давно кто-то был дизайнером по цвету корешка их книги Мюллера-Брокмана.
Тщательно построив сетку, подходящую для вашего контента, вы можете определить структуру, иерархию и ритм в своем дизайне. Когда все сделано правильно, леса сеток могут устранить сомнения из многих аспектов вашего проекта. Различные типы сеток могут также помочь установить рациональный подход к масштабам текстов, позиционированию, размерам и интервалам.
Хотя эти принципы возникли в относительно «жесткой» среде печати, сейчас я более чем когда-либо убежден в их важности. В эпоху дизайна экранные сетки могут играть важную роль в обеспечении согласованности между широким спектром размеров устройств и диагоналей, особенно для команд, которым необходимо создать единую модель для нескольких продуктов и платформ.
Несмотря на все преимущества грид-систем, я долгое время боролся за эффективную настройку сеток в своем собственном процессе проектирования. Они часто не давали желаемой гибкости (в других инструментах проектирования). Поэтому можно представить мое счастье, когда я обнаружил, как работают макетные сетки в Figma. Figma предложила дополнительный функционал, такой как стили, которые удалили большую часть трения, которое я ранее испытывал.
В Figma вы можете применить более одной сетки в качестве свойства к любому фрейму (и независимо переключать ее видимость). Это быстро стало неотъемлемой частью моего рабочего процесса. В разговоре с другими пользователями Figma я узнал, что у многих все еще не было момента озарения, которое я постиг в раскрытии полезных возможностей этой функции. Итак, я подумал, что поделюсь несколькими способами использования макетных сеток для ускорения процесса проектирования, от изменения размеров фреймов до визуализации интервалов и отступов.
Рассмотрим этот пост как услугу за услугу... взамен, все, что я хочу, это чтобы вы распространили эти слова на других новичков по части сеток!
Основы сетки макета
Прежде чем я перейду к более продвинутым вариантам использования, давайте рассмотрим основы того, где и как вы применяете сетки. Если вы специалист по сеткам, перейдите к следующему разделу.
Применить сетку макета к любому фрейму — сетки макета могут применяться только к фреймам. Это значит, что можно применять их к любым фреймам верхнего уровня для устройства (рабочий стол, мобильный телефон, планшет), фреймам, вложенным в ваш дизайн, или даже фреймам внутри ваших компонентов.
Несколько сеток в фрейме. Это значит, что можно сочетать разные типы сеток в одном фрейме. Каждая из этих сеток также может быть выбрана и вставлена в другие фреймы, тк они применяются как и другие свойства в правой боковой панели.
Внешний вид сетки - вы можете контролировать внешний вид (цвет и прозрачность) каждой сетки, чтобы они были легко дифференцированы.
Типы сеток
Существует три различных типа сеток на выбор: сетка (единая сетка), столбец и строка. Равномерные сетки создают серию равномерно распределенных полей по всему фрейму (представьте листовую сетку) любого заданного размера. У других есть еще несколько вариантов создания столбцов и строк. В сетках столбцов и строк можно также управлять их положением и масштабированием. Мы рассмотрим большую часть этого позже, поэтому не будем вдаваться во все детали, но вот наглядный визуал, чтобы выделить некоторые из их ключевых различий.
Базовые сетки
Базовая сетка — это сетка, которая устанавливается из базовых линий, на которых находится ваш текст. Они отображаются как наглядные пособия в вашем дизайне, охватывающие ширину вашего дизайна и повторяющиеся вертикально при ровных интервале. Этот интервал в значительной степени зависит от ваших масштабов типографии и высоты линий. Во многих системах сетки 8pt используется базовая линия 4pt. Этот базовый блок делает вычисления легкими и масштабируемыми по мере того как вы используете различные размеры шрифта в комбинации с высотой строк.
Использование одного может помочь выровнять одну часть типа к другому, давая вам единицу измерения, чтобы помочь установить размер и интервал других элементов. Во многих системах проектирования, таких как Google Material Design, базовая сетка является основополагающей частью определения размера типа и высоты линии, а также интервала для полей и отступов.
Если вы когда-либо хотели создать базовую сетку в Figma, существует несколько различных способов сделать это с помощью сетки строк.
- Сетка, построенная вокруг высоты линий
- Сетка, построенная вокруг фактической базовой линии, на которой находится текст
Поскольку у вас есть некоторый контроль над внешним видом сеток, вы можете выбрать подходящую сетку для любого варианта. Используя сетку строк с типом «Top», можно создать основу для базовой сетки. Обычно это хороший вариант для высокого числа строк, который позволит разместить более длинные рамки прокрутки. Оттуда можно выбрать чередующиеся строки или тонкие линии, используя комбинацию свойств высоты, интервала и цвета, как показано ниже.
Вложенные сетки
Теперь, когда мы рассмотрели основы, давайте посмотрим, как мы можем объединить их, поделиться ими и использовать различными способами.
Вложенные сетки
В отличие от других инструментов, вы не будете ограничены одной сеткой в зоне «монтажной области». Поскольку можно применить сетку к любому фрейму, это означает, что их можно применить к фреймам, вложенным в проект. Так что смело натягивайте все варианты на свой дизайн и создавайте сетки внутри сеток внутри сеток как душе угодно.
Как только вы начнете использовать этот прием, взгляните на наглядное пособие в определенных областях вашего дизайна. Можно дифференцировать их, указав цвет и прозрачность каждой сетки.
Использование ограничений с сетками макета
Применение ограничений в Figma помогает определить поведение изменения размера элементов по отношению к родительскому фрейму. Поэтому, если вы хотите, чтобы элемент оставался закрепленным в правом верхнем углу кадра (например, кнопка закрытия), применение ограничений гарантирует, что элемент сохранит свое расстояние сверху и справа, не изменяя его размер по мере роста или сокращения кадра.
Напротив, когда вы применяете ограничения к элементу внутри фрейма, который имеет сетку макета, ваши ограничения будут относиться к их ближайшему столбцу (вместо границ родительского фрейма). При использовании с сетками растяжения это позволит элементам оставаться фиксированными в столбцах или строках и поддерживать фиксированное пространство между ними. Это приводит к гораздо более реалистичному поведению масштабирования, как вы можете видеть в гифке ниже.
Правильно задавая ограничения, можно изменять размер элементов относительно сетки макета, что помогает поддерживать фиксированные расстояния и поля столбцов.
Используя тот же метод, мы можем добавить ограничения к нашему предыдущему примеру, которые выделяют вложенные фреймы (каждый со своими сетками). Это позволяет независимо определять поведение изменения размера определенных областей в проекте.
После того, как сетки и рамки настроены, мы можем добавить в наш дизайн элементы, которые также могут изменять размер относительно сеток на родительских фреймах.
Использование сеток для визуализации заполнения
Иногда необходимо визуализировать отступы, чтобы содержимое оставалось равноудаленным от границ элемента. Вы можете создать сетки в качестве вспомогательного элемента, создав стиль столбца и сетки строк с одной строкой/столбцом, установив расстояние в 0 и поле на нужный интервал. Если система проектирования имеет стандартные значения интервалов для заполнения, их можно быстро добавить и применить к рамкам или компонентам проекта.
Общий доступ к сеткам со стилями
При создании сеток может потребоваться внести различные изменения в макеты для различных размеров устройств или других распространенных вариантов использования. Чтобы упростить применение этих сеток к фреймам, файлам и проектам, можно объединить несколько из них в один стиль сетки. Этот стиль, как и другие стили и компоненты, можно использовать совместно с библиотекой команды. Легко и просто.
Вот и все для сегодняшнего быстрого обзора по сеткам. Надеюсь, эти советы раскрыли некоторые из менее известных способов использования сеток в Figma.
Перевод статьи с сайта Figma.com