Figma Auto Layout проти CSS Flexbox і Grid: усунення розриву між дизайном і кодом
Як автоматичний макет Figma зіставляється з CSS flexbox і сіткою (напрямок, проміжок, відступ, обіймання, заповнення, обтікання) і де вони відрізняються, щоб конструкції вижили при передачі.
Основний винос
Автоматичний макет Figma поводиться так само, як CSS flexbox: напрямок відображається на flex-direction, проміжок на проміжок, padding на padding, «Hug contents» для розміру за вмістом, «Fill container» для flex-grow або повної ширини та wrap до flex-wrap. Потік сітки автоматичного макету відповідає сітці CSS. Відмінності з’являються з мінімальним і максимальним розмірами, обтіканням текстом, вирівнюванням базової лінії та адаптивними точками зупинки, тому перевіряйте їх явно під час передачі.
Відображення
Посібник Figma описує фрейми автоматичного макета, які впорядковують дочірні елементи за напрямком, інтервалом, відступом і вирівнюванням, з горизонтальними, вертикальними та сітковими потоками та додатковим обтіканням. Кожен має близький еквівалент CSS:
Обійняти, наповнити і виправити
У Figma фрейм, набір для обіймів вмісту, змінює розмір залежно від своїх дочірніх елементів, а дочірній набір для заповнення контейнера розтягується, щоб заповнити доступний простір; Figma зазначає, що якщо дитина налаштована на заповнення, батько більше не може обіймати в цьому напрямку. У CSS еквівалентами є розмір на основі вмісту (автоматичний або fit-content) і flex: 1 або width: 100%. Посібник flexbox від MDN пояснює, як flex-grow, flex-shrink і flex-basis розподіляють простір, що є стороною CSS тієї ж ідеї.
Де з'являється розрив
Більшість помилок у передачі даних виникають у кількох областях:
- Мінімальний і максимальний розміри: установіть їх в обох місцях, інакше текст і контейнери поводитимуться по-різному в екстремальних умовах.
- Текст: висота рядка, обтікання та скорочення відрізняються між відтворенням тексту Figma і браузером.
- Вирівнювання за базовою лінією: CSS може вирівнювати за базовою лінією тексту; перевірте, як це було задумано.
- Абсолютні дочірні елементи: Figma "Ігнорувати автоматичний макет" (раніше абсолютна позиція) відображає позицію: абсолютна в позиціонованому батьківському елементі.
- Чуйність: фрейми автокомпонування не мають точок зупину; визначте, як макети змінюються на кожній ширині.
Сітки
Використовуйте потік сітки автоматичного макета для справжніх двовимірних макетів і зіставте його з сіткою CSS, яку MDN описує як систему для розміщення вмісту в рядках і стовпцях. Загорнуті гнучкі рядки — це не те саме, що сітка: елементи в загорнутому рядку не вишиковуються в стовпці.
Рух — це більший розрив
Макет досить добре відповідає від Figma до CSS. Рух ні: переходи прототипів потрібно перебудовувати в коді, і стани часто губляться. Це інструменти прогалини із середовищами виконання, такі як ExodeUI (ми робимо) і Rive, адреси інтерактивних компонентів.
Ключі Principle, які слід запам’ятати
- Автоматичний напрямок макета, проміжки, відступи та перенесення на flexbox
- Hug ≈ content sizing; Заливка ≈ flex: 1 або 100% ширини
- Карти потоку сітки до сітки CSS
- Перевіряйте мінімальні/максимальні розміри, текст, базові лінії та контрольні точки під час передачі
- Рух і стани — це більший розрив між дизайном і кодом
Часті запитання
Джерела
- Guide to auto layout — Довідковий центр Figma
- Basic concepts of flexbox — MDN Веб-документи
- Basic concepts of grid layout — MDN Веб-документи