Copy as CSS

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