Как разгруппировать компоненты в Figma?
В фигма есть компонент. Появилась необходимость его изменить. Как разгруппировать существующий компонент, чтобы была возможность его редактирования?
- Вопрос задан более трёх лет назад
- 40431 просмотр
Комментировать
Решения вопроса 1
Михаил Проскурин @mixail_fet
Дизайнер веб-интерфейсов
Если речь о дочернем компоненте, то вот так:
Ответ написан более трёх лет назад
Компоненты в фигме: как сделать, убрать, отменить, разломать
В этом видео уроке и статье вы узнаете про компоненты в фигме. Разбираемся что это такое, зачем они нужны, как сделать, убрать, отменить и разломать компоненты в Figma. Это поможет вам работать намного быстрее и упростить вашу работу.
Компоненты в figma — это элементы, которые можно редактировать массово.
Например если вы создадите кнопку, сделаете из неё компонент, а затем скопируете, то при изменении цвета, размера, текста у главного компонента копии также будут меняться.
Как сделать компонент в фигме?
Чтобы сделать компонент в фигме выберите любой элемент и сверху по центру нажмите на иконку для создания компонента «Create component». Также можно нажать на комбинацию горячих клавиш «Ctrl + Alt + K». На примере выше показано, как сделать компонент из кнопки.
Если перейдете во вкладку «Accets», то увидите созданные вами ранее компоненты. Их можно перетаскивать в ваш проект и использовать повторно.
Главный компонент в слоях отображается иконкой с 4 ромбами. Дочерние компоненты (копии) обозначены одним ромбом.
Как работать с компонентами в фигме?
Если вы скопируете компонент, а затем измените что-то в копии (например зададите обводку, измените надпись, цвет, размер и т.д.), то при изменении этих параметров в главном компоненте, они не будут изменяться в копии.
Изменяю размер главного компонента, как показано на примере выше. Нижний компонент (копия) не изменяет свои размеры, потому, что ранее я уменьшил эту кнопку.
Чтобы размер дочернего компонента снова изменялся, нужно нажать на 3 иконки справа и выбрать «Reset size».
Теперь при изменении главного компонента копия тоже будет менять размер.
Чтобы убрать обводку у дочернего компонента, выбрите его и нажмите на иконку с 3 точками справа. Выберите из списка «Reset stroke».
Чтобы убрать все изменения в дочернем компоненте (для того, чтобы к нему применялись изменения главного компонента), нажмите на иконку с 3 точками справа и выберите пункт «Reset all overrides».
Как убрать компонент в фигме?
Чтобы убрать (отменить, разгруппировать, разломать) компонент в фигме, выберите копию компонента и нажмите на иконку с тремя точками в правой панели. Выберите пункт «Detach instance» или нажмите на горячие клавиши «Alt + Ctrl + B». В этом случае вы сделаете из компонента простой элемент. Это сработает только для дочерних элементов (копий). Разломать главный компонент обычным способом в фигме нельзя.
Как применить стиль дочернего компонента к главному
Представим ситуацию, что у вас есть несколько кнопок в формате компонентов. Вы выбрали дочерний компонент и изменили в нём цвет с оранжевого на синий. Если нажать справа на иконку с тремя точками и выбрать пункт «Push overrides to main component», то главный компонент примет стиль дочернего и все копии также изменят свой стиль.
Как найти главный компонент в фигме?
Найти главный компонент в фигме можно с помощью дочернего. Выберите копию компонента и в правой панели нажмите на иконку с четырьмя ромбами «Go to main component». Вас перенаправит к главному компоненту.
Как создать компоненты в фигме массово?
Если вам потребовалось создать сразу несколько компонентов, то выделите нужные элементы и сверху по центру (напротив иконки создания компонентов) нажмите на стрелку и выберите пункт «Create multiple components», что переводится как «Создать несколько компонентов».
На примере выше я выбрали 4 кнопки и создал из них компоненты.
Создадим фрейм вокруг этих кнопок и назовем этот фрейм например «Buttons». Если сделаю копию какой-то кнопки, то справа появится возможность менять стиль этой кнопки на другой компонент.
Заключение
Итак, вы этой инструкции вы узнали о том, как работать с компонентами в фигме. Это поможет вам работать быстрее, поскольку не нужно будет менять несколько элементов.
P.S. Если хотите получить бонусные материалы по быстрому созданию дизайна сайтов в Figma, то переходите по этой ссылке.
P.P.S. Проект и автор не связан с компанией Figma (Not affiliated with Figma).
7 лайфхаков в Figma, которые упростят вам работу
Рассказываем, как быстро выровнять файлы, переименовать пачку фреймов за раз и сделать прогресс-бар в несколько кликов.
Катя Павловская для Skillbox Media
Вячеслав Лазарев
Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.
В Figma есть множество скрытых функций и горячих клавиш, которые самостоятельно найти не так просто. Но если их освоить, вы сможете ускорить работу над макетом: быстрее искать фреймы или группы и подбирать цвет с помощью пипетки.
Рассказываем о семи простых лайфхаках, которые помогут вам быстрее работать в Figma.
Свернуть вложенные фреймы и группы
Если вы работаете над большим проектом, в документе становится сложно ориентироваться из-за большого количества фреймов, групп и компонентов, особенно когда они все развёрнуты.
Чтобы моментально свернуть все фреймы, группы и компоненты, нажмите сочетание клавиш Alt (⌥) + L.
Предпросмотр цвета
Выделите любой фрейм или фигуру, нажмите кнопку I, зажмите правую кнопку мыши и водите курсором по макету. Любой цвет под ним станет фоновым для выделенного элемента. Так вы сможете быстрее выбрать нужный оттенок для кнопки, текста или основного фона макета.
Переименование фреймов
По умолчанию Figma создаёт новые фреймы с названием Frame 1 — оно ничего не говорит о содержимом фрейма, особенно для тех, кто в ваш макет заходит впервые. Переименовать один такой фрейм — легко, но если их 10 или 20, то придётся потратить на это много времени.
Чтобы быстро систематизировать названия одинаковых по смыслу фреймов, выделите их, нажмите сочетание клавиш Сtrl (⌘) + R. Откроется меню, в котором вам будет предложено переименовать выделенные объекты:
Настройки переименования объектов:
- Match — часть имени, которую вы хотите изменить. Если ничего здесь не указать, название объекта поменяется целиком.
- Rename to — новое имя для объектов.
- Кнопка Current name — добавить текущее название объекта.
- Кнопки Number — добавить порядковые номера по возрастанию Number ↑ или по убыванию Number ↓.
- Start sequence from — указать, с какого числа начинать отсчёт. Параметр редактируется, если вы добавили в название порядковые номера.
Выравнивание с Tidy up
Два одинаковых объекта поставить ровно очень просто. Но если их 10 или 20, это превращается в большую и нудную задачу. Чтобы дизайнер не занимался подобной рутиной, в Figma есть функция Tidy up, с помощью которой можно автоматически расставить все объекты ровно, поменять их местами и изменить отступы.
Как пользоваться Tidy up
- Выделите все ваши объекты.
- В появившейся синей рамке нажмите на иконку , чтобы все объекты встали ровно.
- Если вы захотите изменить отступ, наведите курсор на вертикальный или горизонтальный промежуток между объектами, зажмите правую кнопку мыши и тяните.
- Чтобы поменять объекты местами, зажмите правой кнопкой мыши розовую точку в центре объекта и тащите его в то место, где он должен стоять.
Горизонтальный прогресс-бар
Если вы занимаетесь интерфейсом технически сложного приложения, скорее всего, вам понадобится прогресс-бар. В Figma есть множество способов его нарисовать, но самый простой — с помощью текста!
Как создать горизонтальный прогресс-бар из текста
- Создайте узкий и длинный фрейм.
- Добавьте в этот фрейм текстовый блок и напишите в нём текст.
- На панели слоёв нажмите на текстовый блок и в выпадающем меню выберите Frame section.
- На панели инструментов нажмите на плюс напротив слов Auto Layout и измените высоту фрейма с текстом так, чтобы она совпадала с высотой основного фрейма.
- У текстового модуля укажите контрастный фон, а непрозрачность текста — 0%.
- Сместите фрейм с текстом так, чтобы он полностью заполнил правую часть основного фрейма.
- По желанию углы обоих фреймов можно скруглить.
Теперь у вас есть регулируемый прогресс-бар. Чтобы изменить длину полосы загрузки, просто добавляйте в него текст:
Круглый прогресс-бар
Если вместо горизонтального прогресс-бара вам нужен круглый, его сделать так же легко.
- Создайте на макете круг, залейте его белым цветом.
- Скопируйте ваш круг и залейте его другим цветом — например, синим.
- Наведите курсор на круг, и тогда увидите на его контуре точку — зажмите её правой кнопкой мыши и тяните курсор вверх.
- На получившейся фигуре зажмите правой кнопкой мыши точку в центре и тяните курсор влево или вправо.
- По желанию добавьте скругления, чтобы концы получившегося прогресс-бара не были квадратными.
Готово — получился круглый прогресс-бар. Чтобы изменить его длину, наведите курсор на фигуру, зажмите правой кнопкой мыши один из концов фигуры и тяните.
Кляксы стандартными инструментами
В Figma есть много плагинов для создания интересных форм, но их можно сделать и самостоятельно с помощью стандартных инструментов. Например — сферы и связки, похожие на кляксы.
Как сделать кляксу
- Создайте два круга и небольшой прямоугольник. Поместите их на макет так, чтобы они были похожи на условную гантель.
- Выделите все фигуры и вверху нажмите на .
- Выделите получившуюся фигуру и задайте у неё скругление.
Теперь вы можете двигать фигуры как угодно и они будут похожи на кляксы:
Больше о Figma
- Как делать варианты элементов интерфейса
- 5 полезных плагинов: работа с текстом и шрифтами
- Как работать с модульной сеткой
- Как рисовать векторные изображения
- Тени в интерфейсах: зачем они нужны и как их рисовать
- Как создать тёмную тему
Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.
Больше интересного про дизайн в нашем телеграм-канале. Подписывайтесь!
Как разбить компонент в figma
Октябрь 11, 2021 — 0 В предыдущей части мы рассмотрели как настраиваются стили в библиотеке и какими они бывают. Сегодня же рассмотрим что такое компоненты и как их можно использовать при создании библиотек.
В предыдущей части мы рассмотрели как настраиваются стили в библиотеке и какими они бывают. Сегодня же рассмотрим что такое компоненты и как их можно использовать при создании библиотек.
Начало статьи можно прочитать тут.
В этой статье
Как настроить Компоненты в Figma?
Компоненты чаще используются в больших компаниях, когда есть единый стиль, регламентированы цвета и формы, которые могут меняться при ребрендинге компании. Смысл создания такой же, как и у стилей — создать один элемент при изменении которого изменятся и все его производные. Компоненты это еще один способ сильно ускорить работу. Если какой-то элемент / форма / карточка / что угодно появляется в макете больше одного раза, стоит задуматься над тем, чтобы сделать один элемент и копировать его. Создать компонент очень просто, достаточно выделить фрейм и нажать на иконку в верхнем меню, или комбинацию клавиш Ctrl+Alt+K. Создастся мастер, затем нужно скопировать элемент и использовать копию в своем дизайне. При изменении какого-либо свойства мастера, изменятся и дочерние элементы, при изменении свойства дочернего элемента изменится только он.
ПРИМЕР ИСПОЛЬЗОВАНИЯ КОМПОНЕНТ
Но нужно быть аккуратным. Если вы меняете какое-либо свойство дочернего элемента, то ваши изменения сохранятся даже если впоследствии вы измените то же свойства у мастера. Поэтому лучше не менять элемент локально, а воспользоваться вариантами. Что это такое, рассмотрим ниже.
Более полную и развернутую информацию о том что такое компоненты, как и когда их создавать и зачем использовать, можно почитать в этой статье.
Варианты в Figma
Можно сделать один компонент, но состоящий из нескольких вариантов. Для каждого варианта определить различные свойства и их значения. Так, например, у кнопки может быть задано свойство размера со значениями большая и маленькая или свойство цвета со значениями серая, оранжевая, синяя в зависимости от ее состояния. Для того, чтобы создать варианты необходимо выбрать минимум два компонента и нажать на появившуюся в правой панели кнопку “Combine as variants”. Теперь создастся новый фрейм, в котором будут содержаться два (или более) варианта одного и того же элемента. Этот фрейм можно настроить как и любой другой: создать auto layout, выровнять элементы внутри, задать фон, рамки и так далее.
СОЗДАНИЕ ВАРИАНТОВ
- Button / default
- Button / hover
- Button / click
Получается один фрейм Button, в котором каждый элемент называется по правилу Property 1=click.
НАСТРОЙКИ ВАРИАНТОВ
После выделения фрейма, в правой панели становятся видны новые свойства. Во-первых, это настройки самого фрейма. Ему можно задать описание или прикрепить ссылки на документацию. Во-вторых, это свойства элементов фрейма. На данный момент у элементов всего одно свойство, имеющее три значения. Название свойства можно поменять, достаточно нажать не него. В меню вариантов можно добавить новый вариант (количество элементов в фрейме увеличится) или добавить новое свойство (название каждого элемента изменится Property 1=click, Property 2 =…)
ДОБАВЛЕНИЕ СВОЙСТВА
На рисунке выше добавлены еще 4 варианта и еще одно свойство — Variant. По умолчанию значением нового свойства у всех восьми кнопок будет стоять Default. Как же быстро разделить кнопки на Primary и Secondary?
Массовое переименование
Нужно выделить те элементы, которым необходимо поменять название и нажать Ctrl + R. Появится новое модальное окно.
МАССОВОЕ ПЕРЕИМЕНОВАНИЕ
В первом поле можно ввести значение, которое нужно заменить (необязательное поле), во втором — то, на что его заменить. Также есть кнопки быстрого действия: Current name — текущее имя
Number — задать числа по возрастанию/убыванию
В данном случае следует изменить Default на Primary. Аналогичную операцию можно провести и с оставшимися четырьмя кнопками, заменив значение свойства Variant на Secondary.
ИСПОЛЬЗОВАНИЕ ВАРИАНТОВ
Теперь при использовании данного элемента легко выбрать какая это будет кнопка — основная или вторичная, а также выбрать ее состояние.
Если свойство имеет всего два значения, то можно назвать их одной из следующих пар:
- Yes / No
- True / False
- On / Off
В этом случае при выборе варианта отобразится не выпадающий список, а тоггл.
Auto layout в Figma
Auto layout позволяет сохранять отступы и расстояния между элементами, вне зависимости от контекста. Правильно настроенные auto layout с легкостью можно адаптировать под разные размеры макетов.
Необходимо выбрать более одного элемента, чтобы в правом меню появился пункт auto layout (если это однотипные элементы, их надо предварительно выровнять друг относительно друга). После чего у нас возникнет новый блок с настройками.
НАСТРОЙКА AUTO LAYOUT
Стрелки обозначают направление элементов внутри фрейма, если мы захотим сделать горизонтальное меню, достаточно будет нажать одну кнопку. Далее стоит значение, которое показывает расстояние между элементами, минимальное значение которого = 0. Следующее значение показывает отступы внутри фрейма, аналогично значению padding в css. И точно так же как в css его можно записать:
- одним числом — одинаковый отступ со всех сторон,
- двумя числами через запятую — отступы сверху/снизу и справа/слева
- четырьмя числами — отступы, начиная сверху и по часовой стрелке
Кроме того отступы и выравнивание можно настроить в следующем окошке. Тут наглядно видно какие отступы чему равны, а также видно, как выровнен контент Auto layout. На данный момент он начинается с верхнего левого угла фрейма. Это значение можно поменять на центр или прижать к какому-то краю. Помимо этого, внизу есть выпадающий список и значение Packed (элементы сгруппированы) можно поменять на значение Space between (элементы будут равноудалены друг от друга и будут занимать весь предоставленный им фрейм)
НАСТРОЙКА AUTO LAYOUT
Ниже находится настройка изменения размера фрейма — Resizing. Фрейм может быть фиксированной ширины и высоты, может изменяться в зависимости от величины текста (контента), а может занимать все доступное ему пространство (в случае, если фрейм вложен в какой-то другой фрейм).
Коротко о главном
В статье показано как использовать компоненты и чем прекрасен auto layout. Если научиться ими пользоваться, можно создавать сложные конструкции, вложенные одни в другие, настраивать сложное меню, делать адаптивные карточки, создавать переиспользуемые таблицы и даже целые блоки на сайтах. Однако, чтобы это можно было делать не только в текущем проекте, но и в любом другом, библиотеку требуется создать, о чем и будет наша следующая статья.