Как вставить в Figma SVG прямо из кода
Figma умеет распознавать SVG прямо в виде текста: вставьте скопированный код в редактор, и Figma превратит это во фрейм с вектором.
Когда этом может понадобиться?
- Некоторые стоки отдают SVG в том числе в виде кода. Зачем скачивать файл и закидывать его в проект, если можно просто сразу вставить скопированный код?
- Часто надо забрать векторный логотип с существующего сайта, а там он прямо в верстке существует как код SVG. Можно скопировать, вставить его в текстовый редактор, сохранить и закинуть в редактор Figma, но какой в этом смысл, ведь…
Как действовать
- Получите код, скопируйте его в буфер обмена
- Перейдите в редактор и используйте обычную команду вставить
Как скопировать логотип в SVG прямо с сайта
Если в верстке используется SVG не как изображение, то заветная опция «Сохранить как» будет недоступна. В такой ситуации нам нужно открыть контекстное меню (правая кнопка мыши) и использовать команду «Просмотреть код»
На скриншоте меню Chrome, но у других браузеров есть аналогичные опции (в Safari, например, это называется «Проверить объект».
Далее в открывшемся окне инспектора браузера необходимо найти строчку, которая начинается с <svg
И скопировать её с помощью стандартной команды CNTRL + C / CMND + C.
Как видите, таким образом мы копируем всё от открывающего тега svg до закрывающего тега.
Теперь вы можете вставить этот текст в редактор, либо напрямую в Figma.
