Copy as CSS

Описание

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

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

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

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

← Paste to Replace Copy as CSS Copy as SVG →

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

← Copy as Text Copy as CSS Copy as SVG →

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

image

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

image

Как работает

  1. Команду можно применять к слоям любого типа. Она генерирует CSS-код слоя и всего его содержимого по иерархии слоёв.
  2. Создаём текстовый слой инструментом TextText, пишем текст «Button».
  3. Оборачиваем его в автолейаут командой Add Auto Layout, применяем заливку .
  4. Копируем получившийся фрейм командой Copy As CSS.
  5. Теперь код фрейма и содержащегося в нём текстового слоя можно вставить в IDE. Для примера вставляем этот код в новый текстовый слой рядом. ⏹️
image
⚙
То, что силами CSS нельзя выполнить, будет проигнорировано. Так при копировании CSS векторного пути останутся только стиль обводки, ширина и высота.

/designer/designer

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