Основные объекты
В этом разделе мы узнаем: что такое фреймы, как делать простейшие фигуры и что с ними можно сделать.
Фреймы
Фрейм или артборд — основной элемент дизайна в Фигме. Это наша рабочая область и, грубо говоря, холст. Это законченный документ, который может быть страницей сайта или экраном мобильного приложения.
Вы можете задать размер фрейма самостоятельно или выбрать готовые размеры экранов популярных устройств — ноутбуков, часов, планшетов — в панели инструментов справа.
Фрейм объединяет объекты внутри себя. Когда вы создаёте дизайн внутри фрейма, в панели свойств слева будут добавляться слои. Слои в Фигме — это содержимое вашего фрейма: объекты, текст, фотографии.
Объекты внутри фрейма можно группировать. Сгруппируйте объекты из меню Object → Group Selection или сочетанием клавиш Ctrl (Cmd) + G. Вы увидите изменения в слоях объектов — они объединились в группу. Теперь вы можете перемещать все объекты разом.
Фрейм — это законченный дизайн, его можно скачать одним файлом. При сохранении убедитесь, что все объекты находятся внутри фрейма. Если случайно переместить слой объекта за пределы фрейма, можно потерять часть дизайна. Перед скачиванием, проверьте превью файла, и выберите нужный формат.
Модульная сетка
Сетка в Фигме помогает упорядочить все элементы дизайна во фрейме. Чтобы легко адаптировать дизайн от одного устройства к другому, используйте в Фигме 12 колоночную модульную сетку (Bootstrap).
Для настройки сетки нажмите «+» в блоке Layout Grid.
Векторные формы
Создавайте векторные объекты инструментом Shape Tool, на панели инструментов - последняя фигура, которую вы рисовали, но по умолчанию - квадрат. С его помощью можно отрисо вывать любые фигуры.
Основные векторные объекты — прямоугольник, линия, треугольник, стрелка, круг, звезда. Вы можете вставлять объекты произвольной формы или зажать клавишу Shift и вставить объект правильной формы. Если нажать Alt — объект растягивается из центра. Панель свойств объектов находится справа.
Панель свойств
С помощью этих пунктов меню можно размещать объекты относительно нашего фрейма. Например, когда мы нажмём на первую кнопку объект переместится в левый край фрейма.
При изменении координат X и Y меняется расположение и размеры нашего объекта. Верхние координаты влияют на расположение объекта на рабочей зоне, нижние - на его размеры. Также с помощью пункта с "уголком" можно менять угол наклона объекта.
Работа с цветом
В панели свойств есть пункт для работы с цветом: Fill - заливка фигуры. Можно делать различные виды градиента и вставить фото в качестве заливки.