Figma automaattinen asettelu vs. CSS Flexbox ja Grid: Suunnittelun ja koodin välisen aukon sulkeminen
Kuinka Figma automaattinen asettelu kartoittaa CSS flexboxiin ja ruudukkoon (suunta, väli, pehmuste, halaus, täyttö, kääri) ja missä ne eroavat, jotta mallit selviävät kanavanvaihdosta.
Core Takeaway
Figma:n automaattinen asettelu toimii aivan kuten CSS flexbox: suuntakartat joustavaan suuntaan, väli aukkoon, pehmuste pehmusteeksi, "halaa sisältö" sisällön mukaan, "Täytä säiliö" joustavaan kasvuun tai koko leveyteen ja kääri flex-wrapiin. Automaattisen asettelun ruudukkovirta vastaa CSS-ruudukkoa. Erot näkyvät minimi- ja enimmäiskokojen, tekstin rivityksen, perusviivan tasauksen ja reagoivien keskeytyspisteiden kanssa, joten tarkista ne nimenomaisesti kanavanvaihdon yhteydessä.
Kartoitus
Figma:n oppaassa kuvataan automaattiset asettelukehykset, jotka järjestävät lapset suunnan, välin, pehmusteen ja kohdistuksen mukaan vaaka-, pysty- ja ruudukkovirtauksilla sekä valinnaisella kääreellä. Jokaisella on läheinen CSS-vastine:
Halata, täyttää ja korjata
Figma:ssä sisältöä halaamaan asetettu kehys muuttaa kokoa lastensa perusteella, ja säiliötä täyttämään asetettu lapsi venyy täyttääkseen käytettävissä olevan tilan. Figma huomauttaa, että jos lapsi on asetettu täyttämään, vanhempi ei voi enää halata siihen suuntaan. CSS:ssä vastaavat sisällöt ovat sisältöön perustuva mitoitus (automaattinen tai sovitettu sisältö) ja flex: 1 tai leveys: 100%. MDN:n flexbox-opas selittää, kuinka flex-grow, flex-shrink ja flex-basis jakavat tilaa, mikä on saman idean CSS-puoli.
Missä aukko näkyy
Useimmat kanavanvaihtovirheet tulevat muutamalta alueelta:
- Vähimmäis- ja enimmäiskoot: aseta ne molempiin paikkoihin tai teksti ja säilöt käyttäytyvät eri tavalla äärimmäisissä olosuhteissa.
- Teksti: rivin korkeus, rivitys ja katkaisu eroavat Figma-tekstin renderöinnin ja selaimen välillä.
- Perustasaus: CSS voi tasata tekstin perusviivan mukaan; tarkista miten tämä oli tarkoitettu.
- Absoluuttiset lapset: Figma:n "Ignore auto layout" (aiemmin absoluuttinen sijainti) kartoittaa sijaintiin: absoluuttinen sijoitetussa ylätasossa.
- Responsiivisuus: automaattisen asettelun kehyksissä ei ole keskeytyskohtia; määrittää, kuinka asettelut muuttuvat kullakin leveydellä.
Ristikot
Käytä automaattisen asettelun ruudukkovirtaa todellisiin kaksiulotteisiin asetteluihin ja yhdistä se CSS-ruudukkoon, jota MDN kuvailee järjestelmäksi sisällön asettelemiseen riveihin ja sarakkeisiin. Kääritetyt joustavat rivit eivät ole sama asia kuin ruudukko: rivitettyjen rivien kohteet eivät ole rivissä sarakkeissa.
Liike on suurempi kuilu
Asettelu kartoittaa kohtuullisen hyvin Figma:stä CSS:ään. Liike ei: prototyyppisiirtymät on rakennettava uudelleen koodiin, ja tilat usein katoavat. Tämä on aukkotyökalut, joissa on ajonaika, kuten ExodeUI (me teemme sen) ja Rive, interaktiivisten komponenttien osoite.
Avain Principles muistettavat
- Automaattinen asettelusuunta, aukko, pehmuste ja rivityskartta flexboxiin
- Hug ≈ sisällön koko; Täyttö ≈ flex: 1 tai 100 % leveys
- Ruudukon virtaus kartoitetaan CSS-ruudukkoon
- Tarkista vähimmäis- ja enimmäiskoot, teksti, perusviivat ja keskeytyskohdat kanavanvaihdon yhteydessä
- Liike ja tilat ovat suurempi suunnittelun ja koodin välinen kuilu
Usein kysytyt kysymykset
Lähteet
- Guide to auto layout — Figma Ohjekeskus
- Basic concepts of flexbox — MDN Web Docs
- Basic concepts of grid layout — MDN Web Docs