Figma Auto Layout vs CSS Flexbox and Grid: Κλείσιμο του κενού σχεδιασμού προς κώδικα
Πώς η αυτόματη διάταξη Figma αντιστοιχίζεται στο flexbox και το πλέγμα CSS (κατεύθυνση, κενό, επένδυση, αγκαλιά, γέμισμα, περιτύλιξη) και πού διαφέρουν, έτσι ώστε τα σχέδια να επιβιώνουν από τη μεταβίβαση.
Core Takeaway
Η αυτόματη διάταξη του Figma συμπεριφέρεται πολύ όπως το CSS flexbox: χάρτες κατεύθυνσης σε flex-direction, gap to gap, padding to padding, "Hug contents" στο μέγεθος κατά περιεχόμενο, "Fill container" για flex-grow ή σε πλήρες πλάτος και wrap σε flex-wrap. Η ροή πλέγματος της αυτόματης διάταξης αντιστοιχεί στο πλέγμα CSS. Οι διαφορές εμφανίζονται με τα ελάχιστα και μέγιστα μεγέθη, την αναδίπλωση κειμένου, τη στοίχιση της γραμμής βάσης και τα σημεία διακοπής απόκρισης, επομένως ελέγξτε τα ρητά κατά τη μεταβίβαση.
Η χαρτογράφηση
Ο οδηγός του Figma περιγράφει πλαίσια αυτόματης διάταξης που τακτοποιούν τα παιδιά κατά κατεύθυνση, απόσταση, επένδυση και ευθυγράμμιση, με οριζόντιες, κάθετες ροές και πλέγμα και προαιρετικό περιτύλιγμα. Κάθε ένα έχει ένα κοντινό ισοδύναμο CSS:
Αγκάλιασε, γέμισε και φτιάξε
Στο Figma, ένα σύνολο πλαισίου για να αγκαλιάζει τα περιεχόμενα αλλάζει το μέγεθος με βάση τα παιδιά του και ένα θυγατρικό σετ για πλήρωση κοντέινερ εκτείνεται για να γεμίσει τον διαθέσιμο χώρο. Το Figma σημειώνει ότι εάν ένα παιδί έχει ρυθμιστεί να γεμίσει, ο γονέας δεν μπορεί πλέον να αγκαλιάσει προς αυτή την κατεύθυνση. Στο CSS τα ισοδύναμα είναι το μέγεθος με βάση το περιεχόμενο (αυτόματο ή προσαρμοσμένο περιεχόμενο) και το flex: 1 ή το πλάτος: 100%. Ο οδηγός flexbox του MDN εξηγεί πώς το flex-grow, το flex-shrink και το flex-based κατανέμουν το χώρο, που είναι η πλευρά CSS της ίδιας ιδέας.
Εκεί που φαίνεται το κενό
Τα περισσότερα σφάλματα handoff προέρχονται από μερικές περιοχές:
- Ελάχιστα και μέγιστα μεγέθη: ορίστε τα και στις δύο θέσεις ή το κείμενο και τα κοντέινερ συμπεριφέρονται διαφορετικά στα άκρα.
- Κείμενο: το ύψος γραμμής, η αναδίπλωση και η περικοπή διαφέρουν μεταξύ της απόδοσης κειμένου Figma και του προγράμματος περιήγησης.
- Στοίχιση γραμμής βάσης: Το CSS μπορεί να ευθυγραμμιστεί με βάση τη γραμμή κειμένου. ελέγξτε πώς προοριζόταν αυτό.
- Απόλυτα παιδιά: Το "Ignore auto layout" (πρώην απόλυτη θέση) του Figma αντιστοιχίζεται στη θέση: απόλυτη σε τοποθετημένο γονέα.
- Απόκριση: τα πλαίσια αυτόματης διάταξης δεν έχουν σημεία διακοπής. ορίστε πώς αλλάζουν οι διατάξεις σε κάθε πλάτος.
Πλέγματα
Χρησιμοποιήστε τη ροή πλέγματος της αυτόματης διάταξης για πραγματικές δισδιάστατες διατάξεις και αντιστοιχίστε το στο πλέγμα CSS, το οποίο το MDN περιγράφει ως σύστημα για τη διάταξη περιεχομένου σε σειρές και στήλες. Οι τυλιγμένες ευέλικτες σειρές δεν είναι το ίδιο με ένα πλέγμα: τα στοιχεία σε μια τυλιγμένη σειρά δεν ευθυγραμμίζονται σε στήλες.
Η κίνηση είναι το μεγαλύτερο κενό
Η διάταξη αντιστοιχίζεται αρκετά καλά από Figma έως CSS. Η κίνηση όχι: οι μεταβάσεις πρωτότυπων πρέπει να ξαναχτιστούν σε κώδικα και οι καταστάσεις συχνά χάνονται. Αυτό είναι το κενό εργαλεία με χρόνους εκτέλεσης, όπως το ExodeUI (το φτιάχνουμε) και το Rive, διεύθυνση για διαδραστικά στοιχεία.
Κλειδί Principles για να θυμάστε
- Αυτόματη κατεύθυνση διάταξης, διάκενο, επένδυση και περιτύλιξη χάρτη στο flexbox
- Hug ≈ μέγεθος περιεχομένου. Πλήρωση ≈ flex: 1 ή 100% πλάτος
- Χαρτογράφηση ροής πλέγματος στο πλέγμα CSS
- Ελέγξτε τα ελάχιστα/μέγιστα μεγέθη, το κείμενο, τις γραμμές βάσης και τα σημεία διακοπής κατά τη μεταβίβαση
- Η κίνηση και οι καταστάσεις είναι το μεγαλύτερο κενό σχεδιασμού προς κώδικα
Συχνές Ερωτήσεις
Πηγές
- Guide to auto layout — Κέντρο βοήθειας Figma
- Basic concepts of flexbox — MDN Έγγραφα Ιστού
- Basic concepts of grid layout — MDN Έγγραφα Ιστού