Перед началом работы с изображениями рассмотрим булевы операции, применяемые к объектам. Создадим квадрат и звездочку — отдельные объекты, не объединённые во фрейм или группу. Для удобства работы лучше помещать объекты в общий фрейм.
Булевы операции
Выбрав оба объекта, увидим доступные булевы операции:
- Union (объединение): Объединяет два объекта в один.
- Subtract (вычитание): Вычитает один объект из другого (например, вырезает звездочку из квадрата).
- Intersect (пересечение): Оставляет только общую часть двух объектов.
- Exclude (исключение): Вырезает общую часть, оставляя остальное.
Продемонстрируем операцию Subtract. Создадим круг и вырежем его из логотипа, используя Subtract из контекстного меню после выбора обоих объектов. Обводка применяется ко всему новому объекту, включая вырезанную часть.
Добавление и редактирование изображений
Добавить изображения можно несколькими способами:
- Перетаскивание: Перетащите изображение из файлового менеджера в проект.
- Place Image: Нажмите кнопку добавления объектов, выберите Place Image и укажите путь к файлу.
- Вставка во фрейм: Выберите фрейм и в его свойствах укажите изображение в поле «Fill». По умолчанию используется шахматная доска.
Добавим изображение как отдельный элемент, используя Place Image. Figma поддерживает форматы PNG, JPEG и SVG. Изображения SVG можно редактировать, изменяя отдельные элементы, чего нельзя сделать с PNG и JPEG.
Эффекты и стили изображений
К изображениям можно добавлять обводку (к дочерним, а не к родительскому элементу). Доступные эффекты:
- Drop Shadow (отбрасываемая тень): Настраивает цвет, прозрачность, смещение и размытие тени. Для предотвращения обрезки тени установите флажок «Clip to bounds».
- Inner Shadow (внутренняя тень): Создаёт тень внутри объекта.
- Layer Blur (размытие слоя): Размывает весь слой.
- Background Blur (размытие фона): Размывает только фон за объектом.
Можно добавлять несколько эффектов одновременно, нажимая кнопку «+».
Использование изображений в качестве фона
Используем изображение как фон основного фрейма. Параметр «Fill» определяет режим отображения:
- Fill: Изображение отображается в исходном размере.
- Fit: Изображение растягивается, заполняя всю область.
- Crop: Изображение обрезается по размеру области.
Можно перевернуть изображение на 90 градусов и применить фильтры (яркость, контраст, температура и т.д.).
В этом уроке рассмотрена работа с изображениями в Figma: добавление, редактирование, применение эффектов и использование в качестве фона.