5 лайфхаков в Figma, которые помогут работать быстрее
Рассказываем, как изменить все одинаковые объекты на макете, за секунду найти нужный плагин и вдвое быстрее рисовать симметричные иконки.
![](https://248006.selcdn.ru/main/iblock/72e/72e0e9affd7a56fb267f1ed24e9e99f3/162b6d0fa77d8fcd4058a3597925eda5.png)
![](https://248006.selcdn.ru/main/iblock/72e/72e0e9affd7a56fb267f1ed24e9e99f3/162b6d0fa77d8fcd4058a3597925eda5.png)
OlyaSnow для Skillbox Media
В Figma есть множество скрытых функций и горячих клавиш, которые самостоятельно найти не так просто. Но если их освоить, вы сможете ускорить работу над макетом: быстрее менять непрозрачность или добавлять линии только с одной стороны объекта.
Рассказываем о пяти простых лайфхаках, которые помогут вам быстрее работать в Figma.
Мгновенно изменить непрозрачность
Если вы не пользуетесь горячими клавишами в Figma, то, скорее всего, меняете непрозрачность слоёв примерно так: выделяете нужный объект, переводите курсор на панель настроек и в блоке Fill меняете непрозрачность. Это всё очень долго.
Чтобы не терять целую минуту на такое простое действие, пользуйтесь клавишами с цифрами от 1 до 0. Цифра 1 — 10% непрозрачности, 2 — 20% и так далее. Чтобы задать точное значение, быстро нажмите две любые цифры. Например, если нажать на 4 и 9, то непрозрачность слоя будет 49%.
Кстати, то же самое работает и в Photoshop.
![](/upload/setka_images/10205423092021_4b8ec8d0dc3bee0a64b678df9678793a7797ff18.gif)
Быстро найти нужный плагин или функцию
Если у вас установлено уже очень много плагинов и найти нужный в стандартном меню стало невозможно, воспользуйтесь внутренним поиском в Figma. Для этого нажмите на Ctrl (⌘) + P — откроется поисковая строка, которая ищет не только установленные плагины, но и стандартные функции редактора.
![](/upload/setka_images/07420323092021_7e362904b7d857173ea1dbafb405ab1977cbbb2a.gif)
Изменить всё одинаковое
Если макет готов уже наполовину, а вы вдруг поняли, что не используете стили, это можно быстро исправить. Для этого нажмите на иконку и в выпадающем меню перейдите в пункт Edit → Select all with same. Вы можете искать объекты с одинаковыми шрифтами, соотношениями сторон, параметрами заливки.
В зависимости от выбранного параметра Figma выделит вам все элементы, в которых они одинаковые.
![](/upload/setka_images/07420523092021_b1f5fb33da8f50f319a53de56ac6374150b960ea.gif)
Добавить линию под модулем с помощью тени
К сожалению, в Figma нет опции «добавить линию только с одной стороны объекта». Но зато вы можете сделать это самостоятельно с помощью теней!
Как добавить линию только с одной стороны
- Выберите нужный объект на макете.
- На панели настроек в блоке Effects нажмите на плюсик.
- В появившемся пункте Drop shadow нажмите на иконку
и укажите у Blur значение 0.
Положение линии регулируется с помощью значений X и Y:
- X: 0, Y: −1 — снизу.
- X: 0, Y: 1 — сверху.
- X: 1, Y: 0 — справа.
- X: −1, Y: 0 — слева.
![](/upload/setka_images/07420423092021_9f4177150537e15f4549b4114125e7b7fd1ba2c4.gif)
Нарисовать симметричные иконки в два раза быстрее
Наверняка у вас бывало так, что при рисовании симметричной иконки с одной из половин постоянно есть проблемы: то линии кажутся мятыми, то точки стоят на разных уровнях. С помощью компонентов вы можете нарисовать лишь половину иконки, а вторую часть просто скопировать и поставить рядом.
Как рисовать симметричные иконки с помощью компонентов
- Нарисуйте любой вектор с помощью инструмента
.
- Сделайте из него компонент Ctrl (⌘) + Alt (⌥) + K.
- Скопируйте ваш компонент и нажмите Ctrl (⌘) + H, чтобы зеркально отразить его.
- Поставьте оба компонента рядом.
Теперь все изменения вашего оригинального компонента будут автоматически применяться к его копии.
![](/upload/setka_images/07420423092021_08b05e7a793ee96c87ad6538ed513e45f4ce5704.gif)
![](/upload/setka_images/14193802062022_93332d2c63ae51fe843eb0192ae360f05bf930b6.png)
Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.