Как вставить в Figma SVG прямо из кода




Figma умеет распознавать SVG прямо в виде текста: вставьте скопированный код в редактор, и Figma превратит это во фрейм с вектором.

Когда этом может понадобиться?

  1. Некоторые стоки отдают SVG в том числе в виде кода. Зачем скачивать файл и закидывать его в проект, если можно просто сразу вставить скопированный код?
  2. Часто надо забрать векторный логотип с существующего сайта, а там он прямо в верстке существует как код SVG. Можно скопировать, вставить его в текстовый редактор, сохранить и закинуть в редактор Figma, но какой в этом смысл, ведь…

Как действовать

  1. Получите код, скопируйте его в буфер обмена
  2. Перейдите в редактор и используйте обычную команду вставить

Как скопировать логотип в SVG прямо с сайта

Если в верстке используется SVG не как изображение, то заветная опция «Сохранить как» будет недоступна. В такой ситуации нам нужно открыть контекстное меню (правая кнопка мыши) и использовать команду «Просмотреть код»

Как вставить в Figma SVG прямо из кода

На скриншоте меню Chrome, но у других браузеров есть аналогичные опции (в Safari, например, это называется «Проверить объект».

Далее в открывшемся окне инспектора браузера необходимо найти строчку, которая начинается с <svg

Код вектора

И скопировать её с помощью стандартной команды CNTRL + C / CMND + C.

Как видите, таким образом мы копируем всё от открывающего тега svg до закрывающего тега.

 

Теперь вы можете вставить этот текст в редактор, либо напрямую в Figma.

 

Помогла ли вам эта статья?

Вы уже голосовали
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: