Фишки и горячие клавиши Figma

Невероятно удобная программа для создания пользовательских интерфейсов. Гладкая работа как с вектором, так и с растром, интуитивно понятный интерфейс , быстрый импорт в любой формат, автоматическое сохранение, возможность совместной работы с любых компьютеров в режиме реального времени, отсутствие требований дополнительного места на диске… –  надо ли говорить, что я обожаю Фигму? Расскажу о некоторых особенностях работы с программой, которые, надеюсь, упростят вам жизнь.

Направляющие

В программе прекрасные инструменты выравнивания элементов (появляются они справа вверху во вкладке DESIGN при щелчке на нужную фигуру), создания различных сеток для фрейма (при щелчке на фрейм – справа во вкладке DESIGN пункт Layout grid), так еще и направляющие есть! Живут они во вкладке View →Show Rulers (Shift+R). Работают они точно таким же образом, как в фотошопе или иллюстраторе. Удобно, что можно применять направляющую только к одному фрейму или ко всем фреймам на рабочем поле. И кстати направляющие работают только с фреймами первого порядка, т.е. если вы захотите поместить фрейм с направляющими в другой фрейм, то у первого фрейма направляющие исчезнут.

направляющие в фигме

Режим прототипа

Классная штука, позволяющая передвигаться по страницам макета с заранее определенных элементов, что незаменимо при презентации работы.

Чтобы создать прототип перейдите во вкладку PROTOTYPE (с правой стороны) выбирайте начальную точку. Привязавшись к нужному фрейму/элементу на фрейме, тянем за голубой шарик (который превратится в стрелочку) на нужный нам переходный фрейм. Таких связей можно сделать множество. Просмотреть прототип можно нажав на кнопку проигрывания, рядом с голубой кнопкой Share.

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

Фишки и горячие клавиши Figma

Компоненты

Компоненты это, так скажем, сгруппированные вами объекты, которые поддаются общему изменению. Т.е. есть парочка элементов. Вы собираете это в компонент. Размножаете и, чтобы в дальнейшем избавиться от того, чтобы исправлять что-то в каждой паре элементов, просто вносите изменения в главный компонент. И все изменения коснутся и дочерних компонентов. Крутая штука. Подобное реализовано и в небезызвестной Axure.

figma

Удобно то, что каждый дочерний компонент можно редактировать, не задевая главный. Те изменения, которые вы внесете в единичный дочерний компонент будут уникальны и при изменении главного компонента никуда не денутся. Чтобы вернуть свойства главного компонента дочернему просто в контекстном меню выберите Reset Instance.

горячие клавиши фигма

Также компоненты можно группировать с другими компонентами, что, согласитесь, прекрасно.

Некоторые горячие клавиши

F – новый фрейм.

I – пипетка (color picker).

C – режим комментирования. Удобная штука, позволяющая ставить пометки в определенных местах макета. Позволяет комментирование от разных участников, если над проектом занята команда.

R – квадрат/прямоугольник.

L – линия.

O – круг/эллипс.

Ctrl+Shift+K – поместить изображение.

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

создание галереи в фигма

Ctrl + колесо мыши – масштабирование.

Shift+R – показать/спрятать линейку (и направляющие, если вы их вытянули).

P – перо (pen). Принцип работы такой же, как в других векторных программах.

T – текст.

Ctrl+G – сгруппировать объекты.

Ctrl+Shift+G –  разгруппировать объекты.

Ctrl+Z –  отмена последнего действия.

Ctrl+Y –  вернуть последнее действие.

Если хотим дублировать и передвинуть объект, то хватаем его и с зажатым Alt передвигаем. Если хотим, чтобы объект остался на траектории объекта-родителя, то еще прибавляем к клавишам Shift.

Надеюсь, фишки и горячие клавиши Figma вам пригодятся. Побывать на Figma.com

16 комментариев “Фишки и горячие клавиши Figma

    1. Рональд, на верхней панели при выборе измененного элемента в вашем компоненте станет активным значок в форме ромбика со стрелкой. Это-то и есть Reset Instance.

    1. Ctrl+Shift+4. Многие подсказки можно найти в самой программе, когда вы находитесь в проекте.Меню в Фигма горячие клавиши некоторых фукнций

  1. а вот как отменять действие? подскажите пожалуйста.
    и текст с Ворда переносить в программу

    1. Отмена стандартным Ctrl+Z, перенос текста можно совершить простым копированием Ctrl+C нужного абзаца на холст Фигмы Ctrl+V.

  2. Спасибо большое! Где только не смотрел, даже в видео-уроках «горячие клавиши Фигма», не нашёл.

  3. Есть на винде горячие клавиши для того чтобы скрывать все сетки (вместо того чтобы вечно лезть в правую панель и кликать по глазикам)? на маках встречалось, а для винды найти не могу

Оставить отзыв

Ваш email адрес будет скрыт, не волнуйтесь. Помеченные звездочкой поля обязательны к заполнению. *

*