Figma Auto Layout срещу CSS Flexbox и Grid: Преодоляване на празнината между дизайна и кода
Как автоматичното оформление на Figma се преобразува в CSS flexbox и решетка (посока, празнина, подложка, прегръдка, запълване, обвиване) и къде се различават, така че дизайните да оцелеят при предаването.
Ядро за вкъщи
Автоматичното оформление на Figma се държи много като CSS flexbox: карта на посоката към flex-direction, gap към gap, padding към padding, „Hug contents“ към оразмеряване по съдържание, „Fill container“ към flex-grow или пълна ширина и wrap към flex-wrap. Решетката на автоматичното оформление съответства на мрежата CSS. Разликите се появяват с минимални и максимални размери, обвиване на текст, подравняване на базовата линия и отзивчиви точки на прекъсване, така че проверете ги изрично при предаване.
Картографирането
Ръководството на Figma описва рамки за автоматично оформление, които подреждат деца по посока, разстояние, подложка и подравняване, с хоризонтални, вертикални и мрежови потоци и незадължително обвиване. Всеки има близък CSS еквивалент:
Прегърнете, напълнете и поправете
В Figma рамка, настроена да прегръща съдържанието, се преоразмерява въз основа на своите деца, а дете, настроено да запълва контейнер, се разтяга, за да запълни наличното пространство; Figma отбелязва, че ако детето е настроено да запълва, родителят вече не може да прегръща в тази посока. В CSS еквивалентите са базирано на съдържанието оразмеряване (автоматично или подходящо съдържание) и гъвкавост: 1 или ширина: 100%. Ръководството за flexbox на MDN обяснява как flex-grow, flex-shrink и flex-basis разпределят пространството, което е CSS страна на същата идея.
Където се появява празнината
Повечето грешки при прехвърляне идват от няколко области:
- Минимални и максимални размери: задайте ги и на двете места, или текстът и контейнерите се държат различно в крайности.
- Текст: височината на реда, обвиването и отрязването се различават между изобразяването на текст Figma и браузъра.
- Подравняване на базовата линия: CSS може да подравнява по базовата линия на текста; проверете как е било замислено това.
- Абсолютни деца: „Игнориране на автоматичното оформление“ на Figma (по-рано абсолютна позиция) се преобразува в позиция: абсолютна в позициониран родител.
- Отзивчивост: рамките с автоматично оформление нямат точки на прекъсване; дефинирайте как оформленията се променят при всяка ширина.
Решетки
Използвайте мрежовия поток на автоматичното оформление за истински двуизмерни оформления и го нанесете на CSS мрежа, която MDN описва като система за оформление на съдържание в редове и колони. Обвити гъвкави редове не са същите като решетка: елементите в обвит ред не се подреждат в колони.
Движението е по-голямата празнина
Оформлението се съпоставя сравнително добре от Figma до CSS. Движението не: преходите на прототипите трябва да бъдат възстановени в код и състоянията често се губят. Това са празнините инструменти с времена за изпълнение, като ExodeUI (ние го правим) и Rive, адрес за интерактивни компоненти.
Ключове Principle, които трябва да запомните
- Автоматична посока на оформлението, празнина, подложка и карта на обвиване към flexbox
- Hug ≈ оразмеряване на съдържанието; Запълване ≈ flex: 1 или 100% ширина
- Карти на потока на мрежата към мрежата CSS
- Проверете минимални/максимални размери, текст, базови линии и точки на прекъсване при предаване
- Движението и състоянията са по-голямата празнина между дизайн и код
Често задавани въпроси
Източници
- Guide to auto layout — Figma Помощен център
- Basic concepts of flexbox — MDN Уеб документи
- Basic concepts of grid layout — MDN Уеб документи