Как упростить работу в Figma
Четыре совета в гифках, которые помогут ускорить работу над макетами.
![](https://248006.selcdn.ru/main/iblock/cdf/cdf59770f68234eb9fda2582d66e7a29/036e3a54182aea3e875e4ca51e52231b.png)
![](https://248006.selcdn.ru/main/iblock/cdf/cdf59770f68234eb9fda2582d66e7a29/036e3a54182aea3e875e4ca51e52231b.png)
Figma — графический редактор, который помогает проектировать интерфейсы, сайты, макеты изданий. Рассказываем, как ускорить работу в нём с помощью стилей, компонентов, ограничителей и горячих клавиш.
1. Шаблонизируйте цвета и шрифты
Шаблоны цветов и шрифтов помогут быстро использовать стандартные стили и не вспоминать каждый раз, какие цвета вам нужны для плашек и кнопок и какого кегля у вас заголовки и основной текст.
Как создать стиль цвета:
- Выделите любой объект на макете.
- Перейдите в пункт Fill («Заливка») и нажмите на квадратную иконку из кружков.
- В появившемся меню нажмите на плюсик.
- Назовите стиль и сохраните.
- Чтобы использовать стиль, в пункте Fill нажмите на иконку из кружков и выберите нужный шаблон. Стиль можно выбрать и для обводки в пункте Stroke — он находится под Fill.
![](/upload/setka_images/06471001062021_f8e2668d468d0a83016bd9d8a261b330ff850882.gif)
Со стилями текста принцип тот же, что и с цветами:
- Выделите любой текст на макете.
- Перейдите в пункт Text и нажмите на квадратную иконку из кружков.
- В появившемся меню нажмите на плюсик.
- Назовите стиль и сохраните.
- Чтобы использовать стиль, в пункте Text нажмите на иконку из кружков и выберите нужный шаблон.
![](/upload/setka_images/06475301062021_7e362904b7d857173ea1dbafb405ab1977cbbb2a.gif)
Стиль в любой момент можно отредактировать:
- Выберите элемент, стиль которого нужно изменить.
- Наведите на него курсор и нажмите на иконку, похожую на эквалайзер, — откроется редактор цвета или шрифта.
После обновления стиля автоматически обновятся все элементы, где этот стиль используется:
![](/upload/setka_images/06483601062021_b1f5fb33da8f50f319a53de56ac6374150b960ea.gif)
Стили могут выручить на встрече с арт-директором или клиентом. Например, неподходящие цвета можно изменить в два клика без переделки всего макета.
Называйте стили осмысленно, чтобы потом не запутаться в своей палитре. Например, название Blue-text может означать цвет заголовка или основного текста — непонятно, а название Link-color сразу передаёт смысл — цвет для ссылок.
2. Используйте компоненты
Работая над интерфейсами или сайтами, дизайнеры часто используют стандартные элементы: кнопки, плашки, поля ввода, ссылки. Чтобы бесконечно не копировать одно и то же, создайте из стандартных элементов компоненты.
Создайте компонент, выбрав любой фрейм и на верхней панели, затем нажмите на иконку с ромбиком:
![](https://248006.selcdn.ru/main/upload/setka_images/06493101062021_c7c2d6650fe8dd3125b1541cb39af56649bd56fa.jpg)
Компонент создан, теперь вы можете поместить его копию в любое место на макете. Для этого переключитесь на панели слоёв во вкладку Assets и перетащите нужный компонент на макет:
![](/upload/setka_images/06494801062021_08b05e7a793ee96c87ad6538ed513e45f4ce5704.gif)
Как и стили, компоненты можно изменить сразу на всём макете. Для этого выберите основной компонент и измените в нём что-нибудь — все копии компонента на макете изменятся в соответствии с оригиналом:
![](/upload/setka_images/06500601062021_5a1bba1c28b4a49e108d429d2577500dc235af18.gif)
Если весь ваш макет будет состоять только из компонентов, вам будет сложно в нём что-то изменить. Лучше делать компоненты только из стандартных элементов: кнопок, плашек, полей ввода, ссылок.
3. Пользуйтесь ограничителями
Сайты должны быть удобными на любом устройстве: на телефоне, планшете, ноутбуке или компьютере с огромным монитором. Дизайнер учитывает каждый экран при проектировании интерфейса сайта или приложения.
Чтобы каждый раз не перевёрстывать весь макет под разные экраны, в Figma предусмотрены ограничители — Constraints. Они фиксируют элемент в определённой точке макета и при изменении ширины или высоты макета не меняют своего положения.
Соберём с помощью ограничителей шапку для сайта.
1. Создайте фрейм размером с iPhone 5 SE — 320×568 пикселей:
![](https://248006.selcdn.ru/main/upload/setka_images/06512201062021_fc9956ee2f4201e204a5532c68850c6715ed24e0.jpg)
2. Внутри этого фрейма создайте ещё один, растяните его на всю ширину экрана и поставьте в самом верху:
![](https://248006.selcdn.ru/main/upload/setka_images/06585301062021_6caf85fa09e0642959e62c753d9a2f18236eb1da.jpg)
3. Укажите на панели Сonstraints выравнивание Left and right и Top:
![](https://248006.selcdn.ru/main/upload/setka_images/07002501062021_c0c954a3a268bfc515e88839a41a25de5bd1b194.jpg)
Готово — теперь шапка будет растягиваться за макетом, как бы вы ни меняли его размер:
![](/upload/setka_images/07034301062021_d5f448b1d45447906b1518b24eb2cf2b32fb1aed.gif)
В шапку можно добавить кнопки и ссылки. С помощью ограничителей вы сможете научить их также адаптироваться под любую ширину экрана:
![](/upload/setka_images/07040001062021_f622bbba013d150bb02a32dc0c82a22b1a5101f6.gif)
Таким образом, вы сможете проверить, как выглядит сайт или приложение на любом экране, и заранее скорректировать то, что выглядит плохо.
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 + /:
![](https://248006.selcdn.ru/main/upload/setka_images/07064801062021_71b97f3681cfd481f98f8279e17d064ae63ea66a.jpg)
![](/upload/setka_images/14193802062022_93332d2c63ae51fe843eb0192ae360f05bf930b6.png)
Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.