Copy as SVG

Copy as SVG

Описание
Копирует SVG-код выделеного слоя в буфер обмена.
Группа команд
КМ слояEdit / Copy As
Клавиша Mac
Не настроена
Клавиша Windows
Не настроена
Есть в меню
Меню клиента macOSОсновное (Mac и Win)Контекстные

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

image

Движение по контекстным меню

Copy as CSS
Copy as PNG

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

image

Движение по меню Figma

Copy as CSS
Copy as PNG

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

image

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

Copy as CSS
Copy as PNG

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

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

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

    . ⏹️

image

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

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