Содержание
Figma: команды и быстрые клавиши (HotKeys)
Figma: Термины и понятия
Fill (Фил) — заливка шейпа
Rectangle (Ректенгл) — прямоугольник
Shape (Шейп) — форма, фигура. какой-либо элемент в работе (круг, звезда, фото, прямоугольник и тд)
Frame (Фрейм/артборд/холст) — рабочая область проекта. грубо говоря — страница твоего сайта. законченная система в которой находятся все элементы страницы. Один из основных и важнейших элементов всей программы.
ВАЖНО!!! Фрейм может быть как страницей сайта, так и какой-то частью более крупного фрейма. например, футер сайта будет обернут во фрейм, карточка товара обернута во фрейм и тд.
Input (Инпут) — поле ввода какой-то информации(поиск, имя, пароль и тд)
Самые популярные и часто используемые горячие клавиши
ctrl+колесико мыши | приближение-отдаление раб. области |
Пробел + перетаскивание мышкой | “рука” перемещение по раб области |
v | Мув-тул. Самый главный инструмент. “стрелочка”, которой мы работаем. |
F | фрейм |
ctrl+g | обернуть выделенные объекты в группу |
ctrl+alt+g | обернуть выделенные объекты во фрейм |
R | прямоугольник (важно) |
O | овал |
T | текст (важно) |
ctrl+shift+4 | включить/выключить колонки(сетку) |
выделенный объект + alt | посмотреть расстояния от объекта |
выделенный объект+alt+перетаскивание | копирование объекта |
С | Просмотр комментариев |
ctrl+клик | Выбрать объект на который наведен курсор(если он не заблокирован в слоях) Применяется для выделения объектов, которые находятся глубоко в слоях/группах/фреймах и тд, |
ctrl+shift+g | разгруппировать группу или фрейм |
Зум. приближение-отдаление, перемещение
ctrl+колесико мыши | приближение-отдаление раб. области |
| приближение-отдаление раб. области |
shift +1 | показать всю раб область |
shift +2 | показать выделенный фрейм |
N | перейти на следующий фрейм |
Пробел +перетаскивание мышкой | “рука” перемещение по раб области |
Инструменты
v | Мув-тул. Самый главный инструмент. “стрелочка”, которой мы работаем. |
F | фрейм |
p | перо |
p+shift | карандаш |
L | линия |
R | прямоугольник (важно) |
O | овал |
T | текст (важно) |
I | пипетка |
K | Скейл тул. Изменение размеров элементов с сохранением пропорций. мув тул изменяет размеры без сохранения пропорций. |
L+shift | стрелка |
Вспомогательные команды
shift+r | включить/выключить линейки в раб области |
ctrl+shift+4 | включить/выключить колонки |
ctrl+с | копировать |
ctrl+v | вставить |
ctrl+d | сделать дубль (дубль появляется мгновенно поверх копируемого элемента) |
ctrl+alt+c | копировать свойства элемента (цвет, тени, обводку, для шрифта — размер, начертание и прочие возможные свойства элементов) |
ctrl+alt+v | вставить свойства элемента |
ctrl+r | переименовать слой |
ctrl+клик | Выбрать конкретный элемент в раб области |
shift+h | отразить объект по горизонтали |
shift+v | отразить объект по вертикали |
ctrl+[ | опустить слой на одно деление вниз |
ctrl+] | поднять слой на одно деление вверх |
ctrl+shift+[ | опустить слой на самый низ его группы/фрейма |
ctrl+shift+] | поднять слой на самый низ его группы/фрейма |
alt+l | Свернуть все слои |
Работа с изображениями в Figma
Файл с наборами иконок для Figma
Набор иконок 1.1
https://www.figma.com/file/OiYLjtjU1NNoVDDnJOanFW41/icons_white_background
Eva Icon
https://www.figma.com/file/ZCwzrNgAKSfUAX7jADLvTWzI/Eva-Icons
Social Icons
https://www.figma.com/file/GpR317IbGnSSuCOIkv5loF/Social-icons
Feather Icons
https://www.figma.com/file/AaMf5wFHNmI2CJSnPWUoK7/feather-icons-Copy
Material Icons Filled
https://www.figma.com/file/fzTaJ8r3qDzyD9SWlERBhV/Material-Icons-Filled-Copy
Material Icons Sharp
https://www.figma.com/file/g7VcwIKox58y7tqLG952f9/Material-Icons-Sharp-Copy
Brandand Social Icons
https://www.figma.com/file/MrSbJ17rQYrHuT4xUQk7NL/Brand-and-Social-Icons
Material design icons
https://www.figma.com/file/Qqmp4AukMRHGxnignWRfJb/material-design-icons-Copy
Font Awesome
https://www.figma.com/file/UxuYjn7Dc6RTiBeidr4aRwlr/Font-Awesome-5.1-Figma-Icon-Library
Работа с текстом в Figma
Где взять фотографии для вашего дизайна?