x
 
Константин Мозговой
7 апреля 2020
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

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


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

Быстро рабо­тать в Фигме поз­во­ляет в первую оче­редь гра­мот­ное исполь­зо­ва­ние ком­по­нен­тов и постро­е­ние маке­тов. Этому важно учиться, но для новичка не менее полезно будет осво­ить несколько горя­чих кла­виш и трю­ков, кото­рые не оче­видны из интер­фейса про­граммы и не опи­саны в офи­ци­аль­ном туто­ри­але. Счи­таю важ­ным о них рас­ска­зать, но отмечу, что в совете не будет ничего сверхъ­есте­ствен­ного. Это про­сто под­сказки, кото­рые помо­гут нович­кам осва­и­вать Фигму.

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

Выделение объектов

Чтобы выде­лить сле­ду­ю­щий объ­ект в панели слоёв, нажи­майте Tab. Чтобы выде­лить преды­ду­щий — Shift + Tab. Так быст­рее, чем выде­лять мышкой.

Чтобы про­ва­литься внутрь фрейма, нажи­майте Enter, а под­няться обратно — Shift + Enter. Двой­ной клик мыш­кой не даёт такой управ­ля­е­мо­сти при пере­ме­ще­нии внутри фрейма.

Фигма поз­во­ляет выде­лить все объ­екты в макете с оди­на­ко­выми харак­те­ри­сти­ками. Это полезно, если нужно, напри­мер, выде­лить все тек­сто­вые объ­екты с одним и тем же шриф­том и изме­нить его пара­метры. Для этого выде­лите один объ­ект и нажмите Main menu → Edit → Select all with same font.

Спо­соб также хорошо рабо­тает с дру­гими харак­те­ри­сти­ками. Напри­мер, чтобы выде­лить все объ­екты с оди­на­ко­вым цве­том заливки, нажмите Main menu → Edit → Select all with same fill.

Когда ком­по­нент выде­лен, можно быстро перейти к глав­ному ком­по­ненту (Master Component), клик­нув по нему пра­вой кноп­кой мыши и нажав Go to Master Component. После редак­ти­ро­ва­ния глав­ного ком­по­нента можно быстро вер­нуться обратно, нажав Return to instance внизу экрана.

Перемещение и изменение размеров

В настрой­ках можно изме­нить зна­че­ние Nudge Amount, то есть коли­че­ство пик­се­лей, на кото­рое сдви­га­ется объ­ект при нажа­тии Shift + стрелки. Зна­че­ние по умол­ча­нию — 10 пик­се­лей, но может быть удоб­нее дру­гое. Напри­мер, при работе над маке­тами для сайта бюро, на кото­ром исполь­зу­ются отступы, крат­ные девяти пик­се­лям, я выстав­ляю соот­вет­ству­ю­щее зна­че­ние Nudge Amount.

Чтобы в панели Constraints выбрать в один клик Left & Right или Top & Bottom, зажи­майте Shift во время клика.

Чтобы рас­ста­вить объ­екты с оди­на­ко­выми отсту­пами между ними, нажмите малень­кую кнопку Tidy Up, кото­рая появится в пра­вом ниж­нем углу при выделении.

После этого можно менять объ­екты местами, пере­тас­ки­вая их за круг­лые мар­керы, или изме­нять между ними отступы, сдви­гая мар­керы в виде поло­сок. Если зажать Shift, то отступы будут изме­няться на зна­че­ние Nudge Amount.

Кроме того, вы можете сде­лать один объ­ект больше или меньше, сохра­няя те же отступы между объ­ек­тами. Для этого клик­ните в круг­лый мар­кер и потя­ните за край объекта.

Можно изме­нять раз­меры объ­ек­тов на 1 пик­сель, нажи­мая Ctrl + стрелки (⌘ для Мака), и на зна­че­ние Nudge Amount (10 пик­се­лей по умол­ча­нию), нажи­мая Ctrl (⌘) + Shift + стрелки. Ино­гда так быст­рее и удоб­нее, чем рас­тя­ги­вать объ­ект мыш­кой или зада­вать точ­ное зна­че­ние в панели свойств.

Чтобы изме­нять раз­меры фрейма, игно­ри­руя зна­че­ния Constraints у вхо­дя­щих в него объ­ек­тов, зажи­майте Ctrl (⌘).

Панель слоёв

Если нужно раз­бло­ки­ро­вать или отоб­ра­зить все скры­тые объ­екты в макете, нажмите Ctrl (⌘) + /, нач­ните наби­рать Unlock all Objects или Unhide all Objects в поле поиска и при­ме­ните команду.

Чтобы раз­вер­нуть все внут­рен­но­сти фрейма, выде­лите его и нажмите на малень­кую стре­лочку возле имени с зажа­той кла­ви­шей Ctrl (⌘). Точно так же можно свер­нуть всё обратно.

Чтобы быстро забло­ки­ро­вать кучу слоев, нажмите на иконку замочка и про­ве­дите кур­сор вниз. Раз­бло­ки­ровка рабо­тает ана­ло­гично. Спо­соб под­хо­дит и для скры­тия объ­ек­тов с помо­щью иконки глазика.

Чтобы пере­име­но­вать объ­ект нажи­майте Ctrl (⌘) + R. Затем нажи­майте Tab, чтобы пере­име­но­вать слой ниже, и Shift + Tab — слой выше. Это быст­рее, чем при­це­ли­ваться в имя объ­екта и делать двой­ной клик.

Про­дол­же­ние в сле­ду­ю­щем совете.

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

Поделиться
Отправить

Комментарии

Константин Константинопольский
7 апреля 2020

Кстати, ещё в Фигме можно организовать всамделишный Зумворлд. К примеру, так организован канвас и плейграунд Тяжеловато. По умолчанию видно самое важное, но всегда можно зазумиться в детали.

Евгений Уланов
7 апреля 2020

Прочитал, что на сайте бюро используются отступы, кратные девяти. Наверняка это не просто так. Я в своей работе использую отступы, кратные двум, — мне так проще считать. Расскажите, чем обусловлена цифра 9 и почему не 10, например?

Константин Мозговой
7 апреля 2020

Евгений, подробно о сетке рассказал Михаил Нозик в совете о создании нового сайта бюро: https://bureau.ru/soviet/20170308/

Никита Скоробулатов
7 апреля 2020

Ещё 2 не очевидных момента про выделение и размеры:
1. Чтобы выделить заблокированный объект без долгого поиска в панели слоёв, нажмите на него правой кнопкой.
2. Чтобы быстро избавиться от дробных значений размеров или координат нажмите на подпись слева от них.

Тимофей Чебунин
8 апреля 2020

Если выделить несколько слоёв и нажать ⌘+R, то можно будет переименовывать с заменой, добавлять номера и тому подобное.

Виктория Левченко
20 апреля 2020

Ещё добавлю: чтобы выделить объект, который находится за несколькими папками в слоях или перекрывается полем другого объекта, нужно кликнуть на него с зажатой ⌘ (Ctrl)


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Как передавать макеты в разработку? 3 Как работать в Фигме быстрее. Часть 3 1 Как работать в Фигме быстрее. Часть 2 Плагины для Фигмы. Часть 2




Недавно всплыло

Что должен знать дизайнер об интерлиньяжах, полях, отступах, кеглях, выравниваниях и модульных сетках? 9 Что такое профессиональная этика? 5 Как избежать «эффекта Тильды»? 3 3