Hobo
Есть одна очень интересная программа со смешным названием Figma. Она используется для создания и дизайна веб-сайтов, мобильных приложений, интерфейсов и других элементов веб-дизайна. Позволяет создавать прототипы, делиться проектами с другими пользователями и работать в команде над одним проектом.
Среди инструментов и функций Figma для работы с веб-дизайном можно выделить следующие:
- Векторные инструменты для создания форм, линий и других элементов интерфейса.
- Библиотеки компонентов для быстрого создания интерфейсов.
- Возможность создания интерактивных прототипов.
- Различные эффекты и стили для элементов интерфейса.
- Возможность работы с несколькими страницами и артбордами в одном проекте.
- Встроенная система комментариев и обратной связи для удобной работы в команде.
В Figma есть такой полезный инструмент, как горячие клавиши. Они предназначены для упрощения и ускорения работы с программой. Позволяют быстро выполнять часто используемые команды без необходимости использования мыши.
Чтобы настроить горячие клавиши в Figma, нужно выполнить следующие шаги:
- Открыть меню «Настройки» (Settings) в правом верхнем углу экрана.
- Выбрать вкладку «Клавиши» (Keyboard Shortcuts).
- Найти нужную команду в списке и нажать на нее.
- Нажать клавишу, которую вы хотите назначить для этой команды.
- Сохранить изменения.
Приведу примеры горячих клавиш для Figma на Mac и Windows.
Горячие клавиши Mac
Таблица 1: Основные
| Действие | Комбинация |
|---|---|
| Открыть меню | ⌘ + / |
| Закрыть текущий файл | ⌘ + W |
| Сохранить как .fig файл | ⌘ + ⇧ + S |
| Отменить действие | ⌘ + Z |
| Повторить действие | ⌘ + ⇧ + Z |
Таблица 2: Инструменты
| Действие | Комбинация |
|---|---|
| Инструмент «Перемещение» | V |
| Инструмент «Рамка» (Frame) | F |
| Инструмент «Макет» (Layout) | A |
| Инструмент «Перо» | P |
| Инструмент «Карандаш» | ⇧ + P |
Таблица 3: Просмотр
| Действие | Комбинация |
|---|---|
| Показать/Скрыть интерфейс | ⌘ + . |
| Показать/Скрыть боковые панели | ⌘ + \ |
| Показать/Скрыть панель слоёв | ⌘ + 1 |
| Показать/Скрыть панель ресурсов | ⌘ + 2 |
| Показать/Скрыть панель свойств | ⌘ + 3 |
Таблица 4: Масштабирование
| Действие | Комбинация |
|---|---|
| Увеличить масштаб | ⌘ + + |
| Уменьшить масштаб | ⌘ + — |
| Масштаб 100% | ⌘ + 0 |
| Масштабировать до выделенного объекта | ⌘ + 2 |
| Масштабировать до ширины экрана | ⌘ + 1 |
Таблица 5: Инструмент «Текст»
| Действие | Комбинация |
|---|---|
| Выбрать инструмент «Текст» | T |
| Жирный шрифт | ⌘ + B |
| Курсив | ⌘ + I |
| Подчеркнуть текст | ⌘ + U |
| Создать текстовый слой | T |
Таблица 6: Инструмент «Фигура»
| Действие | Комбинация |
|---|---|
| Прямоугольник | R |
| Линия | L |
| Эллипс | O |
| Многоугольник | ⇧ + O |
| Звезда | ⇧ + * |
Таблица 7: Выделение
| Действие | Комбинация |
|---|---|
| Выделить все | ⌘ + A |
| Инвертированное выделение | ⌘ + ⇧ + A |
| Отменить выделение | Esc |
| Сквозной выбор элемента | ⌘ + клик |
| Посмотреть иерархию слоя | ⌘ + прав. клик |
| Выбрать дочерний элемент | Enter |
| Выбрать родительский элемент | |
| Выбрать след. элемент в панеле слоев | Tab |
| Выбрать пред. элемент в панеле слоев | ⇧ + Tab |
| Сгруппировать элементы | ⌘ + G |
| Разгруппировать элементы | ⌘ + ⇧ + G |
| Сгруппировать во фрейм | ⌘ + ⌥ + G |
| Показать / Скрыть выбранные элементы | ⌘ + ⇧ + H |
| Заблокировать / Разблокировать элементы | ⌘ + ⇧ + L |
Таблица 8: Курсор
| Действие | Комбинация |
|---|---|
| Посмотреть отступы (при наведении на элементы курсор неподвижен) | ⌥ |
| Создать копию (при движении курсора) | |
| Сквозной выбор элемента | ⌘ + клик |
| Посмотреть иерархию слоя | ⌘ + прав. клик |
| Изменение размера относительно центра фигуры | |
| Пропорциональное изменение размеров | |
| Игнорирование позиционирования (только при работе с фреймами) | ⌘ |
Таблица 9: Редактирование
| Действие | Комбинация |
|---|---|
| Копировать | ⌘ + C |
| Вырезать | ⌘ + X |
| Вставить | ⌘ + V |
| Вставить, чтобы заменить элемент | ⌥ + ⌘ + ⇧ + V |
| Вставить поверх выбранных элементов | ⌘ + ⇧ + V |
| Создать копию объекта | ⌘ + D |
| Переменовать слой | ⌘ + ⇧ + R |
| Открыть меню экспорта | ⌘ + ⇧ + E |
| Копировать свойства объекта | ⌘ + ⌥ + C |
| Вставить скопированные свойства | ⌘ + ⌥ + V |
| Перевод элементов в PNG и копирование картинки в буфер обмена | ⌘ + ⇧ + C |
Таблица 10: Трансформация элементов
| Действие | Комбинация |
|---|---|
| Отразить по горизонтали | ⇧ + H |
| Отразить по вертикали | ⇧ + V |
| Создать маску | ⌃ + ⌘ + M |
| Открытие режима редактирования изображения или векторного объекта | Enter |
| Поместить изображение | ⌘ + ⇧ + K |
| Установить прозрачность 0% | 0 + 0 |
| Установить прозрачность 10% | 1 |
| Установить прозрачность 50% | 5 |
| Установить прозрачность 100% | 0 |
Таблица 11: Выравнивание
| Действие | Комбинация |
|---|---|
| Переместить слой на передний план | ⌘ + ] |
| Переместить слой на задний план | ⌘ + [ |
| Переместить слой выше по иерархии | ] |
| Переместить слой ниже по иерархии | [ |
| Выровнять по левому / правому краю | ⌥ + A или D |
| Выровнять по верхнему / нижнему краю | ⌥ + W или S |
| Выровнять по гориз. / вертик. центру | ⌥ + H или V |
| Распределить гориз. / вертик. пространство между элементами | ⌃ + ⌥ + H или V |
| «Приведение в порядок» по мнению Figma | ⌃ + ⌥ + T |
| Создать auto layout | ⇧ + A |
| Убрать auto layout | ⌥ + ⇧ + A |
Таблица 12: Работа с компонентами
| Действие | Комбинация |
|---|---|
| Показать библиотеку компонентов в проекте | ⌥ + 2 |
| Открыть командную библиотеку компонентов | ⌘ + ⌥ + O |
| Создать компонент | ⌘ + ⌥ + K |
| Отменить привязку компонента | ⌘ + ⌥ + B |
| Вставить компонент из библиотеки компонентов проекта | ⇧ + I |
| Поменять компоненты при размещении из библиотеки компонентов проекта | ⌥ |
Горячие клавиши Windows
Таблица 1: Основные
| Действие | Комбинация |
|---|---|
| Показать/Скрыть боковые панели | Ctrl + \ |
| Инструмент «Пипетка» | I |
| Быстрый поиск команд | Ctrl + / |
Таблица 2: Инструменты
| Действие | Комбинация |
|---|---|
| Стандартный инструмент выделения | V |
| Инструмент создания фреймов | F |
| Инструмент «Перо» | P |
| Инструмент «Карандаш» | Shift + P |
| Инструмент «Текст» | T |
| Инструмент «Прямоугольник» | R |
| Инструмент «Эллипс» | O |
| Инструмент «Линия» | L |
| Инструмент «Стрелка» | Shift + L |
| Добавить или показать комментарии к текущему макету | C |
| Инструмент «Пипетка» | I |
| Инструмент «Нож» (Вырезать область в виде картинки) |
Таблица 3: Просмотр
| Действие | Комбинация |
|---|---|
| Показать/Скрыть боковые панели | Ctrl + \ |
| Показать/Скрыть курсоры других людей | Ctrl + Alt + \ |
| Показать/Скрыть линейки | Shift + R |
| Показать/Скрыть обводки всех элементов | Shift + 0 |
| Показать/Скрыть пиксельный просмотр | Ctrl + Alt + P |
| Показать/Скрыть сетку | Shift + G |
| Показать/Скрыть пиксельную сетку | Shift + ‘ |
| Открыть панель слоёв | Alt + 1 |
| Открыть библиотеку компонентов | Alt + 2 |
| Открыть вкладку Design | Alt + 8 |
| Открыть вкладку Prototype | Alt + 9 |
| Открыть вкладку Inspect | Alt + 0 |
Таблица 4: Масштабирование
| Действие | Комбинация |
|---|---|
| Перемещение по рабочему пространству | Space + мышь |
| Увеличение масштаба | Ctrl + + |
| Уменьшение масштаба | Ctrl + — |
| Включить отображение 1:1 к экрану | Ctrl + 0 |
| Масштабировать предыдущий фрейм | Shift + N |
| Масштабировать следующий фрейм | N |
| Предыдущая страница | Page Up |
| Следующая страница | Page Down |
| Предыдущий фрейм | Home |
| Следующий фрейм | End |
Таблица 5: Инструмент «Текст»
| Действие | Комбинация |
|---|---|
| Выделить жирным или курсивом | Ctrl + B или I |
| Подчеркнуть текст | Ctrl + U |
| Создать ссылку из текста | Ctrl + K |
| Зачеркнуть текст | Ctrl + Shift + X |
| Создать список (нумерованный и ненумерованный) | Ctrl + Shift + 7 или 8 |
| Выровнять по левому краю | Ctrl + Alt + L |
| Выровнять по центру | Ctrl + Alt + T |
| Выровнять по правому краю | Ctrl + Alt + R |
| Выровнять по ширине | Ctrl + Alt + J |
| Увеличить или уменьшить размер | Ctrl + Shift + < или > |
| Увеличить или уменьшить начертание | Ctrl + Alt + < или > |
| Увеличить или уменьшить межбуквенное расстояние | Alt + < или > |
| Увеличить или уменьшить межстрочное расстояние | Alt + Shift + < или > |
Таблица 6: Инструмент «Фигура»
| Действие | Комбинация |
|---|---|
| Инструмент «Перо» | P |
| Инструмент «Карандаш» | Shift + P |
| Залить / Убрать заливку фигуры | B |
| Убрать заливку | Alt + / |
| Убрать обводку | Shift + / |
| Поменять заливку и обводку местами | Shift + X |
| Преобразовать в кривые | Ctrl + Shift + O |
| Преобразовать в векторную фигуру | Ctrl + E |
| Добавить в выборку точки | Ctrl + J |
| Удалить выборку точек | Shift + Backspace |
Таблица 7: Выделение
| Действие | Комбинация |
|---|---|
| Выделить все | Ctrl + A |
| Инвертированное выделение | Ctrl + Shift + A |
| Отменить выделение | Esc |
| Сквозной выбор элемента | Ctrl + Клик |
| Посмотреть иерархию слоя | Ctrl + прав. Клик |
| Выбрать дочерний элемент | Enter |
| Выбрать родительский элемент | |
| Выбрать след. элемент в панеле слоев | Tab |
| Выбрать пред. элемент в панеле слоев | Shift + Tab |
| Сгруппировать элементы | Ctrl + G |
| Разгруппировать элементы | Ctrl + Shift + G |
| Сгруппировать во фрейм | Ctrl + Alt + G |
| Показать / Скрыть выбранные элементы | Ctrl + Shift + H |
| Заблокировать / Разблокировать элементы | Ctrl + Shift + L |
Таблица 8: Курсор
| Действие | Комбинация |
|---|---|
| Посмотреть отступы (при наведении на элементы курсор неподвижен) | Alt |
| Создать копию (при движении курсора) | Alt |
| Сквозной выбор элемента | Ctrl + Клик |
| Посмотреть иерархию слоя | Ctrl + прав. Клик |
| Изменение размера относительно центра фигуры | Alt |
| Пропорциональное изменение размеров | Shift |
| Игнорирование позиционирования (только при работе с фреймами) | Ctrl |
Таблица 9: Редактирование
| Действие | Комбинация |
|---|---|
| Копировать | Ctrl + C |
| Вырезать | Ctrl + X |
| Вставить | Ctrl + V |
| Вставить, чтобы заменить элемент | Ctrl + Shift + R |
| Вставить поверх выбранных элементов | Ctrl + Shift + V |
| Создать копию объекта | Ctrl + D |
| Переименовать слой | Ctrl + R |
| Открыть меню экспорта | Ctrl + Shift + E |
| Копировать свойства объекта | Ctrl + Alt + C |
| Вставить скопированные свойства | Ctrl + Alt + V |
| Перевод элементов в PNG и копирование картинки в буфер обмена | Ctrl + Shift + C |
Таблица 10: Трансформация элементов
| Действие | Комбинация |
|---|---|
| Отразить по горизонтали | Shift + H |
| Отразить по вертикали | Shift + V |
| Создать маску | Ctrl + Alt + M |
| Открытие режима редактирования изображения или векторного объекта | Enter |
| Поместить изображение | Ctrl + Shift + K |
| Установить прозрачность 0% | 0 + 0 |
| Установить прозрачность 10% | 1 |
| Установить прозрачность 50% | 5 |
| Установить прозрачность 100% | 0 |
Таблица 11: Выравнивание
| Действие | Комбинация |
|---|---|
| Переместить слой на передний план | Ctrl + ] |
| Переместить слой на задний план | Ctrl + [ |
| Переместить слой выше по иерархии | |
| Переместить слой ниже по иерархии | |
| Выровнять по левому / правому краю | Alt + A или D |
| Выровнять по верхнему / нижнему краю | Alt + W или S |
| Выровнять по гориз. / вертик. центру | Alt + H или V |
| Распределить гориз. / вертик. пространство между элементами | Alt + Shift + H или V |
| «Приведение в порядок» по мнению Figma | Ctrl + Alt + Shift + T |
| Создать auto layout | Shift + A |
| Убрать auto layout | Alt + Shift + A |
Таблица 12: Работа с компонентами
| Действие | Комбинация |
|---|---|
| Показать библиотеку компонентов в проекте | Alt + 2 |
| Открыть командную библиотеку компонентов | Ctrl + Alt + O |
| Создать компонент | Ctrl + Alt + K |
| Отменить привязку компонента | Ctrl + Alt + B |
| Вставить компонент из библиотеки компонентов проекта | Shift + I |
| Поменять компоненты при размещении из библиотеки компонентов проекта | Alt |
Всем WEB!
Если материал оказался полезен и помог решить проблему, можете поддержать автора, направив камеру смартфона на QR-код.
