Η αρχιτεκτονική εξαρτημάτων στο Σχ

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

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

Μια άλλη πρόσφατη ενημερωμένη έκδοση εισήγαγε την εναλλαγή παραθύρων drag and drop. Αυτό μπορεί να γίνει τοπικά στο αρχείο σας ή απευθείας από τη κοινόχρηστη βιβλιοθήκη ομάδας σας (ένα ξεχωριστό έγγραφο Figma). Το να είσαι σε θέση να το κάνεις αυτό μπορεί να έχει τεράστιο αντίκτυπο στον τρόπο δομής των εξαρτημάτων σου.

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

Ενσωματωμένα στοιχεία

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

Δομικά στοιχεία

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

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

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

Αντικατάσταση διαλόγου

Ένα άλλο πλεονέκτημα για την ενσωμάτωση εξαρτημάτων είναι ότι μπορείτε να τα ανταλλάξετε / αντικαταστήσετε για άλλα εξαρτήματα. Για παράδειγμα, στην κεφαλίδα κεραμιδιών παρακάτω, πρέπει απλά να χτίζω ένα στοιχείο για την κεφαλίδα πλακιδίων και απλά να ανταλλάξω το έμφυτο στοιχείο για ένα διαφορετικό. Αν είστε εξοικειωμένοι με το Sketch, ίσως έχετε ήδη εξοικειωθεί με αυτή την ιδέα, ωστόσο η αλληλεπίδραση στο Figma για εναλλαγή εξαρτημάτων είναι διαφορετική (drag & drop).

Συντομεύσεις:
Για να μετακινήσετε μια επιλογή εξαρτήματος - Κράτηση κατά τη μεταφορά.
Top swap έξω ένα εξωθημένο στοιχείο (μέσα σε ένα άλλο στοιχείο, πλαίσιο ή ομάδα) - Κρατήστε ⌘ + επιλογή κατά τη μεταφορά.

Οι εμφανίσεις διαφόρων εικονιδίων μπορούν να μεταφερθούν για άλλους από το έγγραφο ή την κοινή βιβλιοθήκη ομάδων. Πνευματικά δικαιώματα © 2018, Ανοικτό κείμενο. Ολα τα δικαιώματα διατηρούνται.

Συγκάλυψη

Ενημέρωση: Η χρησιμότητα αυτής της μεθόδου έχει υποτιμηθεί χάρη στην εισαγωγή σφαιρικών στυλ στο Σχ. 3.0.

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

Εμφάνιση / απόκρυψη στοιχείων

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

Η πρόσβαση στη στοίβα στρώσεων κάθε στιγμιότυπου σας επιτρέπει να εμφανίσετε / αποκρύψετε στρώματα

Συντομεύσεις: Επιλέξτε το επιλεγμένο επίπεδο και πατήστε το πλήκτρο Διαγραφή για να αποκρύψετε τη στρώση. Εναλλακτικά, το ⌘ + Shift + H, θα αλλάξει επίσης την ορατότητα των στρώσεων.

Περικοπή εξαρτημάτων

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

Δημιουργήστε ένα στοιχείο και διαμορφώστε τους περιορισμούς μέσα σε αυτό-ενώ κρατάτε πατημένο το ⌘, σύρετε το πλαίσιο του εξαρτήματος σας για να περικόψετε τα περιεχόμενα ή προσαρμόστε τις διαστάσεις στον πίνακα ιδιοτήτων. Τα περιεχόμενα του στοιχείου ενδέχεται να μετατοπιστούν αν δεν έχετε ρυθμίσει τους περιορισμούς, οπότε βεβαιωθείτε ότι το κάνετε αυτό πρώτα. Αυτό είναι ιδανικό για τη δημιουργία ενός "πλέγματος επανάληψης" γραμμών / στηλών ή τη δημιουργία πινακοποιημένων δεδομένων. Μπορείτε να δημιουργήσετε περισσότερες σειρές από ό, τι χρειάζεστε και να χρησιμοποιήσετε αυτήν τη μέθοδο για να εμφανίσετε μόνο τον αριθμό των στοιχείων που θέλετε. Συνδέστε αυτή την τεχνική με περιορισμούς και μπορείτε ακόμη να ρυθμίσετε τα στοιχεία που θα αποκρύψουν ή θα αποκαλύψουν περιεχόμενο καθώς το γονικό τους στοιχείο επεκτείνεται και συρρικνώνεται. Βεβαιωθείτε ότι το "Περιεχόμενο κλιπ" είναι επιλεγμένο στον πίνακα ιδιοτήτων σας για να δείτε το περικομμένο αποτέλεσμα.

Ομάδες περιπτώσεων μπορούν να συναρμολογηθούν ως συστατικά και στη συνέχεια να περικοπούν χρησιμοποιώντας την επιλογή

Ρύθμιση των συστατικών στοιχείων πλέγματος:

  1. Ρυθμίστε την αρχική επαναλαμβανόμενη συνιστώσα
     Οι περιπτώσεις αυτού του στοιχείου θα επαναλαμβάνονται για κάθε σειρά ή στήλη. Αυτό θα μπορούσε να περιλαμβάνει ενσωματωμένα στοιχεία, πλαίσια κειμένου, κάτοχοι εικόνων (σχήματα με πλήρωση) κ.λπ.
  2. Ρυθμίστε τους περιορισμούς
    Ρυθμίστε τους περιορισμούς για το επαναλαμβανόμενο στοιχείο, σκεφτείτε πώς θέλετε να αντιδράσει σε σχέση με το πλοίο στο γονικό στοιχείο (το οποίο θα είναι το πλέγμα σας).
  3. Ρυθμίστε το μέγεθος του πλαισίου
    Κρατήστε ⌘ κατά την προσαρμογή του μεγέθους πλαισίου εξαρτήματος, για να μεγεθύνετε τις διαστάσεις του εξαρτήματος, ώστε να μπορείτε να δημιουργήσετε το παραγέμισμα του εξαρτήματος σας στο συνολικό του μέγεθος (αν ισχύει για το σχέδιό σας).
  4. Διπλές περιπτώσεις
    Διπλασιάστε το επαναλαμβανόμενο στοιχείο, μπορείτε να χρησιμοποιήσετε τις εντολές Πακέτο οριζόντια ή πακέτα κατακόρυφα στο Figma (στο μενού Ταξινόμηση) για να βεβαιωθείτε ότι όλα τα εξαρτήματα είναι καλά τοποθετημένα μεταξύ τους. Αυτός είναι ο λόγος για τον οποίο συνιστώ να οικοδομήσουμε το padding στο εξάρτημα σας.
  5. Δημιουργήστε το στοιχείο "πλέγμα"
    Μετατρέψτε την ομάδα επαναλαμβανόμενων εμφανίσεων σε ένα νέο στοιχείο.
  6. Ρυθμίστε τους περιορισμούς
    Ρυθμίστε τους περιορισμούς στο νέο σας συστατικό πλέγματος. σκεφτείτε πώς θέλετε κάθε στοιχείο του πλέγματος να ανταποκρίνεται όταν κόβεται το δοχείο του πλέγματος και την κατεύθυνση που θα επεκτείνει.
  7. Περιεχόμενο κλιπ
    Επιλέξτε "περιεχόμενο κλιπ" στον πίνακα ιδιοτήτων. Αυτό θα αποκρύψει το περιεχόμενο που υπερβαίνει το όριο του πλαισίου.
  8. Ρυθμίστε το μέγεθος του πλαισίου
    Κρατήστε το ⌘ ενώ ρυθμίζετε το μέγεθος του πλαισίου εξαρτήματος για να περικόψετε το στοιχείο στην επιθυμητή ποσότητα.

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

Αυτή η τεχνική, σε συνδυασμό με το

Στοιχεία κειμένου

Από την έναρξη του Figma 3.0, ένας πιο αποτελεσματικός τρόπος χειρισμού των στυλ κειμένων χρησιμοποιεί τις νέες λειτουργίες Styles για την κεντρική διαχείριση ιδιοτήτων τύπου. Τούτου λεχθέντος, τα συστατικά κειμένου μπορούν ακόμα να είναι χρήσιμα αγγεία για το χτένισμα πολλαπλών ιδιοτήτων / στυλ ως ενός αντικειμένου.

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

Τα στοιχεία μπορούν να λειτουργήσουν για στυλ κειμένου. Η εναλλαγή του στυλ γίνεται εύκολα από τον πίνακα στοιχείων.
  1. Δημιουργήστε ένα πλαίσιο κειμένου
    Κάντε κλικ μία φορά για να δημιουργήσετε ένα πλαίσιο κειμένου (μην σύρετε για να δημιουργήσετε ένα πλαίσιο). Στυλ με τη γραμματοσειρά / βάρος / χρώμα / γραμμή-ύψος / ευθυγράμμιση / κλπ. που επιθυμείτε.
  2. Μετατρέψτε αυτό το πλαίσιο κειμένου σε ένα στοιχείο
    Ορίστε τους περιορισμούς του πλαισίου κειμένου μέσα στο σύμβολο σε: "Κορυφαία και Κάτω" και "Αριστερά και Δεξιά". Αυτό εξασφαλίζει ότι το πλαίσιο κειμένου παραμένει σε μέγεθος για το στοιχείο.
  3. Μετονομασία στρώσεων
    Μετονομάστε το συστατικό σας στο επιθυμητό όνομα στυλ κειμένου.
    Μετονομάστε το στρώμα κειμένου σε κάτι γενικό όπως το "Κείμενο". Θα μετονομάσετε αυτό το στρώμα το ίδιο σε όλα τα επόμενα συστατικά κειμένου.
  4. Χρησιμοποιήστε τα νέα σας εξαρτήματα
    Οποτεδήποτε θέλετε να αλλάξετε ένα στυλ κειμένου, μπορείτε απλά να ανταλλάξετε τις παρουσίες με ένα διαφορετικό στοιχείο κειμένου. Επειδή μετονομάσαμε όλα τα στρώματα κειμένου μέσα στα συστατικά μέρη για να είναι τα ίδια, αυτό επιτρέπει στο στοιχείο να χαρτογραφεί τυχόν παρατεταμένο κείμενο στην ανταλλασσόμενη περίπτωση.

Και αν θέλετε να πάρετε ακόμη πιο φανταχτερό, Mirka S έγραψε ένα τρομερό άρθρο σχετικά με τις τεχνικές αρθρωτού / κλιμακούμενου κειμένου.

Συνδυάζοντας όλα

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

Ακολουθεί μια περίληψη μερικών από τις διαφορετικές παραλλαγές συστατικών στοιχείων:

Ένα καλά κατασκευασμένο στοιχείο μπορεί να πάρει σε πολλές διαφορετικές μορφές απλά με την εναλλαγή των ένθετων εξαρτημάτων και την αλλαγή της ορατότητας των στρωμάτων. Πνευματικά δικαιώματα © 2018, Ανοικτό κείμενο. Ολα τα δικαιώματα διατηρούνται.Πνευματικά δικαιώματα © 2018, Άνοιγμα κειμένου. Ολα τα δικαιώματα διατηρούνται.

Επαθε βλάβη

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

  • Εικόνες
    Το εικονίδιο σε ολόκληρο είναι ένθετα στιγμιότυπα και μπορεί εύκολα να αντικατασταθεί για άλλα εικονίδια.
  • Περιεχόμενο πλακιδίων
    Η περιοχή περιεχομένου του κεραμιδιού είναι επίσης ένα ένθετο στοιχείο. Για να δημιουργηθεί το συστατικό πλακιδίων βάσης, υπάρχει ένα συστατικό σύμβολο κράτησης θέσης με μια κόκκινη διακεκομμένη γραμμή που περιγράφει τις διαστάσεις και καθορίζει επίσης τους περιορισμούς μέσα στο πλακίδιο. Μπορώ να αντικαταστήσω το συστατικό σύμβολο κράτησης θέσης με τα πραγματικά συστατικά του πλέγματος περιεχομένου μου. Συνδυάζοντας αυτό με την περικομμένη μέθοδο "clip content", μπορώ να εμφανίσω μια έκδοση μιας προβολής "repeat grid" που θα αναπτυχθεί με το γονικό στοιχείο.
  • Γραμμή κύλισης
    Η μπάρα κύλισης είναι απλώς ένα ένθετο στοιχείο του οποίου η ορατότητα μπορεί να αλλάξει εάν θέλουμε να επικοινωνήσουμε ότι το εσωτερικό περιεχόμενο είναι κυλιόμενο.
  • Περικοπή
    Ένας μικρός φορέας με στερεή λευκή έως διαφανή κλίση βρίσκεται πάνω από το συστατικό κείμενο τίτλου κεραμιδιού. Η ορατότητα μπορεί να ενεργοποιηθεί ή να απενεργοποιηθεί για να εμφανιστεί το εφέ αποκοπής όταν χρειαστεί.
  • Ψάξιμο
    Βρίσκεται μέσα στην κεφαλίδα κεραμιδιών, είναι ένα συστατικό εισόδου αναζήτησης που μπορούν να αλλάξουν επίσης. Δεδομένου ότι αυτό το συγκεκριμένο στοιχείο είναι επίσης ένα ένθετο στοιχείο, μου επιτρέπει να ανταλλάξω διαφορετικές καταστάσεις του πεδίου εισαγωγής από το σύμβολο κράτησης θέσης, στον πληθυσμό, στον πληθυσμό με εστίαση.

Εδώ είναι σε δράση:

Μερικές επιπλέον σημειώσεις

Μενού εντολών

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

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

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

Αντικατάσταση στοιχείων

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

Απόδειξη με έγγραφα

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

Οι περιγραφές που έχουν προστεθεί στα κύρια στοιχεία, εμφανίζονται στο δείκτη του ποντικιού, μέσα στο μενού στοιχείων.

Η τεκμηρίωση δεν είναι μόνο κρίσιμη για τους σχεδιαστές, αλλά είναι εξίσου σημαντικό να εξεταστεί η συνεργασία με τον προγραμματιστή. Η ενσωμάτωση κάθε λεπτομέρειας σε ένα μικρό πεδίο περιγραφής δεν είναι δυνατή, οπότε προσπαθήστε να τοποθετήσετε τον εαυτό σας στα παπούτσια των προγραμματιστών και να προσδιορίσετε τι πρέπει να γνωρίζουν. Με τόσες πολλές εφαρμογές που καθίστανται εξαρτημένες από τη δομή τους, υπάρχει μια καλή ευκαιρία οι προγραμματιστές να θέλουν να ακολουθήσουν την ίδια προσέγγιση στο γράψιμο κώδικα και θέλουν να κατανοήσουν το πλήρες φάσμα κάθε συστατικού και των διαφόρων κρατών που είναι spec'd στο σχεδιασμό. Είναι εύκολο να πέσετε στην παγίδα σκέπτοντας ότι χρειάζεστε έναν περίπλοκο οδηγό στυλ, έναν ιστότοπο τεκμηρίωσης ή πρόσθετα εργαλεία για να το πετύχετε, αλλά η πραγματικότητα είναι ότι πολλές μικρές ομάδες απλά δεν έχουν το χρόνο ή τους πόρους για να το κάνουν αυτό. Τα καλά νέα είναι ότι δεν είναι απαίτηση να είναι επιτυχής - να είναι απλό και να μην το περιπλέκεται.

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

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

Διαγραφή κύριων στοιχείων

Κάνοντας κλικ στον μπλε σύνδεσμο θα αποκατασταθεί το κύριο συστατικό στοιχείο. Φτου!

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

Ευχαριστώ για την ανάγνωση - παρακαλώ μοιραστείτε τις σκέψεις / ερωτήσεις σας παρακάτω και επιτρέψτε μου να ξέρω αν αυτό το άρθρο ήταν καθόλου χρήσιμο. Μη διστάσετε να με DM στο Twitter ή να με βρείτε στο κανάλι Spectrum Figma, αν έχετε ερωτήσεις!

Και ... αν δεν έχετε δοκιμάσει ποτέ το Σχάμα αλλά βρεθήκατε κάπως εδώ, ελέγξτε το, δωρεάν για άτομα και σπουδαστές!