как сделать и работать с инструментом «Use as mask»

1 min read
13.03.2021

В этом видео вы узнаете как работать с инструментом «Маска» в фигме. Разберем простые примеры, которые вы можете использовать в своей работе. Посмотрите короткое видео или воспользуйтесь текстовым вариантом ниже.

Получить бесплатно 24 раздела landing page для figma

Как сделать маску в фигма

Чтобы сделать абтравочную маску в фигма (Figma) наложите один элемент на другой. Выделите 2 этих элемента и сверху нажмите на иконку маски «Use as mask». Также для создания маски можно нажать горячие клавиши «Ctrl + Alt + M». В панели слоёв появится группа с маской, которую вы можете редактировать.

Элемент, который был сверху будет обведен по контуру нижнего объекта.

Если вы выберите какой-то элемент в слоях и потяните в сторону, то все будет меняться.

Как убрать маску в фигме

Чтобы убрать или отключить маску маску в фигме, откройте группу с маской в слоях (Mask Group) и выберите нижний элемент с иконкой маски. Затем нажмите на пиктограмму сверху по центру «Use as mask» и вы отключите созданную ранее маску.

Как использовать маску в фигме

Использовать маску в фигме можно для обрезания каких-либо объектов по определенному контуру и форме. Например можно сделать фото в форме круга, наложить фото поверх текста и удалять задний фон на фото у простых элементов.

Как вставить фото в круг фигма с помощью маски

Чтобы вставить фото в круг в фигме, создайте круг с помощью стандартных инструментов фигмы. Вставьте фото, поместить круг внизу фотографии и нажмите на иконку маски «Use as mask». Примеры реализации на скриншотах ниже.

Создайте круг и разместите фотоПоместите круг вниз фото в слояхФото в круге в фигме

Как наложить фото поверх текста с помощью маски в фигме

Чтобы наложить фото поверх текста в фигме, напишите какой-то текст и разместите фотографию. В слоях поместите текст вниз фотографии и нажмите сверху по центру пиктограмму маски «Use as mask».

Создайте текст и поместите фото в фигмуРазместите текст внизу фото в слоях и нажмите на иконку маскиТекст с наложением на него фото в фигме

Как удалить фон на фото в фигме с помощью маски

Чтобы удалить фон у какого-либо фото в фигме с помощью маски, следует сделать контур вокруг этого объекта. Поместить его вниз фотографии и нажмите на иконку маски сверху по центру.

Подробнее про вырезание объектов с помощью пера и маски в этой статье.

Разместите фотографию, где хотите удалить фонС помощью пера создайте контур вокруг объектаПоместите контур вниз фото и нажмите на маску

Заключение

Итак, вы этом видео вы узнали как работать с инструментом «Маска» в фигме. Если хотите получить бонусные материалы по быстрому созданию дизайна сайтов в Figma, то переходите по этой ссылке.

Автор статьи: Владимир Чернышов

P.P.S. Проект и автор не связан с компанией Figma (Not affiliated with Figma).

Теги

Figma

Слои и маски в Figma — основные действия и применение

Сначала обратим внимание как работать со слоями в Фигме. Чтобы было более наглядно на иллюстрации представлен простой пример. Здесь создан фрейм, добавлена фоновая картинка, а также три иллюстрации в формате svg, и еще три слоя – это текст напротив картинок. Как видно все слои представлены в левой панели. Для удобства лучше переименовывать слои, чтобы было проще ориентироваться, особенно если их будет много.  

Вы можете группировать слои. Например, на иллюстрации есть три файла в формате svg. При помощи клавиши «Ctrl» вы можете выделить эти файлы. Далее нажмите правой кнопкой мыши на данное выделение. Появится меню свойств, в котором необходимо выбрать пункт «Group selection» (горячие клавиши Ctrl+G). Выбрав его, вы сгруппируете эти слои.   

Теперь при группировке вы можете взаимодействовать сразу со всеми картинками, которые в группе. То есть, перетаскивание или изменение размеров будет сразу со всеми картинками. Если вам нужен конкретный элемент из группы, например, верхняя картинка «статистика», то вы просто можете кликнуть на нее два раза левой кнопкой мыши, после чего этот элемент выделится, и вы будете взаимодействовать с ним отдельно от группы.   

То же самое касается и текста. Можно выделить в правой панели клавишей «Ctrl» необходимые слои текста, после чего нажать правую клавишу мыши и выбрать пункт «Group selection».

Теперь и текст будет находится в одной группе, что упрощает взаимодействие с ним.

По умолчанию у созданной группы будет название «Group». Вы можете переименовывать группы. Например, в первой группе у нас находятся картинки в формате svg, а во второй текст. Кликнув два раза на группу в левой панели, у появится возможность переименовать на «Текст» и «Картинки в формате svg»

Для чего нужны группы слоев? Благодаря им у вас будет полный порядок, и будет понятно, что к чему относится. Без этого все слои будут хаотично распределены по макету в левой части меню, что усложнит работу тех, кто взаимодействует с проектом. Также объединение элементов в группы ускорит работу. Например, вы сможете одновременно редактировать цвет, тени, или другие эффекты во всех элементах.

Кроме того, в Фигме можно группировать группы. Это делается по тому же принципу. Сначала выделяете группы, затем через функцию «Group selection» соединяете их в общую группу. Как видно на иллюстрации группы «Текст» и «Картинки в svg» соединены в группу «Главная страница».   

Очень важно чтобы все элементы находились в границе фрейма. В том случае, если какой-то объект (текст или изображение) выйдет за границы фрейма, даже немного, при его экспорте данный элемент не будет присутствовать в макете. Такая ошибка часто возникает при загрузке больших изображений, часть которых может выходить за границы холста.   

Кроме того, если вы помещаете элемент из фрейма за его границы, то он удалится из группы, в том случае если была привязка к другим элементам. Таким образом, его необходимо внести в группу заново.

Чтобы сделать обратную операцию – расформировать группу, необходимо выделить одну или несколько групп, после чего нажать на правую кнопку мыши и выбрать из списка свойств пункт «Frame selection» (горячие клавиши Ctrl+Alt+G). Так все содержимое группы распадется на отдельные слои.   

Обратите внимание, что возле каждого слоя и группы в левой панели есть два значка в виде замка и глаза. «Глаз» – это функция, которая отключает просмотр слоя или группы, в результате чего на макете они видны не будут, но они будут выделяться при клике. «Замок» – это блокировка элемента, в результате которой слой не будет выделяться. Например, можно заблокировать нижний слой (фон), чтобы он оставался неизменным и не выделялся с остальными элементами.

Как происходит экспорт слоев? Важная особенность Фигмы в том, что экспорт происходит не только группой, но и отдельно по элементам. Например, если вам необходимо экспортировать всю группу, то вы просто кликаете на нее. Если вам необходимы отдельные элементы, то вы выделяете только их. Далее в правой панели меню выберите раздел «Экспорт». Здесь вы также можете определить формат, в котором сохранится ваш проект (PNG, JPG, SVG, PDF). Есть отдельная вкладка с сохранением слоя в формате SVG.     

Теперь рассмотрим то как работает маска в слоях. Маски позволяют отображать определенные части других слоев под трафаретом. Для примера добавим в фрейм две фигуры – круг и звезду.

Важный момент – эти объекты должны быть соединены в группу. Как это сделать, мы рассмотрели выше. Это необходимо для выбора элемента в группе, который будет отвечать за маску. Если это сделать без группы, то все слои, которые находятся над слоем маски будут попадать в эту маску, что усложнит создание интерфейса.

Поэтому выделим круг и звезду, объединив их в группу. Далее выделим круг в правой части круг, который будет отвечать за маску, и в верхней части панели меню выберем вкладку «Use as mask» (горячие клавиши Ctrl+Alt+M).  

Как видно фигура «Круг» стала рамкой, из-за чего углы звезды обрезались. Теперь все что выходит за пределы этой рамки не будет видно.  

На иллюстрации показано, что звезду, которая осталась под маской можно выделить, а также двигать, но не выходя за пределы рамки. В конечном итоге вы можете сохранить маску, экспортировав ее как PNG-файл.    

Итак, мы рассмотрели, как создавать маски и группы слоев, а также экспортировать их в разных форматах.

 

Полезные ссылки:

• Бесплатный видеокурс по Figma от GeekBrains;
• Профессиональный курс Figma 2.0 для новичков от SkillBox;
• Полноценный онлайн курс по веб-дизайну с нуля от SkillBox.

Инструкции по маскированию в Figma • Руководства GITNUX

РУКОВОДСТВО ПО ОБРАБОТКЕ

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

Создайте свой кадр

Чтобы замаскировать в Figma:
1. Откройте Figma, чтобы создать новый кадр. Это можно сделать, нажав кнопку «Создать» в левом верхнем углу страницы.
2. Выберите нужный размер объекта. Вы можете выбрать размер по умолчанию или ввести пользовательские размеры.
3. При необходимости отрегулируйте размер рамки. Это можно сделать, щелкнув и перетащив края рамки, чтобы изменить ее размер. Кроме того, вы можете использовать панель инструментов размера объекта в верхней части страницы для ввода более точных измерений.

Создайте маску

Инструмент «Прямоугольник» в Figma используется для создания простых фигур, таких как прямоугольники. Чтобы начать маскирование в Figma, первым делом выберите инструмент «Прямоугольник», а затем нарисуйте прямоугольник, который будет служить основой маски. После того, как прямоугольник нарисован, пользователь может настроить размер и цвет прямоугольника, чтобы создать желаемую форму и внешний вид. Размер и цвет прямоугольника можно настроить с помощью предоставленных ползунков, а размер прямоугольника можно изменить, перетащив маркеры в углах прямоугольника. После настройки размера и цвета прямоугольника пользователь может использовать функцию «Маска» в Figma для создания желаемой маски.

Добавить изображение

Инструмент «Изображение» в Figma позволяет пользователям выбирать и вставлять изображение в рамку. Это может быть полезно для добавления изображений в дизайн проекта. Пользователь должен сначала выбрать инструмент «Изображение» на панели инструментов в верхней части экрана. Затем они смогут выбрать нужное изображение со своего компьютера или из файла изображения. После выбора изображения пользователь должен затем вставить изображение в рамку, нажав кнопку «Вставить». После вставки изображения пользователь может использовать другие инструменты маскирования для настройки изображения. Это включает в себя добавление «фигур» к изображению, изменение размера изображения или даже изменение цвета фона. Как только пользователь удовлетворен внешним видом изображения, он может перейти к следующей части проекта.

Позиционирование изображения

Выравнивание и настройка размера изображения в Figma — относительно простой процесс. Чтобы выровнять изображение, необходимо убедиться, что оно правильно расположено в кадре. Это можно сделать, выбрав изображение, а затем используя параметры выравнивания в Figma. Нажав на параметры выравнивания, вы можете выровнять изображение в кадре по центру, левому, правому, верхнему или нижнему краю кадра. После завершения выравнивания вы можете отрегулировать размер изображения по мере необходимости, щелкнув маркеры масштабирования, расположенные в углах изображения. После настройки размера вы можете перетащить изображение, чтобы переместить его в рамку.

Создайте замаскированную область

Шаг «Выберите прямоугольник» относится к процессу выбора прямоугольного объекта в программе проектирования Figma. Обычно это достигается путем первого щелчка по объекту или путем перетаскивания курсора мыши по объекту для его выбора. После выбора прямоугольника его можно изменить различными способами, например, изменив размер и цвет, добавив границу или добавив эффекты. После изменения объекта его можно использовать как часть маски в Figma. Маска — это графический элемент, который используется для скрытия или отображения других элементов дизайна. Например, маску можно использовать для отображения только определенной части изображения или части текста. Figma предоставляет множество инструментов для создания масок, таких как инструмент прямоугольника, упомянутый выше. Выбор прямоугольника — это первый шаг в процессе, позволяющий пользователю редактировать свойства прямоугольника, а затем использовать его как часть маски.

Не снимая выделения с прямоугольника, нажмите «Маска» в верхнем меню.

Маскировка в Figma позволяет творчески использовать изображение, изменяя его форму. Когда вы маскируете изображение в Figma, изображение будет изменено на форму выбранного вами прямоугольника. Чтобы замаскировать изображение в Figma, сначала вам нужно выбрать изображение, а затем нажать кнопку маскирования на верхней панели инструментов. Оттуда вы сможете нарисовать прямоугольник или многоугольник, чтобы изменить форму изображения, чтобы она соответствовала форме нарисованного вами прямоугольника. После того, как вы нарисовали прямоугольник, изображение теперь будет замаскировано по форме прямоугольника, что позволит вам творчески использовать его. Функция маскирования позволяет вам манипулировать изображением, чтобы оно соответствовало любому дизайну, который вы создаете.

Настройка маскированной области

Инструмент «Выбрать» в Figma позволяет пользователям выбирать векторную форму, например прямоугольник, и управлять ею. Чтобы выбрать прямоугольник, щелкните инструмент «Выбор» в левом меню, а затем щелкните прямоугольник. Прямоугольник будет выделен синим цветом, указывая на то, что он выбран. Выбрав прямоугольник, пользователи могут выполнять такие операции, как маскирование, добавление цвета заливки или изменение формы прямоугольника.

С помощью манипуляторов отрегулируйте маскируемую область.

В этом предложении говорится о том, как замаскировать изображение с помощью программы Figma. Чтобы замаскировать изображение, сначала нарисуйте прямоугольник над изображением, который будет формой вашей маски. Затем вы можете настроить размер и/или цвет прямоугольника, в зависимости от того, как вам нужно, чтобы он выглядел. Например, если вы хотите, чтобы маска была больше изображения, вы можете сделать прямоугольник такого размера. Или, если вы хотите, чтобы маска отличалась от цвета изображения, вы можете соответствующим образом настроить цвет прямоугольника. Когда у вас есть маска нужного размера и цвета, вы можете нажать кнопку маски, чтобы применить маску к изображению.

Проверка маски

Маскировка в Figma — это простой способ скрыть части изображения. Это можно использовать для привлечения внимания к определенным частям изображения или для создания интересных эффектов. Чтобы протестировать маску, вы можете добавить фоновый цвет к рамке и настроить размер и/или цвет прямоугольника, чтобы получить желаемый результат. В Figma вы можете использовать маскирование, чтобы смешать или обрезать объект или текст. Чтобы создать рамку-маску, выберите объект или текст, который вы хотите замаскировать, затем нажмите кнопку «Рамка-маска» на панели инструментов. Это создаст новую рамку, содержащую выбранный вами объект или текст. Чтобы протестировать маску, добавьте к рамке фоновый цвет. Чтобы отредактировать маску, вы можете настроить размер и/или цвет прямоугольника, чтобы получить желаемый результат. Кроме того, вы можете использовать угловые ручки и ведро с краской, чтобы дополнительно настроить маску. Когда вы будете удовлетворены маской, вы можете нажать кнопку «Готово», чтобы применить маску.

Сохранить маску

Этот набор инструкций является частью более крупного процесса, связанного с использованием Figma для создания маски. Инструкции говорят пользователю начать с выбора кадра, который он хочет замаскировать. Это делается путем выбора кадра, содержащего маску. Затем пользователю предлагается использовать верхнее меню, чтобы выбрать параметр «Экспорт», а затем «Сохранить как PNG». Это позволит экспортировать изображение в виде файла PNG. Наконец, пользователю предлагается выбрать местоположение файла для сохранения маски и нажать «Сохранить». Это сохранит маску как изображение, что позволит использовать ее в других проектах.

Creatives – Хотите знать, как маскировать в Figma?

Маскирование слоя — это очень эффективный способ управления видимостью определенных областей любого слоя. Figma предоставляет дизайнерам различные методы маскировки. В этом уроке по брендингу Greenville NC я объясню основы маскирования слоев в Figma и поделюсь примером, показывающим несколько способов маскирования в Figma.

Как создать маску в Figma — стандартная маска

1. Начните с размещения изображения на монтажной области.

2. Затем перейдите в верхний левый угол окна и найдите инструмент эллипса или нажмите «O», чтобы создать круг.

3. Теперь поместите круг на изображение. Не забудьте разместить фигуру над областями, которые вы хотите видеть.

4. Выделив круг, удерживайте «CMD» или «Ctrl+[», чтобы отправить его прямо за изображением.

5. Перейдите к значку «Маска» или используйте горячую клавишу «Маска» «Cmd+Alt+M» или «Ctrl+Alt+M». Прямой выбор изображения, удерживая «CMD» или «CTRL» и выбирая изображение в маске.

Научиться маскировать в Figma очень просто! В дополнение к созданию стандартных масок в Figma, этот инструмент позволяет вам накладывать дополнительные функции, чтобы поднять ваш дизайн на ступеньку выше. Читайте дальше, чтобы узнать, как создать маску в Figma с эффектом мягкого свечения.

Как создать маску в Figma с эффектом мягкого свечения

Поскольку мы рассмотрели основы создания маски в Figma, я решил показать, как маскирование позволило мне создать мягкое свечение позади этого Ford Bronco. Эта маска позволяет мягкому свету сидеть позади Бронко, опираясь на платформу под машиной.

Маска представляет собой векторную форму Бронко, которую я создал с помощью «Image Trace» в Adobe Illustrator и вставил в Figma, чтобы начать применять эффекты.

Помимо игры с режимом наложения, основным эффектом, используемым в дизайне этого актива, является «Размытие слоя» Figma. Я начал с очень легкого значения, но в итоге поднял его до 235,45.

После настройки оригинального слоя Glow я продублировал его, чтобы увеличить диапазон остаточного свечения. Я избегал увеличения значения «Размытие слоя», чтобы защитить четкость эффекта свечения. Ниже представлена ​​окончательная версия этого конкретного актива, которая является главной особенностью окончательного дизайна.

Вот разделенный вид окончательного дизайна рекламы, чтобы продемонстрировать тип свечения, которого я хотел добиться.

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

Узнайте, как маскировать в Figma и других замечательных уроках на нашей странице новостей

Red Shark Digital инвестирует в наших специалистов по брендингу Greenville NC. Ваш малый бизнес тоже может! Имея многолетний опыт создания качественных материалов, графики и других творческих услуг, мы здесь, чтобы проявить себя и проявить себя для вашего бизнеса.