Układ automatyczny Figma a Flexbox i siatka CSS: eliminowanie luki między projektem a kodem
W jaki sposób automatyczny układ Figma jest mapowany na flexbox i siatkę CSS (kierunek, odstęp, dopełnienie, uścisk, wypełnienie, zawijanie) i gdzie się różnią, aby projekty przetrwały przekazanie.
Rdzeń na wynos
Automatyczny układ Figma zachowuje się podobnie jak flexbox CSS: mapowanie kierunku do kierunku flex, przerwa do przerwy, dopełnienie do dopełnienia, „Przytul zawartość” do rozmiaru według zawartości, „Wypełnij kontener”, aby elastycznie rosnąć lub pełnej szerokości i zawijać do flex-wrap. Przepływ siatki układu automatycznego odpowiada siatce CSS. Różnice pojawiają się w przypadku minimalnego i maksymalnego rozmiaru, zawijania tekstu, wyrównania linii bazowej i responsywnych punktów przerwania, więc sprawdź je wyraźnie przy przekazywaniu.
Mapowanie
Przewodnik Figma opisuje ramki z automatycznym układem, które układają elementy podrzędne według kierunku, odstępów, wypełnienia i wyrównania, z przepływem poziomym, pionowym i siatką oraz opcjonalnym zawijaniem. Każdy ma bliski odpowiednik CSS:
Przytul, wypełnij i napraw
W Figma ramka obejmująca zawartość zmienia rozmiar w oparciu o swoje elementy podrzędne, a ramka podrzędna wypełniająca kontener rozciąga się, aby wypełnić dostępną przestrzeń; Figma zauważa, że jeśli dziecko jest ustawione na wypełnienie, rodzic nie może już przytulać się w tym kierunku. W CSS odpowiednikami są rozmiar oparty na zawartości (automatyczny lub dopasowanie zawartości) i flex: 1 lub szerokość: 100%. Przewodnik po flexboxie MDN wyjaśnia, w jaki sposób flex-grow, flex-shrink i flex-basis rozprowadzają przestrzeń, co jest stroną tego samego pomysłu w CSS.
Gdzie pojawia się luka
Większość błędów przy przekazywaniu ma swoje źródło w kilku obszarach:
- Rozmiary minimalne i maksymalne: ustaw je w obu miejscach, w przeciwnym razie tekst i kontenery będą zachowywać się inaczej w skrajnych przypadkach.
- Tekst: wysokość linii, zawijanie i obcinanie różnią się w renderowaniu tekstu Figma i przeglądarce.
- Wyrównanie linii bazowej: CSS może wyrównywać według linii bazowej tekstu; sprawdź, jak to było zamierzone.
- Bezwzględne dzieci: „Ignoruj układ automatyczny” Figma (dawniej pozycja bezwzględna) mapuje do pozycji: bezwzględnej w pozycjonowanym rodzicu.
- Responsywność: ramki z automatycznym układem nie mają punktów przerwania; zdefiniuj sposób zmiany układów przy każdej szerokości.
Siatki
Użyj przepływu siatki układu automatycznego dla prawdziwych układów dwuwymiarowych i zmapuj go na siatkę CSS, którą MDN opisuje jako system układania treści w wierszach i kolumnach. Zawinięte wiersze elastyczne nie są tym samym, co siatka: elementy w zawiniętym wierszu nie są wyrównane w kolumnach.
Ruch to większa luka
Mapy układu są dość dobre od Figma do CSS. Ruch nie: prototypowe przejścia muszą zostać odbudowane w kodzie, a stany często się gubią. Są to narzędzia luki ze środowiskami wykonawczymi, takie jak ExodeUI (sami to robimy) i Rive, adresy komponentów interaktywnych.
Klucz Principles do zapamiętania
- Automatyczny kierunek układu, odstęp, dopełnienie i zawijanie mapy do Flexboksa
- Uścisk ≈ wielkość treści; Wypełnienie ≈ flex: 1 lub 100% szerokości
- Mapy przepływu sieci na siatkę CSS
- Sprawdź minimalne/maksymalne rozmiary, tekst, linie bazowe i punkty przerwania przy przekazywaniu
- Ruch i stany stanowią większą lukę między projektem a kodem
Często zadawane pytania
Źródła
- Guide to auto layout — Centrum pomocy Figma
- Basic concepts of flexbox — Dokumenty internetowe MDN
- Basic concepts of grid layout — Dokumenty internetowe MDN