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. Тепер код фрейму і текстового шару, що міститься в ньому, можна вставити в ICP. Для прикладу вставляємо цей код в новий текстовий шар поруч. ⏹️

image

Те, що силами CSS неможливо виповнити, буде проігноровано. Так при копіюванні CSS векторного шляху залишаться тілько стиль обведення, ширина і висота.

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