Παρουσιάζοντας: Το Σχάμα να Αντιδράσει

Πώς χρησιμοποιήσαμε το web API του Figma για να μετατρέψουμε το σχέδιο σε κώδικα React

Προσλαμβάνουμε! Βρείτε έναν πλήρη κατάλογο ανοικτών θέσεων και φωτογραφιών του ευάερου γραφείου μας στο Σαν Φρανσίσκο στη σελίδα σταδιοδρομίας του Figma.

Από την έναρξη του API του Figma, πολλοί άνθρωποι έχουν σκεφτεί για τη δυνατότητα αυτόματης μετατροπής των εγγράφων Figma σε στοιχεία React. Μερικοί από εσάς έχουν κάνει πραγματικά πρωτότυπα εργασίας και η Pagedraw έφτιαξε ακόμη και ένα ολόκληρο προϊόν γύρω από αυτό!

Αγαπάμε τον ενθουσιασμό και σκεφτήκαμε ότι θα μοιραζόμασταν τη δική μας προσπάθεια σε έναν μετατροπέα React, θα συζητούσαμε μερικές από τις λεπτές επιλογές σχεδιασμού και τις τεχνικές λύσεις που εξελίχθηκαν και θα εξηγούσαμε το όραμα που προκάλεσε τη δημιουργία του. Αν θέλετε να ακολουθήσετε, έχουμε ανοίξει τον κώδικα στο GitHub. (Πολύ ενθουσιασμένος για να διαβάσετε αυτήν την ανάρτηση ιστολογίου και θέλετε να παίξετε με το API ανάγνωσης που διαθέτουμε αυτή τη στιγμή; Δείτε τη σελίδα προγραμματιστών μας!)

Θέλαμε να λύσουμε δύο βασικά προβλήματα κατά την οικοδόμηση του Σχάματος για να Αντιδράσουμε. Ο ένας ήταν ο σχεδιασμός για τα συστατικά που παράγουμε να ζούμε όσο το δυνατόν περισσότερο στο Figma. Πόσο εκπληκτικό θα ήταν να ενημερώσετε ένα σχέδιο στο Figma και, στη συνέχεια, κάντε κλικ σε ένα κουμπί για να συγχρονίσετε αυτές τις αλλαγές σχεδιασμού στον ιστότοπό σας; Αυτό σημαίνει επίσης ότι πρέπει να εξασφαλίσουμε ότι η ενημέρωση του σχεδίου σας δεν αντικαταστήσει κανένα προσαρμοσμένο κώδικα που έχουμε γράψει για να καταστήσει λειτουργική την ιστοσελίδα ή την εφαρμογή και ότι φυσικά προσφέρεται για να έχει ζωντανά ο κώδικας σχεδίασης και ο λειτουργικός κώδικας που παράγεται από Figma ξεχωριστά σε καθαρό διαμερίσματα.

Ο δεύτερος αλλά σχετικός στόχος ήταν να διευκολυνθεί η προσάρτηση του υπάρχοντος λειτουργικού κώδικα σε νέα σχέδια. Για παράδειγμα, στο παραπάνω ταξινομημένο παράδειγμα λίστας, θα ήταν ωραίο αν μπορούσαμε να σχεδιάσουμε μια νέα ταξινομημένη λίστα και να επισυνάψουμε εύκολα τον κώδικα που είχαμε γράψει ήδη σε αυτό. Με άλλα λόγια, θα ήταν υπέροχο να έχουμε επαναχρησιμοποιήσιμο τον λειτουργικό μας κώδικα σε όλα τα σχέδια, όπως και πώς θα μπορούσατε να επαναχρησιμοποιήσετε τα εξαρτήματα React.

Πόσο εκπληκτικό θα ήταν να ενημερώσετε ένα σχέδιο στο Figma και, στη συνέχεια, κάντε κλικ σε ένα κουμπί για να συγχρονίσετε αυτές τις αλλαγές σχεδιασμού στον ιστότοπό σας;

Από το Figma στο CSS

Το πρώτο εμπόδιο στο Figma to React ήταν η δημιουργία αντιδραστικών εξαρτημάτων που μοιάζουν με τα σχέδια που αντιπροσωπεύουν - διαφορετικά, δεν υπάρχει λόγος για κάτι τέτοιο. Ας χρησιμοποιήσουμε το παράδειγμα λίστας παραλλαγών από τα παραπάνω:

Πηγή αρχείου Figma

Υπάρχουν πολλοί διαφορετικοί τρόποι με τους οποίους μπορούμε να αναπαράγουμε την εμφάνιση αυτής της λίστας σε HTML. Για παράδειγμα, θα μπορούσαμε να προβάλλουμε μια εικόνα ολόκληρου του πλαισίου και να δημιουργήσουμε ένα στοιχείο το οποίο μόλις σχεδιάζει αυτή την εικόνα. Αυτή η προσέγγιση είναι απλή αλλά πολύ περιορισμένη. για παράδειγμα, είναι σχεδόν αδύνατο να κάνουμε κάτι διαδραστικό εδώ όπως κάνοντας κλικ σε ένα κουμπί για ταξινόμηση.

Το πρώτο εμπόδιο στο Figma to React ήταν η δημιουργία αντιδραστικών εξαρτημάτων που μοιάζουν με τα σχέδια που αντιπροσωπεύουν - διαφορετικά, δεν υπάρχει λόγος για κάτι τέτοιο.

Χρησιμοποιήστε απόλυτη διάταξη σε κόμβους θέσης

Μια καλύτερη προσέγγιση θα ήταν να σπάσει το πλαίσιο στα κομμάτια του συστατικού του, να μετατρέψει κάθε κομμάτι σε ένα στοιχείο DOM όπως ένα

ή ένα , και στη συνέχεια να συνθέσει αυτά τα στοιχεία DOM μαζί. Η σύνταξη αυτών των στοιχείων είναι μια διαδικασία που ονομάζεται διάταξη στην οποία καθορίζουμε πού πρέπει να τοποθετείται κάθε στοιχείο και πώς πρέπει να το μέγεθος σε σχέση με κάθε άλλο στοιχείο.

Το API του Figma παρέχει μια σταθερή βάση για τον προσδιορισμό της διάταξης. Κάθε κόμβος σε ένα έγγραφο έχει μια ιδιότητα που ονομάζεται absoluteBoundingBox. Με τη χρήση του absoluteBoundingBox, μπορούμε να καταλάβουμε ακριβώς πού κάθε κόμβος ζει σήμερα στον καμβά, και πόσο χώρο καταλαμβάνει. Από αυτό, μια ιδέα θα ήταν να πάρουμε κάθε κόμβο, να το καταστήσουμε στοιχείο και στη συνέχεια να χρησιμοποιήσουμε την απόλυτη τοποθέτηση CSS για να την τοποθετήσουμε στη σελίδα. Κάνοντας κάτι τέτοιο, μπορεί να έχουμε κάτι τέτοιο (παρατηρήστε ότι το πλαίσιο παραμένει ακόμα κολλημένο στην επάνω αριστερή γωνία):

Αυτό φαίνεται σχεδόν το ίδιο σαν να είχαμε αποδώσει ολόκληρο το πλαίσιο ως εικόνα, ωστόσο έχουμε ήδη σημειώσει μεγάλη πρόοδο. Τώρα μπορούμε να επιλέξουμε το κείμενο στη λίστα, μπορούμε ενδεχομένως να αντικαταστήσουμε το κείμενο με κάτι δυναμικό και μπορούμε να επισυνάψουμε συμβάντα κάνοντας κλικ σε διαφορετικά πράγματα στη σκηνή (όπως τα βέλη διαλογής). Παρ 'όλα αυτά, παραμένουν πολλές ελλείψεις. Εάν προσθέσουμε ένα μεγάλο μέρος του κειμένου σε αυτό το πλαίσιο λίστας στοιχείων, το κείμενο θα περάσει έξω από το ορθογώνιο. Η εξέταση αυτών των απόλυτων ορίων αποδεικνύεται υπερβολικά περιοριστική. Πρέπει να χαλαρώσουμε τη λαβή μας πάνω στη διάταξη και να επιτρέψουμε στα στοιχεία να αλλάξουν δυναμικά το μέγεθος, όπως σχεδιάστηκε για το σχεδιασμό.

Χρησιμοποιήστε τους περιορισμούς του Figma για να αλλάξετε δυναμικά τους κόμβους

Τα Figma και άλλα εργαλεία σχεδίασης έχουν μια έννοια περιορισμών που μπορούν να εφαρμοστούν σε ένα στρώμα που τους κάνει να αλλάξουν το μέγεθος σύμφωνα με το γονικό τους πλαίσιο. Αυτοί οι περιορισμοί αντικατοπτρίζονται στο API ως ιδιότητα περιορισμών, που εμφανίζεται εδώ για τον προηγούμενο κόμβο κειμένου:

"περιορισμοί": {
  "κάθετη": "TOP",
  "οριζόντια": "LEFT_RIGHT"
}}

Αυτό λέει ότι αυτό το συγκεκριμένο στοιχείο κειμένου θα πρέπει να τοποθετηθεί σε σχέση με την κορυφή του γονέα και θα πρέπει να τεντωθεί με τον γονέα οριζόντια έτσι ώστε να διατηρούνται τα αριστερά και τα δεξιά περιθώρια. Ο γονέας στην περίπτωση αυτή είναι το ορθογώνιο που περιβάλλει το στοιχείο "Λίστα 1". Η εφαρμογή των περιορισμών από το κουτί στην απόλυτη τοποθέτηση είναι μια άμεση χαρτογράφηση στα αριστερά, δεξιά, πάνω και κάτω χαρακτηριστικά στο CSS. Αυτό αφορά το μέγεθος και το σχήμα του κοντέινερ του καταλόγου, αλλά όχι με τα ίδια τα περιεχόμενα της λίστας να αλλάζουν. Για παράδειγμα, πώς θα προσαρμόζονταν αν θέλαμε να προσθέσουμε δυναμικά ένα άλλο στοιχείο λίστας ή αν το κείμενο που πηγαίνει σε αυτό το στοιχείο λίστας ξεπερνά τις διαστάσεις του αρχικού πλαισίου;

Διάταξη: από πάνω προς τα κάτω ή από κάτω προς τα πάνω;

Τα παραπάνω προβλήματα συμβαίνει να είναι αυτό που η ίδια η HTML είναι έμπειρος στην επίλυση. Εάν στοιβάζετε δύο στοιχεία div ένα το ένα πάνω στο άλλο, αλλάζοντας το ύψος του πρώτου div θα προωθήσει αυτόματα το δεύτερο div κάτω. Αυτή η συμπεριφορά δεν λειτουργεί στην περίπτωσή μας, διότι όλα είναι απολύτως τοποθετημένα και έτσι είναι κλειδωμένα στη θέση τους!

Το στοίβαγμα διαιρεί το ένα πάνω στο άλλο με βάση το πόσο περιεχόμενο είναι το καθένα είναι μια προσέγγιση που θα ονομάσουμε "bottom-up layout", δηλαδή ξεκινάμε από τα χαμηλότερα δομικά στοιχεία (ας πούμε κομμάτια κειμένου) και δημιουργούμε τη δομή συνθέτοντας αυτά τα μπλοκ μαζί για να πάρουν το σχήμα των στρωμάτων υψηλότερου επιπέδου. Αντίθετα, αυτό που έχουμε κάνει μέχρι τώρα είναι η διάταξη από πάνω προς τα κάτω, στην οποία καθορίζουμε πόσο διάστημα πρέπει να καταλαμβάνει το πάνω επίπεδο και στη συνέχεια τοποθετούμε τα στοιχεία που αποτελούν αυτό το ανώτερο στρώμα μέσα σε αυτό. Τι γίνεται αν λάβουμε ένα συνδυασμό από προσέγγιση από πάνω προς τα κάτω και από τη βάση προς τα πάνω;

Ας αποφασίσουμε πώς θέλουμε να αντιδράσουμε όταν αλλάζει το περιεχόμενο μέσα σε ένα από τα στοιχεία μας. Σε ορισμένες περιπτώσεις, η απάντηση είναι προφανής:

Φανταστείτε ότι τα διακεκομμένα κουτιά είναι τα στοιχεία που ζουν μέσα σε ένα εξωτερικό πλαίσιο. Εάν προσθέσουμε κείμενο στο πιο πάνω στοιχείο, θα πρέπει να ωθήσουμε τόσο την εικόνα όσο και το κάτω κείμενο προς τα κάτω κατά ίσο ποσό. Αλλά υπάρχουν και άλλες περιπτώσεις στις οποίες η σωστή λύση μπορεί να μην είναι τόσο ξεκάθαρη:

Τι κάνουμε στις περιπτώσεις Α και Β παραπάνω αν θέλουμε να προσθέσουμε κείμενο στο πρώτο κουτί; Η λύση με την οποία καταλήξαμε ήταν ρεαλιστική, αλλά σε πολλές περιπτώσεις ατελής. Η κύρια ιδέα είναι ότι οι περισσότεροι ιστότοποι είναι διατεταγμένοι κάθετα, καθώς η συμβατική ιστοσελίδα είναι ότι μετακινηθείτε από την κορυφή προς τα κάτω για να δείτε όλο το διαθέσιμο περιεχόμενο. Δεδομένου ότι αποφάσισα να αντιμετωπίσω τα παιδικά στοιχεία ενός κόμβου σαν να είχαν γραμμική παραγγελία από πάνω προς τα κάτω.

Εάν το εφαρμόσουμε στο πρώτο παράδειγμα παραπάνω, η παραγγελία μπορεί να φαίνεται κάπως έτσι:

Τώρα, εάν θέλουμε να επεκτείνουμε το πρώτο πλαίσιο κειμένου, πιέζουμε ό, τι έρχεται μετά από αυτό στην παραγγελία για να ταιριάζει με το ποσό που επέκτεινε:

Παρατηρήστε ότι στο παραπάνω παράδειγμα το αποτέλεσμα είναι περίεργο, αλλά λογικό στα όρια. Αντίθετα, αυτό είναι το αποτέλεσμα στο Β:

Αυτό πιθανότατα δεν είναι αυτό που θέλαμε: οι περισσότεροι άνθρωποι αναμένουν ότι η εικόνα και τα άλλα πλαίσια κειμένου θα παραμείνουν στην κορυφή. Υπάρχουν πολλοί τρόποι με τους οποίους θα μπορούσαμε να λύσουμε αυτό το πρόβλημα. Θα μπορούσαμε να εισαγάγουμε heuristics όπως "στοιχεία που είναι κατακόρυφα ευθυγραμμισμένα θα πρέπει να παραμένουν κάθετα ευθυγραμμισμένα" ή να επισημάνουν τους κόμβους στο Figma κατά έναν ορισμένο τρόπο για να δηλώσουν ότι πρέπει να κρατούν τις κατακόρυφες θέσεις τους. Δοκιμάστε τη δική σας προσέγγιση, τροποποιώντας τον κώδικα Figma to React και ενημερώστε μας εάν έχετε οποιεσδήποτε καινοτόμες ιδέες!

Η προσέγγιση 3 σταδίων

Οπλισμένοι με την απόφασή μας, μπορούμε τώρα να επιστρέψουμε για να αντιμετωπίσουμε το γενικό πρόβλημα της διάταξης. Λαμβάνοντας ένα σύνολο κόμβων που ευθυγραμμίζονται TOP, μπορούμε να τις τοποθετήσουμε σε σχέση με το άλλο με τον προσδιορισμό της απόστασης μεταξύ του κάτω μέρους του προηγούμενου στοιχείου και της κορυφής του τρέχοντος στοιχείου:

Γραμμικό περιθώριο με βάση τη διάταξη

Σημειώστε ότι αυτό το περιθώριο μπορεί να είναι αρνητικό. Στη συνέχεια, απλά ορίσαμε την ιδιότητα CSS περιθωρίου κορυφής του τρέχοντος στοιχείου σε αυτή τη διαφορά. Τώρα, αν αλλάξει ένα στοιχείο, οι άλλοι θα ρέουν πάνω και κάτω στη σελίδα όπως θα περίμενε κανείς. Το ίδιο μπορεί να γίνει και για τα ευθυγραμμισμένα στοιχεία BOTTOM, αντιμετωπίζοντας τα ως ξεχωριστή ομάδα. Το αποτέλεσμα είναι ότι για κάθε κόμβο μπορούμε να διαχωρίσουμε τα στοιχεία του παιδιού σε τρεις ομάδες:

  • Μια ομάδα TOP ευθυγραμμισμένων στοιχείων, με διάταξη από κάτω προς τα πάνω
  • Μια ομάδα στοιχείων που είναι CENTER, SCALE ή TOP_BOTTOM ευθυγραμμισμένα, τοποθετημένα με απόλυτη διάταξη (ή από πάνω προς τα κάτω)
  • Μια ομάδα στοιχείων BOTTOM ευθυγραμμισμένα, και πάλι με διάταξη από κάτω προς τα πάνω
Διαμόρφωση 3 στοιβών

Εάν εφαρμόζουμε αυτές τις ιδέες στη λίστα με τις οποίες μπορούμε να δώσουμε προτεραιότητα, μπορούμε τώρα να εξάγουμε ένα πλήρως αντιδραστικό συστατικό, το οποίο αλλάζει και το μέγεθος ώστε να ταιριάζει στο δοχείο και να προσαρμόζεται στο μεταβαλλόμενο περιεχόμενο μέσα του, όπως φαίνεται παρακάτω.

Περιτύλιξη και περιορισμοί στη δράση

Ένα πράγμα που πρέπει να επισημανθεί σε αυτό το κλιπ είναι ότι το υποσέλιδο σταματάει να κινείται σε ένα συγκεκριμένο σημείο - με άλλα λόγια, το έγγραφο σταματά να γίνεται μικρότερο σε ένα σταθερό σημείο. Αυτό είναι κρίσιμο για να διασφαλιστεί ότι για παράδειγμα το υποσέλιδο δεν εμπλέκεται στο κύριο περιεχόμενο του στοιχείου. Ωστόσο, αυτό δεν μπορεί απλά να εφαρμοστεί ως ελάχιστο ύψος στο στοιχείο: καθώς το κείμενο αλλάζει μέγεθος, το ελάχιστο ύψος πρέπει να αυξηθεί για να φιλοξενήσει το επιπλέον κείμενο. Η λύση εδώ είναι να προσθέσουμε ένα κατώτατο περιθώριο στα κορυφαία ευθυγραμμισμένα στοιχεία (και ένα κορυφαίο περιθώριο στα στοιχεία που ευθυγραμμίζονται στο κάτω μέρος) έτσι ώστε να τείνουν προς το αντίθετο άκρο του γονέα τους και να "προωθούν" τον γονέα τους σε ένα ορισμένο μέγεθος .

Σπρώξτε προς τα έξω και ταυτόχρονα

Τέλος, ας κοιτάξουμε πίσω τον τρόπο με τον οποίο οι περιορισμοί από κάτω προς τα πάνω και από πάνω προς τα κάτω αλληλεπιδρούν μεταξύ τους στην περίπτωση της παραπάνω λίστας. Σε αυτό το επόμενο παράδειγμα υπογραμμίζουμε τρία στοιχεία που είναι καθοριστικά για την σωστή προσαρμογή των στοιχείων λίστας: το πλαίσιο που περιέχει (το εξωτερικό διάκενο), το πεδίο κειμένου (εσωτερικό διακεκομμένο πλαίσιο) και το στρογγυλό ορθογώνιο περίγραμμα.

Περιορισμοί απεικονίζονται

Η σχέση μεταξύ αυτών των στοιχείων είναι η εξής: το στοιχείο κειμένου και το ορθογώνιο στάδιο είναι και τα δύο παιδιά του πλαισίου. Το στοιχείο κειμένου έχει LEFT_RIGHT και TOP περιορισμούς στο πλαίσιο, και το ορθογώνιο έχει LEFT_RIGHT και TOP_BOTTOM περιορισμούς. Καθώς το πλαίσιο στενεύει, το κείμενο πρέπει να συμπιεστεί σε μια δεύτερη γραμμή, αυξάνοντας το ύψος του. Επειδή τα περιθώρια παραμένουν σταθερά, αυτό προκαλεί επίσης τη μεγέθυνση του πλαισίου που περιέχει, γεγονός που προκαλεί την πίεση του επόμενου πλαισίου στη λίστα. Την ίδια στιγμή, επειδή το ορθογώνιο (και πάλι, με μπλε χρώμα) έχει έναν περιορισμό TOP_BOTTOM στο πλαίσιο αυτό, πρέπει επίσης να αλλάξει το μέγεθος και να γίνει μεγαλύτερο για να ικανοποιήσει αυτόν τον περιορισμό. Έχουμε λοιπόν έναν περιορισμό από κάτω προς τα πάνω, όπου το εσωτερικό κείμενο κάνει το εξωτερικό πλαίσιο μεγαλύτερο, και στη συνέχεια ένας περιορισμός από την κορυφή προς τα κάτω όπου το εξωτερικό πλαίσιο καθιστά το εσωτερικό ορθογώνιο μεγαλύτερο. Αισθάνομαι πραγματικά ότι αυτή είναι μια από αυτές τις αλληλεπιδράσεις όπου το αποτέλεσμα είναι εντελώς ασήμαντο (αυτή είναι ακριβώς η συμπεριφορά που θα περιμένατε) αλλά το ταξίδι για να φτάσετε είναι αρκετά δημιουργικό.

Κάντε τον κατάλογο να λειτουργεί σαν λίστα

Τώρα που έχουμε τους εαυτούς μας κάτι που μοιάζει με μια λίστα, πώς θα κάνουμε αυτή τη λίστα να κάνουμε πράγματα λίστα; Πώς μπορούμε να το φορτώσουμε αυθαίρετα δεδομένα, για παράδειγμα; Ή να ταξινομήσετε αυτά τα δεδομένα;

Ο μετασχηματιστής μας React θα πρέπει να εκτοξεύσει μερικά αρχεία με στοιχεία React σε αυτά. Κάθε φορά που αλλάζουμε το σχέδιο, θα πρέπει τουλάχιστον να αλλάξουμε κάποιο μέρος του περιεχομένου ορισμένων από αυτά τα αρχεία για να αναπαριστούμε τις αλλαγές στο σχέδιο. Προκειμένου να κάνουν τα στοιχεία να κάνουν πράγματα που θέλουμε πιθανώς να γράψουμε κάποιο κώδικα κάπου που μπορεί να αλληλεπιδρά με τα παραγόμενα στοιχεία. Τέλος, ο κώδικας που γράφουμε δεν πρέπει ποτέ να αντικατασταθεί από τη γεννήτρια και ιδανικά να είναι φορητός από το ένα συστατικό στο άλλο.

Ίσως έχετε παρατηρήσει μέχρι τώρα ότι η προηγούμενη ενότητα σχετικά με τη διάταξη δεν εξαρτάται από το React καθόλου. Έχετε δίκιο - θα μπορούσαμε να κάνουμε τον μετατροπέα μας να παράγει καθαρό HTML και CSS και θα είχε δουλέψει εξίσου καλά μέχρι τώρα. Αυτό συμβαίνει επειδή μια καθαρή μετατροπή ενός πλαισίου Figma έχει ως αποτέλεσμα μια στατική συνιστώσα και η React δεν παρουσιάζει σημαντικά πλεονεκτήματα όταν πρόκειται για την απόδοση μιας στατικής τοποθεσίας εκτός από τη δυνατότητα δημιουργίας κώδικα.

Τώρα που έχουμε τους εαυτούς μας κάτι που μοιάζει με μια λίστα, πώς θα κάνουμε αυτή τη λίστα να κάνουμε πράγματα λίστα;

Αλλά τώρα θα πρέπει να κλίνουμε στο React πιο έντονα. Θα εισαγάγω μόνο δύο βασικές έννοιες που σχεδίασα για να λύσω το πρόβλημα της λειτουργικότητας. Το πλεονέκτημά τους είναι ότι είναι απλά αλλά εκπληκτικά ισχυρά, αλλά σε καμία περίπτωση δεν υπονοώ ότι αυτές οι έννοιες είναι οι μόνοι τρόποι να γίνουν τα πράγματα - ίσως μπορείτε να προσφέρετε ή να εφαρμόσετε τις δικές σας λύσεις σε αυτό το πρόβλημα.

Gadgets: επαναχρησιμοποιήσιμα μπλοκ κώδικα που προσκολλώνται στα σχέδια

Η πρώτη ιδέα που θέλω να εισαγάγω είναι αυτή ενός Gadget (που ονομάζεται "components" στον κώδικα). Ένα Gadget είναι ένα περιτύλιγμα που περνά γύρω από κάθε κόμβο σε ένα σχέδιο Figma και προσθέτει ένα κομμάτι της λειτουργικότητας σε αυτό - οποιαδήποτε λειτουργικότητα καθόλου. Μπορείτε να δημιουργήσετε ή να επισυνάψετε ένα Gadget σε έναν κόμβο Figma θέτοντας ένα σύμβολο κατατεμαχισμού ('#') μπροστά από το όνομά του.

Για παράδειγμα, εάν θέλετε να πείτε ότι ένα πλαίσιο θα πρέπει να συμπεριφέρεται σαν ένα ρολόι, μπορείτε να το ονομάσετε #Clock. Αυτό δεν θα κάνει τίποτα ξεχωριστό στο ίδιο το αρχείο, αλλά θα ενεργοποιήσει τον κόμβο που θα μετατραπεί σε Gadgetized στον μετατροπέα - αυτό θα δημιουργήσει ένα αρχείο Gadget που ονομάζεται CClock.js το οποίο μπορείτε να συμπληρώσετε με λειτουργικότητα. Ίσως ο πιο εύκολος τρόπος να το εξηγήσετε αυτό είναι να δείξετε ένα παράδειγμα:

Δείγμα κώδικα

Σε αυτή τη σκηνή έχουμε ένα δοχείο με δύο πλαίσια μέσα. Ένα πλαίσιο περιέχει μια εικόνα ενός κύκλου και το άλλο ένα τετράγωνο. Ας υποθέσουμε ότι θέλουμε και τα δύο πλαίσια να παρουσιάζουν κάποια προσαρμοσμένη (αλλά ίδια) συμπεριφορά, όπως και να θέλουμε να ζωντανέψουμε και τα δύο να περιστρέφονται. Μπορούμε να τυλίξουμε κάθε καρέ στο ίδιο Gadget (που ονομάζεται #Spinner). Αυτό θα δημιουργήσει ένα προσαρμόσιμο αρχείο κώδικα CSpinner.js. Η παραγόμενη αριστερή πλευρά θα παραπέμπει σε αυτό το στοιχείο Gadget κάθε φορά που ένας κόμβος σχολιασμένος ως #Spinner εμφανίζεται στο δέντρο κόμβων. Ο κώδικας θα μεταβιβάσει επίσης ένα nodeID στο Gadget που μπορεί να χρησιμοποιήσει για να αναζητήσει τα περιεχόμενά του σε κάθε περίπτωση - η δύναμη των Gadgets είναι ότι μπορούν να εφαρμοστούν σε οποιονδήποτε κόμβο, έτσι ώστε τα περιεχόμενα του κόμβου να διαφέρουν από περίπτωση σε περίπτωση.

Ένα Gadget είναι ένα περιτύλιγμα που περνά γύρω από κάθε κόμβο σε ένα σχέδιο Figma και προσθέτει ένα κομμάτι της λειτουργικότητας σε αυτό - οποιαδήποτε λειτουργικότητα καθόλου.

Αυτό σημαίνει ότι αν κωδικοποιήσουμε το CSpinner.js για να κάνουμε τα περιεχόμενα να ζωντανεύουν και να περιστρέφονται, μπορούμε να κάνουμε οποιονδήποτε κόμβο να περιστραφεί περιγράφοντας το #Spinner και συνδέοντας έτσι τον κώδικα Gadget σε αυτό. Αν εφαρμόσουμε τον κώδικα κινούμενης εικόνας στον CSpinner, θα έχουμε αυτό:

#Spinner στη δράση

Παρατηρήστε ότι στη συνάρτηση rendering το στοιχείο CSpinner απλά αναφέρει το στοιχείο που λαμβάνεται από το getComponentById. Ο CSpinner δεν γνωρίζει τι είναι το περιτύλιγμα - μια πλήρη αποσύνθεση της λειτουργίας από το σχεδιασμό. Σημειώστε επίσης ότι μόλις δημιουργηθεί το CSpinner.js, δεν θα το αντικαταστήσουμε ποτέ: οι αλλαγές που έγιναν σε αυτό συνεχίζονται, ανεξάρτητα από το πόσες φορές αναδημιουργείτε τα σχέδια.

Μεταβλητές: αντικαταστήστε το κείμενο με σύμβολο κράτησης θέσης με δυναμικές τιμές

Οι μεταβλητές είναι η δεύτερη έννοια που εισάγουμε. Μια μεταβλητή είναι απλά ένας κόμβος κειμένου, του οποίου το όνομα αρχίζει με $. Ένας τέτοιος κόμβος θα εμφανίσει από προεπιλογή το κείμενο στο σχέδιο, αλλά μπορεί να αντικατασταθεί από το React props για να δείξει αυθαίρετο κείμενο. Η ιδιότητα που αντικατέστησε το κείμενο είναι ίδια με το όνομα του κόμβου μείον το $. Έτσι, για παράδειγμα, αν έχω κόμβο που ονομάζεται $ κοτόπουλο και τα στηρίγματα που μπαίνουν σε αυτό το στοιχείο μοιάζουν με {κοτόπουλο: "ερωτήσεις"}, τότε το κείμενο αυτού του κόμβου θα αντικατασταθεί με τη συμβολοσειρά "ζήτημα". Μπορείτε να στείλετε αυτές τις ιδιότητες πατώντας τους κόμβους με μεταβλητές σε ένα Gadget.

Ας το βάλουμε όλοι μαζί: για την ταξινομημένη λίστα μας, θέλουμε κάτι που μπορεί να πάρει μια πηγή δεδομένων και να συμπληρώσει μια καταχώρηση λίστας για κάθε στοιχείο στην πηγή δεδομένων. Δεδομένου ότι θέλουμε να λάβουμε ένα στοιχείο λίστας και να το αντιγράψουμε πολλές φορές, είναι λογικό να βάλουμε ένα Gadget γύρω από τον κόμβο που αντιστοιχεί στο στοιχείο της λίστας. Ένα τέτοιο Gadget μπορεί να μοιάζει με αυτό:

Μπορούμε να κάνουμε αρκετές παρατηρήσεις σχετικά με αυτό το απόσπασμα κώδικα:

  • Δεν διαβάζουμε από την πηγή δεδομένων απευθείας εδώ. Μάλλον περιμένουμε να περάσουμε μια λίστα με στοιχεία που έχουν ήδη υποβληθεί σε επεξεργασία. Ο λόγος για τον οποίο θα γίνει εμφανής αργότερα.
  • Το όνομα του Gadget αρχίζει με ένα C, το οποίο ισχύει για όλα τα πρότυπα Gadget που δημιουργούνται με τον μετατροπέα. Αυτό γίνεται για να διασφαλίσουμε ότι μπορούμε πάντα να ξεκινήσουμε με μια κεφαλαία επιστολή που είναι η σύμβαση React για τα ονόματα συστατικών (ένας άλλος τρόπος θα ήταν απλώς να κεφαλαιοποιήσετε το πρώτο γράμμα).
  • Προεπιλεγμένη είναι η εμφάνιση του περιεχομένου του εγγράφου Figma εάν δεν παρέχονται λίστεςListItems. Αυτό συνιστάται ώστε η σελίδα να μπορεί να λειτουργήσει χωρίς να χρειάζεται να παρέχει πηγές δεδομένων.
  • Μπορούμε να χρησιμοποιήσουμε το Component, που είναι ο κόμβος που τυλίγεται το Gadget, πολλές φορές στη λειτουργία rendering! Έτσι μπορούμε να αντιγράψουμε το στοιχείο της λίστας.
  • Πρέπει να συσκευάσουμε κάθε στοιχείο σε ένα div. Αυτό ισχύει για τη θέση: το σχετικό στυλ, το οποίο είναι απαραίτητο στην περίπτωση του αρχείου μας. Οι λεπτομέρειες για το λόγο αυτό δεν είναι σημαντικές, αλλά είναι ωραίο να το κάνουμε αυτό. Σημειώστε ότι θα μπορούσατε εύκολα να προσθέσετε μια κλάση εδώ και να το στυλ αυτό στο CSS. Αντιδρούν στην πραγματικότητα αποθαρρύνει inline στυλ στον οδηγό στυλ του. Μπορείτε να φανταστείτε την εφαρμογή ενός μετατροπέα που εξάγει ένα αρχείο CSS χωρίς υπερβολική πρόσθετη δυσκολία.

Γιατί λοιπόν δεν μπορούμε απλά να φορτώσουμε την πηγή δεδομένων απευθείας σε αυτό το στοιχείο; Ο λόγος είναι επειδή θέλουμε να δημιουργήσουμε μια λίστα με τις παραμέτρους και οι έλεγχοι για τη διαλογή είναι εκτός αυτού του στοιχείου. Επειδή το στοιχείο ListItems και τα κουμπιά για ταξινόμηση αύξουσας και κατηφορικής βρίσκονται σε τελείως διαφορετικά υποκείμενα, μπορούν να επικοινωνούν μεταξύ τους μόνο μέσω ενός κοινού γονέα. Πρέπει να μιλήσουν μέσω αυτού του γονέα, οπότε ίσως και ο γονέας να είναι υπεύθυνος για να είναι η κανονική πηγή της αλήθειας για τα στοιχεία της λίστας.

Υπάρχουν πολλοί τρόποι γύρω από αυτό. Θα μπορούσατε εύκολα να επισυνάψετε το Redux σε κάθε στοιχείο και να επικοινωνήσετε μέσω των ενεργειών και του παγκόσμιου καταστήματος. Αυτό θα είχε επίσης το πλεονέκτημα ότι είναι πιο διατηρήσιμο. Αλλά για λόγους απλούστευσης κώδικα, θα δείξω πώς να επιτύχουμε το ίδιο τελικό αποτέλεσμα με το React μόνο.

Φορτώστε προσαρμοσμένα δεδομένα στη λίστα

Στη συνέχεια, ρυθμίστε το κοινό γονικό στοιχείο:

Εάν μεταβιβάσουμε μια λίσταSource σε αυτό το Gadget, θα επιχειρήσει να φορτώσει τη διεύθυνση URL που είναι αποθηκευμένη στο listSource και να αποθηκεύσει το προκύπτον αναλυμένο αντικείμενο JSON στο listItems. Ορίζουμε επίσης δύο λειτουργίες διαλογής και τις μεταβιβάζουμε ως ιδιότητες στο στοιχείο Component. Τώρα, οποιοσδήποτε κόμβος που είναι απόγονος του CSortableList μπορεί να καλέσει αυτές τις λειτουργίες ταξινόμησης και αν βάλουμε ένα CListItems Gadget προς τα κάτω από αυτό, θα είναι σε θέση να καταστήσει τη λίστα από την πηγή δεδομένων!

Τέλος, θα παρουσιάσουμε για λίγο το Gadget που ενεργοποιεί τη διαλογή:

Αυτό το Gadget είναι τυλιγμένο γύρω από το κουμπί που ενεργοποιεί την ταξινόμηση της λίστας με αύξουσα σειρά. Επειδή ένας από τους προγόνους του είναι CSortableList, μπορούμε να καλέσουμε στη λειτουργία props.sortAscending (), η οποία θα προκαλέσει την αλλαγή της κατάστασης στο CSortableList, ενεργοποιώντας την επαναφορά του Gadget CListItems και αναδιάταξη των στοιχείων της λίστας. Ας επισυνάψουμε όλα αυτά τα Gadgets στον αρχικό μας σχεδιασμό, δημιουργώντας ένα συστατικό CSortableList με listSource που έχει οριστεί στο /shapes.json και δείτε τι συμβαίνει:

Ταξινόμηση προσαρμοσμένων δεδομένων

Επαναχρησιμοποίηση κώδικα

Αυτό το συγκεκριμένο παράδειγμα είναι τώρα λειτουργικό! Ακόμα πιο συναρπαστικό όμως είναι ότι τώρα που έχουμε αυτόν τον κώδικα, είναι εύκολο να το επισυνάψουμε σε οτιδήποτε θέλουμε να κάνουμε σε μια λίστα με την ονομασία των κόμβων στο Figma σε αυτό που ονομάσαμε Gadgets μας. Καταφέραμε να ενσωματώσουμε λειτουργίες σε αυτά τα αρχεία Gadget που μπορούν να καταστραφούν αυθαίρετα σε οποιοδήποτε κόμβο Figma. Είναι αυτός ο τρόπος με τον οποίο θα πρέπει να δημιουργηθούν διεπαφές; Πιθανώς όχι ακριβώς. Υπάρχουν μαθήματα που πρέπει να μάθουμε εδώ και γνώσεις που μπορούν να βρεθούν για την προώθηση του τρόπου με τον οποίο σκεφτόμαστε την αλληλεπίδραση του σχεδιασμού και του κώδικα; Ελπιζουμε.

Είναι αυτός ο τρόπος με τον οποίο θα πρέπει να δημιουργηθούν διεπαφές; Πιθανώς όχι ακριβώς.

Μελλοντική εργασία: πρωτότυπα, CSS Grid, Layout Grids

Μερικές ιδέες για την επέκταση του Σχάσματος στο React:

  • Λάβετε υπόψη τους πρωτότυπους συνδέσμους έτσι ώστε το κλικ σε ένα στοιχείο να μετατρέπει την εφαρμογή σε διαφορετική κατάσταση
  • Εφαρμόστε καταστάσεις αιώρησης
  • Δημιουργήστε ένα φύλλο στυλ που χρησιμοποιεί το πλέγμα CSS για να σχεδιάσετε τα στοιχεία
  • Σέβονται τις στήλες και τις σειρές διάταξης στο Σχ
  • Εφαρμόστε υποστήριξη για τους περιστρεφόμενους κόμβους (αυτή τη στιγμή οποιοσδήποτε κόμβος με περιστροφή ή ανύψωση δεν θα εκδοθεί σωστά)

Πάω δυτικά

Εδώ παρουσιάσαμε αυτό που ελπίζουμε να είναι ένα ακατέργαστο διαμάντι. Καθορίσαμε τη στρατηγική μας για τη χαρτογράφηση των περιορισμών στην HTML και για την επισύναψη του επαναχρησιμοποιούμενου κώδικα σε σχέδια. Αν χάσατε το σύνδεσμο στην εισαγωγή, έχουμε ανοίξει τον κώδικα για το Figma To React στο Github.

Ο σχεδιασμός της διασύνδεσης μπορεί να ωφεληθεί από την αγκαλιά του κώδικα, αντί να έχει σχεδίαση και κώδικα ζωντανά σε δύο ξεχωριστούς κόσμους που μιμούνται ο ένας τον άλλον. Με τη συγχώνευσή τους σε μια κοινόχρηστη βιβλιοθήκη, οι σχεδιαστές και οι προγραμματιστές μπορούν να μειώσουν την ομαλή εργασία και να ξοδέψουν χρόνο σε αυτά που έχουν σημασία: να επιλύσουν μεγαλύτερες προκλήσεις.

Ενθουσιασμένος για να χτίσετε κάτι δικό σας με το API μας; Προχωρήστε στη σελίδα Προγραμματιστές για έμπνευση και το κανάλι Show & Tell στο Spectrum για μια κοινότητα συναδέλφων. Το μέλλον είναι δικό σου να σφυρηλατήσουμε.