Дизайн
#Руководства

5 лайфхаков в Figma, которые помогут работать быстрее

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

OlyaSnow для Skillbox Media

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

Рассказываем о пяти простых лайфхаках, которые помогут вам быстрее работать в Figma.

Мгновенно изменить непрозрачность

Если вы не пользуетесь горячими клавишами в Figma, то, скорее всего, меняете непрозрачность слоёв примерно так: выделяете нужный объект, переводите курсор на панель настроек и в блоке Fill меняете непрозрачность. Это всё очень долго.

Чтобы не терять целую минуту на такое простое действие, пользуйтесь клавишами с цифрами от 1 до 0. Цифра 1 — 10% непрозрачности, 2 — 20% и так далее. Чтобы задать точное значение, быстро нажмите две любые цифры. Например, если нажать на 4 и 9, то непрозрачность слоя будет 49%.

Кстати, то же самое работает и в Photoshop.

Изображение: Skillbox Media

Быстро найти нужный плагин или функцию

Если у вас установлено уже очень много плагинов и найти нужный в стандартном меню стало невозможно, воспользуйтесь внутренним поиском в Figma. Для этого нажмите на Ctrl (⌘) + P — откроется поисковая строка, которая ищет не только установленные плагины, но и стандартные функции редактора.

Изображение: Skillbox Media

Изменить всё одинаковое

Если макет готов уже наполовину, а вы вдруг поняли, что не используете стили, это можно быстро исправить. Для этого нажмите на иконку и в выпадающем меню перейдите в пункт EditSelect all with same. Вы можете искать объекты с одинаковыми шрифтами, соотношениями сторон, параметрами заливки.

В зависимости от выбранного параметра Figma выделит вам все элементы, в которых они одинаковые.

Изображение: Skillbox Media

Добавить линию под модулем с помощью тени

К сожалению, в Figma нет опции «добавить линию только с одной стороны объекта». Но зато вы можете сделать это самостоятельно с помощью теней!

Как добавить линию только с одной стороны

  1. Выберите нужный объект на макете.
  2. На панели настроек в блоке Effects нажмите на плюсик.
  3. В появившемся пункте Drop shadow нажмите на иконку и укажите у Blur значение 0.

Положение линии регулируется с помощью значений X и Y:

  • X: 0, Y: −1 — снизу.
  • X: 0, Y: 1 — сверху.
  • X: 1, Y: 0 — справа.
  • X: −1, Y: 0 — слева.
Изображение: Skillbox Media

Нарисовать симметричные иконки в два раза быстрее

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

Как рисовать симметричные иконки с помощью компонентов

  1. Нарисуйте любой вектор с помощью инструмента .
  2. Сделайте из него компонент Ctrl (⌘) + Alt (⌥) + K.
  3. Скопируйте ваш компонент и нажмите Ctrl (⌘) + H, чтобы зеркально отразить его.
  4. Поставьте оба компонента рядом.

Теперь все изменения вашего оригинального компонента будут автоматически применяться к его копии.

Изображение: Skillbox Media

Самоучитель по Figma

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


Курс

Figma с нуля до PRO

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

Узнать про курс

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

Участвовать
Обучение: Figma с нуля до PRO Узнать больше
Понравилась статья?
Да

Пользуясь нашим сайтом, вы соглашаетесь с тем, что мы используем cookies 🍪

Ссылка скопирована