Какой должна быть оптимальная дизайн-система в 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) я взял за основной: