Ультимативный гайд по работе в Figma: организация проекта, слои, автолейауты, ограничители, компоненты, варианты и стили. Для новичков, чайников, любителей и профессионалов

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

В данной работе затрону основные моменты и нюансы при работе с Figma. Своей задачей вижу дать именно удочку, чтобы у читателя сформировалось полное понимание возможностей и функций.

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

Дисклеймер: Я работаю на «старой» UI1 версии. Некоторые советы для новой версии могут быть не актуальными или работать по-другому. Также не будет платных функций: dev mode, variables (возможно, напишу про них в отдельной статье).

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

Читать лучше с ноутбук или большого экрана. На телефоне может быть совсем мелко.

Всем привет!

Меня зовут Михаил Нежник и я — автор, творец, квалифицированный инвестор и отец-молодец. Совмещаю это всё с продуктовым дизайном, в котором уже пять лет.

За это время сделал много интересных проектов. Мой опыт можно описать так: как в Спарте со скалы скидывали детей, так и меня жизнь кидала в разные направления, в которых опыта было мало. Приходилось быстро разбираться и выживать.

Спойлер: спасибо, что живой.

Подробнее о моём опыте и проектах вы можете узнать на сайте: https://nezhnik.com,

В своём канале t.me/nezhnik_life пишу про дизайн, геральдику, статьи, мысли, интересные факты и идеи.

Расскажу всё, что знаю.

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

Мы с вами разберём: интерфейс Figma, организацию проекта, слои, автолейауты, ограничители, компоненты, варианты и стили (auto layout, constraints, components, variants & styles).

Приведу примеры из одного моего проекта, которым занимался полтора года назад и с нуля делал UI KIT.

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

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

Обо всем по порядку.

Если вы нашли себя, то добро пожаловать! Если нет, всё равно рекомендую продолжить чтение.

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

Я не буду сильно углубляться, но сделаю небольшую вводную.

Нажмите, чтобы приблизить:

Расскажу подробнее про организацию страниц и работу со слоями.

Продукт для меня — это не одно единое целое, а множество в едином.

Поэтому я разбиваю его на сегменты и переношу на отдельные страницы, например: Главная, Каталог и т.д. и внутри уже занимаюсь конкретным разделом.

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

Для этого создайте новую страницу, кликнув на + → Напишите - - - → Enter → Готово.

Если в рамках проекта есть какая-то активность, например, редизайн, то визуально подсвечиваю верхнюю страницу как главную, а остальные «кладу внутрь», то есть отбиваю пробелами. Лучше фигма пока не умеет. Также отдельно создаю страницы для аналитики, исследований и обложки (cover, thumbnail).

Пример организации слоёв в проекте:

Это позволяет лучше ориентироваться в проекте, оптимизировать скорость загрузки страниц и не смешивать всё в одну кучу.

Кто-то делает новый проект под каждую задачу, а внутри разбивает его страницы на отдельные этапы, например:

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

Но тут уж как больше нравится.

У вас могут возникнуть ограничения на количество страниц и файлов в бесплатной версии. Тут могу только сказать, что лучше работать в нормальной компании, которая оплачивает тариф или платить самому на худой конец :)

Переходим к слоям 🟧

Первое, что вам нужно сделать, так это: Figma - Preferences - Nudge amount.

Big nudge по умолчанию стоит 10 пикселей, а нужно сделать — 8.

Это позволит вам перемещать элемент с помощью зажатого Shift и стрелок на 8 пикселей. Также будет вести себя и уменьшение размера с зажатым Ctrl (Command).

Наглядная демонстрация:

8, 16, 24, 32, 40 и так далее.

Вот, например, кнопка. Что это по своей сути? Текст, иконка или текст + иконка, которые окружены областью, залитой цветом.

Вот кнопка. У неё есть только внутреннее вложение — текст, а остальное — это свойства автолейаута. Это наш БРО ✅

И вот кнопка. Она выглядит также как верхняя, но это волк в овечьей шкуре: отдельная подложка с именем Background должна сразу смутить, так делать не нужно. Это не наш БРО ❌

Наглядная демонстрация в сравнении:

Кто-то может возразить, что есть constraints и возможность сделать так, чтобы Background тянулся (Left-Right, Top-Bottom), как у твоей кнопки здорового человека.

И я отвечу, что да, будет похоже внешне, но не по сути.У элементов внутри не будет таких прекрасных параметров, как Fill, Hug и Fix, нельзя будет настраивать паддинги и это сильно затруднит дальнейшую работу.

Поэтому, если есть сомнения, прошу перечитать тему слоёв ещё раз и попробовать на практике.

Также, всё, что можно убрать без потери качества проекта, нужно убирать. Почему так категорично? Кнопка — это простой пример, а теперь представьте масштаб всего проекта: сотни компонентов и элементов.

Вот давайте и представим такую ситуацию.

Что делать, если слоев много, надо найти все, чтобы их отредактировать / удалить / поменять и не потерять ни один?

Не всё так плохо и страшно. Есть как минимум два способа: функция «Выбор схожих слоёв» (Select matching layers) и «Выбрать всё с таким же (свойство)» (Select all with).

Разберём по порядку.

Если вы хотите, например, изменить текст заголовка или его свойства, то кликаете на заголовок, нажимаете на верхней панели кнопку Select matching layers или комбинацию клавиш Option + Command + A и все похожие текстовые слои выделятся.

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

Наглядная демонстрация с текстом:

Фигма позволяет выбирать слои по отдельным свойствам, это супер удобно. Например, у вас есть текст с определенным цветом и размером (в идеале текст и цвета должны быть на стилях, но об этом читайте далее, в разделе стили) и вы хотите что-то поменять, то: выделяете текст, выбираете, по какому свойству выделить все схожие слои текста и редактируете.

Нажмите, чтобы увеличить:

Надо заметить, что функция «Выбор схожих слоёв» (Select matching layers), если объекты расположены внутри Секции (Section), работает и ищет совпадающие слои только внутри секции, а функция «Выбрать всё с таким же (свойство)» (Select all with) ищет на всей странице.

Наглядная демонстрация и сравнение двух способов:

Пользуйтесь на здоровье!

Во-первых, лишний слой — нагрузка и увеличение загрузки страницы.

Во-вторых, при работе с отдельным элементом придется проваливаться внутрь, настраивать, всё тяжело адаптируется и масштабируется.

А мы ведь хотим, чтобы всё было максимально просто, легко настраивалось и потом работало без нашего участия или с минимальными усилиями? :)

Без этого простого понимания не получится ни хороший компонент, ни хорошего UI KIT'a, что уже говорить о дизайн-системе.

В-третьих, как уже написал, многое решается свойствами: цвет фона, высота, ширина, скругления, отступы, паддинги — всё это должно настраиваться непосредственно у автолейаута.

В-четвёртых, функция мультиредактирования и выбора схожих слоёв в несколько раз ускорят проектирование и снизят вероятность ошибки и недосмотра до практически нулевого значения. Огромный результат за короткое время. Это ли не счастье?

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

1. Бывало ли такое, что скопировали текст, и надо быстро его вставить или выделить слой внутри и удалить?

Чтобы быстро выбрать нужный слой внутри других слоёв и не прокликивать по 10 раз, то зажмите CTRL (Command) и кликните на слой:

Если хочется выбрать несколько слоёв за один раз, тогда надо зажать Command + Shift к кликать на нужные объекты.

2. Было ли такое, что у вас сначала был один тип текста или кнопки и впоследствии вы решили что-то поменять?

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

Для того, чтобы быстро перенести свойства одного объекта на другой с полным копированием есть комбинация клавиш (далее всегда буду называть шорткат) копирование свойств — Option + Command + C, передача / вставка свойств — Option + Command + V.

Наглядная демонстрация c текстом:

Наглядная демонстрация c кнопкой:

Если у вас пытливый ум, то, думаю, вам пришла в голову шальная мысль скопировать свойства кнопки на текст, из текста на шейп или наоборот.

Давайте посмотрим, что из этого выйдет:

Поэтому важно заметить, что копируются все свойства у отдающего их (свойств) объекта, а вставляются только те, что есть у принимающего. Но лучше так не делать, есть вероятность ошибки и лишних исправлений, зачем оно нам?

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

3. Бывало ли такое, что групп и слоёв внутри компонента или фрейма очень много и они раскрыты, а закрывать каждый отдельно не хочется? И не надо, есть лайфхак: зажмите Alt (Option) и кликните на иконку дропдауна, тогда все слои внутри тоже закроются.

Если наоборот хочется всё раскрыть, то всё тоже самое: кликаете с зажатым Alt (Option) на дропдаун. Работает на всех уровнях, я пользуюсь достаточно часто.

Схема работы:

Наглядная демонстрация работы:

4. Чтобы быстро провалиться внутрь слоёв, я использую старый-добрый Enter. Чтобы вернуться на слой выше, нажмите Shift + Enter.

Готово, достижение получено! Вы — мастер слоёв 🟪

Я знаю, что автолейаут надо писать раздельно, но хочу — слитно.

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

Автолейаут (Shift + A), исходя из названия, можно перевести как автоматический макет или автоматическое расположение. Я скажу, что это фрейм со своими свойствами: выравниванием, настройками паддингов, ориентация внутрилежащих слоёв и их перестроение (wrap).

Фрейм (Option + Command + G) — это основной связывающий элемент для макетов. Я использую его как верхний слой для страниц и иногда для карточек / блоков, в которых есть изображение или иллюстрация.

Группа (Command + G) я использую в 0,1% случаях и даже не приведу сразу пример, когда надо целенаправленно выбирать именно её.

Так что можете попробовать, но вряд ли она станет популярным элементом в вашей работе. Фрейм значительно проще и лучше.

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

Разберем, из чего состоит автолейаут. Нажмите, чтобы приблизить:

Разберем каждое свойство отдельно.

Всего есть 3 типа: горизонтальный (horizontal layout), вертикальный (vertical layout) и с перестороение (Wrap).

Горизонтальный (horizontal layout) — располагает объекты по горизонтали внутри автолейаута. При добавлении новых, все они будут увеличивать ширину, если применена настройка Hug, либо уходить за границу, если Fix.

Наглядная демонстрация:

Вертикальный (vertical layout) — тоже самое, что и горизонтальный, только вертикальный.

Наглядная демонстрация:

Перестроение (Wrap) — сначала ведет себя как горизонтальный, то есть располагает объекты по горизонтали внутри автолейаута.

Но, задав значение автолейаута по ширине Fix и используя минимальные и максимальные для внутренних объектов при Fill, он заставляет объекты, которые доходят до правой границы, смещаться вниз.

Очень полезная для каталогов, когда много карточек и других блоков с повторяющимися объектами. Надо только разобраться.

Наглядная демонстрация:

Лайфхаки:

Отступ между объектами — название свойства говорит само за себя. Это изменяемое расстояние между объектами. Им можно управлять как в правой панели, так и в самом объекте, подсвечивается розоватым при наведении. Можно ставить самому или сделать через Variables, но об этом в данной статье рассказывать не буду.

Также отступ делится на два типа: цифровой и автоматический.

Цифровой (4, 8, 16, 24...) — точное указание отступов между объектами в пикселях.

Наглядная демонстрация:

Автоматический (Auto) — рассчитывается как среднее значение. Объекты сами подстраиваются под ширину автолейаута.

С помощью этого свойства легко сделать шапку, разнести объекты по двум сторонам и сделать другие нужные вещи.

Наглядная демонстрация:

Это отступы от объектов до границ автолейаутов или отступ автолейаута внутри себя до объектов. Кому как нравится.

Изначальна настраиваются по схеме: отступы слева-справа и отступы сверху-снизу, но могут и по отдельности.

Наглядная демонстрация:

Можно сказать, что эта функция похожа на ограничители (constraints), только автоматические.

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

При использовании автоматических (auto) отступов, то по горизонтали или вертикали, в зависимости от выравнивания.

Считать ли толщину обводки / бордера в габаритах объекта или нет. Мне ещё не доводилось кричать «Эврика» при использовании данной настройки. А, может, и полезная. Я не пользуюсь.

Что это за функция? Меняет иерархию отображения слоёв и их приоритет.

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

Наглядная демонстрация:

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

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

Fix — самый простой. Это когда фиксируешь ширину или высоту объекта принудительно. Она не может быть изменена ничем, кроме скейла (Scale) клавиша K английская.

При фиксации размеры объекта остаются неизменными, будто прибиты гвоздями внутри автолейаута.

Fill — заполнение объектом пространства до грани объекта, в которого он входит. Ограничение настраивается: по горизонтали, по вертикали или и по горизонтали и вертикали. Fill, как и Fix ограничены по высоте и ширине. только при Fix ограничения ставим мы, а при Fill — объект, в который обёрнут элемент.

Самый гибкий и удобный, но надо уметь пользоваться. При должном уровне мастерства способен заменить Fix и Hug.

Hug – объятие слоёв. Функция позволяет подстроиться под размеры слоя. То есть если размеры слоя 100 x 100 px, то используя функцию Hug, автолейаут тоже примет эти размеры и станет 100 x 100 px. В дальнейшем он будет подстраиваться под объекты и увеличивать высоту, ширину или высоту и ширину;

Cравним их. Наглядная демонстрация:

Есть более гибкая функция — добавление максимальной и минимальной ширины и высоты (Add Min, max width & height), далее буду называть брейкпоинты.

Она пришла из разработки. По своей сути это ограничение ширины и высоты блока в заданных размерах. Например: блок может быть Fill, мы добавляем Min 320 Max 475 width и он адаптируется под ширину, но в рамках 320 px — 475 px. Больше или меньше быть он не может.

Наглядная демонстрация по ширине (Min, max width):

Итог: Fix ни под кого не подстраивается, Hug — под внутренние обстоятельства, Fill — под внешние.

Очень удобно, я пользуюсь постоянно.

Чтобы одновременно двигать границы объекта в обе стороны: слева-справа ил сверху-снизу, зажмите Alt (Option) и двигайте грань.

Почему я обожаю автолейаут и всем советую его изучить на 146% ?

Вот почему:

Карточка товара: всё тянется и, при достижении брейкпоинта (Min, Max width), блок с доставкой перестраивается на следующую строку (wrap)

Если вы захотите попробовать осилить это без автолейаутов, естественно, это будет долго. И вы не успеете построить коммунизм.

Поэтому ваш друг, товарищ и брат — хорошо настроенный автолейаут.

Покажу наглядно:

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

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

Рассмотрим пример текстовой и с иконкой:

Готово, достижение получено! Вы — мастер автолейаутов 🟦

Устали?

Даже если и да, то никаких остановок, полный вперёд! Нас ждёт ещё много всего интересного 🚀

Сколько человек нужно, чтобы с вероятностью 99% хотя бы у двоих совпали дни рождения?

Правильно, не 365. Ответ будет в конце. А теперь к теме.

Ограничители (Constraints) — это функция, которая даёт возможность фиксировать объект в нужном нам положении и стороне.

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

Где это и как работает? Наглядная демонстрация:

Лайфхак: чтобы быстро располагать объект по макету: нужно, чтобы объект уже был выбран, зажать Alt (Option) и стрелками указать направление верх, низ, лево, право. Если захотите расположить объект по середине макета, то Alt (Option) + V (вертикаль) + H (горизонталь).

Настройка ограничителей (Constraints). Нажмите, чтобы приблизить:

Добавил обводку для Left and right и Scale, чтобы наглядно показать, что происходит со слоем при использовании данной настройки.

Left — фиксация по левому краю. Похожее свойство есть у текста, называется — выключка. Это значит, что мы «прибиваем» или фиксируем элемент слева и на него будут действовать только изменения левой грани. Как мы видим выше, если двигать правую грань, то элементы с ограничением по левому краю (Left) стоят на месте. Если левую, то элемент идёт вслед за ней, потому что мы зафиксировали или прибили его к левой стороне.

Right — фиксация по правому краю. Тоже самое, что Left, только наоборот. Как мы видим выше, если двигать левую грань, то элементы с ограничением по правому краю (Right) стоят на месте. Если правую, то элемент идёт вслед за ней, потому что мы зафиксировали или прибили его к правой стороне.

Left and right (тянучка)— это уже посерьёзнее. Как мы видим в примере, элемент растягивается и сжимается по горизонтали. Я бы назвал это функцию — растягивание по горизонтали или свободное растяжение. Суть в том, что в обычном состоянии у объекта есть текущие габариты или размер. Вот функция Left and right позволяет изменять ширину в сторону увеличения или сужения.

Я часто использую для текста, карточек, если они во фрейме. Если у вас объект в автолейауте, то у него ограничители (constraints) заменяются на Fill, Fix и Hug, о которых я писал выше в блоке Слои (Layers).

Center —Элемент прибивается к центру и изменении горизонтальных размеров подстраивается и всегда будет находиться в центре, если изначально выставлен по центру. Если изначально по центру не выставлен, то будет считаться, что точка, в которой он сейчас находится и есть центр и дальнейшие расчеты будет вести от неё.

Scale — элемент меняет свои размеры пропорционально передвижению грани. Могут возникнуть проблемы в будущем, лучше не пользоваться.

Добавил обводку для Top and bottom и Scale, чтобы наглядно показать, что происходит со слоем при использовании данной настройки.

Top — Элемент прибивается к верху и реагирует только на изменение верхней грани.

Bottom —Элемент прибивается к низу и реагирует только на изменение нижней грани.

Top and bottom (тянучка) — тоже самое, что и Left and right, только вертикально.

Center —элемент прибивается к центру и изменении вертикальных размеров подстраивается и всегда будет находиться в центре, если изначально выставлен по центру. Если изначально по центру не выставлен, то будет считаться, что точка, в которой он сейчас находится и есть центр и дальнейшие расчеты будет вести от неё.

Scale — элемент меняет свои размеры пропорционально передвижению грани. Могут возникнуть проблемы в будущем, лучше не пользоваться.

Уверен, вам не терпится посмотреть, как все свойства будут выглядеть на одном экране.

Все настройки по горизонтали и вертикали без скейла и «тянучки». Наглядная демонстрация:

Совет: Для иконок всегда ставлю Center — Center, чтобы, при изменении размеров, они всегда были по середине. Scale не рекомендую, лучше сделайте вариативные иконки (желательно состоящих из обводки для гибкости) с разными размерами и подставляйте нужный, не ленитесь!

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

Нажмите Ctrl (Command) и тяните грань, либо Alt (Option) + Ctrl (Command), если хотите, чтобы сразу тянулись две противоположные грани. Часто пользуюсь, полезно.

Наглядная демонстрация:

57 🙋‍♂

Готово, достижение получено! Вы — мастер ограничителей 🟨

В этом блоке мы разберем стили текста, цветов, эффектов и сетки.

Что такое стиль? Это сохранённые или запечённые (если статью будут читать 3D– или геймдизайнеры) свойства элементов для упрощения проектирования и сохранения единообразия дизайна.

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

Из-за незнания или не правильного использования стилей началась борьба за независимость США.

Сначала быстро пройдем по характеристикам и свойствам текста.

Тип шрифта — выбор семейства шрифтов.

Размер шрифта в пикселях — размер самого текста.

Вес или жирнота — говорит само за себя.

Интерлиньяж — межстрочное расстояние, в пикселях или процентах. Рекомендую использовать % т.к. при увеличении размера шрифта, он (интерлиньяж) подстраивается. Для текста лучше 130 — 150%, для заголовков 115 — 135% .

Отступы между параграфами — отступ при нажатии Enter от текста, который находится выше, в пикселях.

Выключка — выравнивание текста по горизонтали: лево, по центру, право.

Выравнивание по вертикали — говорит само за себя: верх, центр, низ. Я обычно не трогаю.

Настройка бокса или границ — свободное перемещение текста или по заданным границам. Полезно, если научитесь пользоваться. Если нет — могут возникнуть проблемы.

Расширенные настройки — индексы, буллеты и другие, поиграйтесь.

Стили — кнопка создания или назначения уже сделанных стилей на текст.

По настройкам и свойствами текста всё.

Чтобы открыть окно стилей, нажмите на кнопку с четырьмя кружками, показывал выше. Для создания новый стиль — кликните на + . Далее уже пишете название и описание. В описании можно указать, для чего и где используется, ссылки на вашу веб ДС или другую полезную информацию.

Чтобы применить стиль к тексту, достаточно навестить на нужный и кликнуть по нему.

Я люблю, когда в проекте порядок. Поэтому группирую все стили и ставлю их по иерархии для удобства поиска и использования.

Анатомия моего текстового стиля:

Категория или папка — чтобы создать папку для стиля, нужно написать название папки, поставить / и затем уже писать основную информацию, как в примере выше.

Если я захочу добавить новые стили к категории Header, то просто снова напишите «Header/информация».

Тип — тут всё ясно, типизация пришла из разработки. Заголовки идут в порядке убывания (H1, H2...), где цифра 1 означает самый большой и главный. И текст (T1, T2 ...), принцип тот же.

Размер — размер текста в пикселях.

Вес или жирнота — тоже ничего сложного, толщина начертания: Bold, Semibold, Medium, Regular, Light.

Всё это позволяет в одну секунду понять все свойства текста без нужны проваливаться в настройки.

Наглядная демонстрация:

Чем хороши стили? Легко всё исправлять в одном месте при условии, что вы применили стиль к тексту. Стиль текста меняет весь привязанный к нему текст во всём проекте.

Наглядная демонстрация:

1. Хотите, чтобы у вас были нормальные списки? Сделайте отдельно специальный стиль. Для списков вместо обозначения жирности я прописываю Bullets.

2. Минимальный шаг шрифтов для меня четыре пикселя, а не два. При двух — разница несущественна. Исключение 16 и 14 пикселей для лейблов, подсказок, тултипов. Но, если размер экрана у ваших пользователей 1680 и больше, то лучше переходить на минимальный размер в вебе — 16 пикселей, а в идеале и на 18-20 пикселей.

Глаза выразят вам благодарность.

3. А вы знали, что можно в текстовом написать : и первые символы слова, то появится панель с эмодзи!

Наглядная демонстрация:

Принцип тот же, что и для текста. Для хорошей организации проекта, нужно разделить цвета по назначению и, хочу сделать акцент, назвать их нор-маль-но. Никаких Kalibri 10, 20, 30, Manhattan 100500 и так далее, это всё визуальный бесполезный шум и мусор в стилях.

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

Представим, пришёл к вам в команду или в компанию дизайнер. Почему он должен разбираться, что сиреневый Saratov 12345 должен быть на кнопке, а на информационном баннере — синий Chelyabinsk 51?

Вот не почему, только что кто-то когда-то так захотел / согласовал и теперь молча все страдают. А тех, кто поднимает вопрос, клюют. Нет логики и разбираться в этом никто в здравом уме не захочет.

Кого обидел: обнял–приподнял. Накипело.

Далее я приведу аргументы за свой подход.

Эксперимент, понятно ли, как и в каком случае использовать данные цветовые стили без погружения в проект?

Думаю, вы уже поняли: называть группы / папки и сами стили по назначению и понятным языком. И, да, для разных стилей надо будет дублировать цвета: #FFFFFF может быть Text/White и Background/Primary и ничего страшного. Всё, никакой магии и мистики.

Лайфак: если все символы повторяются, то можно писать #FFF или #111. Это равносильно #FFFFFF и #111111, а экономит 0,5 секунды.

Давайте представим, что к вам пришли и попросили быстро поменять цвета в карточке. В детстве хотел стать банкиром, поэтому примером будет моя лучшая банковская кредитная карта.

Наглядная демонстрация:

Вот, как наличие стилей упрощает работу.

Немного поясню: группировка стилей по полочкам помогает точечно менять то, что вам надо. В примере, где стили настроены, стиль Text/Primary отвечает, естественно, за цвет текста и показывает, что он самый главный — черный.

Если мне надо его заменить, то я не проваливаясь и не ища элементы внутри, смотрю примененные стили и, важно, читаю, что это, зачем это и меняю.

Понял бы я, что за цвет текста отвечает Anapa /Gelendzhik / Sochi 30? Вряд ли.

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

Вы знали, что можно просто написать Red, Green или Blue и фигма покрасит в этот цвет!

Наглядная демонстрация:

Тут всё совсем просто: тени внутренние и внешние, блюры слоя и заднего фона. Насчёт нейминга почти полная свобода. Я указываю тип и размер, например: Inner shadow Small, но можно и значение размытия.

Внутренняя тень, то есть тень внутри объекта — внутренняя область которого будто бы является «отверстием в полу, в которое попадает свет». Эффект такой, будто вы управляете солнцем.

Основные свойства:

Расположение по X, по Y, степень мягкости тени (Blur), размах (Spread) и цвет.

Наглядная демонстрация:

Лайфхак: чтобы быстро менять значения, зажмите Alt (Option) и водите мышкой / пальцами.

Падающая тень, то есть тень, исходящая от объекта, которого будто бы приподняли и он стал отбрасывать тень.

Основные свойства такие же, как и у внутренней тени (Inner shadow)

Наглядная демонстрация:

Создаёт эффект размытия изображения. В фотошопе, возможно, вы могли поменять размытие по Гаусу, вот это похожее свойство.

Слой из чёткого становится нечётким.

В этот раз обойдусь мемом:

Это такой эффект, когда объект, который находится за этим слоем, размывается. Сделал анимацию на Smart animate для полного понимания.

Наглядная демонстрация:

Сетка — помощник в проектировании, особенно на раннем этапе. Она, конечно, может ограничивать и держать вас в рамках, но пользы всё равно больше.

В фигме есть три вида сеток: сетка сама по себе, из линий, горизонтальные колонки и вертикальные колонки.

Детализация по типам сеток и их свойств в фигме:

Для себя я выделяю четыре направления или типа сеток: для печати (нестандартные), мобильные + планшет, десктопные и для внутренних сервисов (в том случае, когда есть боковое меню (sidebar)).

Нейминг имеет значение. Если для мобильных, планшетов и десктопов понятно — пишем просто размер в пикселях, например 320, 375, 568, 768, 1024, 1440, 1680, 1920, 2560 px, то для внутренних есть особенности.

Также можно называть для полного понимания на какой диапазон действует сетка через брейкпоинты, например 320 — 375, 376 — 568 и так далее.

Помимо того, что указываем размер, для большей гибкости в сетку можно добавлять состояние бокового меню, если оно сворачивается. Например: 1680 Open / 1680 Close.

Пример сетки на прошлом проекте:

Как применять сетки:

Готово! Теперь вы — мастер стилей 🟩

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

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

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

Поэтому, скромность — дело хорошее, но глупо скрывать правду.

Выход есть.

Компонент — это такой элемент, который позволяет минимизировать работу над повторяющимися объектами на проекте. Например, кнопки, карточки товара, которые я показывал в блоке автолейаутов, шапка, футер, меню, тултипы, иконки и многое другое.

Компонент делится на два типа: материнский и дочерний.

Материнский — главный компонент, тот, изменения в котором приведет к изменению всех дочерних компонентов.

Дочерний — зависимый компонент, копия материнского. При изменении ег свойств материнский не меняется, но они отвязываются от материнского (считай что бунд), так что в дочерних компонентах (Instance) лучше ничего не менять.

Компонентный подход наглядно:

Самый большой плюс компонентов — один раз настроил и потом можно не проверять, если сам ничего не менял у дочерних компонентов и не детачил (detach — зло).

Кнопка — всего лишь пример. Компонентом может быть всё, что угодно, главное — понять суть. Переходим к вариативному компоненту (Variants).

Вариативный компонент (Variants) — это прокаченный компонент и ваш БРО 😎

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

Вот пример кнопки, всего 608 вариантов в одном компоненте.

Кто-то может сказать, что это через чур, зачем так много для одного проекта. А я скажу, что ещё и анимацию при наведении (Hover) и клике (While pressing) сделал:

Наглядная демонстрация:

С вариативными компонентами ваши возможности проектирования и прототипирования интерфейсов улетают в космос, как рубль в кризис.

Анимированные интерфейсы очень нравится команде, когда показываешь красивый кликабельные прототип на встречах и респондентам на юзабилити-тестировании.

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

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

Как я писал ранее, я люблю порядок. Этот принцип я соблюдаю и в компонентах:

В каком бы то ни было компоненте у меня чёткая иерархия свойств. Расскажу подробнее.

Если какие-то свойства в компоненте отсутствуют, то этот пункт просто пропускаются и идут следующие очереди.

Начиная работать с компонентом, на примере кнопки, нам сначала надо определить:

Стиль (Style) — свойство кнопки по внешнему виду: главная (Primary), вторичная (Secondary), белая (White), брендовая, кнопка ошибки, с обводкой (Stroke) или без (Ghost) выставляю в порядке от главной до опасной.

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

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

Пример:

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

Наглядная демонстрация:

Дополнительно показываю для разработки и всех, кто взаимодействует с файлом, визуализацию состояний с курсором.

Это могут быть люди, далёкие от дизайна, поэтому важно показать всё наглядно, чтобы возникал минимум вопросов. Win-win для всех.

Тип (Type) — тип кнопки по её содержанию: текстовая, с иконкой справа, с иконкой слева, только иконка. Отдельно я делал кнопку с дропдауном и календарем, мне так удобно.

Иерархия также соблюдается:

Состояние (State) — состояние кнопки при взаимодействии с ней. Тут всё просто: кнопка в спокойном состоянии (Default), при наведении (Hover), кнопка при нажатии или клике (Clicked / Pressed), недоступная / заблокированная (Disabled).

Можно ещё добавить состояние загрузки (Loading), но у меня потребности не было.

Совет: Иерархия Default, Hover и Clicked / Pressed всегда неизменная, а Disabled — всегда последняя. А между ними можно вставлять Loading, Skeleton (если у вас есть такое) и так далее.

Размер (Size) — сам размер кнопки, всё просто. Как вы помните, я использую модуль 8.

По иерархии: сверху-вниз по возрастанию.

Вложенные компоненты (Nested instance) — позволяет добавить в компонент другие дочерние компоненты. На этом построен принцип атомарного подхода к проектированию дизайн-систем и я его придерживаюсь. Очень полезная функция.

Раньше когда трава была зеленей и не было такой функции, приходилось проваливаться в компонент и отдельно менять свойства. Теперь всё можно вынести в материнский компонент и менять в одном месте — мастхев!

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

Наглядная демонстрация:

Атомарный дизайн (Atomic design methodology)

Атомарный дизайн — это подход к дизайну компонентов, который должен знать каждый.

Сначала есть Атомы — текст, иконки, кнопки, аватарки и так далее.

Атомы, совмещаясь, превращаются в молекулы.

Молекулы — в организмы.

Организмы — в шаблоны.

Шаблоны — в страницы

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

Для кнопок с иконками важно делать оптическую компенсацию или стабилизацию.

Что тут не так?

Правильно, слева от иконки такое же расстояние до границы, как и справа у текста. Создается ощущение, что есть смещение центра и слева больше отступ.

Для этого нужна оптическая стабилизация. В зависимости от размера кнопки, убираю 8, 4 или 2 пикселя.

Готово! Теперь вы — мастер компонентов и фигмы 🟥

Статья содержит 78 817 символов без пробелов, 6 310 слов, 45 изображений, 42 видео-демонстрации.

Мой подход к организации работы в фигме также верен, как Ленин идеям коммунизма.

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

Конечно, я мог что-то упустить и, если вспомню или меня поправят по делу в комментариях, то статья дополнится.

На этом всё.

Приходите в мой новый канал — t.me/nezhnik_life

Пишу про дизайн, геральдику, статьи, мысли, интересные факты и идеи. Расскажу всё, что знаю.

Пишите в личку — t.me/nezhnik

По делу, за советом, созвоном-знакомством (первая встреча бесплатно для новых подписчиков в канале😼), менторством, критикой, предложениями, идеями, комментариями и другим.

Смотрите сайт-портфолио — https://nezhnik.com

С вами был Михаил Нежник.

До новых встреч!