/designer
/designer

Copy as CSS

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

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

image

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

←
Copy as Text
 Copy as CSS
Copy as SVG
 →

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

←
Paste to Replace
 Copy as CSS
Copy as SVG
 →

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

image

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

image

Как работает

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

image

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

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