Как стать автором
Обновить

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

Уровень сложностиПростой
Время на прочтение2 мин
Количество просмотров2.6K

Не так давно для одного проекта мне понадобилось сделать в Фигме красивую единицу. И чтобы внутри неё непременно была полигональная акула, которая используется и в других местах проекта. Конечно, можно создать объект в виде единицы и заполнить её картинкой Jpeg или png, но тогда при увеличении общей картинки акула моя, простите, уплывёт и будет нечёткой.

Я попробовала было сделать обычную заливку, но файл svg стандартными способами сделать заливкой нельзя. И я придумала свой довольно муторный, но рабочий способ. Возможно, некоторые действия я делала зря. Наверняка есть способы проще. Но, как говорится, я сделяль. Возможно, кому-то будет полезным.

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

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

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

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

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

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

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

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

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

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

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

Теги:
Хабы:
Всего голосов 3: ↑3 и ↓0+3
Комментарии0

Публикации

Ближайшие события