Для чего фигма дизайнеру
Figma — делаем дизайн системно
Приветствую вас коллеги! Меня зовут Дмитрий Волков и я работаю в профессии больше десяти лет. Решил написать статью для тех, кто создает web и mobile дизайн в современных программах.
Очень часто возникает проблема, когда дизайнер сделал исходник, с которым тяжело работать как разработчику, так и другому дизайнеру.
Поэтому я поделюсь личным опытом в разработке дизайна интерфейсов на примере популярного редактора Figma.
О Figma рассказывать не буду, так как есть уже много статей на эту тему. Хочу только обратить ваше внимание на то, что она стоит на одном уровне со Sketch и Adobe XD. Так что мой подход можно с легкостью перенести и на эти редакторы.
С чего начинается дизайн интерфейса. Разумеется, с получения задания, которое формируется из поставленных задач, проверки различных гипотез, исследования пользовательского опыта и т.д.
Будем считать, что это все проведено и надо начать работать над визуальной частью интерфейса.
Свой процесс работы я разделил на несколько шагов.
Шаг первый: Определяем монтажные области
Самая верхняя монтажная область называется Gui-kit. Там я буду собирать все интерфейсные элементы и их поведение. Там же будут храниться компоненты (в других программах они называются символами).
И ниже я размещаю несколько монтажных областей, каждая из которых по размеру соответствует ключевой точке при адаптивной верстке.
У меня следующая логика расположения монтажных областей. По горизонтали я располагаю монтажные области, относящиеся к определенному экрану (Например – «главная страница») включая состояния контента. По вертикали я располагаю другие экраны.
Шаг второй: Определяем названия монтажных областей
Это очень важный шаг позволит вам не запутаться в макетах.
Название монтажной области мы будем обозначать так:
Разрешение_номер страницы_номер состояния_название страницы
И если, например на главной, требуется рассмотреть изменение контента, то присваиваем состоянию следующий номер:
Шаг третий: Размер модулей и модульной сетки
Если мы возьмем тетрадь по математике и посмотрим на ее лист, мы увидим, что она разлинована в клеточку. Так вот одна клеточка из множества называется модулем.
Во всех макетах я использую размер модуля кратным 4-м.
Не буду рассказывать подробностей, зачем эта цифра и почему. Есть много статей на эту тему. Мы же изучаем совершенно другой вопрос.
И создаем модульную сетку с такими настройками, чтобы все колонки и отступы вписались в размеры модуля. То есть совпадали с его границами. Это позволит все элементы выстраивать четко с шагом равным модулю.
Модульную сетку задаем для каждой монтажной области. Она там своя.
Шаг четвертый: Создаем дизайн правильно
Я всегда начинаю с базовых цветов. Эти цвета указываю в монтажной области Gui-kit. Эти цвета могут меняться во время работы над дизайном. Появляться новые цвета или исчезать старые. Я понимаю, что отслеживать это тяжело, но это позволит вам контролировать их количество в проекте.
Также кто будет работать с вашим исходником получит представление о их количестве и будет знать что «красный» у вас один на весь проект.
Большинство элементов в интерфейсах повторяются. Поэтому были придуманы компоненты (символы). Берем компонент и дублируем его несколько раз, на разных монтажных областях. При необходимости благодаря внесению изменений в мастер-компонент, меняются его дубликаты.
Поэтому вы должны стараться все элементы интерфейса вносить в компоненты. Будь то иконки или элементы меню. Это делается для того чтобы в случае замены иконки на другую вы легко поменяли их во всем проекте.
В Figma можно создавать сложные компоненты, которые могут содержать в себе другие компоненты и видимые и невидимые слои.
Поэтому многие делают ошибку. Создают компонент, добавляют в него отключенные слои и считают, что все про них знают. Поэтому все состояния компонента надо выносить в Gui-kit с разными комбинациями включенных и выключенных слоев.
Кстати не забывайте использовать привязки в компонентах. Это позволяет легко масштабировать компоненты при необходимости изменить их размер.
Как вы видите иконка «favorite» выровнена по правому верхнему краю. При изменении масштаба она всегда будет находиться в том же месте с таким же отступом, как в изначальном.
Думаю пора заканчивать. Готов ответить на вопросы в комментарии. Быть может, эти вопросы подтолкнут меня к написанию следующей статьи.
Что такое Figma и как ее использовать digital-специалисту
Figma считается одним из самых популярных редакторов для UX/UI-дизайна. Программу используют для быстрого создания макетов веб-сайтов и их презентаций, причем как стартапы, так и крупные компании: Netflix, Zoom, Discort и Stripe.
Это кроссплатформенное дизайнерское приложение с открытым исходным кодом, пользуется большим спросом у веб-дизайнеров, верстальщиков, UX-исследователей, маркетологов, руководителей проектов, разработчиков мобильных приложений, сайтов, лендингов и интернет-магазинов.
Мы разузнали для вас, что же такого особенного в Figma, чем она привлекает пользователей и как помогает digital-специалистам.
Содержание статьи
Что такое Figma?
Figma — это редактор для верстки графических изображений. Дизайнеры и digital-специалисты используют его для отрисовки элементов интерфейса, создания интерактивных макетов, прототипов и векторных файлов.
Раньше каждый дизайнер из команды устанавливал специализированный редактор, вроде Adobe Illustrator, скачивал макет, настраивал интерфейс, вносил корректировки и пересылал файл на проверку. И так повторялось каждый раз, когда вносились правки. Figma действует иначе.
6 причин использовать Figma
У Figma открытый исходный код. Приложение работает в многопользовательском режиме на любом устройстве. Для полноценной работы дизайнеру нужно стабильное интернет-соединение и любой браузер.
Режим совместной работы
Figma — это единственный графический редактор, в котором одновременно могут работать несколько дизайнеров. Эта функция особенно важна при работе над крупной задачей. Программа создает единое пространство для всех добавленных пользователей:
У всех дизайнеров есть право оставлять комментарии и задавать вопросы внутри дизайнерского окна. Одновременная работа упрощает этап согласования и сокращает время, затрачиваемое на переписку в чатах. Комментарии по проблеме, оставленные в программе, не теряются — программа сохраняет их в истории файла.
У приложения гибкие настройки приватности:
Файлы хранятся в облаке
Программа автоматически сохраняет макеты в собственном облачном сервисе и хранит их 30 дней. При необходимости к ним можно возвращаться, их можно дублировать и редактировать. Внесенные правки сохраняются автоматически.
Если проект долгоиграющий, скачивайте макеты как обычный документ и храните на компьютере. Чтобы не запутаться, подписывайте каждую версию и делайте краткое описание.
Кроссплатформенность
Дизайнеры могут открыть макет с компьютера, ноутбука, планшета или смартфона с любой операционной системой. Они просто авторизуются под своим профилем в веб-версии программы при наличии стабильного интернет-соединения, а на рабочем устройстве используют установленный редактор, скачанный с официального сайта Figma.
Большой функционал
Бесплатной версии достаточно для полноценной самостоятельной работы дизайнера. Авторы могут:
В версии Professional дизайнеры оставляют аудио-комментарии внутри редактора, делятся прототипами без предоставления доступа к исходному файлу и работают в закрытом режиме. Разные специалисты могут одновременно вносить изменения в проект, а количество участников не ограничено. Это удобно, когда команда работает над большим проектом.
В версии Organization дизайнер работает в отдельной ветке и объединяет изменения с исходным файлом в самом конце. Figma предупредит при наличии конфликтующих изменений и позволит выбрать, что встраивать. В модельном режиме видны все когда-либо созданные ветви. Команда работает централизованно под одной учетной записью: руководитель настраивает единый вход SALM и управляет подготовкой через SLIM.
Интеграция с другими программами
При переносе проектов из Sketch или Zeplin качество не теряется: Figma сохраняет начертание шрифтов, изображения и кривые. Верстальщики могут подключить сервис к мессенджеру Slack, Confluence и т.д.
История правок
Все правки, вносимые в проект, сохраняются в истории изменений. Figma автоматически сохраняет файл, отредактированный более 30 минут назад. Чтобы не ждать, вы можете сохранить его вручную, откорректировать название или сделать описание к конкретной проблеме.
Историю версий можно посмотреть в разделе меню File → Show version history.
В бесплатной версии история изменений хранится месяц, в платной программе — сохраняются все корректировки с начала работы.
Базовый функционал
Функционал Figma прост и интуитивно понятен:
В Figma есть библиотека с бесплатными компонентами. Если вы хотите добавить одинаковые детали в разные части макета и поменять стиль, проблема легко решаема: нажмите на иконку F в левом верхнем углу и выберите Edit → Select all with same. Программа найдет объекты с идентичными шрифтами, соотношением сторон, цветом заливки и т.д.
Сервис выделит все одинаковые элементы по выбранному параметру.
Фреймы
В Figma есть заготовки под большинство популярных форматов: Apple Watch, смартфонов, ноутбуков, планшетов, фреймов для соцсетей, А4 листов и других решений.
Фреймы в этом приложении имеют некоторые особенности:
Сетки
Сетка — главный помощник верстальщика. В Figma она включается в правой панели меню в режиме Layout Grid. Для управления нужны всего две кнопки:
Можно изменять свойства сетки, придавать форму столбца и строчного ряда, объединять несколько макетов. Для одного продукта дизайнер может создать неограниченное количество сеток и сделать свою разметку с более сложной структурой.
Плагины
Figma разрабатывалась как программа для дизайна интерфейса, поэтому во всех ее версиях есть специальные плагины. Они автоматизируют рутинные задачи и ускоряют работу верстальщиков.
Они находятся в библиотеке на официальном сайте и на главном экране онлайн-версии. Если вы уже работаете в сервисе над продуктом, нажмите на логотип Figma, расположенный в левом верхнем углу, выберите Community (Сообщество) → Explore → Plugins.
Как использовать Figma при разработке продуктов?
На этапе создания и тестирования продукта необходимо проверить, что все детали макета в рабочей области реализуемы. Это можно сделать с помощью нескольких инструментов:
Прототипирование и usability-тестирование
Прототипы — это имитация рабочего продукта, с рабочими элементами управления, возможностью переходить на страницы и контактировать с интерфейсом. С их помощью можно открыть рабочий файл в окне браузера, на стадии разработки проанализировать пользовательский опыт и показать свою работу коллегам.
Прототипирование — это функция, которая отвечает за предпросмотр интерфейса при открывании на разных типах устройств: выберите в правом меню раздел Prototype → Device и выберите нужные параметры экрана.
Device — это функция для выбора устройства, на котором отобразится прототип. От нее зависит плавность прокрутки и внешний вид рамки.
Для открытия настроек конкретного продукта нажмите на фрейм, который нужно превратить в прототип.
При разработке прототипов верстальщики закладывают функционал продукта, оценивают удобство сценариев, разработанных в карте сайта. Прототипы позволяют:
Чтобы сделать прототип, сверстайте карту экранов в правильной последовательности, переключитесь в раздел Prototype, выберите элемент интерфейса, добавьте и настройте интерактивы. Как только прототип готов, тестируйте идею на коллегах.
В режиме Prototype дизайнеры тестируют идеи и показывают их клиенту. Для передачи файлов разработчикам сделайте доступ к файлу. В режиме просмотра дизайнер может работать с CSS-стилями элементов интерфейсов.
UI-элементы
Элементы интерфейса — это то, что создает внешний вид продукта: кнопки, иконки, формы обратной связи и т.д. В Figma можно изменить цвет, шрифт, форму и добавить анимацию (которая, как мы помним, отлично улучшает юзабилити лендинга):
Векторная графика
Сервис работает с векторными объектами: их можно экспортировать в формате SVG, импортировать из Adobe Illustrator или Sketch, сохраняя все настройки.
Заключение
Figma — это онлайн-редактор, работающий без предварительной установки. Он удобен для создания несложных прототипов, отрисовки интерфейса сайтов и мобильных приложений. Для расширения возможностей сервиса используйте встроенные плагины или создавайте собственные.
Дизайн-система в Figma. Взгляд на интерфейс через компоненты
Какой должна быть оптимальная дизайн-система в 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 — это:
Использование глобальных стилей
С появлением возможности объявлять глобально цвета, параметры текста и теней, скорость кастомизации в 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) я взял за основной: