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

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

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

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

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

Можно создать несколько ком­по­нен­тов одно­вре­менно. Для этого выбе­рите объ­екты, кото­рые хотите пре­вра­тить в ком­по­ненты, и нажмите стре­лочку возле иконки 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. Это был вторничный совет о дизайне интерфейсов. Присылайте вопросы.

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

Комментарии

Олег Скуратов
6 мая 2020

А как быстро поставить «ёлочки» с раскладкой Бирмана?


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

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

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

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

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




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

3 9 3 Что такое профессиональная этика? 5