Как в Figma использовать svg в качестве заливки

  • Вот у нас есть полигональный Медведь СВГ и векторная картинка (далее Вектор), которую хотим закрасить. Обязательно вектор!! И мы хотим в эту серую трапецию сделать заливку в виде медведя.

  • Открываем фрейм медведя и все его векторы объединяем его элементы в группу:

  • Располагаем наш Вектор(трапецию) поверх Медведя, смотрим, чтобы Вектор не затянуло в Медвежий фрейм. В меню со слоями Вектор должен располагаться ПОД Медведем:

  • Для Вектора в правом меню выбираем заливку 100% любого цвета и выставляем overlay:

  • Выделяем ГРУППУ, что мы сделали во фрейме с медведем и наш ВЕКТОР и кликаем "сделать маску":

  • Видимыми остались только те медвежьи части, которые попали в наш Вектор. Остальные части скрыты от наших глаз. Тут можем Подвигать Вектор, чтобы в нем отображались нужные части медведя.

  • Допустим, мы хотим, чтобы пустая часть Вектора (что не заполнена частями медведя) преобрела заливку. Для этого прямо в Маске выделяем созданную нами группу и оборачиваем её во фрейм (не спрашивайте). И вот этому новому фрейму уже добавляем заливку:

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

  • Теперь важно. Мы выделяем МАСКУ и тоже оборачиваем во фрейм. И этот новый фрейм экспортируем как СВГ файл себе на компьютер. Проверяем. Рисуем в Фигме прямоугольничек, заполняем любым цветом, сверху экспортируем с компьютера наш новый СВГ из Вектора и медведя. Получаем картинку:

    А вот и другая часть медведя в нашем некогда сером Векторе:

    Надеюсь, кому-то информация будет полезной :-)

  • Информация на этой странице взята из источника: https://habr.com/ru/articles/791946/