/designer
/designer

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