Интерфейс Figma: основные элементы
Рассмотрим основные элементы интерфейса Figma. В верхней части окна расположены кнопки:
- Back to Files: Возвращение в библиотеку файлов.
- Создание нового файла: Создание нового дизайн-проекта.
- Экспорт дизайна: Экспорт готового дизайна.
- Сохранение проекта: Сохранение текущего проекта.
Вкладка View позволяет управлять отображением:
- Rulers (линейки): Отображение линеек для точного позиционирования.
- Размеры: Установка размеров объектов в пикселях.
Иконки выбора инструментов:
- Стандартный курсор: Выбор и редактирование объектов.
- Инструмент Frame: Создание фреймов.
- Инструмент Shapes: Создание геометрических фигур (квадрат, линия, стрелка, эллипс) и добавление изображений.
- Инструмент Pencil: Рисование от руки.
- Инструмент Text: Добавление и редактирование текста.
- Инструмент Hand: Перемещение холста.
- Инструмент Comment: Добавление комментариев.
Вкладка Layers отображает иерархию объектов и слоев. Свойства выбранного объекта отображаются во вкладке Properties, где можно изменять цвет холста и другие параметры.
Создание и работа с фреймами
Выберите инструмент Frame. Нажмите и перетащите курсор, чтобы задать размер. Для создания квадратного фрейма зажмите Shift.
Для выбора готовых размеров (iPhone, Android и др.), дважды кликните на инструмент Frame и выберите шаблон. После создания, размеры фрейма можно изменить, вращать и переименовать (дважды кликнув на название). Эти действия также доступны во вкладке Properties, где указываются координаты X и Y, ширина, высота, угол поворота, скругление углов. Параметр Clip Content определяет обрезку элементов, выходящих за пределы фрейма.
Работа с сетками
Выберите фрейм и в его настройках (Layout Grid) нажмите на плюсик. Настройте:
- Тип сетки: Grid, Columns, Rows.
- Количество колонок/рядов.
- Отступы.
Сетки помогают упорядочить элементы и обеспечить визуальную гармонию.
Создание и редактирование объектов
Инструмент Shapes используется для создания геометрических фигур. Изменяйте размер, цвет, скругление углов и обводку (Stroke) через вкладку Properties. Создавайте градиенты с помощью Linear Gradient и Radial Gradient. Скрыть сетку можно, нажав на иконку глаза рядом с ней в панели Layers, или изменить её прозрачность в настройках.
Для группировки объектов выделите их и нажмите правую кнопку мыши, выбрав «Group». Дважды щелкнув на группе, можно перейти к редактированию вложенных элементов.
Рисование
Инструменты Pencil и Pen позволяют создавать произвольные формы. Pencil подходит для свободного рисования, Pen – для создания объектов с заданными точками. Добавляйте, удаляйте и изменяйте положение точек, управляйте кривизной линий.
В этом уроке мы познакомились с основными инструментами Figma для создания фреймов, объектов и рисования. В следующих уроках продолжим работу над дизайном мобильного приложения.