Как разгруппировать компоненты в Figma?
В фигма есть компонент. Появилась необходимость его изменить. Как разгруппировать существующий компонент, чтобы была возможность его редактирования?
- Вопрос задан более трёх лет назад
- 41243 просмотра
Комментировать
Решения вопроса 1
Михаил Проскурин @mixail_fet
Дизайнер веб-интерфейсов
Если речь о дочернем компоненте, то вот так:
Ответ написан более трёх лет назад
10 советов по компонентам Figma
Советы и лучшие практики для работы с компонентами Figma Рекомендация: Повторяйте действия за мной в Figma Используйте созданный мной файл Figma Community.
1. Сочетания клавиш для работы с компонентами
- OPTION + CMD + K= Создать компонент
- OPTION + CMD + B= Отсоединить экземпляр
- OPTION + CMD+ O= Командная библиотека
- OPTION+ 2= Показать панель активов (option + 1 возвращает вас на панель слоев)
Windows:
- ALT + CTRL + K= Создать компонент
- ALT + CTRL + B= Отсоединить экземпляр
- ALT + CTRL + O= Командная библиотека
- ALT+ 2= Показать панель активов (option + 1 возвращает вас на панель слоев)
2. Поменять местами компоненты
Открыв панель активов (используя option / alt + 2 или shift + I), вы можете перетащить экземпляры компонентов на холст. Если у вас уже есть компонент, попробуйте использовать эти сочетания клавиш при перетаскивании компонента для замены существующего.
3. Именование компонентов
От того, как вы назовете свои компоненты, будет зависеть их организация. Если вы используете разделение косой чертой, Figma сгруппирует эти компоненты в меню экземпляра, что упростит их поиск. Figma использует следующий путь file / page / frame / ** name ** / для организации наших компонентов. Так, например, если у меня есть раскрывающийся компонент, я бы поместил его в отдельный фрейм Figma под названием «Inputs», а затем назвал бы компонент Dropdown / Active. Figma будет использовать это имя для создания папки «Inputs», а затем внутри папки «Dropdown». Вы также можете назвать свой компонент Inputs / Dropdown / Active, если основной компонент не находится внутри фрейма под названием «Inputs».
4. Создавайте компоненты забавной формы
Используя мощь логических операций для вычитания фигур и установки ограничений для этих фигур, мы можем создать аккуратно выглядящие компоненты (Спасибо Роджи Кингу). Для этого следуйте инструкциям Роджи на YouTube (начало с 32:50).
5. Используйте базовые компоненты
Используя базовые компоненты для наборов вариантов, мы можем внести одну корректировку в базовый компонент, и он внесет изменения во все варианты экземпляров. Для этого создайте базовый компонент со всеми элементами, необходимыми в различных вариантах для значений по умолчанию, иконки слева, иконки справа, наведения, активного состояния, ошибки и т. д. Это так же просто, как скрыть ненужные нам элементы в разных вариантах. Также полезно добавить модификатор перед именем компонента, который скроет его из библиотеки, когда вы будете готовы опубликовать компоненты. Для этого добавьте «.» или «_» перед названием компонента (например, «_Profile Card Base»).
6. Меню быстрой вставки
Добавляйте компоненты за секунды с помощью меню быстрой вставки.
7. Следуйте принципам атомарного дизайна
Атомарный дизайн Брэда Фроста – это методология создания дизайн-систем. Она помогает нам организовать компоненты для эффективного масштабирования нашей дизайн-системы и поддерживать порядок внутри вложенных компонентов. В атомарном дизайне есть пять различных уровней:
Атомы – это основные строительные блоки, такие как метка формы, поле ввода или кнопка.
Молекулы – это группы атомов, связанных вместе, например, метка формы, ввод и кнопка, объединенные вместе в форму.
Организмы состоят из похожих и / или разных типов молекул. Например, организм «шапка сайта» может состоять из различных компонентов, таких как логотип, основная навигация, поиск и список каналов социальных сетей.
Шаблоны конкретны и предоставляют контекст для всех этих относительно абстрактных молекул и организмов. Шаблоны – это то место, где клиенты начинают видеть окончательный дизайн. Со временем повышается точность шаблонов и в итоге они становятся конечным результатом.
Страницы – это особые экземпляры шаблонов. Здесь контент-плейсхолдер заменяется реальным репрезентативным контентом, чтобы дать точное представление о том, что в конечном итоге увидит пользователь. Чтобы узнать больше, посмотрите это видео на YouTube и прочтите книгу Брэда Фроста «Атомарный дизайн»
8. Используйте компоненты слота
Слоты позволяют использовать плейсхолдер, который мы можем заменить нужным нам контентом. Например, создать модальный компонент может быть не просто, потому что не все модальные окна будут иметь внутри себя одинаковый контент. Чтобы решить эту проблему, мы можем использовать технику под названием «слоты» (спасибо, Rogie, Ben Adelt, и Ridd). Просто вставьте компонент слота туда, где вам понадобится гибкий контент, и при необходимости поменяйте его.
9. Используйте несколько библиотек
В более крупных организациях с большим количеством компонентов и стилей, необходимых для поддержки множества различных платформ и продуктов, библиотека может очень быстро расти. Если пользователям нужен только небольшой набор этих компонентов, им все равно придется отсеивать множество похожих компонентов, которые им никогда не понадобятся. Попробуйте организовать свои компоненты в разных файлах, например:
- мобильные компоненты
- десктопные компоненты
- активы бренда и цвета
- и так далее…
10. Экспериментируйте с компонентами
Загрузите файл сообщества, чтобы поэкспериментировать с ним. Компоненты очень универсальны и могут использоваться для создания самых разных вещей, например, анимации с использованием интерактивных компонентов или забавных паттернов. Используя плагин и компоненты Rotate Copies, можно создавать забавные и динамичные арты прямо внутри Figma!
Как разломать мастер-компонент в Figma?
Делаем копию мастер-компонента. Кликаем правой кнопкой мыши по нему и выбираем Detach Instance. А мастер-компонент просто удаляем.
2. С использованием плагина
Устанавливаем плагин Detach Component. Выбираем нужный компонент, который нам нужно разломать. Включаем компонент и все готово
Почему мастер-компонент нельзя так просто разломать? Полагаю, что в этом есть некая задумка разработчиков, чтобы пользователь случайно не разломал мастер-компонент)
Что думаете по этому поводу?
#вебдизайн #вебдизайнер #фигма #figma #разработкасайтов #сайтыподключ
Auto Layout, фреймы и компоненты
Официально Auto Layout был запущен 5 декабря 2019 года. За него можно сказать спасибо разработчикам из Figma — именно они его придумали и создали. Идея была в том, чтобы оптимизировать время и вместо ручного размещения объектов делать это автоматически, с вариантами вертикальной и горизонтальной компановки. Таким образом, Auto Layout — это встроенный инструмент в Figma, с помощью которого можно легко и просто выравнивать элементы.
Frame в Figma
Фрейм — это рабочая область, где будут размещаться элементы вашего будущего дизайна. Чтобы его создать, выберите иконку в левом верхнем углу в панели инструментов. Наведите на пустую область и нажмите левую кнопку мыши. Горячие клавиши для создания фреймов — «F» и «A». Если не тянуть курсором, а просто нажать на левую клавишу мыши, то будет создан фрейм размерами 100 на 100 пикселей.
В правой панели представлены популярные размеры фреймов.
- Phone — для телефонов
- Tablet — для планшетов
- Desktop — для настольных компьютеров
- Watch — для часов
- Paper — для бумаги
- Social media — для социальных сетей
- Figma community — размеры от сообществ
В отличие от обычного фрейма, кнопка с активной функцией Auto Layout будет сама адаптироваться под длину текста, и вам не придётся её каждый раз переделывать.
Компоненты
Компоненты — это элементы, которые можно массово редактировать. Например, если вы создадите кнопку, сделаете из неё компонент, а затем скопируете, то при изменении цвета, размера и текста у главного компонента — копии также будут меняться.
Давайте рассмотрим на примере простой кнопки. Чтобы её создать, нарисуем в Figma прямоугольник и наложим на него текст. Выделим этот элемент и в панели справа, напротив надписи Auto Layout, нажмем на плюс. Цвет кнопки можно изменять, нажав на Select colors. Чтобы создать из кнопки компонент, выделим её и сверху нажмём на иконку из 4 ромбов — Create component.
Теперь в Assets появилась наша кнопка. Мы имеем к ней быстрый доступ и можем использовать её в нашем проекте — просто берём и перетаскиваем её из панели слева. Чтобы скопировать кнопку, нужно выделить её, зажать клавишу Alt и потянуть в сторону.
Если вам потребовалось создать сразу несколько компонентов, то выделите нужные элементы и сверху по центру (напротив иконки создания компонентов) нажмите на стрелку и выберите пункт Create multiple components.
Чтобы убрать (отменить, разгруппировать, разломать) компонент в Figma, выберите копию компонента и нажмите на иконку с тремя точками в правой панели. Выберите пункт Detach instance или нажмите на горячие клавиши Alt + Ctrl + B. В этом случае вы сделаете из компонента простой элемент.
Как сделать адаптивную кнопку
- Напишите текст на кнопке.
- На панели слоёв нажмите на текст правой кнопкой мыши и выберите Frame Selection.
- Выделите получившийся фрейм, на панели настроек добавьте ему фон в блоке Fill и нажмите на + рядом с Auto Layout.
Теперь выставим отступы. Если их нужно сделать одинаковыми, укажите значение напротив иконки. Если у каждой стороны должен быть свой отступ, нажмите на иконку и укажите нужные значения в дополнительном меню.