Сгруппировать в фигма: удобное копирование, группировка стилей и режим аутлайнов / Skillbox Media

удобное копирование, группировка стилей и режим аутлайнов / Skillbox Media

Дизайн

#Руководства

29 апр 2022
0

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

Vkontakte

Twitter

Скопировать ссылку

Иллюстрация: Meery Mary для Skillbox Media

Вячеслав Лазарев

Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.

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

Рассказываем о пяти простых лайфхаках, которые помогут вам быстрее работать в Figma.

Обычно в рабочих файлах Figma скапливается много макетов с экранами сайтов и приложений — если он понадобится коллеге, найти что-то конкретное среди огромного количества фреймов будет трудно. Чтобы упростить ему задачу, выделите нужный объект в файле и нажмите Ctrl (⌘) + L — в буфер обмена скопируется ссылка на этот объект.

Если в вашем проекте оказалось очень много цветовых стилей, ориентироваться среди них будет трудно. Чтобы упростить себе эту задачу, просто сгруппируйте все стили по их назначению — например, отделите тёмную тему от светлой. Для этого кликните правой кнопкой мыши по макету, на левой панели в списке стилей выберите нужные и нажмите Ctrl (⌘) + G.

В Figma уже давно можно использовать верхний и нижний индекс для чисел. Однако раньше это работало только со шрифтами, в которых дизайнеры предусмотрели эту функцию. Теперь индексы можно использовать с любым шрифтом — Figma автоматически уменьшит символы и поставит их в нужное место.

При работе с цветом иногда важно подобрать очень точные настройки каналов RGB. В таком случае приходится использовать ручной перебор значений, а это не очень продуктивно. Чтобы ускорить эту работу, выберите нужное значение цвета, нажимайте стрелку вверх или вниз, и выбранное значение будет меняться на 1, а если при этом зажать Shift — то на 10.

То же самое работает и с другими числовыми значениями.

Если нажать Ctrl + Shift + 3 (Cmd + Y на macOS), в Figma активируется режим аутлайнов. В нём у каждого объекта виден только его контур — без заливок и теней. Это может быть полезно, чтобы быстро посмотреть структуру фреймов, не отвлекаясь на графические элементы. Кроме того, в этом режиме отображаются объекты, которые находятся под другими фреймами, — это поможет вам найти потерявшуюся картинку или кнопку.

Больше о Figma

Vkontakte

Twitter

Скопировать ссылку

Научитесь: Figma с нуля до PRO
Узнать больше

В REDKEDS создали айдентику для одиннадцатой Международной ярмарки современного искусства Cosmoscow
02 июн 2023

Конкурс G8 Creative Awards открыл приём работ
02 июн 2023

Московский музей дизайна приглашает на презентацию книги и показ новых экспонатов
01 июн 2023

Понравилась статья?

Да

Как работают группы и фреймы в Figma

Работая в Figma, вы когда-нибудь сталкивались с проблемой выбора, что использовать фрейм или группу? Оба варианта – контейнеры для размещения объектов, но каждый имеет свои уникальные свойства и случаи использования. Не всегда очевидно, как они отличаются друг от друга, поэтому, чтобы помочь вам различать их, я написал эту статью.

Группы

Как и в других инструментах дизайна, группы в Figma позволяют объединять несколько элементов вместе в один слой верхнего уровня. Границы группы определяются ее дочерними элементами, поэтому изменение размера или перемещение этих элементов приведет к автоматическому изменению границ группы. Вы можете создать группу, выбрав объекты и нажав: ⌘ + G (Mac) или Ctrl + G (Win).

Границы группы автоматически корректируются при изменении размера или расположения дочерних элементов

Создание группы не является деструктивным действием – это означает, что она не навсегда выравнивает или объединяет слои вместе. В любой момент вы можете разгруппировать элементы, нажав: ⌘ + Shift + G (Mac) или Ctrl + Shift G (Win).

Группы действительно полезны, когда вы хотите объединить похожие элементы и работать с меньшим количеством слоев. Например, у вас есть набор логотипов компаний, которые должны оставаться вместе. Создание группы – отличный способ объединить их в один более управляемый слой – кликнув по любому из элементов в вашей группе, вы выделите всю группу, и сможете манипулировать им, как единым объектом на холсте. Если вам нужно выбрать определенный дочерний элемент в группе, дважды кликните по нему.

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

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

Сравнение масштабирования групп, содержащих векторные изображения и текст, с использованием нормального поведения при изменении размера и с помощью инструмента масштабирования (K)

Фреймы

Фрейм в Figma – это то, что мы называем «артборд» в других инструментах дизайна. Мы рассматриваем фреймы, как основополагающий элемент проектов, который может выступать в качестве контейнера верхнего уровня и / или представлять области или компоненты вашего дизайна. Фреймы и возможность их вложения являются неотъемлемой частью создания динамических макетов в Figma.

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

Выберите инструмент «Фрейм» (F) и выберите предустановленный размер устройства на панели свойств справа. Это поместит новый фрейм на ваш холст с точными размерами любого устройства, которое вы выбрали.
Выбрав инструмент «Фрейм», кликните и перетащите, чтобы создать новый фрейм любого размера.
Подобно группированию, вы можете выбрать существующие элементы на холсте и поместить их во фрейм, нажав: ⌘ + Opt + G (Mac) или Ctrl + Alt + G (Win).

Если вы хотите сделать наоборот и удалить контейнер родительского фрейма, сочетание клавиш будет таким же, как и при разгруппировке: ⌘ + Shift + G (Mac) или Ctrl + Shift + G (Win). Теперь давайте углубимся в уникальные возможности и варианты использования фреймов.

Размеры фреймов

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

Границы фрейма не подстраиваются автоматически под содержимое. Если вам нужно сделать это, выберите параметр «Resize to Fit» на панели свойств

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

Изменение размера с ограничениями

При изменении размера фреймы и группы ведут себя по-разному. Как уже упоминалось ранее, размер групп будет изменяться подобно векторным изображениям. Размеры фрейма будут изменены независимо от дочерних элементов. Однако, вы можете задать ограничения, которые влияют на изменение размера этих дочерних элементов относительно их родительского фрейма. По умолчанию эти ограничения установлены на «Top» и «Left».

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

Совет: если вы хотите игнорировать ограничения при изменении размера фрейма, удерживайте клавишу ⌘ (Mac) или Ctrl (Win) при перетаскивании фрейма

Контент, выходящий за границу фрейма

Поскольку границы фрейма можно регулировать независимо от его дочерних элементов, функция «clip content» (доступная на правой панели свойств) может использоваться различными способами. Вот несколько распространенных примеров:

Скрытие контента за пределами границ: Функция «clip content» (обрезать контент) позволяет скрыть любую часть элемента, выходящую за пределы фрейма.

Отображение содержимого за пределами границ: Отключая функцию «clip content», вы можете включить отображение элементов, выходящих за границы ваших фреймов. Например, если вы хотите создать фрейм, содержащий цитату с кавычкой, вы можете изменить размер фрейма так, чтобы его границы были выровнены по левому краю текстового поля, оставляя кавычку за пределами фрейма. В подобных ситуациях, так гораздо проще выровнять объекты в вашем дизайне.

Раскрытие дополнительного контента: Установив надлежащие ограничения и включив «clip content», вы сможете создавать фреймы и компоненты, которые раскрывают больше контента при расширении. Например, у вас есть выпадающее меню, которое используется в разных местах с различным количеством опций. Это дает вам простой способ показать больше пунктов меню, всего лишь изменив размер фрейма.

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

Сетки

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

Вывод

Вы можете по-разному использовать группы и фреймы (вместе или по отдельности) для достижения различных результатов.

Коротко о главном. Используйте группы, если:

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

Коротко о главном. Используйте фреймы, если:

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

Подробнее об использовании фреймов и групп читайте в нашей статье.

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

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

Почему в Figma следует использовать фреймы, а не группы

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

Группы и фреймы

Фреймы обладают множеством особых возможностей, которых нет у групп. Фреймы — это больше, чем просто набор вложенных слоев. Они сами по себе являются объектами, которые могут содержать вложенные слои (например, группу), изменять размеры и стили (например, прямоугольник), использовать сетки и макеты (например, «артборд») и изменять размер (с ограничениями и автоматическим расположением). Как видно из таблицы ниже, фреймы намного мощнее 💪.

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

Сверхмощные фреймы

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

1) Независимое изменение размера

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

Совет: Измените размер фрейма, чтобы он идеально соответствовал его содержимому, выбрав фрейм и щелкнув значок «Изменить размер по размеру» в правом верхнем углу панели дизайна.

2) Применить s

стили

Как и прямоугольники, рамки — это объекты, которым можно придать стиль. К ним можно применить заливку, обводку или тень. Также они могут иметь закругленные углы. Этот уровень гибкости означает, что фреймы можно использовать в качестве основы для проектирования (почти) чего угодно. Например, кнопка может быть сделана только со стилизованной рамкой (синяя с закругленными углами) и одним текстовым слоем. В отличие от групп, где необходимо добавить второй слой для фона (что делает невозможным автоматическое расположение).

3) Содержимое переполнения

Дочерние элементы (вложенные слои) фрейма могут “выходить” за его границы. Эти дочерние элементы, находящиеся за пределами границ, могут оставаться видимыми или быть скрытыми с помощью «Содержимого клипа». Это позволяет кадрам достигать ряда различных эффектов, как вы можете видеть ниже.

A. Создайте эффект маски с включенным параметром «Содержимое клипа». Например, показ части объекта, «вытекающей» из кадра в качестве фона.