Как упростить работу в Figma

Четыре совета в гифках, которые помогут ускорить работу над макетами.

Вячеслав Лазарев

Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.

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

1. Шаблонизируйте цвета и шрифты

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

Как создать стиль цвета:

Выделите любой объект на макете.
Перейдите в пункт Fill («Заливка») и нажмите на квадратную иконку из кружков.
В появившемся меню нажмите на плюсик.
Назовите стиль и сохраните.
Чтобы использовать стиль, в пункте Fill нажмите на иконку из кружков и выберите нужный шаблон. Стиль можно выбрать и для обводки в пункте Stroke — он находится под Fill.

Со стилями текста принцип тот же, что и с цветами:

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

Стиль в любой момент можно отредактировать:

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

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

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

Называйте стили осмысленно, чтобы потом не запутаться в своей палитре. Например, название Blue-text может означать цвет заголовка или основного текста — непонятно, а название Link-color сразу передаёт смысл — цвет для ссылок.

2. Используйте компоненты

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

Создайте компонент, выбрав любой фрейм и на верхней панели, затем нажмите на иконку с ромбиком:

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

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

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

3. Пользуйтесь ограничителями

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

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

Соберём с помощью ограничителей шапку для сайта.

1. Создайте фрейм размером с iPhone 5 SE — 320×568 пикселей:

2. Внутри этого фрейма создайте ещё один, растяните его на всю ширину экрана и поставьте в самом верху:

3. Укажите на панели Сonstraints выравнивание Left and right и Top:

Готово — теперь шапка будет растягиваться за макетом, как бы вы ни меняли его размер:

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

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

4. Запомните горячие клавиши

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

Для начала запомните базовые горячие клавиши:

Ctrl (⌘) + N — создать новый файл;
Ctrl (⌘) + W — закрыть файл;
Ctrl (⌘) + Alt + K — создать компонент;
Ctrl (⌘) + G — объединить объекты в группу;
Ctrl (⌘) + Alt + G — объединить объекты во фрейм;
I — пипетка для выбора цвета;
Минус (−) и плюс (+) — уменьшить и увеличить масштаб;
Ctrl (⌘) + B, I, U — сделать текст жирным, курсивным, подчёркнутым;
Alt + H — выровнять по центру по горизонтали;
Alt + V — выровнять по центру по вертикали.

Лучший способ запомнить все горячие клавиши — принципиально использовать только их. Если вы забыли какое-то из сочетаний, откройте меню, посмотрите хоткей и воспользуйтесь клавиатурой. Так вы быстрее выучите все сочетания, которыми пользуетесь очень часто.

Также у Figma есть справочник по горячим клавишам. Чтобы его вызвать, нажмите Ctrl (⌘) + Shift + /: