Видеоурок

Роман Одуванов

Время чтения 6 минут

1. Начало работы

Для комфортной работы рекомендуется использовать десктопную версию Figma — она работает быстрее и удобнее браузерной.

После регистрации доступны три типа файлов:

• Design — создание интерфейсов и любых макетов.
• FigJam — доски для совместной работы, заметок и схем.
• Slides — инструмент для создания презентаций.

Для большинства дизайнерских задач используется именно Design.

2. Навигация

Быстрая навигация значительно ускоряет работу.

Основные действия:

• перемещение по холсту — пробел + мышь;
• масштабирование — Ctrl + колесо мыши;
• использование горячих клавиш вместо поиска инструментов.

Чем раньше привыкнуть к горячим клавишам, тем быстрее станет работа.

3. Move и Scale

Хотя оба инструмента меняют размер объектов, работают они по-разному.

Move (V) используется для:

• выделения;
• перемещения;
• обычного изменения размеров.

Scale (K) нужен, когда необходимо масштабировать объект полностью, сохраняя пропорции текста, обводок и эффектов.

4. Фреймы — основа любого макета

Фрейм — это рабочая область, внутри которой создается дизайн.

Он помогает:

• задавать размеры будущего макета;
• организовывать элементы;
• скрывать объекты за пределами рабочей области;
• готовить дизайн к экспорту.

Практически любой проект в Figma начинается именно с создания фрейма.

5. Слои и группы

Любой дизайн состоит из слоев.

Важно:

• давать слоям понятные названия;
• соблюдать порядок расположения;
• объединять связанные элементы в группы.

Хорошо организованный файл проще редактировать как самому дизайнеру, так и другим участникам команды.

6. Работа с цветом

Figma поддерживает несколько способов выбора цвета:

• HEX;
• RGB;
• палитры;
• пипетку.

Также доступны различные типы градиентов:

• линейный;
• радиальный;
• угловой.

Для коммерческих проектов важно использовать фирменные цвета бренда и сохранять их консистентность.

7. Автолейаут

Автолейаут — один из самых важных инструментов Figma.

Он автоматически:

• подстраивает размер контейнера;
• сохраняет одинаковые отступы;
• адаптирует блок при изменении текста;
• упрощает создание повторяющихся элементов.

Использование автолейаутов делает макеты более гибкими и значительно сокращает количество ручной работы.

8. Эффекты

Figma позволяет быстро добавлять визуальную глубину с помощью эффектов.

Основные из них:

• Drop Shadow — внешняя тень;
• Inner Shadow — внутренняя тень;
• Layer Blur — размытие слоя;
• Background Blur — размытие фона.

Эффекты помогают создавать акценты, объем и современные стеклянные интерфейсы.

9. Режимы наложения

Режимы наложения изменяют способ взаимодействия цветов и изображений между собой.

Они используются для:

• создания световых эффектов;
• наложения текстур;
• работы с освещением;
• получения более сложных визуальных решений.

Даже простые фигуры могут выглядеть значительно интереснее при грамотном использовании режимов наложения.

Для тех, кто хочет участвовать в создании дизайн-библиотеки лично!