Выделить элемент внутри группы
Figma позволяет выбирать элементы независимо от их вложенности (группы или фрейма), исходя только из их расположения по вертикали и горизонтали.
Чтобы выбрать объект, независимо от его вложенности, надо кликнуть на него с зажатой клавишей Command (или Cntrl для Windows).
Если вы зажмете Command и будете водить курсором по экрану, то Фигма будет подсвечивать элементы, которые будут выбраны по клику, также независимо от их вложенности.
Чтобы убрать всякое выделение, вы можете использовать клавишу Esc.
В помощь дизайнеру: горячие клавиши в Figma
У Figma есть все возможности для того, чтобы дизайнеры справлялись с работой максимально быстро и легко. Рассказываем, какие хоткеи есть и как их использовать.
Михаил Терентьев
Основатель Mailfit & Letteros
Горячие клавиши (hotkeys) — это комбинации клавиш, нажатие на которые позволяет выполнять различные действия в той или иной программе, не прибегая к её меню. Это быстро и просто.
В Figma горячие клавиши называются Keyboard Shortcuts, а посмотреть весь их список можно, нажав на знак вопроса в правом нижнем углу.
Или используйте для открытия списка сочетание горячих клавиш Ctrl + Shift + ?. Да, они могут пригодиться даже здесь.
Весь список горячих клавиш поделён на несколько групп. Расскажем о каждой по порядку.
Essential keyboard shortcuts
Essential keyboard shortcuts — это Основные клавиатурные сокращения.
Чтобы показать или скрыть Боковые панели, нажмите Ctrl + \ на Windows и ⌘ + \ на Mac.
Чтобы выбрать инструмент Пипетка, нажмите i на Windows и Ctrl + С на Mac.
Чтобы открыть Меню, нажмите Ctrl + / на Windows и ⌘ + / на Mac.
Tools
Tools — это Инструменты.
Чтобы выбрать стандартный инструмент выделения, нажмите V.
Чтобы выбрать инструмент для создания фреймов, нажмите F.
Чтобы выбрать Перо, нажмите P.
Чтобы выбрать Карандаш, нажмите Shift + P.
Чтобы выбрать Текст, нажмите T.
Чтобы выбрать Прямоугольник, нажмите R.
Чтобы выбрать Эллипс, нажмите O.
Чтобы выбрать Линию, нажмите L.
Чтобы выбрать Стрелку, нажмите Shift + L.
Чтобы добавить или показать комментарии, нажмите С.
Чтобы выбрать Пипетку, нажмите i на Windows и Ctrl + С на Mac.
Чтобы выбрать Нож, нажмите S.
View
Чтобы показать или скрыть Линейки, нажмите Shift + R.
Чтобы показать или скрыть Обводку всех элементов, нажмите Ctrl + Shift + 3 на Windows и ⌘ + Y на Mac.
Чтобы показать или скрыть Пиксельный просмотр, нажмите Ctrl + Alt + Y на Windows и Ctrl + P на Mac.
Чтобы показать или скрыть Сетку, нажмите Ctrl + Shift + 4 на Windows и Ctrl + G на Mac.
Чтобы показать или скрыть Пиксельную сетку, нажмите Ctrl + ‘ на Windows и ⌘ + ‘ на Mac.
Чтобы показать или скрыть Боковые панели, нажмите Ctrl + \ на Windows и ⌘ + \ на Mac.
Чтобы показать или скрыть Курсоры других пользователей, нажмите Ctrl + Alt + \ на Windows и Alt + ⌘ + \ на Mac.
Чтобы показать или скрыть Только слои, нажмите Alt + 1.
Чтобы показать или скрыть Только компоненты, нажмите Alt + 2.
Чтобы показать или скрыть Панель дизайна, нажмите Alt + 8.
Чтобы показать или скрыть Панель прототипа, нажмите Alt + 9.
Zoom
Zoom — это Приближение или Масштабирование.
Чтобы переместить Zoom по рабочему пространству, нажмите Space + drag.
Чтобы увеличить масштаб, нажмите +.
Чтобы уменьшить масштаб, нажмите —.
Чтобы включить отображение 1:1 к экрану, нажмите Shift + 0.
Чтобы масштабировать все рабочее пространство, нажмите Shift + 1.
Чтобы масштабировать выделенный элемент, нажмите Shift + 2.
Чтобы масштабировать предыдущий фрейм, нажмите Shift + N.
Чтобы масштабировать следующий фрейм, нажмите N.
Чтобы найти предыдущую страницу, нажмите Page Up.
Чтобы найти следующую страницу, нажмите Page Down.
Чтобы найти предыдущий фрейм, нажмите Home.
Чтобы найти следующий фрейм, нажмите End.
Text
Text — это Текст.
Чтобы выделить текст жирным, нажмите Ctrl + B на Windows и ⌘ + B на Mac.
Чтобы выделить текст курсивом, нажмите Ctrl + i и ⌘ + i на Mac.
Чтобы подчеркнуть текст, нажмите Ctrl + U и ⌘ + U на Mac.
Чтобы вставить и сопоставить элемент, нажмите Ctrl + Shift + V.
Чтобы выровнять текст по левому краю, нажмите Ctrl + Alt + L на Windows и ⌘ + Alt + L на Mac.
Чтобы выровнять текст по центру, нажмите Ctrl + Alt + T на Windows и ⌘ + Alt + T на Mac.
Чтобы выровнять текст по правому краю, нажмите Ctrl + Alt + R на Windows и ⌘ + Alt + R на Mac.
Чтобы выровнять текст по ширине, нажмите Ctrl + Alt + J на Windows и ⌘ + Alt + J на Mac.
Чтобы изменить размера текста, нажмите Ctrl + Shift + < и >на Windows и ⌘ + Shift + < и >на Mac.
Чтобы изменить расстояние между символами, нажмите Alt + .
Чтобы изменить расстояние между строками, нажмите Alt + Shift + .
Shape
Shape — это Векторные изображения.
Чтобы выбрать Перо, нажмите P.
Чтобы выбрать Карандаш, нажмите Shift + P.
Чтобы выбрать Заливку, нажмите B.
Чтобы удалить заливку, нажмите Alt + /.
Чтобы удалить обводку, нажмите /.
Чтобы поменять местами обводку и заливку, нажмите Shift + X.
Чтобы преобразовать в кривые, нажмите Ctrl + Shift + O на Windows и ⌘ + Shift + O на Mac.
Чтобы работать с точками векторных изображений, нажмите Ctrl + E на Windows и ⌘ + E на Mac.
Selection
Selection — это Выделение.
Чтобы выделить всё, нажмите Ctrl + A на Windows и ⌘ + A на Mac.
Чтобы выделить всё, кроме чего-либо, нажмите Ctrl + Shift + A на Windows и ⌘ + Shift + A на Mac.
Чтобы отменить выделение, нажмите Esc.
Чтобы выделить слои, которые находятся под другими слоями, нажмите Ctrl + click Windows и ⌘ + click на Mac.
Чтобы выделить слой на боковой панели, нажмите Ctrl + right click Windows и ⌘ + right click на Mac.
Чтобы выделить дочерний элемент, нажмите Enter.
Чтобы выделить родительский элемент, нажмите Shift + Enter.
Чтобы выделить следующий по порядку элемент, нажмите Tab.
Чтобы выделить предыдущий по порядку элемент, нажмите Shift + Tab.
Чтобы сгруппировать элементы, нажмите Ctrl + G на Windows и ⌘ + G на Mac.
Чтобы разгруппировать элементы, нажмите Ctrl + Shift + G на Windows и ⌘ + Shift + G на Mac.
Чтобы преобразовать в фрейм, нажмите Ctrl + Alt + G на Windows и ⌘ + Alt + G на Mac.
Чтобы показать или скрыть элемент, нажмите Ctrl + Shift + H на Windows и ⌘ + Shift + H на Mac.
Чтобы заблокировать или разблокировать элемент, нажмите Ctrl + Shift + L на Windows и ⌘ + Shift + L на Mac.
Cursor
Cursor — это Курсор.
Чтобы выделить элемент при клике, нажмите Alt.
Чтобы копировать элемент при движении, нажмите Alt.
Чтобы выделить слои, которые находятся под другими слоями, нажмите Ctrl + click на Windows и ⌘ + click на Mac.
Чтобы показать иерархию выделенного элемента, нажмите Ctrl + right click на Windows и ⌘ + right click на Mac.
Чтобы изменить размер относительно центра элемента, нажмите Alt.
Чтобы изменить размер пропорционально, нажмите Shift.
Чтобы переместить во время изменения размеров элемента, нажмите Ctrl на Windows и ⌘ на Mac.
Edit
Edit — это Редактирование.
Чтобы копировать, нажмите Ctrl + C на Windows и ⌘ + C на Mac.
Чтобы вырезать, нажмите Ctrl + X на Windows и ⌘ + X на Mac.
Чтобы вставить, нажмите Ctrl + V на Windows и ⌘ + V на Mac.
Чтобы вставить поверх выделенного элемента, нажмите Ctrl + Shift + V на Windows и ⌘ + Shift + V на Mac.
Чтобы создать копию, нажмите Ctrl + D на Windows и ⌘ + D на Mac.
Чтобы переименовать, нажмите Ctrl + R на Windows и ⌘ + R на Mac.
Чтобы экспортировать элемент, нажмите Ctrl + Shift + E на Windows и ⌘ + Shift + E на Mac.
Чтобы копировать свойства элемента, нажмите Ctrl + Alt + C на Windows и ⌘ + Alt + C на Mac.
Чтобы вставить скопированные свойства, нажмите Ctrl + Alt + V на Windows и ⌘ + Alt + V на Mac.
Transform
Transform — это Трансформирование.
Чтобы отразить по горизонтали, нажмите Shift + H.
Чтобы отразить по вертикали, нажмите Shift + V.
Чтобы создать маску, нажмите Ctrl + Alt + M на Windows и ⌘ + Alt + M на Mac.
Чтобы включить редактирование векторных объектов или изображений, нажмите Enter.
Чтобы вставить изображение, нажмите Ctrl + Shift + K на Windows и ⌘ + Shift + K на Mac.
Чтобы обрезать изображение, нажмите Alt + dbl-click.
Чтобы задать прозрачность элементу 10%, нажмите 1.
Чтобы задать прозрачность элементу 50%, нажмите 5.
Чтобы задать прозрачность элементу 100%, нажмите 0.
Arrange
Arrange — это Выравнивание.
Чтобы переместить на уровень ближе к переднему плану, нажмите Ctrl + ] на Windows и ⌘ + ] на Mac.
Чтобы переместить на уровень дальше от переднего плана, нажмите Ctrl + [ на Windows и ⌘ + [ на Mac.
Чтобы переместить на передний план, нажмите Ctrl + Shift + ] на Windows и ⌘ + Shift + ] на Mac.
Чтобы переместить на задний план, нажмите Ctrl + Shift + [ на Windows и ⌘ + Shift + [ на Mac.
Чтобы выровнять по левой стороне, нажмите Alt + A.
Чтобы выровнять по правой стороне, нажмите Alt + D.
Чтобы выровнять по верхней стороне, нажмите Alt + W.
Чтобы выровнять по нижней стороне, нажмите Alt + S.
Чтобы выровнять согласно горизонтальной линии элементов, нажмите Alt + H.
Чтобы выровнять согласно вертикальной линии элементов, нажмите Alt + V.
Чтобы выровнять с распределением горизонтального пространства, нажмите Ctrl + Shift + Alt + H на Windows и ⌘ + Shift + Alt + H на Mac.
Чтобы выровнять с распределением вертикального пространства, нажмите Ctrl + Shift + Alt + V на Windows и ⌘ + Shift + Alt + V на Mac.
Components
Components — это Компоненты.
Чтобы показать все компоненты, нажмите Alt + 2
Чтобы создать компонент, нажмите Ctrl + Alt + K на Windows и ⌘ + Alt + K на Mac.
Чтобы преобразовать компонент во фрейм, нажмите Ctrl + Alt + B на Windows и ⌘ + Alt + B на Mac.
Чтобы открыть многопользовательскую библиотеку, нажмите Ctrl + Alt + O на Windows и ⌘+ Alt + O на Mac.
Так выглядят горячие клавиши в Figma. Надеемся, вы запомните их и будете ими пользоваться. А пока запомнить их не получается, обращайтесь к этой статье — она вам поможет.
Подписывайтесь на ежемесячный дайджест Mailfit
Раз в месяц присылаем новости диджитала, последние кейсы, рассказываем про работу, собираем интересный и полезный контент в одном письме.
ПОЛУЧИЛОСЬ!
Скоро вы начнете получать нашу рассылку
Перемещение объектов, местозаполнителей и фигур на задний или передний план
Объекты размещаются на слайдах в том порядке, в котором они вставляются, при этом последний добавленный объект располагается сверху стопки. Команды На передний план и На задний план в контекстном меню (или на вкладке Главная) упрощают изменение порядка слоев.
Перемещение объекта
- Выберите объект.
- Щелкните правой кнопкой мыши и выберите нужные команды:
Направление Нужный параметр На передний план > Используйте параметр На передний план, чтобы переместить объект на верхний уровень стопки Используйте параметр Переместить вперед, чтобы переместить объект на один уровень вверх в стопке На задний план > Используйте параметр На задний план, чтобы переместить объект на нижний уровень стопки Используйте параметр Переместить назад, чтобы переместить объект на один уровень вниз в стопке
Использование области выделения для поиска или перемещения объектов
- Если объект скрыт за другими объектами, выберите Главная >Выделить >Область выделения.
- В области выделения перетаскивайте объекты, чтобы изменить их порядок.
Figma для разработчиков. Режим Dev Mode
Привет, я Миша, ux/ui-дизайнер в Noknok. Я встречал разработчиков, которые с Фигмой на «Вы». Сегодня я расскажу о функционале этого ресурса наглядно и простым языком.
3.4K показов
945 открытий
С последним обновлением в Фигму добавился режим разработчика Dev Mode. Статья поможет разобраться с базовым функционалом Фигмы и новым режимом, чтобы работать быстрее и эффективнее.
Как начать работать в режиме Dev Mode
1. Войдите в аккаунт Фигмы или зарегистрируйтесь.
2. Включите тумблер Dev Mode в правом верхнем углу.Теперь вы находитесь в режиме разработчика.
Мини-словарик для разработчика:
- Объект или блок — любой элемент в макете (это может быть инпут, кнопка, карточка);
- Компонент — элемент, вид которого фиксируется при создании; при изменении исходного компонента вид его копий меняется во всем проекте;
- Dev Mode — режим разработчика в Figma;
- Слои — содержимое блока: текст, иконки, кнопки;
- Фрейм (артборд) — рабочая область макета. Например, экран мобильного приложения — это фрейм.
- Страница — не путать с фреймом; это рабочая область, на которой размещен конкретный макет. Список страниц находится в левом меню Фигмы.
Горячие клавиши
Изучим базовый функционал для навигации по макету.
Управление зумом:
- Прокрутка колесика мыши — вертикальное перемещение по макету;
- Shift + прокрутка колесика мыши — горизонтальное перемещение по макету;
- CTRL + прокрутка колесика мыши — увеличение/уменьшение масштаба;
- Зажатие левой кнопки мыши (ЛКМ) — свободное перемещение.
Выделение объектов:
- Щелчок ЛКМ — выбор объекта;
- Двойной щелчок ЛКМ — проваливаемся глубже в объект;
- CTRL + щелчок ЛКМ — проваливаемся в самую глубь слоя;
- Зажатие SHIFT + щелчок ЛКМ по нескольким объектам — выделение этих объектов;
- Выделение объекта + зажатие ALT — проверка расстояния от выбранного блока до другого элемента, на который наведен курсор.
Работа в Dev Mode
1. Страницы показываются с меткой «Ready for dev». Страницы без метки можно посмотреть, нажав на кнопку «Show all pages».
2. На странице есть возможность отслеживать изменения макетов. Для этого:
2.1 Выбираем нужный фрейм и в правой панели нажимаем «Compare Changes».
2.2 Откроется модальное окно, в котором можно отследить изменения.
3. Слои будут в левом боковом меню снизу. При выделенном фрейме слои раскроются автоматически.
4. Inspect показывается в правом боковом меню. Изучим его возможности:
4.1 Dev Resources — прикрепление ссылки на документацию/файл разработки из GitHub или других сервисов. Нажмите «+» и вставьте ссылку.
4.2 Code — просмотр кода, сетки и значений на выбранном языке. Выберите нужный вам язык и смотрите данные. Есть возможность скопировать код.
4.3 При выделении компонента появится блок Component в правой панели меню.
4.3.1 Если кликнуть «Open in playground», откроется панель, в которой можно смотреть разные состояния компонента.
4.4 Colors показывает, какие цвета используются на выделенном элементе. Их можно скопировать нажатием на цвет.
4.5 Assets — это элементы, которые используются в выбранном блоке. Иконки можно скачать в выбранном формате. Компоненты можно изучить, нажав на раскрытую книжку.
4.6 Export — экспортирование объектов. Выделите объект или несколько объектов. Это может быть иконка, страница, блок, иллюстрация, изображение. Выберите формат файла, в котором хотите видеть экспортированный элемент, и нажмите «Export». Откроется стандартное окно с выбором папки, куда будет экспортирован элемент.