Дизайн
Friflex

Что такое компоненты в Figma, и как они помогут сделать работу быстрее

Об основах 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? Делитесь в комментариях.

0
27 комментариев
Написать комментарий...
BLVCK SQUARE

Фигма в РФ доступна?

Ответить
Развернуть ветку
Российские аналоги

Бесплатный тариф - да

Ответить
Развернуть ветку
BLVCK SQUARE

Какие Российские аналоги есть для Фигмы?

Ответить
Развернуть ветку
Бублик

Мой Офис Презентация

Ответить
Развернуть ветку
Инна Микийчук

пока никаких.
как минимум один в разработке.

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Евгений

Сижу в рф спокойно юзаю фигму. к чему высер - не понял

Ответить
Развернуть ветку
BLVCK SQUARE

для РФ оплату прикрыли

Ответить
Развернуть ветку
Утка-хрутка

А кто аналог анонсировал?

Ответить
Развернуть ветку
Инна Микийчук
Ответить
Развернуть ветку
Daria Sergeevna

Ну вот вроде и круто все (если действительно сделают, постараются и все такое), но ощущение, что пытаются впарить абибас под видом адидаса.

Ответить
Развернуть ветку
Инна Микийчук

посмотрим, что сделают, если сделают.

Ответить
Развернуть ветку
BLVCK SQUARE

это называется сбро бабла, что там по факту не ясно..

Ответить
Развернуть ветку
NotFop

Почему не зарегаться под другой страной? Оплата нужна с заграничного банка или еще какие-то ограничения ?

Ответить
Развернуть ветку
Светлана Шутова

Да, российской картой не оплатить вообще(

Ответить
Развернуть ветку
Роман Ваничкин

Палка?

Ответить
Развернуть ветку
alex

Доступна

Ответить
Развернуть ветку
Инна Микийчук

В последнем подзаголовке написано про нулевой фрейм "и почему он точно понадобится". Я так и не поняла его назначения. Фигма же нужна для макетов в первую очередь, и для прототипов во вторую. Тултип над кнопкой "tap to add" можно просто поставить над рабочей областью и не извращаться. Второй случай: мы же не делаем полностью рабочее приложение, которое пользователю будет в прототипе позволять вводить текст, соответственно, зачем извращаться, если это можно просто описать в документации? Это как-то легче верстать с нулевым фреймом?

Ответить
Развернуть ветку
Friflex
Автор

Инна, добрый день!
Конечно, использование нулевого фрейма в первую очередь зависит от задачи. С ним проще создать компонент, который будет адаптивен к любому наполнению. Это упросит командную работу или работу над большим проектом. Например, когда предупрежение должно быть на множестве экранов, а экраны проектируются разными людьми, нулевой фрейм позволит избежать ошибок в индивидуальной подстройке вида предупрежения и поможет сохранить структуру autolayout’а.
В случаях, когда предупрежение встречается один или два раза без необходимости изменения его наполнения, скорее всего, удобнее будет просто вынести кнопку за пределы фрейма. Пример из статьи с подсказкой «Tap to add» лишь демонстрирует возможности использования нулевого фрейма. Более реалистичные примеры – адаптивные к наполнению сообщения или уведомления на подложке, к которым нужно добавить красную точку оповещения.
Надеемся, что возможности нулевого фрейма стали для вас более ощутимыми и помогут вам в новых проектах 🙌

Ответить
Развернуть ветку
Инна Микийчук

Спасибо!

Ответить
Развернуть ветку
Ян Корвин

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

Вот статьи, которые про этот нулевой фрейм рассказывали здесь же, на vc:
https://vc.ru/design/294561-komponent-v-figma-s-nulevymi-razmerami-priemy-i-fishki
https://vc.ru/design/310854-nulevoy-freym-v-figme-zero-pixel-frame-in-figma

Ответить
Развернуть ветку
Инна Микийчук

Спасибо большое! Эти статьи чуть более полезны.

Ответить
Развернуть ветку
Дима А

Было бы интересно почитать про анимации в фигме

Ответить
Развернуть ветку
Тимур Петров

Пишите ещё гайды.

Ответить
Развернуть ветку
Тимур Петров

https://friflex.com
Для поднятия рейтинга сайта.

Ответить
Развернуть ветку
Ксения Евсюкова

Гайд отличный, но это понятно на интуитивном уровне. Было бы интересно почитать про что-нибудь посложнее, ту же анимацию

Ответить
Развернуть ветку
Friflex
Автор

Ксения, спасибо) В следующий раз обязательно напишем про анимацию, а пока можете посмотреть наш гайд, как сделать анимированные стикеры в Телеграме 😊 —-> https://vc.ru/design/222181-instrukciya-kak-sdelat-animirovannye-stikery-v-telegrame

Ответить
Развернуть ветку
Инна Микийчук

на самом деле, я думаю, не всем понятно на интуитивном уровне.
мне как-то сдали проект интерфейса на мобильное приложение (iOS), там не было ни одного компонента. Вообще. Все иконки во фреймах, вообще все во фреймах о_О вот сиди и думай, почему люди не понимали, что есть компоненты, у которых есть варианты...

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Читать все 27 комментариев
null