/designer
/designer

Copy as SVG

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

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

image

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

←
Copy as CSS
 Copy as SVG
Copy as PNG
 →

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

←
Copy as CSS
 Copy as SVG
Copy as PNG
 →

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

image

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

image

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

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

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

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

    . ⏹️

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

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