/designer
/designer

Copy as SVG

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

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

image

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

←
Copy as CSS
 Copy as SVG
Copy as PNG
 →

←
Copy as CSS
Copy as PNG
 →

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

image

←
Copy as CSS
Copy as PNG
 →

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

image

←
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 векторного шейпа, в котором есть угловые градиенты, они будут заменены на радиальные.

— освітній телеграм-канал про продуктовий дизайн, інструменти для нього, про кар’єру дизайнера та еміграцію. Помилки та зворотній зв’язок → @okunev