Начинаю изучать FIGMA

Дневник разработчика

Редактор Figma это нечто большее чем просто инструмент для создания макета сайта. Он позволяет работать над проектом совместно, целой командой, демонстрировать результаты работы клиенту, разрабатывать текстовые прототипы и многое многое другое.

Первое что тебе нужно осознать по поводу Figma, так это то что это облачный сервис. Он доступен тебе даже без установки программы на комп! Достаточно перейти на сайт в веб-браузере и продолжить свою работу над проектом.

Figma кроссплатформенная! Нет таких проблем, которые были с Фотошопом на Linux 🙂

Figma БЕСПЛАТНА! И это мега круто!

Очень популярное сравнение Figma и Google docs из за облака и бесплатного доступа к функционалу без каких либо ограничений.

Все проекты хранятся в облаке и доступ к ним осуществляется по прямой ссылке.

Прежде чем начать работу в Figma тебе по любому нужно зарегистрироваться и авторизоваться в программе. Иначе поработать не получится. Регистрация типовая и никакого сверх разума для этого не требуется.

Если ты хочешь работать из браузера и ни при каких обстоятельствах не готов устанавливать программу figma на свой комп, то тебе желательно скачать и установить расширение font-installer, что бы избежать частых проблем с подгрузкой веб-шрифтов во время работы с приложением через браузер.

Шорткаты: основной инструмент при разработке дизайна в figma

Чтобы в разы ускорить разработку — использование клавиатурных сокращений обязательно.

Найти все клавиатурные сокращения вы можете, нажав в левом нижнем углу на знак вопроса и, перейдя во вкладку “Keyboard Shortcuts”. Или вы можете использовать клавиатурное сокращение “Ctrl + Shift + ?”.Горячие клавиши Figma часть 1

Ниже я привел скриншоты с разделами, а также с переводом.

Вкладка №1 (Основные параметры)Горячие клавиши Figma часть 2
1 — Показать/Скрыть “Боковые панели”
2 — Инструмент “Пипетка”
3 — Поиск команд, опций в разделе “Меню”

Вкладка №2 (Инструменты)Горячие клавиши Figma часть 3

Столбец №1:1 — Стандартный инструмент выделения
2 — Инструмент создания фреймов
3 — Инструмент “Перо”
4 — Инструмент “Карандаш” (Как “Перо” только рисовать можно любые формы)

Столбец №2:1 — Инструмент “Текст”
2 — Инструмент “Прямоугольник”
3 — Инстурмент “Элипс”
4 — Инструмент “Линия”
5 — Инструмент “Стрелка”

Столбец №3:1 — Добавить или показать комментарии к текущему макету
2 — Инструмент “Пипетка”
3 — Инструмент “Нож” (Вырезает область в виде картинки)

Вкладка №3 (Просмотр):Горячие клавиши Figma часть 4

Столбец №1:1 — Показать/Скрыть “Линейки”
2 — Показать/Скрыть “Обводки всех элементов”
3 — Показать/Скрыть “Пиксельный просмотр”

Столбец №2:1 — Показать/Скрыть “Сетку”
2 — Показать/Скрыть “Пиксельную сетку”

Столбец №3:1 — Показать/Скрыть “Боковые панели”
2 — Показать/Скрыть “Курсоры других пользователей”
3 — Показать/Скрыть “Только слои”
4 — Показать/Скрыть “Только компоненты”
5 — Показать/Скрыть “Многопользовательская библиотека”

Вкладка №4 (Масштабирование):Горячие клавиши Figma часть 5

Столбец №1:1 — Перемещение по рабочему пространству
2 — Увеличение масштаба
3 — Уменьшение масштаба
4 — Включить отображение 1:1 к экрану

Столбец №2:1 — Масштабировать все рабочее пространство
2 — Масштабировать выделенный элемент
3 — Масштабировать предыдущий фрейм
4 — Масштабировать следующий фрейм

Столбец №3:1 — Предыдущая страница
2 — Следующая страница
3 — Предыдущий фрейм
4 — Следующий фрейм

Вкладка №5 (Инструмент “Текст”):Горячие клавиши Figma часть 6

Столбец №1:1 — Выделить жирным
2 — Выделить курсивом
3 — Подчеркнуть
4 — Вставить и сопоставить элемент

Столбец №2:1 — Выровнять текст по левому краю
2 — Выровнять текст по центру
3 — Выровнять текст по правому краю
4 — Выровнять текст по ширине

Столбец №3:1 — Изменение размера текста
2 — Изменение расстояния между символами
3 — Изменение расстояния между строками

Вкладка №6 (Векторные изображения):Горячие клавиши Figma часть 7

Столбец №1:1 — Перо
2 — Карандаш
3 — Заливка

Столбец №2:1 — Удалить заливку
2 — Удалить обводку
3 — Поменять местами обводку и заливку
4 — Преобразовать в кривые
5 — Также преобразование в кривые (но функция отличается, я ей не пользуюсь)

Столбец №3:

Работа с точками векторных изображений (Эти функции я не использую)

Вкладка №7 (Выделение):

Горячие клавиши Figma часть 8

Столбец №1:1 — Выделить все
2 — Выделить все, кроме…
3 — Отменить выделение
4 — Выделение слоев, которые находятся под другими слоями
5 — Выделение слоя на боковой панели

Столбец №2:1 — Выделить дочерний элемент
2 — Выделить родительский элемент
3 — Выделить следующий по порядку элемент
4 — Выделить предыдущий по порядку элемент

Столбец №3:1 — Сгруппировать элементы
2 — Разгруппировать элементы
3 — Преобразовать в фрейм
4 — Показать/Скрыть элемент
5 — Заблокировать/Разблокировать элемент

Вкладка №8 (Курсор):

Горячие клавиши Figma часть 9

Столбец №1:1 — Выделение элемент при клике
2 — Копирование элемент при движении

Столбец №2:1 — Выделение слоев, которые находятся под другими слоями
2 — Показывается иерархия выделенного элемента

Столбец №3:1 — Изменение размера относительно центра элемента
2 — Изменение размер пропорционально
3 — Перемещение во время изменения размеров элемента

Вкладка №9 (Редактирование):Горячие клавиши Figma часть 10

Столбец №1:1 — Копировать
2 — Вырезать
3 — Вставить
4 — Вставить поверх выделенного элемента

Столбец №2:1 — Создание копии
2 — Переименование
3 — Экспорт элемента

Столбец №3:1 — Копировать свойства элемента
2 — Вставить скопированные свойства

Вкладка №10 (Трансформирование):Горячие клавиши Figma часть 11

Столбец №1:1 — Отразить по горизонтали
2 — Отразить по вертикали
3 — Создать маску

Столбец №2:1 — Включить редактирование векторных объектов или изображений
2 — Вставить изображение
3 — Обрезать изображение

Столбец №3:1 — Задать прозрачность элементу — 10%
2 — 50%
3 — 100%

Вкладка №11 (Выравнивание):Горячие клавиши Figma часть 12

Столбец №1:1 — Переместить на 1 уровень ближе к переднему плану
2 — Переместить на 1 уровень дальше от переднего плана
3 — Переместить на передний план
4 — Переместить на задний план

Столбец №2:1 — Выровнять по левой стороне
2 — Выровнять по правой стороне
3 — Выровнять по верхней стороне
4 — Выровнять по нижней стороне

Столбец №3:1 — Выровнять согласно горизонтальной линии элементов
2 — Выровнять согласно вертикальной линии элементов
3 — Не пользуюсь функцией
4 — Выравнивание с распределением горизонтального пространства
5 — Выравнивание с распределением вертикального пространства

Вкладка №12 (Компоненты):Горячие клавиши Figma часть 13
1 — Показать все компоненты
2 — Создать компонент
3 — Преобразовать компонент в фрейм
4 — Многопользовательская библиотека

Также очень важный вопрос: как отменить действие в фигма? Для того чтобы отменить действие в Figma — нужно всего лишь нажать клавиатурное сокращение «Ctrl + Z». И в зависимости от количества нажатий, вы отмените предыдущие действия.

Юрий Ронин