Как работать в Фигме быстрее

Как работать в Фигме быстрее

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

Ускорение работы с компонентами

Можно создать несколько компонентов одновременно. Для этого выберите объекты, которые хотите превратить в компоненты, и нажмите стрелочку возле иконки Create Component в верхней панели. В появившемся списке нажмите Create Multiple Components.

Обычно замечания по макету оставляют инструментом Add → Show Comments, а заметки для разработчиков лучше писать сразу в ЦСС. Для этого выберите Master Component и введите текст в поле Description, которое появится в правой панели. Текст отобразится в виде комментария в ЦСС, который увидят разработчики.

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

Приложение Figma Mirror

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

Круто, что любые изменения фрейма сразу же отображаются в приложении.

Figma Mirror доступна для Айфона и Андроида. А на figma.com/mirror можно проверить макет в браузере.

Другие полезные фишки

В Фигме можно включить линейки, нажав Shift + R как в Фотошопе. Линейки Фигмы удобнее — они цветом показывают ширину и высоту выбранного объекта и не заставляют смотреть на его координаты в правой панели. Это помогает быстрее оценить правильность размера и положения объекта.

Если скопировать СВГ с сайта и вставить его Фигму, код превратится в векторный объект внутри фрейма. Найдите в веб‑инспекторе нужный СВГ‑файл, нажмите на многоточие и выберите в появившемся меню Copy → Copy outerHTML. Например, таким образом можно удобно и быстро копировать логотипы из шапок сайтов в свой макет.

По умолчанию изменение размера фрейма не затрагивает его содержимое, кроме объектов со значением Scale во вкладке Constraints. Чтобы изменить размер фрейма вместе с содержимым, используйте инструмент Scale Tool (K).

Если во время выделения рамкой большого количества объектов, вы поняли, что промахнулись, то не нужно отменять выделение и начинать заново. Просто зажмите пробел, и рамка будет двигаться вместе с курсором мыши, как в Фотошопе. Отпустите пробел и продолжите выделение.

В Фигме, как и в текстовых редакторах, можно сделать текст курсивным, жирным и подчёркнутым с помощью сочетаний клавиш Ctrl (⌘) + I, Ctrl (⌘) + B, Ctrl (⌘) + U.

P. S. Это был вторничный совет о дизайне интерфейсов. Присылайте вопросы.

ИнтерфейсФигма
Отправить
Поделиться
Запинить

Рекомендуем другие советы