Как работать в Фигме быстрее
Ускорение работы с компонентами, приложение Figma Mirror, другие полезные фишки
Как работать в Фигме быстрее
Ускорение работы с компонентами, приложение Figma Mirror, другие полезные фишки
В прошлый раз мы рассмотрели, как ускорить работу с объектами и интерфейсом программы. Сегодня — заключительная часть совета про горячие клавиши и трюки, которые помогают работать в Фигме быстрее.
Ускорение работы с компонентами
Можно создать несколько компонентов одновременно. Для этого выберите объекты, которые хотите превратить в компоненты, и нажмите стрелочку возле иконки 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. Это был вторничный совет о дизайне интерфейсов. Присылайте вопросы.