Основы работы в Figma: от новичка до профи

Знакомство с интерфейсом: настройка рабочей среды, фреймы и базовые фигуры

Добро пожаловать в курс «Основы работы в Figma: от новичка до профи»! Это первая статья, и она станет фундаментом для всех ваших будущих дизайн-проектов. Figma перевернула индустрию дизайна интерфейсов благодаря своей доступности, облачной структуре и возможности работать в команде в реальном времени.

Сегодня мы не будем рисовать сложные интерфейсы мобильных приложений или веб-сайтов. Наша цель — перестать бояться чистого листа, разобраться, где находятся нужные инструменты, и научиться создавать простейшие объекты.

Подготовка к работе: Браузер или Приложение?

Прелесть Figma в том, что она работает прямо в браузере. Вам не обязательно иметь мощный компьютер или устанавливать тяжелый софт. Однако для постоянной работы я настоятельно рекомендую скачать Desktop App (настольное приложение).

Почему приложение лучше:

Поддержка шрифтов: Приложение имеет доступ к локальным шрифтам на вашем компьютере без установки дополнительных агентов.

Производительность: Приложение часто работает стабильнее при больших нагрузках.

Вкладки: Удобная навигация между разными файлами проектов внутри одного окна.

После регистрации и входа в систему вы попадаете в File Browser (файловый менеджер). Чтобы начать, нажмите на кнопку New design file (синяя кнопка, обычно справа вверху или на плитке «Design file»).

Анатомия интерфейса Figma

Когда вы открываете новый файл, перед вами предстает рабочее пространство. На первый взгляд оно может показаться пустым, но здесь скрыт огромный функционал. Интерфейс Figma делится на четыре основные зоны.

!Схема интерфейса Figma: Панель инструментов, Панель слоев, Панель свойств и Холст.

1. Холст (Canvas)

Это бесконечное серое пространство в центре экрана. Здесь происходит вся магия. Вы можете размещать свои макеты в любом месте холста. В отличие от Photoshop, где рабочая область часто ограничена, в Figma вы можете хранить сотни экранов в одном файле, просто располагая их рядом.

2. Панель инструментов (Toolbar)

Находится в самом верху экрана. Здесь живут ваши главные инструменты:

Move (V): Курсор для выделения и перемещения объектов.

Region Tools (F): Инструменты для создания фреймов (об этом ниже).

Shape Tools: Геометрические фигуры (квадраты, круги, линии).

Pen/Pencil (P): Векторное перо для рисования сложных форм.

Text (T): Инструмент для добавления текста.

Hand Tool (H): «Рука» для перемещения по холсту без выделения объектов.

В центре верхней панели отображается название вашего файла (по умолчанию «Untitled»). Нажмите на него, чтобы переименовать.

3. Левая боковая панель (Layers & Assets)

Эта панель отвечает за структуру вашего файла.

Вкладка Layers (Слои): Здесь отображается иерархия всех объектов на холсте. Если вы нарисовали квадрат, он появится здесь. Если квадрат лежит внутри фрейма, он будет отображен как вложенный элемент.

Вкладка Assets (Ассеты): Здесь хранятся ваши компоненты (кнопки, иконки), которые можно переиспользовать. Пока мы её касаться не будем.

Pages (Страницы): В верхней части этой панели можно создавать отдельные страницы внутри одного файла (например, «Черновики», «Дизайн», «Архив»).

4. Правая боковая панель (Properties Panel)

Это «пульт управления» выбранным объектом. Содержимое этой панели меняется в зависимости от того, что вы выделили.

Design: Настройка внешнего вида (размер, цвет, обводка, тени).

Prototype: Настройка переходов и анимации.

Inspect (или Dev Mode): Информация для разработчиков (код CSS, отступы).

Фрейм: Главный строительный блок

Многие новички, приходящие из графических редакторов, по привычке начинают рисовать прямоугольники, чтобы обозначить границы экрана телефона или сайта. В Figma для этого существует специальная сущность — Frame (Фрейм).

Фрейм — это не просто прямоугольник. Это контейнер, который может содержать в себе другие объекты. Фрейм — это аналог артборда (Artboard) в Illustrator или Photoshop, но гораздо мощнее. Фреймы могут быть вложены друг в друга (например, фрейм «Кнопка» внутри фрейма «Карточка товара», который лежит внутри фрейма «Экран iPhone»).

Как создать фрейм?

Выберите инструмент Frame в верхней панели или нажмите горячую клавишу F (или A).

Обратите внимание на правую панель. Там появился список пресетов (готовых размеров).

Выберите, например, iPhone 14 или Desktop. Figma автоматически создаст фрейм нужного размера на холсте.

!Создание фрейма и выбор готового пресета устройства.

Вы также можете нарисовать фрейм произвольного размера, просто зажав левую кнопку мыши и потянув курсор на холсте.

Базовые фигуры: Рисуем первые объекты

Теперь, когда у нас есть «лист бумаги» (наш фрейм), давайте что-нибудь на нем нарисуем. Инструменты фигур находятся в выпадающем меню рядом с фреймом (иконка квадрата) или вызываются горячими клавишами.

Основные фигуры и их клавиши:

Rectangle (Прямоугольник): Клавиша R.

Ellipse (Эллипс/Круг): Клавиша O.

Line (Линия): Клавиша L.

Arrow (Стрелка): Клавиша Shift + L.

Правила рисования:

Нажмите клавишу (например, R).

Кликните и потяните курсор внутри фрейма.

Важный нюанс: Если вы хотите нарисовать идеальный квадрат или идеальный круг, удерживайте клавишу Shift во время рисования. Это сохраняет пропорции 1:1.

Если вы хотите рисовать фигуру от центра (а не от угла), удерживайте клавишу Alt (или Option на Mac).

> Совет: Привыкайте использовать горячие клавиши (F, R, O, T) с самого первого дня. Это ускорит вашу работу в 3-4 раза по сравнению с постоянным кликаньем мышкой в меню.

Настройка свойств объектов

Нарисуйте прямоугольник и выделите его. Посмотрите на правую панель (Design). Давайте разберем основные настройки сверху вниз.

1. Выравнивание (Alignment)

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

2. Координаты и размеры

Ниже вы увидите поля с цифрами:

X и Y: Положение объекта относительно левого верхнего угла фрейма.

W (Width): Ширина.

H (Height): Высота.

Угол поворота: Иконка угла (по умолчанию 0°).

Скругление углов (Corner Radius): Иконка дуги. Введите туда значение, например, 20, чтобы сделать углы мягкими.

3. Заливка (Fill)

Секция Fill отвечает за цвет фигуры.

Нажмите на цветной квадрат, чтобы открыть палитру (Color Picker).

Вы можете выбрать сплошной цвет (Solid), градиент (Linear/Radial) или даже вставить изображение (Image) вместо цвета.

Справа от кода цвета есть процент непрозрачности (по умолчанию 100%).

4. Обводка (Stroke)

Секция Stroke добавляет контур фигуре.

Нажмите +, чтобы добавить обводку.

Вы можете настроить толщину линии (число рядом с иконкой полос), цвет и положение (Inside — внутри, Outside — снаружи, Center — по центру).

5. Эффекты (Effects)

Здесь можно добавить тень (Drop Shadow), внутреннюю тень (Inner Shadow) или размытие (Layer Blur).

!Структура панели свойств: от выравнивания до эффектов.

Навигация по холсту

Последнее, но не менее важное — как не потеряться в бесконечном пространстве.

Масштабирование (Zoom):

- Удерживайте Ctrl (или Cmd на Mac) и крутите колесико мыши. - Или используйте клавиши + и -. - Shift + 1 покажет все ваши макеты на одном экране (Fit to screen). - Shift + 2 приблизит камеру к конкретному выделенному объекту.

Перемещение (Pan):

- Самый удобный способ: зажмите Пробел (Space). Ваш курсор превратится в «руку». Теперь вы можете кликнуть и перетаскивать холст в любую сторону, не сдвигая объекты. - Это работает даже если у вас выбран другой инструмент (например, вы рисуете прямоугольник).

Заключение

Поздравляю! Вы сделали первый шаг. Теперь вы знаете, как устроен интерфейс Figma, чем фрейм отличается от прямоугольника, и как управлять свойствами объектов.

В следующей статье мы углубимся в работу с текстом и типографикой, а также узнаем, почему «Auto Layout» — это лучшая функция в Figma. А пока — попробуйте выполнить домашнее задание, чтобы закрепить материал.

Работа с контентом: типографика, цветовые стили и векторное редактирование

В предыдущем уроке мы научились создавать фреймы и рисовать простые геометрические фигуры. Но дизайн — это не просто набор серых квадратов. Дизайн — это коммуникация. А коммуникация невозможна без текста, цвета и уникальных форм.

В этой статье мы вдохнем жизнь в наши макеты. Мы разберем, как профессионально работать с текстом, почему нельзя просто так выбирать цвета из палитры (спойлер: нужны стили) и как создавать сложные иконки из простых фигур.

Типографика: Голос вашего интерфейса

Текст составляет около 90% контента в вебе и мобильных приложениях. Умение работать с типографикой — это половина успеха дизайнера. В Figma инструмент текста реализован очень мощно, но при этом интуитивно.

Создание текстового слоя

Чтобы добавить текст, выберите инструмент Text на верхней панели или нажмите горячую клавишу T.

Существует два способа создания текстового блока, и они кардинально отличаются по поведению:

Клик (Click): Если вы просто кликнете по холсту и начнете печатать, создастся текстовый слой с Auto Width (Автоширина). Блок будет растягиваться вправо бесконечно, пока вы не нажмете Enter для переноса строки. Это идеально подходит для заголовков и коротких надписей.

Тяни и бросай (Drag & Drop): Если вы зажмете кнопку мыши и потянете курсор, вы создадите текстовый контейнер фиксированного размера (Fixed Size). Текст, дойдя до границы контейнера, будет автоматически переноситься на новую строку. Это используется для абзацев и длинных описаний.

!Визуализация различий поведения текстовых блоков при наборе текста.

Настройка свойств текста

Выделите текстовый слой и посмотрите на правую панель свойств (раздел Text). Здесь находятся параметры, определяющие внешний вид букв.

* Font Family (Шрифт): Выбор гарнитуры (например, Inter, Roboto, Arial). Figma подтягивает шрифты из Google Fonts и локальные шрифты (если у вас установлено десктопное приложение). * Font Weight (Начертание): Толщина букв (Regular, Medium, Bold). * Font Size (Размер): Размер шрифта в пикселях. * Line Height (Межстрочный интервал): Расстояние между базовыми линиями строк. В веб-дизайне принято использовать значения от 120% до 150% от размера шрифта для хорошей читаемости. Вы можете вводить значения как в пикселях (24), так и в процентах (150%). * Letter Spacing (Межбуквенное расстояние): Разрядка текста. Для заголовков часто используют отрицательные значения (например, -2%), а для очень мелкого текста (капитель) — положительные. * Paragraph Spacing: Отступы между абзацами. Позволяет не делать пустые строки клавишей Enter.

> Совет: Никогда не используйте клавишу пробела для выравнивания текста по центру или создания отступов. Используйте настройки выравнивания (Text Align Center) и параметры отступов.

Цветовые стили: Системный подход

Новички часто допускают одну и ту же ошибку: они выбирают цвет для кнопки вручную через палитру (Color Picker). Затем они создают вторую кнопку и снова подбирают цвет «на глаз» или копируют код цвета.

Представьте, что у вас 50 экранов приложения, и заказчик просит: «Давайте сделаем синий цвет чуть более насыщенным». Если вы не использовали стили, вам придется вручную менять цвет на всех 50 экранах. Если вы использовали стили, вы измените цвет в одном месте, и он обновится везде.

Что такое Color Styles?

Color Styles (Цветовые стили) — это сохраненные цвета, которые вы можете переиспользовать. Это основа дизайн-системы.

Как создать цветовой стиль?

Выберите объект, который вы уже покрасили в нужный цвет.

На панели свойств в секции Fill (Заливка) найдите иконку с четырьмя точками (Style icon). Она находится справа от заголовка секции Fill.

В открывшемся меню нажмите на «плюс» (+).

Дайте стилю понятное название. Хорошая практика — называть стили по их функции, а не по цвету. Например, Primary/Action вместо Blue, или Text/Secondary вместо Gray.

Нажмите Create style.

Теперь, когда вы будете красить другие объекты, вместо выбора цвета в палитре, нажимайте на иконку четырех точек и выбирайте ваш созданный стиль.

!Пошаговый процесс добавления нового цвета в библиотеку стилей.

Векторное редактирование и булевы операции

Figma — это векторный редактор. Это значит, что любая фигура (даже простой прямоугольник) состоит из точек и линий (путей), соединяющих эти точки. Вы можете изменять эти формы до неузнаваемости.

Режим редактирования (Edit Object)

Чтобы начать редактировать форму фигуры, дважды кликните по ней или выделите её и нажмите клавишу Enter.

Вы увидите точки (узлы) по углам фигуры. * Вы можете перетаскивать эти точки. * Вы можете добавлять новые точки, кликая инструментом Pen Tool (P) на грань фигуры. * Вы можете скруглять отдельные углы через панель свойств.

Чтобы выйти из режима редактирования, снова нажмите Enter или кнопку Done на верхней панели.

Булевы операции (Boolean Operations)

Часто сложные иконки проще не рисовать пером с нуля, а «собирать» из простых фигур: кругов и квадратов. Для этого используются булевы операции. Они находятся в верхней панели по центру (иконка двух квадратов), когда выделено два или более объекта.

Существует 4 типа операций:

Union Selection (Объединение): Сливает две фигуры в одну общую форму.

Subtract Selection (Вычитание): Вырезает верхнюю фигуру из нижней. Идеально для создания иконок «бубликов» или полумесяцев.

Intersect Selection (Пересечение): Оставляет только ту область, где фигуры накладываются друг на друга.

Exclude Selection (Исключение): Оставляет всё, КРОМЕ области пересечения.

!Наглядная схема работы булевых операций на примере двух кругов.

Главная особенность Figma в том, что эти операции недеструктивны. Это значит, что даже после объединения фигур вы можете в панели слоев раскрыть группу (Boolean Group), подвигать исходные круги или квадраты, и результирующая форма пересчитается автоматически.

Работа с изображениями и маски

Изображения в Figma — это не отдельный тип объекта, а вид заливки (Fill).

Вставка изображения

Вы можете просто перетащить картинку с рабочего стола в Figma. Или нажать Ctrl + Shift + K (Place Image), выбрать файл и кликнуть в нужное место.

Маски (Masks)

Иногда нужно показать только часть изображения (например, круглую аватарку).

Поместите изображение поверх фигуры, которая будет формой маски (например, круг).

Важно: В Figma логика масок отличается от Photoshop. Слой, который будет маской (круг), должен находиться СНИЗУ.

Выделите оба объекта (картинку и круг под ней).

Нажмите иконку полумесяца (Use as mask) на верхней панели или Ctrl + Alt + M.

Теперь изображение видно только в границах круга.

Заключение

Сегодня мы превратили «серые прямоугольники» в осмысленный дизайн. Мы научились управлять текстом, создали свои первые цветовые стили для поддержания порядка и узнали, как создавать сложные формы с помощью булевых операций.

Эти навыки — база для любой дизайн-системы. В следующей статье мы перейдем к самой мощной и любимой функции всех продуктовых дизайнеров — Auto Layout. Это то, что позволит вашим макетам быть гибкими и адаптивными, как настоящий сайт.