Что такое компоненты в 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? Делитесь в комментариях.
Фигма в РФ доступна?
Бесплатный тариф - да
Какие Российские аналоги есть для Фигмы?
Комментарий недоступен
пока никаких.
как минимум один в разработке.
Комментарий удален модератором
Сижу в рф спокойно юзаю фигму. к чему высер - не понял
для РФ оплату прикрыли
Комментарий недоступен
https://figura.one/
Ну вот вроде и круто все (если действительно сделают, постараются и все такое), но ощущение, что пытаются впарить абибас под видом адидаса.
посмотрим, что сделают, если сделают.
это называется сбро бабла, что там по факту не ясно..
Pixso
А тебе зачем ?
Почему не зарегаться под другой страной? Оплата нужна с заграничного банка или еще какие-то ограничения ?
Да, российской картой не оплатить вообще(
Палка?
Доступна
Было бы интересно почитать про анимации в фигме
В последнем подзаголовке написано про нулевой фрейм "и почему он точно понадобится". Я так и не поняла его назначения. Фигма же нужна для макетов в первую очередь, и для прототипов во вторую. Тултип над кнопкой "tap to add" можно просто поставить над рабочей областью и не извращаться. Второй случай: мы же не делаем полностью рабочее приложение, которое пользователю будет в прототипе позволять вводить текст, соответственно, зачем извращаться, если это можно просто описать в документации? Это как-то легче верстать с нулевым фреймом?
Инна, добрый день!
Конечно, использование нулевого фрейма в первую очередь зависит от задачи. С ним проще создать компонент, который будет адаптивен к любому наполнению. Это упросит командную работу или работу над большим проектом. Например, когда предупрежение должно быть на множестве экранов, а экраны проектируются разными людьми, нулевой фрейм позволит избежать ошибок в индивидуальной подстройке вида предупрежения и поможет сохранить структуру 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
Для поднятия рейтинга сайта.
Гайд отличный, но это понятно на интуитивном уровне. Было бы интересно почитать про что-нибудь посложнее, ту же анимацию
Ксения, спасибо) В следующий раз обязательно напишем про анимацию, а пока можете посмотреть наш гайд, как сделать анимированные стикеры в Телеграме 😊 —-> https://vc.ru/design/222181-instrukciya-kak-sdelat-animirovannye-stikery-v-telegrame
на самом деле, я думаю, не всем понятно на интуитивном уровне.
мне как-то сдали проект интерфейса на мобильное приложение (iOS), там не было ни одного компонента. Вообще. Все иконки во фреймах, вообще все во фреймах о_О вот сиди и думай, почему люди не понимали, что есть компоненты, у которых есть варианты...
Pixso
Комментарий удален модератором