Как разгруппировать компоненты в Figma?
В фигма есть компонент. Появилась необходимость его изменить. Как разгруппировать существующий компонент, чтобы была возможность его редактирования?
- Вопрос задан более трёх лет назад
- 41395 просмотров
Комментировать
Решения вопроса 1
Михаил Проскурин @mixail_fet
Дизайнер веб-интерфейсов
Если речь о дочернем компоненте, то вот так:
Ответ написан более трёх лет назад
В помощь дизайнеру: горячие клавиши в Figma
У Figma есть все возможности для того, чтобы дизайнеры справлялись с работой максимально быстро и легко. Рассказываем, какие хоткеи есть и как их использовать.
Михаил Терентьев
Основатель Mailfit & Letteros
Горячие клавиши (hotkeys) — это комбинации клавиш, нажатие на которые позволяет выполнять различные действия в той или иной программе, не прибегая к её меню. Это быстро и просто.
В Figma горячие клавиши называются Keyboard Shortcuts, а посмотреть весь их список можно, нажав на знак вопроса в правом нижнем углу.
Или используйте для открытия списка сочетание горячих клавиш Ctrl + Shift + ?. Да, они могут пригодиться даже здесь.
Весь список горячих клавиш поделён на несколько групп. Расскажем о каждой по порядку.
Essential keyboard shortcuts
Essential keyboard shortcuts — это Основные клавиатурные сокращения.
Чтобы показать или скрыть Боковые панели, нажмите Ctrl + \ на Windows и ⌘ + \ на Mac.
Чтобы выбрать инструмент Пипетка, нажмите i на Windows и Ctrl + С на Mac.
Чтобы открыть Меню, нажмите Ctrl + / на Windows и ⌘ + / на Mac.
Tools
Tools — это Инструменты.
Чтобы выбрать стандартный инструмент выделения, нажмите V.
Чтобы выбрать инструмент для создания фреймов, нажмите F.
Чтобы выбрать Перо, нажмите P.
Чтобы выбрать Карандаш, нажмите Shift + P.
Чтобы выбрать Текст, нажмите T.
Чтобы выбрать Прямоугольник, нажмите R.
Чтобы выбрать Эллипс, нажмите O.
Чтобы выбрать Линию, нажмите L.
Чтобы выбрать Стрелку, нажмите Shift + L.
Чтобы добавить или показать комментарии, нажмите С.
Чтобы выбрать Пипетку, нажмите i на Windows и Ctrl + С на Mac.
Чтобы выбрать Нож, нажмите S.
View
Чтобы показать или скрыть Линейки, нажмите Shift + R.
Чтобы показать или скрыть Обводку всех элементов, нажмите Ctrl + Shift + 3 на Windows и ⌘ + Y на Mac.
Чтобы показать или скрыть Пиксельный просмотр, нажмите Ctrl + Alt + Y на Windows и Ctrl + P на Mac.
Чтобы показать или скрыть Сетку, нажмите Ctrl + Shift + 4 на Windows и Ctrl + G на Mac.
Чтобы показать или скрыть Пиксельную сетку, нажмите Ctrl + ‘ на Windows и ⌘ + ‘ на Mac.
Чтобы показать или скрыть Боковые панели, нажмите Ctrl + \ на Windows и ⌘ + \ на Mac.
Чтобы показать или скрыть Курсоры других пользователей, нажмите Ctrl + Alt + \ на Windows и Alt + ⌘ + \ на Mac.
Чтобы показать или скрыть Только слои, нажмите Alt + 1.
Чтобы показать или скрыть Только компоненты, нажмите Alt + 2.
Чтобы показать или скрыть Панель дизайна, нажмите Alt + 8.
Чтобы показать или скрыть Панель прототипа, нажмите Alt + 9.
Zoom
Zoom — это Приближение или Масштабирование.
Чтобы переместить Zoom по рабочему пространству, нажмите Space + drag.
Чтобы увеличить масштаб, нажмите +.
Чтобы уменьшить масштаб, нажмите —.
Чтобы включить отображение 1:1 к экрану, нажмите Shift + 0.
Чтобы масштабировать все рабочее пространство, нажмите Shift + 1.
Чтобы масштабировать выделенный элемент, нажмите Shift + 2.
Чтобы масштабировать предыдущий фрейм, нажмите Shift + N.
Чтобы масштабировать следующий фрейм, нажмите N.
Чтобы найти предыдущую страницу, нажмите Page Up.
Чтобы найти следующую страницу, нажмите Page Down.
Чтобы найти предыдущий фрейм, нажмите Home.
Чтобы найти следующий фрейм, нажмите End.
Text
Text — это Текст.
Чтобы выделить текст жирным, нажмите Ctrl + B на Windows и ⌘ + B на Mac.
Чтобы выделить текст курсивом, нажмите Ctrl + i и ⌘ + i на Mac.
Чтобы подчеркнуть текст, нажмите Ctrl + U и ⌘ + U на Mac.
Чтобы вставить и сопоставить элемент, нажмите Ctrl + Shift + V.
Чтобы выровнять текст по левому краю, нажмите Ctrl + Alt + L на Windows и ⌘ + Alt + L на Mac.
Чтобы выровнять текст по центру, нажмите Ctrl + Alt + T на Windows и ⌘ + Alt + T на Mac.
Чтобы выровнять текст по правому краю, нажмите Ctrl + Alt + R на Windows и ⌘ + Alt + R на Mac.
Чтобы выровнять текст по ширине, нажмите Ctrl + Alt + J на Windows и ⌘ + Alt + J на Mac.
Чтобы изменить размера текста, нажмите Ctrl + Shift + < и >на Windows и ⌘ + Shift + < и >на Mac.
Чтобы изменить расстояние между символами, нажмите Alt + .
Чтобы изменить расстояние между строками, нажмите Alt + Shift + .
Shape
Shape — это Векторные изображения.
Чтобы выбрать Перо, нажмите P.
Чтобы выбрать Карандаш, нажмите Shift + P.
Чтобы выбрать Заливку, нажмите B.
Чтобы удалить заливку, нажмите Alt + /.
Чтобы удалить обводку, нажмите /.
Чтобы поменять местами обводку и заливку, нажмите Shift + X.
Чтобы преобразовать в кривые, нажмите Ctrl + Shift + O на Windows и ⌘ + Shift + O на Mac.
Чтобы работать с точками векторных изображений, нажмите Ctrl + E на Windows и ⌘ + E на Mac.
Selection
Selection — это Выделение.
Чтобы выделить всё, нажмите Ctrl + A на Windows и ⌘ + A на Mac.
Чтобы выделить всё, кроме чего-либо, нажмите Ctrl + Shift + A на Windows и ⌘ + Shift + A на Mac.
Чтобы отменить выделение, нажмите Esc.
Чтобы выделить слои, которые находятся под другими слоями, нажмите Ctrl + click Windows и ⌘ + click на Mac.
Чтобы выделить слой на боковой панели, нажмите Ctrl + right click Windows и ⌘ + right click на Mac.
Чтобы выделить дочерний элемент, нажмите Enter.
Чтобы выделить родительский элемент, нажмите Shift + Enter.
Чтобы выделить следующий по порядку элемент, нажмите Tab.
Чтобы выделить предыдущий по порядку элемент, нажмите Shift + Tab.
Чтобы сгруппировать элементы, нажмите Ctrl + G на Windows и ⌘ + G на Mac.
Чтобы разгруппировать элементы, нажмите Ctrl + Shift + G на Windows и ⌘ + Shift + G на Mac.
Чтобы преобразовать в фрейм, нажмите Ctrl + Alt + G на Windows и ⌘ + Alt + G на Mac.
Чтобы показать или скрыть элемент, нажмите Ctrl + Shift + H на Windows и ⌘ + Shift + H на Mac.
Чтобы заблокировать или разблокировать элемент, нажмите Ctrl + Shift + L на Windows и ⌘ + Shift + L на Mac.
Cursor
Cursor — это Курсор.
Чтобы выделить элемент при клике, нажмите Alt.
Чтобы копировать элемент при движении, нажмите Alt.
Чтобы выделить слои, которые находятся под другими слоями, нажмите Ctrl + click на Windows и ⌘ + click на Mac.
Чтобы показать иерархию выделенного элемента, нажмите Ctrl + right click на Windows и ⌘ + right click на Mac.
Чтобы изменить размер относительно центра элемента, нажмите Alt.
Чтобы изменить размер пропорционально, нажмите Shift.
Чтобы переместить во время изменения размеров элемента, нажмите Ctrl на Windows и ⌘ на Mac.
Edit
Edit — это Редактирование.
Чтобы копировать, нажмите Ctrl + C на Windows и ⌘ + C на Mac.
Чтобы вырезать, нажмите Ctrl + X на Windows и ⌘ + X на Mac.
Чтобы вставить, нажмите Ctrl + V на Windows и ⌘ + V на Mac.
Чтобы вставить поверх выделенного элемента, нажмите Ctrl + Shift + V на Windows и ⌘ + Shift + V на Mac.
Чтобы создать копию, нажмите Ctrl + D на Windows и ⌘ + D на Mac.
Чтобы переименовать, нажмите Ctrl + R на Windows и ⌘ + R на Mac.
Чтобы экспортировать элемент, нажмите Ctrl + Shift + E на Windows и ⌘ + Shift + E на Mac.
Чтобы копировать свойства элемента, нажмите Ctrl + Alt + C на Windows и ⌘ + Alt + C на Mac.
Чтобы вставить скопированные свойства, нажмите Ctrl + Alt + V на Windows и ⌘ + Alt + V на Mac.
Transform
Transform — это Трансформирование.
Чтобы отразить по горизонтали, нажмите Shift + H.
Чтобы отразить по вертикали, нажмите Shift + V.
Чтобы создать маску, нажмите Ctrl + Alt + M на Windows и ⌘ + Alt + M на Mac.
Чтобы включить редактирование векторных объектов или изображений, нажмите Enter.
Чтобы вставить изображение, нажмите Ctrl + Shift + K на Windows и ⌘ + Shift + K на Mac.
Чтобы обрезать изображение, нажмите Alt + dbl-click.
Чтобы задать прозрачность элементу 10%, нажмите 1.
Чтобы задать прозрачность элементу 50%, нажмите 5.
Чтобы задать прозрачность элементу 100%, нажмите 0.
Arrange
Arrange — это Выравнивание.
Чтобы переместить на уровень ближе к переднему плану, нажмите Ctrl + ] на Windows и ⌘ + ] на Mac.
Чтобы переместить на уровень дальше от переднего плана, нажмите Ctrl + [ на Windows и ⌘ + [ на Mac.
Чтобы переместить на передний план, нажмите Ctrl + Shift + ] на Windows и ⌘ + Shift + ] на Mac.
Чтобы переместить на задний план, нажмите Ctrl + Shift + [ на Windows и ⌘ + Shift + [ на Mac.
Чтобы выровнять по левой стороне, нажмите Alt + A.
Чтобы выровнять по правой стороне, нажмите Alt + D.
Чтобы выровнять по верхней стороне, нажмите Alt + W.
Чтобы выровнять по нижней стороне, нажмите Alt + S.
Чтобы выровнять согласно горизонтальной линии элементов, нажмите Alt + H.
Чтобы выровнять согласно вертикальной линии элементов, нажмите Alt + V.
Чтобы выровнять с распределением горизонтального пространства, нажмите Ctrl + Shift + Alt + H на Windows и ⌘ + Shift + Alt + H на Mac.
Чтобы выровнять с распределением вертикального пространства, нажмите Ctrl + Shift + Alt + V на Windows и ⌘ + Shift + Alt + V на Mac.
Components
Components — это Компоненты.
Чтобы показать все компоненты, нажмите Alt + 2
Чтобы создать компонент, нажмите Ctrl + Alt + K на Windows и ⌘ + Alt + K на Mac.
Чтобы преобразовать компонент во фрейм, нажмите Ctrl + Alt + B на Windows и ⌘ + Alt + B на Mac.
Чтобы открыть многопользовательскую библиотеку, нажмите Ctrl + Alt + O на Windows и ⌘+ Alt + O на Mac.
Так выглядят горячие клавиши в Figma. Надеемся, вы запомните их и будете ими пользоваться. А пока запомнить их не получается, обращайтесь к этой статье — она вам поможет.
Подписывайтесь на ежемесячный дайджест Mailfit
Раз в месяц присылаем новости диджитала, последние кейсы, рассказываем про работу, собираем интересный и полезный контент в одном письме.
ПОЛУЧИЛОСЬ!
Скоро вы начнете получать нашу рассылку
Как объединить в фигме: элементы, слои, фигуры. 4 лучших способа.
Сегодня расскажу как объединить в фигме (Figma). Вы узнаете 4 простых способа, как объединять элементы, слои, векторные фигуры, объекты и т.д. Рассмотрим как сгруппировать элементы с помощью инструмента группа «Group» и фрейм «Frame». Также поговорим про «Union selection» и «Flatten selection».
Чтобы объединить элементы в группу (сгруппировать их) нажмите на комбинацию горячих клавиш «Ctrl + G». В панели слоёв вы можете увидеть иконку группы у этих элементов. Если нажать на стрелку напротив группы в слоях, то сможете увидеть все элементы, которые есть внутри.
Объединение элементов в Figma с помощью фрейма
Вы можете объединить элементы с помощью фрейма. Для того, чтобы сделать фрейм вокруг элементов, выберите его в панели инструментов сверху и нарисуйте его вокруг нужных объектов. Также для создания фрейма можете воспользоваться горячими клавишами «Ctrl + Alt + G»
Как разгруппировать в фигме
Чтобы разгруппировать элементы из группы или фрейма в фигме нажмите на клавиатуре 3 клавиши «Ctrl + Shift + G». Также можно нажать на правую клавишу мыши и выбрать пункт «Ungroun selection».
Объединяем векторные фигуры с помощью «Union selection»
Чтобы объединить векторные фигуры и элементы с помощью функции Union selection, выберите 2 или более векторных элемента. Сверху где есть иконка «Boolean Groups» выберите пункт «Union selection».
Объединение элементов в фигме с помощью «Flatten seleciton»
Для объединения элементов можно воспользоваться функцией Flatten selection. Для этого выберите нужные элементы и выберите эту надпись из выпадающего списка сверху.
Отличия «Union selection» и «Flatten seleciton» в Figma
При группировке элементов с помощью функции «Union selection», вы сможете редактировать фигуры стандартным образом. Например если создадите прямоугольник с помощью стандартного инструмента «Rectangle», то его можно скруглять с помощью четырёх точек на углах.
Если будете редактировать векторные элементы в группе «Flatten selection», то будут появляться векторные точки. С их помощью можно изменять размеры элементов.
Заключение
В этой статье мы поговорили как объединить в фигме любые элементы слои, фигуры и т.д. Вы узнали о 4 методах как это сделать. Если у вас есть вопросы, то обязательно напишите их ниже в комментариях.
P.S. Если хотите получить подарок и материалы, которые помогают делать дизайн сайтов в фигме быстрее, то нажмите на эту ссылку.
P.P.S. Проект и автор не связан с компанией Figma (Not affiliated with Figma).
Как работают группы и фреймы в Figma
Работая в Figma, вы когда-нибудь сталкивались с проблемой выбора, что использовать фрейм или группу? Оба варианта – контейнеры для размещения объектов, но каждый имеет свои уникальные свойства и случаи использования. Не всегда очевидно, как они отличаются друг от друга, поэтому, чтобы помочь вам различать их, я написал эту статью.
Группы
Как и в других инструментах дизайна, группы в Figma позволяют объединять несколько элементов вместе в один слой верхнего уровня. Границы группы определяются ее дочерними элементами, поэтому изменение размера или перемещение этих элементов приведет к автоматическому изменению границ группы. Вы можете создать группу, выбрав объекты и нажав: ⌘ + G (Mac) или Ctrl + G (Win). Границы группы автоматически корректируются при изменении размера или расположения дочерних элементов Создание группы не является деструктивным действием – это означает, что она не навсегда выравнивает или объединяет слои вместе. В любой момент вы можете разгруппировать элементы, нажав: ⌘ + Shift + G (Mac) или Ctrl + Shift G (Win). Группы действительно полезны, когда вы хотите объединить похожие элементы и работать с меньшим количеством слоев. Например, у вас есть набор логотипов компаний, которые должны оставаться вместе. Создание группы – отличный способ объединить их в один более управляемый слой – кликнув по любому из элементов в вашей группе, вы выделите всю группу, и сможете манипулировать им, как единым объектом на холсте. Если вам нужно выбрать определенный дочерний элемент в группе, дважды кликните по нему. Также внутри группы вы можете использовать такую функцию, как Smart Selections, чтобы настроить расстояние между элементами. В приведенном ниже примере вы можете увидеть автоматическую настройку границ группы для соответствия общим размерам дочерних элементов при изменении интервала. Когда вы изменяете размер группы, ее дочерние элементы будут масштабироваться, как векторные изображения. Однако эффекты, контуры и размеры шрифта не будут масштабироваться. Если вы хотите, чтобы эти свойства также масштабировались, используйте инструмент масштабирования (K). Если вы хотите применить ограничения, чтобы определить, как будут изменяться размеры элементов, рассмотрите возможность использования фрейма. Ограничения, применяемые к элементам, всегда будут относиться к ближайшему родительскому фрейму, а не к границам группы. Подробнее об этом в разделе, посвященном фреймам! Сравнение масштабирования групп, содержащих векторные изображения и текст, с использованием нормального поведения при изменении размера и с помощью инструмента масштабирования (K)
Фреймы
- Выберите инструмент «Фрейм» (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.