Как вырезать часть изображения в фигме
Figma прочно вошла в арсенал современных дизайнеров не только как инструмент для создания интерфейсов, но и как мощный редактор для работы с графикой.
Одной из самых частых и важных задач в этом процессе является кадрирование - умение оставить в кадре только нужное, убрав всё лишнее. Независимо от того, нужно ли вам быстро обрезать фотографию, придать изображению определенную форму или даже создать эффект текстурированного текста, Figma предлагает набор интуитивно понятных и мощных инструментов для этого.
Это руководство детально раскроет все способы работы с изображениями: от базовой обрезки до продвинутых техник использования масок и заливок. Вы не просто узнаете, куда нажимать, а поймёте логику каждого метода, чтобы в любой ситуации выбрать наиболее эффективный и быстрый путь к желаемому результату.
Обрезка
Прежде чем погрузиться в тонкости инструмента обрезки, важно понять его фундаментальную суть: это не просто функция, а ключевой инструмент композиционного мышления. В дизайне, как и в фотографии, зачастую сила кадра заключается не в том, что вы добавляете, а в том, что вы решаете убрать.
Обрезка - это ваш первичный и самый быстрый способ управлять вниманием зрителя, убирая с поля зрения лишние детали, смещая акценты и улучшая общую читаемость макета. В отличие от деструктивных методов, которые безвозвратно удаляют пиксели, подход Figma элегантен и безопасен.
Инструмент Shift + E - это своеобразный «умный кадрировщик», который не уничтожает информацию, а лишь скрывает её, предоставляя вам неограниченную свободу для экспериментов. Вы всегда можете вернуться к исходному кадру, передумать и найти новую точку фокуса без потери качества.
Изучение этого метода - это первый шаг от работы с изображением как с данными к работе с ним как с художественным элементом, подчиняющимся вашим творческим правилам. Этот способ аналогичен обрезке в любом другом редакторе. Вы просто убираете ненужные края изображения.
Подготовка
- Загрузите изображение в Figma (перетащите с компьютера на канвас или используйте Ctrl+C / Ctrl+V).
- Выделите изображение, щелкнув по нему.
Включение инструмента обрезки
- Вариант А (Через меню): В верхней панели меню нажмите на значок «Обрезка» (он выглядит как два угла, образующие прямоугольник).
- Вариант Б (Горячие клавиши): Нажмите клавишу Shift + E. Это самый быстрый способ.
- Вариант В (Двойной клик): Просто сделайте двойной клик по изображению.
Обрезка
- После включения инструмента вокруг изображения появятся специальные маркеры (квадратики по углам и сторонам).
- Зажмите левую кнопку мыши на любом из этих маркеров и потяните, чтобы изменить границы кадрирования. Всё, что останется за пределами новой рамки, будет «спрятано».
- Вы также можете перемещать само изображение внутри рамки, зажав его центральную часть и перетаскивая, чтобы выбрать лучшую композицию.
Применение
- Чтобы применить обрезку, просто нажмите Enter или кликните на пустом месте канваса. Инструмент обрезки выключится.
- Обрезка в Figma неразрушающая. Это значит, вы всегда можете снова выбрать изображение, снова нажать Shift+E и вернуть скрытые части или изменить границы.
Маска
Если обрезка оперирует прямыми линиями и прямоугольниками, то маски - это целый мир, где форма ограничения становится главным выразительным средством. Представьте, что ваше изображение - это свет, а маска - это абажур или трафарет, через который этот свет проецируется.
Результатом становится не просто обрезанная картинка, а новый, целостный визуальный объект, где содержание и форма неразрывно связаны. Маски в Figma - это краеугольный камень композиции, позволяющий вписывать фотографии в круги, создавая стильные аватары; в многоугольники, добавляющие динамику; или в произвольные векторные контуры, рожденные вашей фантазией.
Это самый мощный и часто используемый способ, особенно когда нужно вырезать объект сложной формы или вписать изображение в определенную фигуру.
Принцип: Вы создаете фигуру (например, круг, звезду, произвольный контур), которая будет играть роль «окна». Все, что находится внутри этой фигуры, будет видно, всё снаружи - скрыто.
Создайте «окно» маску
-
Нарисуйте фигуру, которая будет определять видимую область. Это может быть: Прямоугольник (R), эллипс (O), многоугольник, произвольная фигура, нарисованная инструментом «Перо» (P).
Расположите слои
- Расположите нарисованную фигуру поверх изображения.
- Ключевой момент: Убедитесь, что слой с фигурой находится выше слоя с изображением в панели слоев (слева).
Создание маски
- Выделите оба объекта: и фигуру, и изображение. Можно зажать Shift и кликнуть по ним на канвасе или выбрать их в панели слоев.
- Теперь есть три способа применить маску: Горячие клавиши (лучший способ): Нажмите Ctrl+Alt+M (Windows) или Cmd+Option+M (Mac). Правой кнопкой мыши: Кликните правой кнопкой по выделенным объектам - «Use as Mask». Через меню: В верхнем меню нажмите на значок ромба с плюсом - «Use as Mask».
Результат и настройка
- Вы увидите, что изображение теперь обрезано по форме вашей фигуры.
- В панели слоев образуется группа «Mask». Фигура-маска будет сверху с иконкой «замочка», а изображение - под ней.
- Чтобы переместить изображение внутри маски, щелкните по нему в панели слоев (не по группе «Mask», а именно по слою с картинкой внутри нее), и тогда вы сможете двигать его на канвасе, выбирая нужный фрагмент.
- Чтобы изменить саму форму маски (например, растянуть круг), щелкните по слою маски (с замочком) в панели слоев и изменяйте его как обычную фигуру.
Использование Fill с обтравочными масками
Этот метод - квинтэссенция идеи о том, что наполнение и форма должны быть едины. Если маска - это наложение формы сверху, то заливка изображением - это преображение самой материи объекта. Здесь изображение перестает быть самостоятельным слоем и становится свойством, атрибутом, словно цвет или градиент, но несравненно более богатым по визуальному наполнению.
Данный подход кардинально меняет парадигму работы с текстом и иконографикой. Вы больше не ограничены плоским цветом; вы можете наполнить заголовок фактурой бетона, узором мрамора или сиянием неона, используя любое изображение. Это мощнейший инструмент для создания эмоционального воздействия и тактильного ощущения в цифровом пространстве.
Технически этот способ обеспечивает беспрецедентную стабильность композиции: ваш текстурированный текст остается текстом - его можно редактировать, менять шрифт и кернинг, а изображение будет интеллектуально подстраиваться под новые границы.
Изучение заливки Image Fill - это переход на новый уровень зрелости дизайнера, где вы начинаете мыслить не слоями, а целостными визуальными сущностями с богатым внутренним содержанием. Этот способ идеален, когда вам нужно «залить» изображением конкретную, часто сложную, фигуру (например, надпись или иконку).
Подготовьте объект-контейнер
- Это может быть любая векторная фигура или текст.
- Пример: Напишите текст крупным жирным шрифтом.
Заливка изображением
- Выделите ваш объект (например, текст).
- На правой панели перейдите во вкладку «Design» - «Fill».
- Установите тип заливки «Image» (или «Градиент» - «Угловой градиент», а затем выберите тип «Image»).
- Загрузите нужное изображение (можно перетащить или выбрать из файлов).
- Изображение автоматически заполнит вашу фигуру.
Настройка изображения внутри заливки
- Рядом с типом заливки «Image» появится кнопка ... (многоточие). Нажмите на нее.
- Откроется окно настройки, где вы можете: Перемещать изображение, масштабировать его и поворачивать.
- Настройте положение изображения так, чтобы в рамках вашей фигуры был виден нужный фрагмент.
В этом способе само изображение не является отдельным слоем. Оно становится свойством заливки фигуры. Это очень удобно для создания повторяющихся паттернов, текстурных текстов и т.д.
Вывод
Освоение искусства кадрирования и вырезания в Figma - это ключ к созданию визуально аккуратных и профессиональных работ. Как мы выяснили, для каждой задачи существует свой оптимальный инструмент: быстрая Обрезка (Shift+E) для изменения композиции, универсальная Маска (Ctrl+Alt+M) для работы с фигурами и мощная Заливка изображением для интеграции графики в текст и иконки. Для систематизации информации мы подготовили таблицу:
| Способ | Для чего подходит | Ключевая команда |
|---|---|---|
| Обрезка | Быстро убрать лишние края, изменить композицию кадра. | Shift + E |
| Маска | Вырезать изображение в круг, звезду, любую другую фигуру. Основной способ. | Ctrl+Alt+M |
| Заливка | Заполнить текст или сложную иконку изображением-текстурой. | Заливка «Image» в панели Design |
| Перо + Маска | Ручное вырезание объекта с сложного фона. | Инструмент «Перо» (P) + Ctrl+Alt+M |
Помните, что главное преимущество Figma - его неразрушающий подход: вы всегда можете вернуться и отредактировать маску или изменить положение изображения, не теряя в качестве. Регулярно применяя эти методы на практике, вы доведете их до автоматизма, сделав процесс дизайна еще более быстрым, точным и творческим.