Если кратко, то Figma это как Sketch или Adobe XD, но с небольшими нюансами. Основная особенность этого редактора – технология облачного хранения и многопользовательский режим доступа. Таким образом, над макетом могут работать одновременно несколько человек, вносить правки, оставлять комментарии. Скачивать при этом ничего не нужно – макет открывается по ссылке. А еще в Figma есть много удобных функций, которые делают работу над проектом быстрее и проще. Рассказываем, что это и зачем, а также о том, как компоненты Figma сделают вашу работу над проектом продуктивнее.
Допустим, вы хотите спроектировать выпадающий список фильтров с переменным количеством опций одного типа (чекбоксы или радиокнопки). Поместите ваш блок лейаута внутрь выпадающего списка и поменяйте базовый элемент на чекбокс. Не забудьте включить Expose nested situations на компоненте выпадающего списка.
Вы можете визуально выдвинуть первый или последний элемент на передний план, изменив параметры наложения. Достаточно поменять мастер-компонент строки, и вид буллитов тоже изменится. Компоненты вроде меню навигации, модальных окон, футера и хедера устроены сложнее.
Файлы-куки: Как Правильно Информировать Пользователей И Избежать Штрафов
Будучи дизайнером, вы можете представлять себя кем-то вроде безумного ученого, тщательно смешивающего все элементы, чтобы создать связное, визуально привлекательное целое. И как любой безумный ученый, вы можете быть перфекционистом и стремиться к тому, чтобы все было точно и идеально до пикселя. Сегодня Фигма выкатила отличную фичу, которая упрощает в разы построение макетов для адаптации под устройства, переиспользование компонентов, и в работе в целом.
Эта инструкция всё ещё может помочь вам освоить работу с Auto Layout, но если вы только начали пользоваться Figma, советуем прочитать обзор последних обновлений. Удерживайте ПРОБЕЛ при размещении объекта внутри auto structure, чтобы расположить его так, как вам нужно, и избежать его автоматического размещения. Этот совет позволяет размещать объекты за пределами auto layout, что, как правило, невозможно, потому что Figma не допускает отрицательных значений. Чем чаще вы будете использовать горячие клавиши auto format, тем быстрее их применение войдет у вас в привычку. В панели Design укажите, что и сколько раз вы хотите продублировать.
Если у вас нет времени или желания разбираться с настройкой компонентов, доверьтесь нам. Наши специалисты имеют большой практический опыт в работе с Figma. Варианты компонентов Figma можно создавать в неограниченном количестве и добавлять к уже существующим. У этой функции есть «мера предосторожности» от случайных действий, например, перетаскивания большого изображения внутрь кнопки.
Если у каждой стороны должен быть свой отступ, нажмите на иконку и укажите нужные значения в дополнительном меню. Инструмент Auto Layout в Figma позволяет указывать отступы и выравнивать соседние модули автоматически. Рассмотрим, как пользоваться Auto Layout, на примере кнопки, модуля и страницы. Когда у вас много auto format, структура фреймов внутри может начать усложняться. Не бойтесь, есть несколько горячих клавиш, которые помогут вам с легкостью перемещаться по его дочерним элементам. Теперь можно переходить к созданию компонентов повторяющейся сетки.
Мастер И Экземпляр-компоненты
С его помощью можно решать задачи по прототипированию и разработке интерфейсов, а также обсуждать с коллегами рабочие моменты и коллективно править макеты. Кроме того, если у вас есть библиотеки компонентов и дизайн-системы, теперь вы можете применить Auto Layout к каждому компоненту, нажав Shift + A или через меню «Option». Тем не менее, исследование свободной формы дизайна практически невозможно в этих условиях. Экземпляры напрямую связаны с мастер-компонентом, поэтому при внесении изменений в мастер-компонент, экземпляры меняются вместе с ним. Перед тем как перейти к рекомендациям по работе с компонентами, надо познакомиться с понятиями мастер-компонент (master components) и экземпляр-компонент (component instances).
Они представляют собой компонент, частично или полностью собранный из других компонентов. Такая конструкция упрощает и повышает скорость проектирования. Варианты – это группа компонентов, объединенных в один компонент, с разным видом и различными свойствами.
Прежде чем у меня получился гибкий и лёгкий в использовании компонент, я потратил не одну попытку, а весь секрет карточки на auto structure оказался в одном НЕ auto format слое, вот так вот… Создать варианты кнопок несложно, но отрисовывать каждую по отдельности — долго и нудно. Решить проблему поможет плагин Button Buddy, который автоматически создаёт все основные состояния по указанным вами параметрам. С помощью вариантов можно менять что угодно, например цвет, размер, и добавлять иконки. Перед тем как читать эту статью, советуем узнать о функции Auto Layout и компонентах.
Переключение между вариантами происходит с помощью выбора необходимого пункта в свойствах экземпляра. Мастер-компонент создается при превращении элемента интерфейса в компонент и определяет его свойства. Использование веток является важным базовым инструментом для дизайн-команд работающих с Figma. Он позволяет сделать совместную работу более эффективной и удобной. Убирает боль отмены больших изменений и путаницы при работе со сложными проектами. И конечно же, добавляет инструмент контроля и предотвращения ошибок.
Auto Layout — это способ упорядочивания элементов и изменения их размеров внутри фрейма. Вы можете использовать его для создания отзывчивых кнопок, которые подстраиваются под размер своих текстовых меток. Он также незаменим для списков, поскольку позволяет добавлять и удалять из них элементы, не нарушая лейаут.
Кстати, надо их тоже обернуть в автолэйаут (понял, пока печатал камент). Теперь без всяких извращений можешь использовать готовую карточку где угодно, а сменять изображение по Ctrl + нажатие и смена инстанса на нужный, всё легко и просто. Все изображения можно менять через инстансы, а не удаление/проявление слоёв, значит наш проект будет в разы меньше весить и не будет лагать (особенно актуально для больших проектов). То же самое можно сделать и с дополнительным стилем кнопки, чтобы вы могли быстро показать её отключённой. Теперь переходим к самим деталям ячейки, но через несколько шагов вернемся к «пустым» контейнерам.
На этом этапе вы также можете выбрать предпочтительные компоненты. К сожалению, при этом вы частично теряете контроль над размерами вложенных элементов. Следующим этапом становится создание библиотеки компонентов – ее можно использовать для хранения заготовок интерфейсов. К экземплярам переходят все изменения мастер-компонентов, кроме переопределения свойства и наполнения.
У каждого объекта может быть сколько угодно состояний, но их важно правильно назвать, чтобы потом вы не потерялись в своём же макете. Сейчас состояния Primary и Secondary относятся к свойству Property 1 — вашему арт-директору будет непонятно, что это значит. Правую часть делаем так специально, чтобы ваши контролы не ехали вслед за растягивающимся текстом.
🔄 Обновления — если во время работы над веткой основная версия подверглась изменениям — вам придёт уведомление о доступном обновлении проекта, обязательно принимаем правки. Также могут приходить технические обновления, их тоже принимаем. Проекты содержащие ветки, обозначаются специальным лейблом, по нажатию на который, можно выбрать конкретную версию проекта. Теперь при использовании данного элемента легко выбрать какая это будет кнопка — основная или вторичная, а также выбрать ее состояние. Более полную и развернутую информацию о том что такое компоненты, как и когда их создавать и зачем использовать, можно почитать в этой статье.
Вариантов новых компонентов может быть неограниченное количество. К примеру, с помощью вариантов можно отрисовать в едином блоке все состояния кнопок на сайте или в приложении и быстро менять их в зависимости от задачи. При этом не нужно создавать https://deveducation.com/ по отдельности компонент для каждого из состояний. Экземпляр-компонент – это копия мастер-компонента, который может повторно использоваться в разных проектах. Чтобы отличить мастер-компонент от экземпляра, посмотрите на панель слоёв.
Когда работа завершена и нужно внести изменения в основной проект — ветка сливается с master-версией. Но чтобы использовать Branch, ваш тариф должен быть Organization или Enterprise. Если все элементы называются одинаково, то при объединении это название перейдет фрейму. Продолжаем оптимизировать UI-kit и дизайн-систему необычными способами. В прошлый раз мы разбирали хардкорные ячейки, многим зашла эта тема, поэтому продолжаем делать разборы компонентов, следующий на очереди — карточки. Обратите внимание, что добавить в комбайн можно только компоненты.
Теперь вы можете свободно изменять размеры, регулируя расстояние внутри ваших контроллеров. Копии экземпляров и мастер-компонентов не отличимы друг от друга. Наложение элементов друг на друга Добавьте 0px фрейм в auto format в любую, более удобную для дальнейшего перемещения самого блока, часть контейнера.
- Единожды создав вид компонента, впоследствии вы сможете использовать его копии по всему проекту.
- К экземплярам переходят все изменения мастер-компонентов, кроме переопределения свойства и наполнения.
- К созданным вариантам компонента можно добавлять новые компоненты.
- В прошлый раз мы разбирали хардкорные ячейки, многим зашла эта тема, поэтому продолжаем делать разборы компонентов, следующий на очереди — карточки.
- Более полную и развернутую информацию о том что такое компоненты, как и когда их создавать и зачем использовать, можно почитать в этой статье.
Ниже находится настройка изменения размера фрейма — Resizing. Необходимо выбрать более одного элемента, чтобы в правом меню появился пункт auto format (если это однотипные элементы, их надо предварительно выровнять друг относительно друга). Кнопка сама адаптируется под длину текста благодаря параметру Resizing — изменение размера. По умолчанию Figma в Resizing использует свойство Hug contents — форма фрейма с активной функцией Auto Layout подстраивается под длину и высоту содержимого.
Следующий шаг после работы с компонентами – это создание библиотеки компонентов Figma, где можно хранить основные заготовки для интерфейсов. Она избавляет от двойной работы и позволяет использовать общие элементы повторно. Важно учитывать, что в вариантах мастер-компонента нужно правильно подписывать элементы в списке слоев. Одинаковые элементы вариантов должны auto layout figma что это называться одинаково, тогда наполнение останется прежним. Это позволит не менять наполнение компонента при изменении варианта в свойствах экземпляра (подпись кнопки «Вход» будет сохранена при изменении состояния в свойствах компонента). Создать компонент очень просто, достаточно выделить фрейм и нажать на иконку в верхнем меню, или комбинацию клавиш Ctrl+Alt+K.