Как упростить работу в 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 + /:


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