Copy as CSS
/designer
/designer

Copy as CSS

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

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

image

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

←
Paste to Replace
Copy as SVG
 →

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

image

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

←
Copy as Text
Copy as SVG
 →

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

image

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

←
Copy as Text
Copy as SVG
 →

Как работает

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

image

⚙

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

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