Как найти главный компонент в фигме

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

Что такое компоненты в 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).

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

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

Как это работает? Давайте рассмотрим на примере создания кнопки. Для этого нарисуем прямоугольник и сделаем закругление углов на 20. Далее сделаем из него компонент при помощи горячих клавиш «Ctrl+Alt+K», или через главное меню в разделе «Object», пункте «Create component».  

После этого переименуем этот компонент и назовем его «Shape». Это необходимо для того чтобы вам было проще понимать, что это основной Shape, из которого вы будете делать все элементы в дизайне.   

Затем копируем Shape при помощи клавиши «Alt». Создадим две копии для двух разных кнопок.

Вы можете добавить текст, а также использовать заливку цветом. Назовем первую кнопку «entrance», а вторую «exit».

Далее выделите отдельно каждую кнопку и нажмите на клавиши «Ctrl+Alt+K», чтобы создать из них отдельные компоненты. Кроме того, переименуем эти компоненты в левой панели.  

После этого, можно скопировать каждый компонент при помощи «Alt» и создать несколько образцов этих кнопок.

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

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

Теперь, при внесении изменений в родительском компоненте, все дочерние также будут принимать эти изменения. Например, можно изменить расположение текста в кнопке, или сам текст, изменить размер кнопки или радиус закругления углов. Все эти изменения будут касаться дочерних компонентов. Как видно на иллюстрации кнопка «Exit» (родительский компонент) была изменена по размеру, и все остальные дочерние компоненты также изменились в размере.  

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

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

• button/primary/text — active;
• button/primary/text — default;
• button/primary/text — disabled;
• button/secondary/text — active;
• button/secondary/text — default;
• button/secondary/text — disabled.

В том случае, если какой-то элемент необходимо отделить от родительского компонента, вы можете сделать его обычным элементом, или отдельной группой. Для этого выделите компонент кликнув на него и нажмите «Ctrl+Alt+B», или просто кликните по нему правой кнопкой мыши и выберите опцию «Detach Instance».

Итак, вы узнали, как устроены компоненты в Фигме, и как их создавать. Для работы с большими проектами без данной функции просто не обойтись. Она позволит вам экономить массу времени, а также упростит работу верстальщика.    

Об основах Figma для новичков — наименовании блоков и нулевом фрейме — рассказывает Михаил Загородний, Designer в Friflex.

Figma — графический редактор для совместного проектирования сайтов, приложений и других дизайнерских продуктов. Она появилась в 2016 году как аналог Sketch и Adobe XD, но спустя пару лет стала одним из самых популярных инструментов у дизайнеров.Программа позволяет собрать большие проекты в одном месте и с легкостью переключаться между экранами.

На фоне зарубежных санкций компания, как и Adobe, замораживает бизнес-аккаунты российских компаний по тарифам Figma Professional, Figma Organization и Figma Enterprise, но оставляет доступ к базовому бесплатному тарифному плану. Бесплатная версия программы не подойдет для работы команды, но будет все также актуальна для индивидуального использования. Поэтому, если вы фрилансер, работаете в паре с другим дизайнером или самостоятельно, только начинаете карьеру или хотите заниматься UX-дизайном – эта статья для вас. В ней я расскажу, как работать с компонентами, структурировать их варианты и решать ранее невозможные задачи с помощью нулевого фрейма.

Что такое компоненты в Figma, и как они ускоряют рабочий процесс?

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

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

Самый простой компонент – кнопка. Важно помнить, что ее вид не должен меняться от перехода экрана к экрану.

Более сложные компоненты – шапка и футер на сайте, меню навигации в приложении, а также хедеры или модальные окна.

Главное преимущество работы с компонентами – возможность вносить изменения во все экземпляры проекта сразу, изменяя только мастер-компонент. Это ускоряет рабочий процесс и делает дизайн-систему проекта более согласованной, упрощает процесс ее поддержки и сотрудничества с другими дизайнерами.

Поведения компонентов: мастер-компонент и экземпляр-компонент

Перед тем как перейти к рекомендациям по работе с компонентами, надо познакомиться с понятиями мастер-компонент (master components) и экземпляр-компонент (component instances).

Мастер-компонент создается при превращении элемента интерфейса в компонент и определяет его свойства.

Экземпляр-компонент – это копия мастер-компонента, который может повторно использоваться в разных проектах. Чтобы отличить мастер-компонент от экземпляра, посмотрите на панель слоёв. Мастер-компонент обозначен иконкой с четырьмя закрашенными ромбами, экземпляр – иконкой с одним контурным.

Экземпляры напрямую связаны с мастер-компонентом, поэтому при внесении изменений в мастер-компонент, экземпляры меняются вместе с ним.

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

Варианты компонентов

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

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

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

Структурирование вариантов

В настройках компонентов можно добавлять и называть свойства и их варианты. Это позволяет структурировать варианты по свойствам и при размещении компонента выбирать необходимый вид компонента.

Наименование блоков

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

Вложенность компонентов

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

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

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

Как создать 0px фрейм, и почему он точно понадобится

Есть задачи, которые невозможно решить с помощью стандартного функционала Figma. Например, ограничение минимальной высоты, ширины элемента, вынос элементов за границы autolayout или наложение элементов друг на друга. Здесь можно использовать нулевой фрейм.

Чтобы создать фрейм, в поле настроек ширины и высоты введите значение 0,001. Если в полях появится значение 0 – ваш фрейм готов! Важно учесть, что при вводе значения 0 или 0,01, Figma автоматически округлит его до единицы, и создать нулевой фрейм не получится.

Добавьте 0px фрейм в auto layout в любую, более удобную для дальнейшего перемещения самого блока, часть контейнера. Далее выделите элемент внутри нулевого фрейма и поместите его в нужное место.

Вынос элемента за границы происходит идентично наложению. Добавьте фрейм в удобное место и вынесите его содержимое за границы auto layout.

Компоненты Figma – это одно из главных достоинств программы. Чтобы не перерисовывать каждый элемент по отдельности, используйте компоненты. Редактируя всего одну иконку или кнопку, можно вносить комплексные изменения в весь проект. Следующий шаг после работы с компонентами – это создание библиотеки компонентов Figma, где можно хранить основные заготовки для интерфейсов. Она избавляет от двойной работы и позволяет использовать общие элементы повторно.

Выстроить качественную систему компонентов – это непростая задача для новичка. Но как только она будет решена, у вас появится время, чтобы выпить не одну, а две чашки кофе.

Как сейчас выстраиваете работу, нашли аналог или пользуетесь Figma? Делитесь в комментариях.

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

С введением санкций у российских бизнес-аккаунтов больше нет доступа к корпоративным тарифам Professional Organization и Enterprise. Остались только базовая и бесплатная версии программы.

Если кратко, то Figma это как Sketch или Adobe XD, но с небольшими нюансами. Основная особенность этого редактора – технология облачного хранения и многопользовательский режим доступа. Таким образом, над макетом могут работать одновременно несколько человек, вносить правки, оставлять комментарии. Скачивать при этом ничего не нужно – макет открывается по ссылке. А еще в Figma есть много удобных функций, которые делают работу над проектом быстрее и проще. Одной из таких функций является библиотека компонентов. Рассказываем, что это и зачем, а также о том, как компоненты Figma сделают вашу работу над проектом продуктивнее.

Что есть компоненты и зачем они нужны

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

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

Кнопка – элементарный компонент. При переключении экранов ее вид неизменен. Компоненты вроде меню навигации, модальных окон, футера и хедера устроены сложнее.

Изменения компонентов одномоментно модифицируют составляющие проекта.

Таким образом, интерактивные компоненты Figma помогают систематизировать и оптимизировать работу над проектом, сделать ее более согласованной и продуктивной.

Мастер и экземпляр-компоненты

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

На панели слоев по иконке можно определить, какие из элементов – главные компоненты, а какие – экземпляры. Для главных компонентов применяется кнопка с 4 ромбами. Экземпляры обознаются кнопкой только с одним ромбом.

К экземплярам переходят все изменения мастер-компонентов, кроме переопределения свойства и наполнения. При нарушении связи свойств и наполнения можно воспользоваться панелью свойств и восстановить ее.

Вариативные компоненты Figma

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

Как создать варианты мастер-компонента? Добавьте пункт Variants в его меню свойств. Копии экземпляров и мастер-компонентов не отличимы друг от друга.

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

Построение структуры вариантов

Структуру вариантов по свойствам можно создать в настройках компонентов и выбрать нужный вид компонента.

Название блоков

Важно: чтобы наполнение было неизменно, следите за тем, чтобы элементы в вариантах мастер-компонентов в списке слоев были подписаны правильно.

Таким образом, если вариант меняется в свойствах экземпляра, то наполнение компонента можно не менять. Например, если меняется состояние в свойствах компонента, подпись кнопки «Вход» будет неизменной.

Атомарные компоненты

Атомарные компоненты состоят из других компонентов – полностью либо частично. Их также называют вложенными. С их помощью проектирование становится быстрее и удобнее.

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

Достаточно поменять мастер-компонент строки, и вид буллитов тоже изменится. Уровень и сложность вложенности могут быть любыми.

Как создать 0px фрейм

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

• ограничение минимальных размеров элемента;
• вынесение элементов за пределы autolayout;
• наслоение элементов друг на друга.

Здесь пригодится нулевой фрейм. Его можно сделать всего за 3 шага:

1. Создать простой фрейм.
2. Установить высоту и ширину 0,001 [или и то, и другое].
3. Снять галочку с Clip content [если внутри нужно размещать какие-либо объекты].

Готово!

Важно: вводите только 0,001. Figma автоматически округляет значения 0 и 0,01 до единицы, и фрейм создать не получится.

• Наслоение элементов

Добавьте 0px-фрейм в autolayout в ту часть контейнера, которая будет удобной для перемещения блока. Выделите элемент внутри фрейма, затем разместите его в нужном месте.

Наслоение элементов друг на друга готово!

• Вынос фрейма за границы

Действия при выносе элемента за границы такие же, как при наложении. Добавьте фрейм там, где это необходимо, и вынесите его наполнение за пределы autolayout.

Компоненты в Figma – одно из главных преимуществ программы. Они позволяют работать с элементами комплексно и менять весь проект сразу при редактировании всего одной кнопки или иконки.

Следующим этапом становится создание библиотеки компонентов – ее можно использовать для хранения заготовок интерфейсов. Библиотека интерфейсов оптимизирует труд дизайнера. Общие элементы можно использовать вновь.

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

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