/designer
/designer

Copy as SVG

Описание

Копирует SVG-код выделенного слоя в буфер обмена.

Клавиша Mac
Не настроена
Клавиша Windows
Не настроена
Путь
🔵 Левая панель и центр⚪️ Меню клиента macOS
Группа команд
КМ слояEdit / Copy As
1. File Browser
4. Левая панель
22

Вариант 1. Контекстное меню слоя

image
🔵
Движение по левой панели и центру редактора

← Copy as CSS Copy as SVG Copy as PNG →

⚪
Движение по меню клиента macOS

← Copy as CSS Copy as SVG Copy as PNG →

Вариант 2. Главное меню Figma

image

Вариант 3. Меню клиента macOS

image

Как работает Copy as SVG

Команду можно применять к слоям любого типа. Она генерирует SVG-код слоя и всего его содержимого по иерархии слоёв.

  1. Создаём окружность инструментом EllipseEllipse.
  2. Рисуем в ней галочку при помощи PenPen. Делаем векторному пути Outline Stroke.
  3. Оборачиваем окружность фреймом, Frame Selection.
  4. Копируем фрейм командой Copy as SVG. Теперь код фрейма с окружностью и галочкой в нём можно вставить в IDE.

    5. Для примера вставляем этот код в новый текстовый слой рядом. Чтобы создать его, используем инструмент TextText. ⏹️

image
⚙
То, что силами SVG нельзя выполнить, будет деградировано. Так при копировании SVG векторного шейпа, в котором есть угловые градиенты, они будут заменены на радиальные.

/designer/designer — образовательный телеграм-канал о продуктовом дизайне и инструментах для него, о карьере дизайнера и эмиграции. Опечатки и обратную связь → @okunev