Copy as CSS

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

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

image

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

Paste to Replace
Copy as CSS
Copy as SVG

Paste to Replace
Copy as SVG

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

image

Copy as Text
Copy as SVG

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

image

Copy as Text
Copy as SVG

Как работает

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

image

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

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