Как в Figma использовать svg в качестве заливки
Не так давно для одного проекта мне понадобилось сделать в Фигме красивую единицу. И чтобы внутри неё непременно была полигональная акула, которая используется и в других местах проекта. Конечно, можно создать объект в виде единицы и заполнить её картинкой Jpeg или png, но тогда при увеличении общей картинки акула моя, простите, уплывёт и будет нечёткой.
Я попробовала было сделать обычную заливку, но файл svg стандартными способами сделать заливкой нельзя. И я придумала свой довольно муторный, но рабочий способ. Возможно, некоторые действия я делала зря. Наверняка есть способы проще. Но, как говорится, я сделяль. Возможно, кому-то будет полезным.
Вот у нас есть полигональный Медведь СВГ и векторная картинка (далее Вектор), которую хотим закрасить. Обязательно вектор! И мы хотим в эту серую трапецию сделать заливку в виде медведя.
Открываем фрейм медведя и все его векторы объединяем его элементы в группу:
Располагаем наш Вектор (трапецию) поверх Медведя, смотрим, чтобы Вектор не затянуло в Медвежий фрейм. В меню со слоями Вектор должен располагаться ПОД Медведем:
Для Вектора в правом меню выбираем заливку 100% любого цвета и выставляем overlay:
Выделяем ГРУППУ, что мы сделали во фрейме с медведем и наш ВЕКТОР и кликаем «сделать маску»:
Видимыми остались только те медвежьи части, которые попали в наш Вектор. Остальные части скрыты от наших глаз. Тут можем Подвигать Вектор, чтобы в нем отображались нужные части медведя.
Допустим, мы хотим, чтобы пустая часть Вектора (что не заполнена частями медведя) преобрела заливку. Для этого прямо в Маске выделяем созданную нами группу и оборачиваем её во фрейм (не спрашивайте). И вот этому новому фрейму уже добавляем заливку:
Кстати, двигая Вектор поверх медведя, можем выбрать, что должно отображаться в Векторе. Тут вот мы выбрали морду вместо задней лапы:
Теперь важно. Мы выделяем МАСКУ и тоже оборачиваем во фрейм. И этот новый фрейм экспортируем как СВГ файл себе на компьютер. Проверяем. Рисуем в Фигме прямоугольничек, заполняем любым цветом, сверху экспортируем с компьютера наш новый СВГ из Вектора и медведя. Получаем картинку:
А вот и другая часть медведя в нашем некогда сером Векторе:
Надеюсь, кому-то информация будет полезной :-)
