Полезные инструменты Figma

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

Компоненты

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

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

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

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

Компоненты простые и сложные

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

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

Детали работы с компонентами

Наименование

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

Для создания группы компонентов, в имени компонента необходимо использовать слеш. Так на скриншоте ниже представлено разделение по группам Button/Default с кнопками Primary и Secondary и Button/Default + Icon с теми же кнопками Primary и Secondary, но с добавленными в них иконками.

Описания компонентов

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

Ограничения и сетка

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

Обрезка контента

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

Замена компонента

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

Либо через правое меню взаимодействия.

Открепление от главного компонента

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

Стили

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

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

Детали работы со стилями

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

Наименование

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

Также для более гибкой настройки библиотеки цветов доступна группировка стилей по наименованиям с помощью слеша, аналогично компонентам.

Описание

Та же ситуация, что и с компонентами. Описание добавит деталей и информации к созданному стилю.

Стили заливки изображений

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

Auto layout

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

Контейнер

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

Теперь на боковую панель добавились дополнительные настройки, отвечающие за расположение внутренних элементов и отступы. Добавив иконку, кнопка изменится по заданным правилам: увеличится за счёт указанных отступов, либо останется фиксированной ширины, при указанном свойстве "fixed width".

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

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

Variants

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

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

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

При этом сразу появятся наименования Default и Variant2. Их, конечно же, лучше проработать сразу, чтобы не было путаницы в дальнейшем. Дальше можно работать с вариантами так, как требуется. По клику на плюс можно добавить ещё больше необходимых вариантов состояния компонента.

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

Ещё один способ создания вариантов

Помимо создания вариантов состояний из одного компонента, можно создать состояния из набора компонентов. Как описывалось ранее, компоненты надо продумать и поместить на отдельный фрейм. Как пример использовались компоненты кнопок, разделенные по подгруппам: Button/Default Primary и Secondary, а также их версии с иконками.

После этого имена кнопок разобьются на свойства, которые ранее в упрощённом способе создания вариантов отвечали за выбор состояний "стандартного", "наведения" и "нажатия". При выделении компонента можно изменить как названия свойста, так и их значения. Для наглядности изменены на свойства: "icon" со значениями "true/false" и "style" со значениями, заданными ранее автоматически.

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

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