Figma — делаем дизайн системно

image

Приветствую вас коллеги! Меня зовут Дмитрий Волков и я работаю в профессии больше десяти лет. Решил написать статью для тех, кто создает web и mobile дизайн в современных программах.

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

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

О Figma рассказывать не буду, так как есть уже много статей на эту тему. Хочу только обратить ваше внимание на то, что она стоит на одном уровне со Sketch и Adobe XD. Так что мой подход можно с легкостью перенести и на эти редакторы.

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

Будем считать, что это все проведено и надо начать работать над визуальной частью интерфейса.

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

Шаг первый: Определяем монтажные области


image

Самая верхняя монтажная область называется Gui-kit. Там я буду собирать все интерфейсные элементы и их поведение. Там же будут храниться компоненты (в других программах они называются символами).

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

У меня следующая логика расположения монтажных областей. По горизонтали я располагаю монтажные области, относящиеся к определенному экрану (Например – «главная страница») включая состояния контента. По вертикали я располагаю другие экраны.

image

Шаг второй: Определяем названия монтажных областей


Это очень важный шаг позволит вам не запутаться в макетах.

Название монтажной области мы будем обозначать так:

Разрешение_номер страницы_номер состояния_название страницы

Получаем:

1920х1080_01_01_home_page

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

1920х1080_01_02_home_page

Шаг третий: Размер модулей и модульной сетки


Если мы возьмем тетрадь по математике и посмотрим на ее лист, мы увидим, что она разлинована в клеточку. Так вот одна клеточка из множества называется модулем.
Во всех макетах я использую размер модуля кратным 4-м.

image

Не буду рассказывать подробностей, зачем эта цифра и почему. Есть много статей на эту тему. Мы же изучаем совершенно другой вопрос.

И создаем модульную сетку с такими настройками, чтобы все колонки и отступы вписались в размеры модуля. То есть совпадали с его границами. Это позволит все элементы выстраивать четко с шагом равным модулю.

image

Модульную сетку задаем для каждой монтажной области. Она там своя.

Шаг четвертый: Создаем дизайн правильно


Я всегда начинаю с базовых цветов. Эти цвета указываю в монтажной области Gui-kit. Эти цвета могут меняться во время работы над дизайном. Появляться новые цвета или исчезать старые. Я понимаю, что отслеживать это тяжело, но это позволит вам контролировать их количество в проекте.

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

image

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

Поэтому вы должны стараться все элементы интерфейса вносить в компоненты. Будь то иконки или элементы меню. Это делается для того чтобы в случае замены иконки на другую вы легко поменяли их во всем проекте.

image

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

Поэтому многие делают ошибку. Создают компонент, добавляют в него отключенные слои и считают, что все про них знают. Поэтому все состояния компонента надо выносить в Gui-kit с разными комбинациями включенных и выключенных слоев.

image

Кстати не забывайте использовать привязки в компонентах. Это позволяет легко масштабировать компоненты при необходимости изменить их размер.

image

Как вы видите иконка «favorite» выровнена по правому верхнему краю. При изменении масштаба она всегда будет находиться в том же месте с таким же отступом, как в изначальном.

Думаю пора заканчивать. Готов ответить на вопросы в комментарии. Быть может, эти вопросы подтолкнут меня к написанию следующей статьи.

Искренне ваш,
Дмитрий Волков
Поделиться публикацией
Ой, у вас баннер убежал!

Ну. И что?
Реклама
Комментарии 18
  • 0
    Хорошая статья. Пока что предпочитаю Фигму больше чем Скетч.
    • 0
      Я тоже. Figma -кроссплатформенна. Не надо пользоваться зепилин или инвижен.
      • +1
        Я чуть ранее подумывал себе покупать МакБук только ради того чтобы пользоваться Скетчем. Но после знакомства с Фигмой я призадумался, а стоит ли оно того вообще. на работе пользуюсь айМаком, и Скетч меня не очень радует, тупит часто, да и сама МакОС не зашла как-то, с точки зрения UX Виндовс как-то более продуман и продуктивность на Виндовсе у меня выше если честно.
        • 0
          Я приобрел недавно iMac 2017 — из за экрана, проца и его мобилльности. Мало места занимает. Скетч не ставил, ибо сейчас не зачем. А в целом мак ос не напрягает :)
          • 0

            Однажды купил макбук, наполовину ради скетча. Окупилось за 2-3 месяца за счет увеличения продуктивности в 2 раза (я посчитал по разным метрикам и программам, отслеживащющим всё). Я разработчик. Фигмы тогда еще не было.


            Скетч, к сожалению, несколько страдает качеством и я теперь использую только фигму.

            • 0
              Мне нравится еще Adobe XD очень быстрый. Но у фигмы есть фишки которые очень облегчают работу :)
      • 0
        Работа над визуальной частью начинается с прототипа
        • 0
          "С чего начинается дизайн интерфейса. Разумеется, с получения задания, которое формируется из поставленных задач, проверки различных гипотез, исследования пользовательского опыта и т.д." — в «и т.д.» укладываем все что идет до дизайна.
          Мнения разделяются :) Кто то делает прототипы. Кто то не делает :) Например ребята которые делали приложение «ВТБ» для бизнеса — не делали прототипы :) А где то есть требование о высокодетализированных прототипах :)
        • +2
          А что, разве нельзя нарисовать только главную страницу, а потом программисты за тебя все остальное сами додумают?
          • 0
            Вы вольны выбирать любой удобный для себя метод работы :)
            • 0
              Легко. Главная по макету, остальное посажено на стандартную тему бутстрапа. И попробуй потом доказать, что программист — козел.
              • 0
                Если не дать разработчику исчерпывающей информации, то в последствии дизайнеру не стоит говорить, что я не все так задумал. Давай поправим. Молча прожевать и жить дальше. У нас, в Гильдии вольных проектировщиков, любят документировать дизайн. Обсуждать его с разработчиками. приходить к общему решению. Чтобы все работало как надо. А нарисовать макет и забить на то, что с ним дальше будет не приветствуется.
              • 0
                Так и живём…
            • 0
              Отличная статья, короткая правда, но без воды и приятно читать. Спасибо.
            • 0
              Во всех макетах я использую размер модуля кратным 4-м.


              А все же, можно поподробней, почему именно так? Ну и ссылки на статьи, актуальная тема.
              • 0
                Немного инфы есть в моей статье habr.com/post/338020
                Также этот размер модуля выбирается из за правил типографики и он гораздо гибче чем нечетная 5-ка :) По умолчанию сетки в большинстве случаев 10px — делим пополам получаем нечетное число которое не к селу не городу. При таком модуле высоту строки равную 24 px не задать. Можно посмотреть видео: youtu.be/ddHggFXdGsE

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

              Самое читаемое