Содержание
Кроме того, все компоненты на странице очень гибкие и отзывчивые, и я могу использовать их во всех моих файлах дизайна. В случае каких-либо изменений в дизайне страницы, я могу обновить их в своей библиотеке, и она автоматически обновит все мои файлы дизайна. Продолжаем создавать собственную дизайн-систему в Figma. Мы поговорим о том, как я делаю компоненты для кнопок, инпутов, чекбоксов, радиобоксов, выпадающих списков и прочих элементов, которые часто встречаются в дизайне сайтов и интерфейсов. Когда у вас много auto layout, структура фреймов внутри может начать усложняться. Не бойтесь, есть несколько горячих клавиш, которые помогут вам с легкостью перемещаться по его дочерним элементам.
У теста внутри кнопки была понижена непрозрачность до 50%. Задаем стиль текста, зарезервированный в нашей дизайн-библиотеке специально для кнопок (смотри предыдущую статью). Создаем прямоугольник нужного размера, задаем скругление углов и прочие эффекты, если нужно. Подбираем цвет из палитры, которую мы создавали в предыдущей статье.
Это был вторничный совет о дизайне интерфейсов. Сегодня Фигма выкатила отличную фичу, которая упрощает в разы построение макетов для адаптации под устройства, переиспользование компонентов, и в работе в целом. В этом артборде настрой только Spacing между частями ячейки, разумеется переключи лэйаут по горизонтали, это же горизонтальный компонент. За последние года полтора, я нашёл себя в создании и оптимизации дизайн-систем, а инструменты для дизайна начали подыгрывать мне и постоянно подкидывают новый функционал на изучение. В этой статье я покажу хардкорное применение последнего нововведения в Figma –Auto layout. Canvas stackingБезусловно полезная функция, позволяющая задать порядок слоев во врейме.
После утверждения прототипа отдел «натягивает» дизайн. В библиотеке меняются шрифты и цвета, корректируется оформление компонентов. В итоге на всех экранах Крёстная фея Фигмы превращает все элементы в почти готовый проект.
Все параметры передаются «родителю» и сразу наследуются остальными экземплярами. Подходит, если изменения произошли во всей дизайн-концепции. https://deveducation.com/ Компонент — это элемент, копии которого меняются вместе с ним. Например, поле ввода, аватар со статусом или меню.
Меню быстрой вставки
Чтобы работать быстрее, мы используем библиотеку компонентов. Организация подключаемых библиотек там реализована очень хорошо. Подход, в котором дизайн начинается с создания неделимых элементов, которые используются повторно и комбинируются между собой.
Auto Layout позволяет задавать правила для позиционирования элементов относительно друг-друга. Так, можно задать отступы от краев, расстояние между элементами и выравнивание. Чтобы ячейка была гибкой и при этом растягивалась от контента внутри, нужно правильно настроить контейнеры деталей, которые ты сделал на предыдущем шаге, тут и кроются мелкие фишечки. Есть масса механик ячейки, описать все не получится, но, думаю, этой основной механики будет достаточно на первое время. Сэкономьте время, скопировав стиль любого контейнера auto-layout с помощью сочетания клавиш OPTION + CMD / CTRL + C и вставив его с помощью OPTION + CMD / CTRL + V.
Разместив кнопку, которая по умолчанию имеет обводку 4dp, можно выделить компонент Stroke и переключить через панель Instance скругление углов в меньшую или большую сторону. Это чуть более сложный способ, но позволяет хранить в отдельном мастер-компоненте разные виды скруглений. Самый простой способ — менять степень скругления через поле ввода в правой панели. Аналогичная схема применима и для текстовых полей, карточек или любых фоновых компонентов.
Время — деньги, поэтому использование компонентов означает для клиентов экономию бюджета. Библиотека — это файл, где хранятся основные компоненты для проекта. Он точно такой же, как файл с готовым дизайном, — отличается только назначением. Если нужно добавить в проект один из стандартных элементов, дизайнер не рисует его заново, а берёт из библиотеки.
К тому же их можно менять местами перетаскиванием или стрелочками на клавиатуре. А изменяя значения ограничителей в блоке Constraints, можно управлять тем, в какую сторону должны расталкиваться кнопки. Кнопку следует превратить в компонент, который мы будем использовать по всему макету. Вы можете добавлять один фрейм с Auto Layout в друго фрейм с указанным пэддингом, если родительский фрейм может вместить в себя дочерний.
Теперь же появились “Секции”, которые созданы специально для организации элементов. Эти новые объекты похожи на фреймы, но с несколькими ключевыми отличиями как во внешнем виде, так и в поведении. Давайте рассмотрим, как они работают и, что более важно, как их использовать. Делаем auto layout в figma экземпляр этого компонента и запаковываем его в еще один компонент. Переопределяем стили, чтобы добиться нужного вида элемента при наведении мышки (у меня задан цвет заливки и скрыта линия у родительского компонента). Далее мы рассмотрим различные формы ввода информации.
Именование компонентов
Новый компонент теперь наследует компонент базовой кнопки. Если мы что-то поменяем в базовой кнопке (кроме цвета, который мы переопределили), это сразу отразится на состоянии других кнопок, созданных на основе базового компонента кнопки. Теперь предыдущие компоненты с деталями закидываем в дополнительные контейнеры, и включаем лейауты. Основной headerЯ не добавил основной заголовок в окончательный шаблон, потому что компоненты в Figma не поддерживают фиксированное положение при прокрутке его элементов. Какой должна быть оптимальная дизайн-система в Figma? Как понятнее и удобнее организовать структуру внутри панели Instance?
Если у вас уже есть компонент, попробуйте использовать эти сочетания клавиш при перетаскивании компонента для замены существующего. Rogie King использует тот же трюк, что и в 6 рекомендации. Он размещает внутри контейнера auto layout фрейм с фиксированной минимальной шириной и задает ему значение высоты, равное 0. Таким образом, можно зафиксировать минимальную ширину (или длину) контейнера auto layout, чтобы он не становился меньше, если текст недостаточно длинный.
Три явных плюса от ультимейт компонента
Для их создания нам понадобится небольшой вспомогательный компонент form_stroke/simple. Мы еще не раз применим в нашей библиотеке принцип наследования. Благодаря этому, изменения всей системы будут занимать минимум времени и наша дизайн-система будет очень гибкой и легко перестраиваемой под различные проекты в совершенно разных стилях. Для этого был создан новый стиль заливки с прозрачностью в 15%.
- Кнопка сама адаптируется под длину текста благодаря параметру Resizing— изменение размера.
- Организмы состоят из похожих и / или разных типов молекул.
- Например, организм «шапка сайта» может состоять из различных компонентов, таких как логотип, основная навигация, поиск и список каналов социальных сетей.
- Из компонентов интерфейс собирается как конструктор.
- Теперь переходим к самим деталям ячейки, но через несколько шагов вернемся к «пустым» контейнерам.
Вспомним, что в первой статье мы делали компонент плашки. Совмещаем нашу конструкцию с компонентом плашки и запаковываем в новый компонент selectlist/all. У плашки делаем видимой треугольник-стрелку сверху. Нам также понадобится компонент для прокрутки. Это 2 прямоугольника, совмещенные друг с другом. В моем варианте был использован Auto Layout на названии формы и тексте ошибки, чтобы текст ошибки мог сдвигаться, правее от названия.
Кейс: веб дизайн-система для landing сайтов. Встречайте Websy!
Для случаев, когда прежний «родитель» ещё пригодится. На правой панели у экземпляров есть параметр Instance. Здесь нужный основной компонент можно выбрать из списка. Комбинируя описанные выше функции — вложенность и предоставление ссылок — мы можем показать с помощью секций, какие компоненты дизайна готовы, а какие — нет. Создадим вспомогательные компоненты-иконки для правой части чекбоксов и радиобоксов.
Текст
Мы их актуализируем в соответствии с новыми гайдлайнами и практическими возможностями разработчиков. Содержимое согласовано с разработчиками для Android и iOS. Шаблоны конкретны и предоставляют контекст для всех этих относительно абстрактных молекул и организмов. Шаблоны – это то место, где клиенты начинают видеть окончательный дизайн. Со временем повышается точность шаблонов и в итоге они становятся конечным результатом.
Экспериментируйте с компонентами
Однако они не предназначены для выполнения этой функции, и поэтому с ними может быть довольно трудно работать. Совсем недавно в Figma появилась новая функция — Sections (или секции). Это небольшое, но важное дополнение, которое позволяет дизайнерам эффективнее организовать совместную работу и привести в порядок свои файлы. Принимаю пожелания, какие компоненты, часто используемые в веб-дизайне, можно было бы описать в будущих статьях. В качестве основы мы будем использовать компонент form_stroke/simple и form_stroke/active для активных состояний, чтобы их стиль наследовался самими чекбоксами и радиобоксами.
Ошибка и активность выпадающего списка
Но не бойтесь, есть несколько сочетаний клавиш, которые помогут вам легко перемещаться по дочерним элементам фрейма. Используя функцию auto-layout и значение отступа «space between», довольно легко создать регулируемый компонент слайдера для диапазона значений, количества или индикатора выполнения. Посмотрите видео по ссылке выше, чтобы узнать, как это сделать. В приведенной выше анимации вы можете увидеть, как работает наша страница атомарного дизайна в режиме прототипа в Figma.
Когда библиотека опубликована для команды, её компоненты появляются на вкладке Assets в левой панели. Добавлять всё, что встретится больше двух раз. Интерактивные элементы, иконки, слайдеры, тапбары, аватары пользователей, лэйауты экранов, меню и так далее. Сделайте пустой файл, который станет библиотекой, и наполняйте его компонентами.
Здесь мы создаем отступы между строками с несколькими атомными компонентами дизайна внутри. Невероятно пропорциональный neo-гротеск Objectivity (увы, русификации нет) сразу же поразил меня своей актуальностью. Alex Slobzheninov проделал колоссальную работу и разрешил бесплатное коммерческое использование. Мне сразу же захотелось что-то “задизайнить” на основе этого шрифта. Какое-то время я вертел его по артбордам в Figme, прежде чем понял “Это идеальный шрифт для веба! Видимо в тот момент и родился план создания системы именно для web.