Как сделать список в фигме

Прототипирование — это просто, как собрать пазл. Мультикомпоненты дизайн системы в Figma

Если вы работаете в среде Figma, то скорее всего вы используете компоненты в своих дизайн-процессах и знаете в чем их преимущества. Когда в ежедневной фриланс рутине я устал повторять создание одних и тех же списков, табов, таблиц или любых других модулей, состав которых динамичен, я начал думать об автоматизации этих процессов, чтобы рутина как минимум протекала быстрее. Таким образом мультикомпоненты и были открыты!

Повторяющаяся структура

Итак, что из себя представляет мультикомпонент? МК — это компонент, состоящий из некоторого множества повторяющихся вложенных элементов, который можно масштабировать простым ресайзом высоты, ширины или по двум осям сразу. Давайте рассмотрим на примере. Почти в каждом интерфейсе можно встретить выпадающий список. Если вы фрилансер, держу пари таких списков было разработано вами предостаточно. Каждый раз вы создавали сначала элемент списка, затем вы определяли размерность списка (кол-во элементов по высоте), клонировали и позиционировали каждую строку друг под другом, потом объединяли в группу или фрейм, заменяли текст; и использовали такой компонент, чтобы продемонстрировать action по клику на выпадающий список. Вы осознаете, что это рутина?

Кстати, если вы используете Figma, я рекомендую обратить внимания на наши готовые дизайн-системы. Они помогают фрилансерам завершать больше заказов в месяц, программистам позволяют создавать красивые приложения самостоятельно, а тимлиды «пробегают» спринты быстрее, используя готовые дизайн-системы для командной работы.

А усли у вас серьезный проект, то наша команда готова развернуть дизайн-систему внутри организации на базе наших наработок и подогнать под конкретные задачи, используя Figma. Web / desktop, так и любой мобайл. С React / React Native мы тоже знакомы. Пишите в Т: @kamushken

Идея MК в структуре размноженных идентичных компонентах, обрезании заступов за область фрейма (clip content) и расставленных параметров ресайзинга в зависимости от направления масштабирования (constraints). Когда вы ресайзите границу фрейма — вы определяете нужный состав будущего модуля в дизайне. Количество вложенных компонентов должно быть настолько велико, чтобы складывалось впечатление бесконечной высоты или ширины. На самом деле вы редко встретите слишком много пунктов для выбора в простом выпадающем списке. Поэтому при создании МСО предел вложенных компонентов может быть ограничен, к примеру, высотой или шириной экрана.

Полуавтоматизация дизайн-процессов

Сейчас автоматизация шагает по миру. Если когда-нибудь в будущем автоматизируют UI дизайн / прототипирование, то мы с вами скорее всего останемся без работы. Если мы начнем думать уже сейчас как автоматизировать собственные рабочие процессы — это поможет нам решать больше задач за один рабочий час. И тут на сцену выходят мультикомпоненты, чтобы уже сейчас ускорить дизайн-процессы.

Примеры

Мультикомпонент для списков

Давайте теперь вернемся к выпадающему списку чтобы, наконец, узнать как это работает. Смотрите как я просто перетаскиваю готовый компонент, растягиваю его вниз до уровня, когда доступны 5 элементов списка, а потом заполняю их текстом. Быстро и просто:

Состав такого МК очень простой:

Мультикомпоненты для табов

Табы это прекрасная категория, чтобы создать в ней гибкий МСО. В этом случае нас интересует масштабируемость по оси Х, так как табы горизонтальны. Увы, Figma не позволяет двигать объекты внутри подчиненного компонента, поэтому оптимально иметь в библиотеке несколько вариантов размерностей для Табов:

Мультикомпоненты для таблиц

Таблицы более сложны, т.к. должны масштабироваться по оси Y до нужного количества строк, а по оси Х до нужного кол-ва колонок. Поэтому конструктор таблиц состоит из двух независимых МК. Сначала вы формируете нужное кол-во строк модулем Table Base, а затем накладываете сверху модуль Multicolumn и задаете ему аналогичную высоту:

В данный момент я сосредоточен на разработке и развитии material дизайн-системы в Figma. Совсем недавно вышла версия 1.3, в которой уже используются мультикомпоненты и проработано более чем 240+ стандартных UI элементов. Этот продукт действительно ускорит вашу дизайн-работу, если Вы работаете с графикой. Он безусловно будет интересен и разработчикам, так как позволяет собирать «боевые» прототипы без навыков дизайна. Вы также можете использовать её как основу для Вашей собственной дизайн-системы и объединить несколько продуктов в среде Фигмы. Смотрите как она работает:

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

Источник

Стили в Figma

Стили позволяют сохранять наборы свойств объекта для повторного использования.

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

Как добавить стиль к элементу

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

Как создать стиль

1) Создайте элемент, задайте его свойства

2) Откройте всплывающее окно стилей, нажав на иконку с четырьмя точками. Обратите внимание, что такие иконки расположены в разных местах панели свойств

Кнопка вызова окна со списком стилей

3) Нажмите значок плюс (+) в открывшейся панели

Окно списка стилей

4) Введите название стиля

Название нового стиля

После создания стиля вы увидите, что панель свойств изменилась. Теперь вместо настроек, отображается название стиля. Если вы наведете на него курсор, вы увидите две иконки — настройки стиля и кнопку «Detach style», открепляющую стиль от этого элемента.

Отображение стиля вместо свойств

Изменение стиля

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

Как удалить стиль

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

Чтобы удалить стиль, вызовите окно со списком стилей и вызовите контекстное меню («правая кнопка» мыши), из списка команд выберите Delete Style.

Удаление стиля

Обратите внимание, что удаление стиля не означает возврат связанных с ним элементов к исходным настройкам.

Источник

Дизайн-система в Figma. Часть 3: Поля ввода и выпадающие списки

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

Поля ввода

Вспомогательный компонент form_stroke

Для начала я создам вспомогательный компонент, который будет содержать в себе стиль оформления самого прямоугольника формы ввода. У меня это будет обычный прямоугольник со сругленными углами, с заданными параметрами заливки и обводки. Constraints я назначаю left+right и top+bottom. Компонент я назвала form_stroke.

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

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

Итак, компонент готов. Я вынесла его отдельно, чтобы у нас была единая точка редактирования стиля для всех форм и чекбоксов — это довольно удобно.

Активность по табу и ошибочное состояние базового компонента

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

Поле ввода

Давайте подумаем, какие объекты, помимо компонента form_stroke, нам понадобятся, чтобы передать все состояния нашей формы ввода:

Все эти элементы могут располагаться по-разному. Например, название формы может быть как сверху основного поля, так и прямо внутри. Оно может скрываться при попытке ввести текст, а может оставаться, а текст вводиться уже правее названия. Текст ошибки также может располагаться по-разному — сверху, справа и т.д.

Итак, нам необходимо создать новый компонент, в который будет вложен наш компонент form_stroke и все перечисленные выше объекты.

Располагаем наши объекты в нужных местах. Не забываем настраивать constraints. Например вводимый текст в форме и компонент form_stroke имеют настройки left+right и top+bottom. Название и ошибка формы всегда в моем случае привязаны к верхнему краю.

А вот так легко можно менять состояние ошибки и активность поля ввода:

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

Выпадающие списки

Базовое состояние

Итак, простая форма ввода готова. Теперь я хочу расширить ее до выпадающего списка.

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

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

Зададим правильное именование иконкам, чтобы было легко в будущем менять их в компоненте выпадающего списка.

Создаем экземпляр поля ввода и запаковываем в новый компонент с настройками

Итак, я беру иконку и вставляю ее внутрь компонента формы. Настраиваю Constraints: left+right и top+bottom, чтобы вложенный компонент масштабировался вместе с выпадающим списком.

Открытое состояние

Теперь нарисуем открытое состояние выпадающего списка.

Для этого создаем вот такой компонент:

В этом компоненте у меня находится текстовый слой с выравниванием left+right и top+bottom, текст в нем всегда выровнен по левому краю и по-цетру относительно вертикали. А также линия с выравниванием left+right и bottom, которая всегда привязана к нижнему краю компонента.

Это будет один элемент списка, который будет появляться при открытии выпадающего списка.

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

Теперь из экземпляров этого компонента собираем такую конструкцию:

Чтобы быстро выровнять их друг под другом, удобно использовать Auto Layout.

Затем всю эту конструкцию мы помещаем поверх компонента нашей плашки, которую мы рисовали в самой первой статье.

Запаковываем все в один компонент. Для плашки настраиваем constraints: left+right, top+bottom.

Для каждого внутреннего элемента списка Auto Layout в левой панели должна быть выбрана такая опция:

Для всего списка Auto Layout выделяем иконку fixed width:

И ставим всему списку constraints: left+right, top.

Таким образом мы задали масштабирование нашей выпадушки по-горизонтали.

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

Моя прокрутка состоит из двух линий с разной толщиной, а также скругленными окончаниями. Не забываем выставить constraints для обоих линий.

Помещаем экземпляр прокрутки в новый компонент списка. Настраиваем constraints: right, top+bottom.

Теперь создаем компонент для открытого выпадающего списка: берем экземпляр закрытого списка и запаковываем в новый компонент.

Не забываем настроить constraints. В моем случае это настраиваем constraints: left+right, bottom — т.е. в ширину выпадушка масштабируется вместе с полем ввода, а по высоте она всегда привязана к низу компонента.

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

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

В итоге у нас получился вот такой набор состояний для полей ввода и выпадающих списков:

Можно оставить как есть, а можно все состояния запаковать в отдельные компоненты, назначить одинаковые имена, начинающиеся с form и управлять ими уже при помощи instance в правой панели фигмы.

Чекбокс/радиобокс

Мы закончили с компонентом для полей ввода и выпадушек. Теперь создадим новый компонент для чекбоксов и радиобоксов. Я также решила объединить их в один компонент для удобства использования.

Нам нужно создать 4 состояния:

Выделим правую часть этого компонента в отдельные иконки-компоненты. В качестве основы мы будем использовать наш компонент form_stroke, чтобы его стиль также наследовался чекбоксами и радиобоксами. Но поскольку сама иконка там довольно мелкая, мы переопределим радиус обводки, настроив нужный нам вид. Дополнительно делаем вариант, когда поле активно (например при навигации табом) — дл этого у вложенногог компонента form_stroke делаем видимым слой с обводкой-выделением.

Все 4 иконки я переименовываю по одному правилу через слеш, чтобы потом было удобно менять их в компоненте чекбокса-радиобокса. фигма определить общуя часть названия и при изменении instance иконки поставить эти значения в список

Теперь создаем экземпляр активной иконки чекбокса и подставляем к ней текст. Запаковываем все это в новый компонент. Настраиваем параметры и constraints для текста:

Для иконки constraints ставим left и center.

Компонент готов, теперь подменяя иконку, благодаря правильному именованию, мы легко получаем различные состояния объекта:

Вот какие состояния получились в итоге:

Запакуем также эти состояния в отдельные компоненты и дадим им имена начинающиеся на form/, объединив их таким образом в одну группу с полями ввода и выпадающими списками. Так будет удобнее настраивать всевозмодные страницы с большим количеством разных форм.

В итоге мы получим вот такой набор компонентов:

Кстати, одинаковое именование компонентов также группирует их в общем списке в левой панели figma:

Это тоже очень удобно для генерации страниц.

В итоге мы получили гибкий набор настраиваемых компонентов, стили и внешний вид которых можно удобно менять буквально в пару кликов

Ждите продолжения в новых статьях, задавайте вопросы, делитесь своими идеями и мнениями в комментариях. А если статья была вам полезна, поддержите клапсом 👏 (кстати, клапснуть можно несколько раз).

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

Telegram-канал — публикую, заметки и мысли о своей работе, figma, портфолио, дизайн-системах, автоматизации задач и ускорении работы. Делюсь ссылками, крутыми кейсами.

Источник

Figma — хитрости работы с редактором

В Figma много неочевидных моментов, которые не всегда можно найти в документации или нащупать методом тыка. Рассказываем о хитростях редактора.

Посмотреть полный список горячих клавиш

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

Показать/скрыть интерфейс

Такие элементы редактора, как верхняя панель управления, а также две боковые панели — слоев и настроек — занимают на экране много места и не дают в должной мере сосредоточиться на макете. Чтобы убрать все панели и оставить только рабочее пространство, достаточно нажать сочетание клавиш на клавиатуре —
Ctrl + \.

Автор статей по дизайну. В веб-дизайн пришел в 2013 году, осознанно начал заниматься с 2015 года. Параллельно освоил верстку. Время от времени публикует переводы на Хабре.

Выбор цвета

Одна из самых полезных опций.

Чтобы быстро взять нужный цвет из другого места экрана, нажмите клавишу I на клавиатуре.

За пределами рабочей области цвет взять не получится.

Поиск по всем командам Figma

Если вы знаете, что хотите найти в Figma, но не уверены, где именно это находится, нажмите сочетание клавиш Ctrl + /. Откроется основное меню с активной строкой поиска.

Замена значения сдвига объекта

В Figma по умолчанию значение сдвига объекта 8px, чтобы его поменять, перейдите в главное меню, затем выберите Preferences — Nudge Amount.

В появившемся окне введите нужное значение, например, 10.

Замена группы на фрейм

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

Источник

7 лайфхаков в Figma, которые упростят вам работу

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

Катя Павловская для Skillbox Media

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

Рассказываем о семи простых лайфхаках, которые помогут вам быстрее работать в Figma.

Свернуть вложенные фреймы и группы

Если вы работаете над большим проектом, в документе становится сложно ориентироваться из-за большого количества фреймов, групп и компонентов, особенно когда они все развёрнуты.

Чтобы моментально свернуть все фреймы, группы и компоненты, нажмите сочетание клавиш Alt (⌥) + L.

Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.

Предпросмотр цвета

Выделите любой фрейм или фигуру, нажмите кнопку I, зажмите правую кнопку мыши и водите курсором по макету. Любой цвет под ним станет фоновым для выделенного элемента. Так вы сможете быстрее выбрать нужный оттенок для кнопки, текста или основного фона макета.

Переименование фреймов

По умолчанию Figma создаёт новые фреймы с названием Frame 1 — оно ничего не говорит о содержимом фрейма, особенно для тех, кто в ваш макет заходит впервые. Переименовать один такой фрейм — легко, но если их 10 или 20, то придётся потратить на это много времени.

Чтобы быстро систематизировать названия одинаковых по смыслу фреймов, выделите их, нажмите сочетание клавиш Сtrl (⌘) + R. Откроется меню, в котором вам будет предложено переименовать выделенные объекты:

Настройки переименования объектов:

Выравнивание с Tidy up

Два одинаковых объекта поставить ровно очень просто. Но если их 10 или 20, это превращается в большую и нудную задачу. Чтобы дизайнер не занимался подобной рутиной, в Figma есть функция Tidy up, с помощью которой можно автоматически расставить все объекты ровно, поменять их местами и изменить отступы.

Как пользоваться Tidy up

Горизонтальный прогресс-бар

Если вы занимаетесь интерфейсом технически сложного приложения, скорее всего, вам понадобится прогресс-бар. В Figma есть множество способов его нарисовать, но самый простой — с помощью текста!

Как создать горизонтальный прогресс-бар из текста

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

Круглый прогресс-бар

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

Готово — получился круглый прогресс-бар. Чтобы изменить его длину, наведите курсор на фигуру, зажмите правой кнопкой мыши один из концов фигуры и тяните.

Кляксы стандартными инструментами

В Figma есть много плагинов для создания интересных форм, но их можно сделать и самостоятельно с помощью стандартных инструментов. Например — сферы и связки, похожие на кляксы.

Как сделать кляксу

Теперь вы можете двигать фигуры как угодно и они будут похожи на кляксы:

Источник