Pull to refresh

Дизайн-система в Figma. Взгляд на интерфейс через компоненты

Reading time 8 min
Views 39K


Какой должна быть оптимальная дизайн-система в Figma? Что такое переиспользуемый компонент? Как понятнее и удобнее организовать структуру внутри панели Instance? Каковы этапы разработки подобного продукта? И так далее. Ответы на эти и многие другие вопросы я постараюсь дать в этой статье.

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

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


Осмысление применение наступает после хайпа


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


Как бы я объяснил суть дизайн-системы в Figma простым языком? Всего в четыре слова: “Поменяли тут — поменялось везде”. В этом кроется главный принцип использования компонентов и экземпляров при разработке любого интерфейса, который при корректной последовательности использования атомов и молекул для создания темплейтов, превратится со временем в полноценную систему.

Смотреть на мир и видеть компоненты


Раньше дизайнеру достаточно было просто рисовать и двигать пиксели. Иногда он даже упорядочивал и аккуратно проименовывал слои и группы. Потом появились символы и дали полуавтоматизацию процессов. Сейчас пришли компоненты и изменения можно транслировать автоматически в разные фрагменты артбордов, разбросанные по всей дизайн-системе. Применение компонентов изменило и сам подход к визуальной разработке.



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

Унификация компонентов и переиспользуемость


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



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

Для создания интерфейса невозможно придумать какой-то новый модуль. Все списки, таблицы, заголовки и аккордеоны уже существуют, но используются иногда по-разному. При планировании состава компонентов нужно начинать с исследования на предмет поиска визуально похожих, чтобы постараться свести к одному компоненту в системе, экземпляр которого будет переиспользоваться с разным наполнением. Хотя сейчас Figma достаточно мощна, чтобы хранить в одной библиотеке 500 и более компонентов, лучше стараться сводить их к минимуму, чтобы проще было организовать структуру. Итак, настало время наконец-то перейти к самому продукту…

Кейс: веб дизайн-система для landing сайтов. Встречайте Websy!


В этой статье речь пойдет о конструировании веб-сайтов. Слово “конструирование” использовалось неспроста. Эта дизайн-система является своеобразным конструктором, чтобы из предоставленных блоков быстро создавать любые templates, и еще быстрее их кастомизировать. Как для мобильных устройств так и для десктопных. Именно компонентная архитектура позволит сделать это эффективно; чтобы в будущем вы могли просто клонировать исходник, быстро сменить цвета, типографику и создавать новые темы. “Поменяли тут — поменялось везде”. Помните?

Исследование и анализ будущего состава


Landing-сайты идеальная сфера применения компонентного подхода. Хватит пальцев двух рук, чтобы сосчитать все блоки, из которых строится классический веб-сайт, рекламирующий товар, услугу или сервис: Header, Footer, Call to action, Features, Testimonials, Download, Video и так далее. Принцип такой системы для конструирования в наличии достаточных комбинаций всех перечисленных блоков. Таким образом можно как паззл собрать любой сайт + мобильную версию. Оставалось лишь в качестве исследования изучить сотню свежих landing-сайтов и коллекционировать наиболее часто использовавшиеся элементы. Их в будущем я перерисую, создам компоненты, задам определенный стиль и в конце соберу темплейты. Забегая вперед, скажу что в итоге удалось собрать 18 полноценных темплейтов: 9 полноэкранных и 9 мобильных версий. Я старался создать универсальные шаблоны, которые одинаково подходили бы для презентации сервисов, приложений, портфолио и каких-либо других продуктов



Большинство сайтов в основном безлики


Именно к таким выводам я пришёл, когда попытался просто гуглить. Веб в целом быстро устаревает и это нормально. Ведь быть в актуальном дизайне — это всегда перемены. А мы относимся к переменам с опаской, осторожностью. Если старый сайт работает и кое-как продает себя, то лучше не мешать механизму работать. Но есть компании, которые занимаются оптимизацией внутренних процессов. И продуктовый дизайн для них не на последнем месте. Большинство хороших сайтов, чтобы провести аудит, мне удалось найти на hyperpixel.io и www.lapa.ninja. Я предполагаю, что просмотрел 100+ различных ссылок и это лишь малая часть списка. Должно быть чувство меры, чтобы понимать объем, необходимый для первой версии (читайте MVP). Поэтому я остановился, когда объем компонентов в разделе Text blocks (различные текстовые блоки, возможно с формами и кнопками) достиг числа 30:



Внешний вид продукта


Как именно должен выглядеть продукт? Один из важных вопросов на этапе проектирования. На поиск ответа и исследования тратятся огромные ресурсы компаний. Для себя я решил так — продукт должен быть визуально актуальным. Дизайн и стилистика должны быть не вчерашними, не завтрашними, а в том виде, который сейчас в тренде. Простой пример: сегодня редко где встретишь шрифт Open Sans в западном вебе, хотя три года назад он был очень актуален. Если Google как бренд переходит на Product Sans, надо присматриваться к похожим шрифтам. Если Intercom использует стилистику papercut в своем продуктовом дизайне, надо понять как похожие приемы использовать в своих проектах. Сейчас типографика — это одновременно дизайн, послание и настроение. Давайте с нее и начнем.

Хороший шрифт — это уже половина дела


Идея пришла совершенно внезапно. Невероятно пропорциональный neo-гротеск Objectivity (увы, русификации нет) сразу же поразил меня своей актуальностью. Alex Slobzheninov проделал колоссальную работу и разрешил бесплатное коммерческое использование. Мне сразу же захотелось что-то “задизайнить” на основе этого шрифта. Какое-то время я вертел его по артбордам в Figme, прежде чем понял “Это идеальный шрифт для веба!”. Видимо в тот момент и родился план создания системы именно для web.

Хорошая дизайн-система в Figma — это:

  • Использование глобальных стилей (типографика, цвет, тени)
  • Учтенная логика смещения внутренних объектов при resize компонента (constraints)
  • Использование экземпляров для различных состояний объектов (hover, active и т.п.)
  • Нейминг с использованием “/” символа для создания удобной структуры экземпляров
  • Создание сложных компонентов из простых (молекулы → темплейты)
  • Наличие встроенной библиотеки с упорядоченными иконками

Теперь мне хотелось бы рассказать о каждом пункте отдельно, итак…

Использование глобальных стилей


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

Цвета


Сколько цветов хранить в системе? Мне встречались дизайн-системы под Sketch в которых были объявлены все цвета радуги + десяток оттенков для каждого. В реальности это чрезмерно много и 80% такой палитры никогда не будут использоваться. В моей системе Websy, о которой я подробно начинаю рассказывать с этого момента, хранится всего 8 цветов: белый, черный, основной цвет (action), дополнительный цвет (secondary), и 4 градации черного. С белым и черным, я полагаю, все ясно. Action & Secondary цвета мы используем для окраса элементов, с которыми можно взаимодействовать (кнопки, иконки, ссылки). Secondary цвет можно использовать для акцента. Например, для выделения важной фразы, слогана и т.п. Допускается объявление Success / Warning цветов, если ваша система больше про интерфейсы, чем про сайты.



Тени


Я адепт материального дизайна, поэтому я держу в системе несколько вариантов подъема над плоскостью (elevation). В Websy вы найдете 4 комбинаций теней: 2dp, 4dp, 8dp, 16dp. Они отличаются смещением и размытием (blur). Например, для обычной карточки рекомендуется использовать 2/4dp тени. Для выпадающих списков, onhover состояний и диалогов можно использовать 8/16dp. Внимательный дизайнер уже подметил, что некоторые продукты Google сейчас используют reflex-тени и двойные тени, которые более реалистичны. Поэтому дополнительно в системе объявлено несколько многослойных теней, которые дают очень реалистичный эффект:


Через глобальные стили тени переключаются всего в пару кликов.

Обводка


Параметр Stroke в Websy регулируется через несколько отдельных компонентов, которые отличаются разными параметрами скругления углов. Обводка чаще всего используется для кнопок и текстовых полей. Аналогично теням, объявлено 5 вариантов скругления углов: 0px, 4px, 8px, 16px и 99px. Для чего столько? Начну с примера того, как вообще используется компонент обводки, например для кнопки:



Разместив кнопку, которая по умолчанию имеет обводку 4dp, можно выделить компонент Stroke и переключить через панель Instance скругление углов в меньшую или большую сторону. Это чуть более сложный способ, но позволяет хранить в отдельном мастер-компоненте разные виды скруглений. Самый простой способ — менять степень скругления через поле ввода в правой панели. Аналогичная схема применима и для текстовых полей, карточек или любых фоновых компонентов.

Расстановка constraints для компонентов.


Давайте я расскажу об этом пункте и остальных в следующей главе. Про поведение модулей и элементов при изменении размеров нужно сказать многое. А также мы перейдем к очень интересной части — описанию всех компонентов в составе веб-дизайн системы Websy. И, возможно, рассмотрим некоторые готовые темплейты для landing pages. Обсудим их состав и гибкость изменения блоков, чтобы подгонять под любые нужды и цели… Подписывайтесь, если интересно.

На десерт небольшое видео.


В данном ролике я с помощью готовых компонентов собираю layouts, которые будут использоваться в качестве экранов-презентаций для системы. Первый вариант мне понравился меньше, а второй (начинается с 1:30) я взял за основной:

Tags:
Hubs:
+9
Comments 4
Comments Comments 4

Articles