Навигация и основные инструменты Figma

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

Знакомство с Figma

Figma — это не просто программа, а целая рабочая среда для создания дизайн-макетов, прототипов и командной работы. Давайте разберемся, из чего она состоит:

1. Панель инструментов (Toolbar): Вверху экрана. Здесь все основные инструменты:

   • Move Tool (V): Перемещает и трансформирует объекты.
   • Scale Tool (K): Масштабирует объекты.
   • Frame Tool (F): Создает фреймы (рабочие области). Это основа вашего макета.
   • Shape Tools (R, O, L, T): Создают базовые фигуры: прямоугольник (Rectangle), линия (Line), стрелка (Arrow), эллипс (Ellipse), многоугольник (Polygon), звезда (Star).
   • Pen Tool (P): Создает сложные векторные формы.
   • Text Tool (T): Добавляет текст.
   • Hand Tool (H): Перемещает по холсту.
   • Comments (C): Добавляет комментарии к макету — удобно для работы с клиентами.

2. Левая боковая панель (Layers Panel): Здесь вы увидите структуру проекта:

   • Layers (Слои): Отображает все фреймы, группы и элементы макета списком. Вы можете перетаскивать слои, менять порядок, скрывать или блокировать.
   • Assets (Ресурсы): Хранит созданные или импортированные компоненты и стили. Подробно рассмотрим позже.
   • Pages (Страницы): Позволяет создавать и переключаться между страницами внутри файла Figma. Удобно для больших проектов.

3. Правая боковая панель (Properties Panel): Ваш главный центр управления. Когда вы выбираете элемент на холсте, здесь появляются его настройки:

   • Design (Дизайн): Настройки внешнего вида (цвет, обводка, тени, эффекты, радиус скругления углов).
   • Prototype (Прототип): Настройки интерактивности для создания кликабельных прототипов.
   • Inspect (Инспектирование): Показывает CSS/iOS/Android код для выбранного элемента — полезно для разработчиков.

4. Холст (Canvas): Основное рабочее пространство, где вы создаете макеты.

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

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

• Перемещение: Зажмите пробел и перетаскивайте мышью (активируется Hand Tool).
• Масштабирование (Zoom):
  • Удерживайте Ctrl (Windows) или Cmd (macOS) и крутите колесико мыши.
  • Используйте Ctrl/Cmd + + для увеличения, Ctrl/Cmd + - для уменьшения.
  • Нажмите Shift + 1 для масштабирования по размеру всех фреймов.
  • Нажмите Shift + 2 для масштабирования по размеру выбранного фрейма или объекта.

Практика: Создаем первый фрейм и фигуры

Давайте сразу применим знания на практике.

1. Откройте Figma: Если не зарегистрированы, пройдите быструю регистрацию на figma.com. Используйте веб-версию или скачайте приложение.
2. Создайте новый файл: Нажмите + Design file на главной странице Figma.
3. Создайте фрейм:
   • Выберите Frame Tool (F) на верхней панели.
   • На правой панели в разделе "Frame" выберите размер, например, Desktop -> MacBook Pro. На холсте появится прямоугольник — ваш первый фрейм.
   • Переименуйте фрейм, дважды кликнув по его названию в левой панели слоев. Например, "Мой первый макет".
4. Добавьте фигуры:
   • Выберите Rectangle (R). Нарисуйте прямоугольник внутри фрейма.
   • Выберите Ellipse (O). Нарисуйте круг (удерживайте Shift для идеального круга).
   • Выберите Text (T). Кликните по холсту и напишите "Привет, Figma!".
5. Измените свойства:
   • Выберите прямоугольник. На правой панели "Design" измените цвет заливки (Fill) и добавьте обводку (Stroke).
   • Выберите текст. Измените шрифт, размер и цвет.

Совет: Не бойтесь экспериментировать! Figma позволяет легко отменять действия (Ctrl/Cmd + Z), так что смело пробуйте разные инструменты и настройки.

Вы только что сделали свои первые шаги в Figma! Вы уже умеете создавать рабочие области и базовые элементы. Это фундамент, на котором мы будем строить наши будущие проекты.

Далее мы научимся использовать эти знания для создания полноценных макетов, таких как лендинги и сайты-визитки.