UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Все, что вам нужно знать о сетках в Figma
Редакція
Редакція

Опубліковано

Все, что вам нужно знать о сетках в Figma

Когда я был начинающим дизайнером, одной из первых книг, которую я приобрел, была «Модульные системы в графическом дизайне» Йозефа Мюллера-Брокмана. Она была очень увлекательной, потому что помогла систематизировать множество способов, которыми сетка может обеспечить структуру и согласованность, улучшить читаемость и создать акцент и иерархию вашего дизайна. Это первая публикация, которая кратко формализует многие из этих концепций, и, вероятно, это одна из самых важных книг на эту тему.

Тщательно создавая сетку, подходящую для вашего контента, вы можете определить структуру, иерархию и ритм своего дизайна. Если все сделано правильно, «строительные леса» сеток избавят вас от необходимости угадывать многие аспекты вашего процесса. Различные типы сеток также могут помочь вам установить рациональный подход к масштабированию, позиционированию, размеру и интервалу.

Хотя эти принципы возникли в относительно «жесткой» печатной форме, я по-прежнему убежден в их важности. В эпоху цифрового дизайна сетки могут играть важную роль в обеспечении согласованности для устройств и областей просмотра самых разных размеров, особенно для команд, которым необходимо создать единообразный дизайн для нескольких продуктов и платформ.

Несмотря на все преимущества систем сеток, в течение долгого времени я мучился пытаясь эффективно подстроить их под свой процесс проектирования – они часто не давали мне той гибкости, которую я хотел (в других инструментах проектирования). Поэтому представьте мое счастье, когда я обнаружил, как сетки работают в Figma. Figma предлагает дополнительные функциональные возможности, например, стили, которые устраняют большую часть проблем, которые я испытывал ранее.

В Figma вы можете применить более одной сетки, в качестве свойства, к любому фрейму (и независимо переключать ее видимость). Это изменило правила игры и быстро стало неотъемлемой частью моего рабочего процесса. Общаясь с другими пользователями Figma, я узнал, что до сих пор многие пользователи не открыли для себя полезные возможности этой функции. Поэтому я решил поделиться несколькими способами использования сеток для ускорения процесса проектирования – от изменения размеров фреймов до визуализации интервалов и отступов.

Основы

Прежде чем углубиться в более сложные варианты использования, давайте рассмотрим основы того, где и как применять сетки. Если вы профессионал в этом вопросе, перейдите к следующему разделу.

Макет сетки можно применять только к фреймам. Это означает, что вы можете применять их к любым фреймам верхнего уровня, задающие размер устройства (настольный компьютер, мобильный телефон, планшет), фреймам, вложенным в ваш дизайн, или даже фреймам внутри ваших компонентов.

Несколько сеток на фрейме – Вы можете добавить на фрейм много разных сеток. Это означает, что вы можете размещать различные типы сеток на одном фрейме. Каждая из этих сеток также может быть выбрана и вставлена ​​в другие фреймы, поскольку они применяются так же, как и другие свойства в правой боковой панели.

Внешний вид сетки – Вы можете контролировать внешний вид (цвет и непрозрачность) каждой сетки, чтобы их было легко дифференцировать.

2

Типы сеток

Существует три вида сетки на выбор: uniform grid, column grid и row grid. Uniform grid создает серию равномерно распределенных полей по всему фрейму (представьте лист бумаги в сетку) любого размера, который вы укажете. У остальных есть еще несколько вариантов создания столбцов и строк. В column и row сетках вы также можете контролировать их положение и масштабирование. Мы рассматривали эти вопросы подробнее в этой статье, поэтому здесь мы не будем вдаваться в детали, но вот краткая таблица, выделяющая некоторые ключевые различия.

3

Базовые сетки

Базовая сетка – это сетка, основанная на базовых строках, на которых располагается ваша типографика. Они выступают в роли визуальных подсказок в дизайне. Интервал, во многом зависит от масштаба типографики и высоты строк. Во многих системах сеток 8pt используется базовая строка 4pt. Этот базовый модуль делает математические вычисления легкими и масштабируемыми, когда вы начинаете настраивать различные размеры шрифта и комбинации высоты строки.

Базовая сетка может помочь вам выровнять элементы, а также даст единицу измерения, чтобы определить размеры и расстояние между элементами. Во многих дизайн-системах, таких как Material Design от Google, базовая сетка является основополагающей при определении соотношения размера шрифта и высоты строки, а также интервалов для полей и отступов.

Есть несколько способов создать базовую сетку в Figma с помощью row grid:

  1. Создание сетки на основе высоты линий
  2. Создание сетки на основе фактической базовой строки, на которой расположен текст

Поскольку у вас есть определенный контроль над внешним видом ваших сеток, вы можете создать подходящий вид сетки для любого подхода. Используя row grid с type set «Top», мы можем создать основу для базовой сетки. Обычно хорошим решением является установка большого числа строк, что позволит вам разместить более длинный скролл фреймов. Здесь вы можете выделить чередующиеся строки или тонкие линии, используя комбинацию свойств высоты, желоба между столбцами и цвета, как показано ниже.

4

Приведенные выше настройки сетки иллюстрируют различные подходы к стилизации базовой сетки.

Вложенные сетки

Теперь, когда мы рассмотрели основы, давайте посмотрим, как мы можем объединить их, поделиться ими и использовать их различными способами.

В отличие от других инструментов, вы не будете ограничены одной сеткой на уровне «артборда». Поскольку вы можете применить сетку к любому фрейму, это означает, что вы можете применить их к фреймам, вложенным в ваш дизайн. Поэтому не стесняйтесь делать из своего дизайна матрёшку и создавайте сетки в сетках внутри сеток.

Как только вы начнете использовать этот прием, вы получите бесконечные способы использования сеток в качестве визуальных подсказок в определенных областях вашего дизайна. Вы можете помочь различать их, задав цвет и непрозрачность отдельно для каждой сетки.

5

Применение ограничений к сеткам

Когда вы применяете ограничения в Figma, они помогают вам определять поведение элементов при изменении размера по отношению к их родительскому фрейму. Поэтому, если вы хотите, чтобы элемент оставался прикрепленным к верхнему правому углу фрейма (например, к кнопке закрытия), применение ограничений гарантирует, что элемент будет сохранять свое расстояние от верха и правой стороны фрейма без изменения его размера по мере увеличения или сжатия фрейма.

Напротив, когда вы применяете ограничения к элементу внутри фрейма, который имеет макет сетки, ваши ограничения будут относиться к ближайшему столбцу (а не к границам родительского фрейма). При использовании растягивающихся сеток это позволит вашим элементам оставаться прикрепленными к столбцам или строкам и поддерживать фиксированное пространство между ними (желоб). Это приводит к гораздо более реалистичному поведению при масштабировании, как вы можете видеть на gif-файле ниже.

6

Правильно устанавливая ограничения, вы можете изменять размеры элементов относительно сетки, что помогает поддерживать фиксированные желоба и поля столбцов

Правильно устанавливая ограничения, вы можете изменять размеры элементов относительно сетки, что помогает поддерживать фиксированные желоба и поля столбцов.

Используя этот же метод, мы можем добавить ограничения к нашему предыдущему примеру, что выделяет вложенные фреймы (каждый со своими сетками). Это позволяет вам независимо определять поведение при изменении размеров определенных областей дизайна.

7

После того как сетки и фреймы настроены, мы можем добавить в наш дизайн элементы, которые также могут изменять размеры относительно сеток в родительских фреймах.

8

Использование сеток для визуализации внутренних отступов

Иногда вам нужно визуализировать внутренние отступы, чтобы гарантировать, что содержимое остается равноудаленным от границ элемента. Для этого вы можете создать сетки, стилизуя column и row grid с одной строкой / столбцом, устанавливая желоба в 0 и поле с нужным интервалом. Если ваша дизайн-система имеет стандартизированные значения интервалов для отступов, вы можете быстро добавить их и применить их к фреймам или компонентам своего дизайна.

9

Совместное использование сеток со стилями

Когда вы создаете сетки, вы можете захотеть сделать разные вариации для макетов устройств разных размеров или других распространенных случаев использования. Чтобы упростить применение этих сеток к фреймам, файлам и проектам, вы можете объединить несколько сеток в единый стиль сетки. Этим стилем можно поделиться из командной библиотеки, как и другими стилями и компонентами. Очень просто.

10

Используйте сетки

Вот и все. Я надеюсь, что эти советы помогли вам узнать менее известные способы использования сеток в Figma, и я хотел бы увидеть, как вы их используете. Обязательно поделитесь своим опытом с сообществом Figma на Spectrum.


Перевод статьи Thomas Lowry

Топ коментарі (1)