Η Figma πάντα ενθάρρυνε τη συνεργασία μεταξύ προγραμματιστών και σχεδιαστών. Προσπαθεί για ένα ατελείωτο θησαυροφυλάκιο προσθηκών που δημιουργούνται από την κοινότητα. Χρειάζεστε τρισδιάστατα στοιχεία; Υπάρχει ένα πρόσθετο για αυτό. Χρειάζεστε αφηρημένα SVG; Υπάρχει ένα πρόσθετο για αυτό, Πάρα πολύ.
Τούτου λεχθέντος, το σχεδιαστικό μέρος του Figma ήταν πάντα σχετικά στατικό - πάντα λειτουργούσε με μη μετακινούμενα ορθογώνια συνδεδεμένα μεταξύ τους μέσω προκαθορισμένων αλληλεπιδράσεων με τους χρήστες. Αλλά τι θα γινόταν αν σας έλεγα ότι τα σχέδιά σας θα μπορούσαν ξαφνικά να ζωντανέψουν — ότι θα μπορούσαν να είναι κινούμενα, διαδραστικά και ακόμη και πολιτιστικά; Τότε, τι θα διαχώριζε την έννοια από την υλοποίηση;
Σχ ανακοίνωσε τον Ιούνιο ότι φέρνει στο τραπέζι γραφικά στοιχεία που υποστηρίζονται από JavaScript. Τώρα, οι σχεδιαστές μπορούν να περιηγηθούν και να εφαρμόσουν στοιχεία που βασίζονται στη λογική απευθείας στο Figma!
Πες γεια σε το API Widgets! Θέλετε να μάθετε τι είναι και πώς να το χρησιμοποιήσετε; Αυτό ακριβώς θα κάνουμε μαζί σε αυτήν την ανάρτηση.
Τα γραφικά στοιχεία Figma ανοίγουν χιλιάδες δυνατότητες
Φανταστείτε ότι εργάζεστε όλο το εικοσιτετράωρο με τον σύντροφό σας για να σχεδιάσετε μια μεγάλη εφαρμογή εστιατορίου. Συνεργάζεστε και οι δύο ήδη στον ίδιο πίνακα Figma. και οι δύο μοιράζεστε το ίδιο ακριβώς έγγραφο με αλλαγές που συμβαίνουν κατά τη διάρκεια της πτήσης.
Σίγουρα, γνωρίζετε ήδη ότι η συνεργασία περιλαμβάνει περισσότερα από τη διαδικασία σχεδιασμού:
- διαχείριση έργου,
- φιλοξενία ψηφοφοριών για τη συγκέντρωση ψήφων,
- εισαγωγή και οπτικοποίηση ψευδών δεδομένων,
- και ίσως ακόμη και να παίξετε ένα παιχνίδι για πολλούς παίκτες για να χαλαρώσετε μετά από πολλές ώρες εργασίας.
Απαιτούμε απλώς ένα άτομο να διαχειρίζεται τα πάντα και να στέλνει συνδέσμους σε άλλα μέλη της ομάδας. Αλλά ω, αυτό δεν είναι πολύ αποτελεσματικό, έτσι δεν είναι;
Λοιπόν, εκεί μπαίνουν στο παιχνίδι τα widgets. Μπορούμε να τα κάνουμε όλα αυτά — ναι, τα πάντα — χωρίς να φύγουμε ποτέ από το Figma.
Ακολουθούν μερικοί από τους τρόπους με τους οποίους μπορεί να θέλετε να χρησιμοποιήσετε γραφικά στοιχεία στο Figma:
Η λίστα πάει εμείς και εμείς. Όπως μπορείτε να πείτε, υπάρχει ήδη μια πληθώρα γραφικών στοιχείων που μπορείτε να χρησιμοποιήσετε ελεύθερα στα έγγραφά σας. Στην πραγματικότητα, μπορείτε να προσθέσετε Widgets απευθείας στον πίνακα σας από το μενού Widgets (Shift+I).
Αλλά δεν είμαστε εδώ για να μάθουμε πώς να χρησιμοποιούμε widget, γιατί αυτό είναι εύκολο. Ας κάνουμε αυτό που κάνουμε καλύτερα: θα δημιουργήσουμε το δικό μας widget Figma! Αυτό θα είναι εμπνευσμένο από Ιστότοπος με αποσπάσματα σχεδιασμού του Chris Coyier. Θα πάρουμε το API, θα το τροφοδοτήσουμε στο γραφικό στοιχείο και, στη συνέχεια, θα εμφανίσουμε τυχαία εισαγωγικά σχεδίασης απευθείας στο Figma.
Να τι χρειαζόμαστε
Δεν μου αρέσει να είμαι ο φορέας των κακών ειδήσεων, αλλά για να αναπτύξετε widget, πρέπει να είστε σε Windows ή Mac. Χρήστες Linux, λυπάμαι, αλλά δεν έχετε τύχη. (Μπορείς ακόμα χρησιμοποιήστε ένα VM αν θέλετε να ακολουθήσετε.)
Θα πάμε κατεβάστε το Figma Desktop εφαρμογή. Ο απλούστερος τρόπος για να ξεκινήσετε είναι να δημιουργήσετε ένα πρότυπο widget, απευθείας από την εφαρμογή.
Ας δημιουργήσουμε έναν νέο πίνακα ανοίγοντας το μενού widgets (Shift+ I), μετάβαση στο Ανάπτυξη καρτέλα και δημιουργώντας ένα νέο στοιχείο.
Μετά από αυτό, το Figma θα σας ζητήσει να ονομάσετε το νέο widget και να αποφασίσετε εάν είναι πιο προσαρμοσμένο σχεδιαστικές σανίδες ή σανίδες FigJam πολύ. Η πρώτη επιλογή είναι επαρκής για τους σκοπούς αυτού του άρθρου.
Και η προσαρμογή δεν τελειώνει εδώ. Το Figma θα σας δώσει επίσης την επιλογή να ξεκινήσετε με ένα προκατασκευασμένο widget μετρητή ή μια εναλλακτική λύση με δυνατότητα iFrame που σας δίνει επίσης πρόσβαση στα Canvas και Fetch API (καθώς και σε όλα τα άλλα API του προγράμματος περιήγησης). Θα πάμε με την απλή επιλογή "Empty", αλλά τελικά θα την τροποποιήσουμε μόνοι μας για να χρησιμοποιήσουμε το Fetch API.
Στη συνέχεια, θα σας ζητηθεί να αποθηκεύσετε το νέο σας έργο widget σε έναν ειδικό κατάλογο στο σύστημά σας. Μόλις γίνει αυτό, εκκινήστε το τερματικό σας και κατευθύνετέ το σε αυτόν τον φάκελο. Μην εκτελείτε ακόμα εντολές — θα το κάνουμε αργότερα και σκόπιμα θα λάβουμε ένα σφάλμα με στόχο να μάθουμε περισσότερα σχετικά με το API Widgets.
Σχεδιασμός του widget
Τραβάμε το σχέδιο κατευθείαν από Ιστότοπος με αποσπάσματα σχεδιασμού του Chris Coyier. Λοιπόν, ας πάμε εκεί και ας βουτήξουμε ενεργοποιώντας το DevTools.
Οι δύο βασικές συντομεύσεις που χρησιμοποιώ εδώ είναι Ctrl+Shift+C (Ή Cmd+Shift+C) για εναλλαγή του εργαλείου "Επιλογή στοιχείου" και Shift+Click για να αλλάξετε τη μορφή χρώματος σε κώδικα HEX. Αυτό το κάνουμε για να μάθουμε για τα χρώματα, τις γραμματοσειρές, τα βάρη και τα μεγέθη γραμματοσειρών που χρησιμοποιούνται στον ιστότοπο του Chris. Όλες αυτές οι πληροφορίες είναι κρίσιμες για τη δημιουργία ενός γραφικού στοιχείου που μοιάζει πολύ με το Figma, το οποίο θα είναι το επόμενο βήμα μας! Μπορείς πιάστε το σχεδιασμένο εξάρτημα και χρησιμοποιήστε το στον δικό σας καμβά.
Δεν θα υπεισέλθω σε πολλές λεπτομέρειες εδώ, καθώς το κύριο θέμα αυτού του άρθρου είναι η δημιουργία γραφικών στοιχείων γράφοντας κώδικα. Αλλά δεν μπορώ να τονίσω αρκετά πόσο σημαντικό είναι να φροντίζεις καλά στυλ γραφικών στοιχείων… Το CSS-Tricks έχει ήδη μια πληθώρα από σεμινάρια Figma προσανατολισμένα στο σχεδιασμό; δεν θα μετανιώσετε που τα προσθέσατε στη λίστα ανάγνωσης.
Δημιουργία της διάταξης για το widget μας
Με τη σχεδίαση έξω από το δρόμο, ήρθε η ώρα να βγάλουμε τα δάχτυλά μας προγραμματισμού και να αρχίσουμε να χτίζουμε τα εργαλεία του widget μας.
Είναι πολύ ενδιαφέρον πώς το Figma μεταφράζει τα δομικά στοιχεία σχεδιασμού του σε στοιχεία που μοιάζουν με React. Τα στοιχεία πλαισίου με τη δυνατότητα αυτόματης διάταξης, για παράδειγμα, αντιπροσωπεύονται ως το <AutoLayout /> συστατικό στον κώδικα. Επιπλέον, θα χρησιμοποιήσουμε δύο ακόμη στοιχεία: <Text /> και <SVG />.
Ρίξτε μια ματιά στον πίνακα Figma μου… Σας ζητώ ακριβώς να εστιάσετε στο δέντρο των αντικειμένων. Είναι αυτό που χρειαζόμαστε για να μπορούμε να μεταφράσουμε το σχέδιο του widget μας σε κώδικα JSX.
Όπως μπορείτε να δείτε, το γραφικό στοιχείο προσφορών σχεδίασης απαιτεί την εισαγωγή τριών στοιχείων. Αυτός είναι ένας αξιοπρεπής αριθμός εξαρτημάτων λαμβάνοντας υπόψη ότι το πλήρες API περιέχει μόνο οκτώ κόμβους που βασίζονται σε στρώματα. Αλλά όπως θα δείτε σύντομα, αυτές οι μονάδες είναι υπεραρκετές για τη δημιουργία όλων των ειδών διατάξεων.
// code.tsx
const { widget } = figma;
const { AutoLayout, Text, SVG } = widget;Και με αυτό, έχουμε όλα όσα χρειαζόμαστε για να προχωρήσουμε και να δημιουργήσουμε τον σκελετό του γραφικού μας στοιχείου όπως θα κάναμε στο React:
function QuotesWidget() {
const quote = `...`;
const author = `...`;
return (
<AutoLayout>
<SVG />
<AutoLayout>
<Text>{quote}</Text>
<Text>— {author}</Text>
</AutoLayout>
<SVG />
</AutoLayout>
);
}
widget.register(QuotesWidget);Αυτός ο κώδικας είναι πολύ μπερδεμένος, το λιγότερο. Αυτήν τη στιγμή, δεν μπορούμε να ξεχωρίσουμε τα επίπεδα σχεδίασης. Ευτυχώς, είμαστε σε θέση να λύσουμε εύκολα αυτό το πρόβλημα χρησιμοποιώντας το name ιδιοκτησία.
<AutoLayout name={"Quote"}>
<SVG name={"LeftQuotationMark"} />
<AutoLayout name={"QuoteContent"}>
<Text name={"QuoteText"}>{quote}</Text>
<Text name={"QuoteAuthor"}>— {author}</Text>
</AutoLayout>
<SVG name={"RightQuotationMark"} />
</AutoLayout>;Και, φυσικά, ακόμα δεν μπορούμε να δούμε τα εισαγωγικά μας SVG, οπότε ας εργαστούμε για να το διορθώσουμε. ο <SVG/> συστατικό αποδέχομαι α srcιδιότητα που παίρνει τον πηγαίο κώδικα για ένα στοιχείο SVG. Δεν υπάρχουν πολλά να πούμε για αυτό, οπότε ας το κρατήσουμε απλό και ας μεταβούμε κατευθείαν στον κώδικα:
const leftQuotationSvgSrc = `<svg width="117" height="103" viewBox="0 0 117 103" fill="none" xmlns="<http://www.w3.org/2000/svg>">
// shortened for brevity
</svg>`;
const rightQuotationSvgSrc = `<svg width="118" height="103" viewBox="0 0 118 103" fill="none" xmlns="<http://www.w3.org/2000/svg>">
// shortened for brevity
</svg>`;
function QuotesWidget() {
return (
<SVG name={"LeftQuotationMark"} src={leftQuotationSvgSrc} />
<SVG name={"RightQuotationMark"} src={rightQuotationSvgSrc} />
);
}Νομίζω ότι όλοι μπορούμε να συμφωνήσουμε ότι όλα είναι πολύ πιο ξεκάθαρα τώρα! Όταν ονομάζουμε πράγματα, ο σκοπός τους γίνεται ξαφνικά πολύ πιο προφανής στους αναγνώστες του κώδικά μας.
Προεπισκόπηση του widget μας σε πραγματικό χρόνο
Το Figma προσφέρει μια εξαιρετική εμπειρία προγραμματιστή κατά τη δημιουργία γραφικών στοιχείων, συμπεριλαμβανομένων (αλλά δεν περιορίζεται σε) θερμή επαναφόρτωση. Με αυτήν τη δυνατότητα, είμαστε σε θέση να κωδικοποιούμε και να κάνουμε προεπισκόπηση των αλλαγών στο widget μας σε πραγματικό χρόνο.
Ξεκινήστε ανοίγοντας το μενού γραφικών στοιχείων (Shift+I), μεταβαίνοντας στην καρτέλα ανάπτυξη και κάνοντας κλικ ή σύροντας το νέο σας γραφικό στοιχείο στον πίνακα. Δεν μπορείτε να εντοπίσετε το widget σας; Μην ανησυχείτε, απλώς κάντε κλικ στο μενού με τις τρεις κουκκίδες και εισαγάγετε το widget σας manifest.json αρχείο. Ναι, αυτό είναι το μόνο που χρειάζεται για να το επαναφέρεις στην ύπαρξη!
Περιμένετε, λάβατε ένα μήνυμα σφάλματος στο κάτω μέρος της οθόνης σας;
Αν ναι, ας το ερευνήσουμε. Κάντε κλικ στο "Ανοίξτε την κονσόλα» και διαβάστε τι έχει να πει. Αν το Ανοίξτε την κονσόλα Το κουμπί έχει φύγει, υπάρχει ένας εναλλακτικός τρόπος για να ανοίξετε την κονσόλα εντοπισμού σφαλμάτων. Κάντε κλικ στο λογότυπο Figma, μεταβείτε στην κατηγορία widgets και αποκαλύψτε το μενού ανάπτυξης.
Αυτό το σφάλμα είναι πιθανό να οφείλεται στο γεγονός ότι δεν έχουμε μεταγλωττίσει ακόμα το TypeScript σε JavaScript. Μπορούμε να το κάνουμε αυτό στη γραμμή εντολών εκτελώντας npm install και npm run watch. (ή yarn και yarn watch ). Χωρίς λάθη αυτή τη φορά!
Ένα ακόμη εμπόδιο που μπορεί να συναντήσετε είναι ότι το γραφικό στοιχείο αποτυγχάνει να αποδώσει ξανά κάθε φορά που αλλάζει ο κώδικας. Μπορούμε εύκολα να αναγκάσουμε το γραφικό στοιχείο μας να ενημερώσει χρησιμοποιώντας την ακόλουθη εντολή μενού περιβάλλοντος: widgets → Εκ νέου απόδοση του γραφικού στοιχείου.
Διαμόρφωση του γραφικού στοιχείου
Όπως έχει σήμερα, το φαίνεται των γραφικών στοιχείων μας απέχουν ακόμα αρκετά από τον τελικό μας στόχο.
Πώς λοιπόν διαμορφώνουμε το στυλ των στοιχείων Figma από κώδικα; Ίσως με το CSS όπως θα κάναμε σε ένα έργο React; Αρνητικός. Με γραφικά στοιχεία Figma, όλοι το styling γίνεται μέσα από ένα σύνολο καλά τεκμηριωμένα στηρίγματα. Ευτυχώς για εμάς, αυτά τα αντικείμενα ονομάζονται σχεδόν πανομοιότυπα στους ομολόγους τους στο Figma.
Θα ξεκινήσουμε διαμορφώνοντας τα δύο μας <AutoLayout /> συστατικά. Όπως μπορείτε να δείτε στο παραπάνω γράφημα, τα ονόματα στηρίγματος είναι αρκετά περιγραφικά του σκοπού τους. Αυτό μας διευκολύνει να μεταβούμε απευθείας στον κώδικα και να αρχίσουμε να κάνουμε κάποιες αλλαγές. Δεν θα εμφανίσω ξανά ολόκληρο τον κώδικα, επομένως βασιστείτε στα ονόματα των στοιχείων για να σας καθοδηγήσουν πού ανήκουν τα αποσπάσματα.
<AutoLayout
name={"Quote"}
direction={"horizontal"}
verticalAlignItems={"start"}
horizontalAlignItems={"center"}
spacing={54}
padding={{
horizontal: 61,
vertical: 47,
}}
>
<AutoLayout
name={"QuoteContent"}
direction={"vertical"}
verticalAlignItems={"end"}
horizontalAlignItems={"start"}
spacing={10}
padding={{
horizontal: 0,
vertical: 0,
}}
></AutoLayout>
</AutoLayout>;Απλώς κάναμε μεγάλη πρόοδο! Ας κάνουμε αποθήκευση και ας μεταβούμε στο Figma για να δούμε πώς μοιάζει το γραφικό στοιχείο μας. Θυμάστε πώς το Figma επαναφορτώνει τα γραφικά στοιχεία αυτόματα μετά τις νέες αλλαγές;
Αλλά δεν είναι ακόμα εκεί. Πρέπει επίσης να προσθέσουμε ένα χρώμα φόντου στο ριζικό στοιχείο:
<AutoLayout name={"Quote"} fill={"#ffffff"}>Και πάλι, ρίξτε μια ματιά στον πίνακα Figma και παρατηρήστε πώς οι αλλαγές μπορούν να αντικατοπτρίζονται σχεδόν αμέσως πίσω στο widget.
Ας κινηθούμε κατά μήκος αυτού του οδηγού και ας το διαμορφώσουμε <Text> συστατικά.
Αφού ρίξουμε μια ματιά στο Τεκμηρίωση API widgets, είναι και πάλι σαφές ότι τα ονόματα ιδιοτήτων είναι σχεδόν πανομοιότυπα με τα αντίστοιχα στην εφαρμογή Figma, όπως φαίνεται στο παραπάνω γράφημα. Θα χρησιμοποιήσουμε επίσης τιμές από την τελευταία ενότητα όπου επιθεωρήσαμε τον ιστότοπο του Chris.
<Text name={'QuoteText'}
fontFamily={'Lora'}
fontSize={36}
width={700}
fill={'#545454'}
fontWeight={'normal'}
>{quote}</Text>
<Text name={'QuoteAuthor'}
fontFamily={'Raleway'}
fontSize={26}
width={700}
fill={'#16B6DF'}
fontWeight={'bold'}
textCase={'upper'}
>— {author}</Text>Προσθήκη κατάστασης στο widget
Το γραφικό στοιχείο μας εμφανίζει αυτήν τη στιγμή την ίδια προσφορά, αλλά θέλουμε να τραβήξουμε από ολόκληρη τη δεξαμενή των εισαγωγικών τυχαία. Πρέπει να προσθέσουμε κατάσταση στο γραφικό στοιχείο μας, το οποίο όλοι οι προγραμματιστές του React γνωρίζουν ότι είναι μια μεταβλητή της οποίας η αλλαγή ενεργοποιεί την εκ νέου απόδοση του στοιχείου μας.
Με το Figma, η κατάσταση δημιουργείται με το useSyncedState άγκιστρο; είναι λίγο πολύ React's useState, αλλά απαιτεί από τους προγραμματιστές να καθορίσουν ένα μοναδικό κλειδί. Αυτή η απαίτηση πηγάζει από το γεγονός ότι το Figma πρέπει να συγχρονίζει την κατάσταση του γραφικού μας στοιχείου όλοι πελάτες που μπορεί να βλέπουν τον ίδιο πίνακα σχεδίασης, αλλά μέσω διαφορετικών υπολογιστών.
const { useSyncedState } = widget;
function QuotesWidget() {
const [quote, setQuote] = useSyncedState("quote-text", "");
const [author, setAuthor] = useSyncedState("quote-author", "");
}Αυτή είναι όλη η αλλαγή που χρειαζόμαστε προς το παρόν. Στην επόμενη ενότητα, θα καταλάβουμε πώς να ανακτήσουμε δεδομένα από το Διαδίκτυο. Spoiler Alert: δεν είναι τόσο απλό όσο φαίνεται.
Ανάκτηση δεδομένων από το δίκτυο
Θυμηθείτε όταν η Figma μας έδωσε την επιλογή να ξεκινήσουμε με ένα widget με δυνατότητα iFrame. Αν και δεν ακολουθήσαμε αυτήν την επιλογή, πρέπει να εφαρμόσουμε ορισμένες από τις δυνατότητες της. Επιτρέψτε μου να εξηγήσω γιατί δεν μπορούμε απλά να τηλεφωνήσουμε fetch() στον κώδικα του widget μας.
Όταν χρησιμοποιείτε ένα γραφικό στοιχείο, εκτελείτε κώδικα JavaScript στον δικό σας υπολογιστή που έχει γραφτεί από κάποιον άλλο. Αν και όλα τα widget ελέγχονται διεξοδικά από το προσωπικό του Figma, εξακολουθεί να είναι μια τεράστια τρύπα ασφαλείας καθώς όλοι γνωρίζουμε πόσο μπορεί να δημιουργηθεί ζημιά ακόμη και από μία γραμμή JavaScript.
Ως αποτέλεσμα, το Figma δεν μπορεί απλά eval() οποιονδήποτε κώδικα widget γραμμένο από ανώνυμους προγραμματιστές. Με λίγα λόγια, η ομάδα αποφάσισε ότι η καλύτερη λύση ήταν η εκτέλεση κώδικα τρίτου μέρους σε ένα αυστηρά προστατευμένο περιβάλλον sandbox. Και όπως ίσως έχετε μαντέψει, τα API του προγράμματος περιήγησης δεν είναι διαθέσιμα σε ένα τέτοιο περιβάλλον.
Αλλά μην ανησυχείτε, η λύση του Figma σε αυτό το δεύτερο πρόβλημα είναι <iframe>μικρό. Οποιοσδήποτε κώδικας HTML που γράφουμε σε ένα αρχείο, κατά προτίμηση ονομάζεται ui.html, θα έχει πρόσβαση σε όλα τα API του προγράμματος περιήγησης. Ίσως αναρωτιέστε πώς μπορούμε να ενεργοποιήσουμε αυτόν τον κωδικό από το γραφικό στοιχείο, αλλά θα το εξετάσουμε αργότερα. Αυτήν τη στιγμή, ας μεταβούμε στον κώδικα:
// manifest.json
{
"ui": "ui.html"
}<!-- ui.html -->
<script>
window.onmessage = async (event) => {
if (event.data.pluginMessage.type === 'networkRequest') {
// TODO: fetch data from the server
window.parent.postMessage({
pluginMessage: {
// TODO: return fetched data
}
}, '*')
}
}
</script>Αυτό είναι το γενικό πρότυπο για το widget-to-iframe επικοινωνία. Ας το χρησιμοποιήσουμε για την ανάκτηση δεδομένων από τον διακομιστή:
<!-- ui.html -->
<script>
window.onmessage = async (event) => {
if (event.data.pluginMessage.type === 'networkRequest') {
// Get random number from 0 to 100
const randomPage = Math.round(Math.random() * 100)
// Get a random quote from the Design Quotes API
const res = await fetch(`https://quotesondesign.com/wp-json/wp/v2/posts/?orderby=rand&per_page=1&page=${randomPage}&_fields=title,yoast_head_json`)
const data = await res.json()
// Extract author name and quote content from response
const authorName = data[0].title.rendered
const quoteContent = data[0].yoast_head_json.og_description
window.parent.postMessage({
pluginMessage: {
authorName,
quoteContent
}
}, '*')
}
}
</script>Παραλείπουμε τον χειρισμό σφαλμάτων για να είναι απλό και επίκαιρο. Ας επιστρέψουμε στον κώδικα του widget και ας δούμε πώς έχουμε πρόσβαση στις λειτουργίες που ορίζονται στο <iframe>:
function fetchData() {
return new Promise<void>(resolve => {
figma.showUI(__html__, {visible: false})
figma.ui.postMessage({type: 'networkRequest'})
figma.ui.onmessage = async ({authorName, quoteContent}) => {
setAuthor(authorName)
setQuote(quoteContent)
resolve()
}
})
}Όπως μπορείτε να δείτε, πρώτα λέμε στο Figma να αποκαλύψει την πρόσβαση στο κρυφό μας <iframe> και να ενεργοποιήσετε ένα συμβάν με το όνομα "networkRequest". Διαχειριζόμαστε αυτό το συμβάν στο ui.html αρχείο με έλεγχο event.data.pluginMessage.type === 'networkRequest', και στη συνέχεια ανάρτηση δεδομένων πίσω στο widget.
Αλλά τίποτα δεν συμβαίνει ακόμα… Δεν έχουμε ακόμη καλέσει το fetchData() λειτουργία. Εάν το καλέσουμε απευθείας στη συνάρτηση στοιχείου, εμφανίζεται το ακόλουθο σφάλμα στην κονσόλα:
Cannot use showUI during widget rendering.Το Figma μας λέει να μην καλέσουμε showUI απευθείας στο σώμα λειτουργίας… Λοιπόν, πού να το βάλουμε; Η απάντηση σε αυτό είναι ένα νέο άγκιστρο και μια νέα λειτουργία: useEffect και waitForTask. Μπορεί να έχετε ήδη εξοικείωση με useEffect εάν είστε προγραμματιστής του React, αλλά θα το χρησιμοποιήσουμε εδώ για να ανακτήσουμε δεδομένα από τον διακομιστή κατά την προσάρτηση του στοιχείου γραφικού στοιχείου.
const { useEffect, waitForTask } = widget;
function QuotesWidget() {
useEffect(() => {
waitForTask(fetchData());
});
}Αλλά αυτό θα έχει ως αποτέλεσμα ένα ακόμη «σφάλμα» όπου το γραφικό στοιχείο μας θα συνεχίσει να αποδίδει ξανά με ένα νέο απόσπασμα, για πάντα. Αυτό συμβαίνει επειδή useEffect, εξ ορισμού, ενεργοποιείται ξανά κάθε φορά που αλλάζει η κατάσταση του γραφικού στοιχείου, όχι όταν καλούμε fetchData. Και ενώ υπάρχει τεχνική να καλέσει μόνο useEffect Μόλις στο React, δεν λειτουργεί στην υλοποίηση του Figma. Από τα έγγραφα του Figma:
Λόγω του τρόπου λειτουργίας των γραφικών στοιχείων,
useEffectθα πρέπει να χειριστεί την κλήση πολλές φορές με την ίδια κατάσταση.
Ευτυχώς, υπάρχει μια απλή λύση που μπορούμε να εκμεταλλευτούμε και να καλέσουμε useEffect μόνο μία φορά κατά την πρώτη προσάρτηση του στοιχείου και αυτό γίνεται ελέγχοντας εάν οι τιμές της κατάστασης είναι ακόμα κενές:
function QuotesWidget() {
useEffect(() => {
if (!author.length & !quote.length) {
waitForTask(fetchData());
}
});
}Μπορεί να συναντήσετε ένα τρομακτικό»πρόσβαση στη μνήμη εκτός ορίων» λάθος. Του αρκετά συνηθισμένο στην ανάπτυξη πρόσθετων και γραφικών στοιχείων. Απλώς επανεκκινήστε το Figma και δεν θα υπάρχει πια.
Ίσως έχετε παρατηρήσει ότι μερικές φορές, το κείμενο του αποσπάσματος περιέχει περίεργους χαρακτήρες.
Αυτά είναι Χαρακτήρες Unicode και πρέπει να τα μορφοποιήσουμε σωστά σε κώδικα:
<!-- ui.html -->
<script>
window.onmessage = async (event) => {
// ...
const quoteContent = decodeEntities(data[0].yoast_head_json.og_description);
};
// <https://stackoverflow.com/a/9609450>
var decodeEntities = (function () {
// this prevents any overhead from creating the object each time
var element = document.createElement("div");
function decodeHTMLEntities(str) {
if (str && typeof str === "string") {
// strip script/html tags
str = str.replace(/<script[^>]*>([Ss]*?)</script>/gim, "");
str = str.replace(/</?w(?:[^"'>]|"[^"]*"|'[^']*')*>/gim, "");
element.innerHTML = str;
str = element.textContent;
element.textContent = "";
}
return str;
}
return decodeHTMLEntities;
})();
</script>Και voilà, το γραφικό στοιχείο μας έλαβε μια ολοκαίνουργια προσφορά σχεδίασης κάθε φορά που προστίθεται στον πίνακα σχεδίασης.
Προσθήκη μενού ιδιοτήτων στο widget μας
Ενώ το γραφικό στοιχείο μας ανακτά μια νέα προσφορά κατά την εφαρμογή, θα ήταν πολύ πιο πρακτικό εάν μπορούσαμε να κάνουμε ξανά αυτήν τη διαδικασία, αλλά χωρίς να τη διαγράψουμε. Αυτή η ενότητα θα είναι σύντομη καθώς η λύση είναι αρκετά αξιοσημείωτη. Με μενού ιδιοκτησίας, μπορούμε να προσθέσουμε διαδραστικότητα στο widget μας με μία μόνο κλήση στο usePropertyMenu άγκιστρο.
const { usePropertyMenu } = widget;
function QuotesWidget() {
usePropertyMenu(
[
{
itemType: "action",
propertyName: "generate",
tooltip: "Generate",
icon: `<svg width="22" height="15" viewBox="0 0 22 15" fill="none" xmlns="<http://www.w3.org/2000/svg>">
<!-- Shortened for brevity -->
</svg>`,
},
],
() => fetchData()
);
}Με ένα απλό άγκιστρο μπορούμε να δημιουργήσουμε ένα κουμπί που εμφανίζεται κοντά στο widget μας όταν είναι επιλεγμένο. Αυτό ήταν το τελευταίο κομμάτι που έπρεπε να προσθέσουμε για να ολοκληρώσουμε αυτό το έργο.
Δημοσίευση του widget μας στο κοινό
Δεν υπάρχει μεγάλη χρησιμότητα στη δημιουργία ενός γραφικού στοιχείου εάν, καλά, κανείς χρησιμοποιεί το. Και ενώ Η Figma χορηγεί σε οργανισμούς την επιλογή να ξεκινήσουν ιδιωτικός widgets για εσωτερική χρήση, είναι πολύ πιο συνηθισμένο να κυκλοφορούν αυτά τα μικρά προγράμματα στον κόσμο.
Το Figma διαθέτει μια λεπτή διαδικασία ελέγχου γραφικών στοιχείων που μπορεί να διαρκέσει από 5 έως 10 εργάσιμες ημέρες. Και ενώ το γραφικό στοιχείο αποσπάσματα σχεδίασης που κατασκευάσαμε μαζί είναι ήδη στη βιβλιοθήκη γραφικών στοιχείων, θα συνεχίσω να δείξω πώς έφτασε εκεί. Μην επιχειρήσετε να δημοσιεύσετε ξανά αυτό το γραφικό στοιχείο, καθώς αυτό θα έχει ως αποτέλεσμα μόνο την κατάργηση. Αλλά αν του δώσατε κάποιες σημαντικές αλλαγές, προχωρήστε και μοιραστείτε το δικό σας widget με την κοινότητα!
Ξεκινήστε κάνοντας κλικ στο μενού γραφικών στοιχείων (Shift+I) και μετάβαση στο Ανάπτυξη καρτέλα για να δείτε το widget μας. Κάντε κλικ στο μενού με τις τρεις κουκκίδες και πατήστε Δημοσίευση.
Το Figma θα σας ζητήσει να εισαγάγετε ορισμένες λεπτομέρειες σχετικά με το γραφικό στοιχείο σας, όπως τίτλο, περιγραφή και ορισμένες ετικέτες. Θα χρειαστούμε επίσης μια εικόνα εικονιδίου 128×128 και μια εικόνα banner 1920×960.
Μετά την εισαγωγή όλων αυτών των στοιχείων, χρειαζόμαστε ακόμα ένα στιγμιότυπο οθόνης του γραφικού στοιχείου μας. Κλείστε τον τρόπο δημοσίευσης (μην ανησυχείτε, δεν θα χάσετε τα δεδομένα σας) και κάντε δεξί κλικ στο γραφικό στοιχείο για να αποκαλύψετε ένα ενδιαφέρον μενού περιβάλλοντος. Βρες το Αντιγραφή/Επικόλληση ωςκατηγορία και επιλέξτε Αντιγραφή ως PNG.
Αφού γίνει αυτό, ας επιστρέψουμε στον τρόπο δημοσίευσης και ας επικολλήσουμε το στιγμιότυπο οθόνης του γραφικού στοιχείου:
Κάντε κύλιση προς τα κάτω και, τέλος, δημοσιεύστε το modal σας. Γιορτάζω! 🎉
Το Figma θα επικοινωνήσει μαζί σας σε λίγες μέρες σχετικά με την κατάσταση της αξιολόγησης του modal σας. Σε περίπτωση απόρριψης, θα σας δοθεί το ευκαιρία να κάνετε αλλαγές και να υποβάλετε ξανά.
Συμπέρασμα
Μόλις δημιουργήσαμε ένα widget Figma από την αρχή! Υπάρχουν πολλά πράγματα που δεν καλύπτονται εδώ, όπως π.χ συμβάντα κλικ, φόρμες εισαγωγής, να πολύ περισσότερο. Μπορείτε να αναζητήσετε τον πλήρη πηγαίο κώδικα για το γραφικό στοιχείο αυτό το repo GitHub.
Σε όσους φιλοδοξούν να ανεβάσουν τις δεξιότητές τους στο Figma σε μεγαλύτερα επίπεδα, προτείνω να εξερευνήσετε την κοινότητα των Widgets και να χρησιμοποιήσετε αυτό που σας τραβάει την προσοχή ως έμπνευση. Συνεχίστε να δημιουργείτε περισσότερα γραφικά στοιχεία, συνεχίστε να ενισχύετε τις δεξιότητές σας στο React και πριν καν το συνειδητοποιήσετε, θα με διδάξετε πώς να τα κάνω όλα αυτά.
Περαιτέρω πόροι
Έπρεπε να αναφερθώ σε πολλά έγγραφα ενώ έφτιαχνα αυτό το widget. Σκέφτηκα να μοιραστώ αυτό που βρήκα να βοηθήσω περισσότερο.
