Στοιχεία στο Σχ

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

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

Τα συστατικά είναι μια δημοφιλής έννοια στη μηχανική που χρησιμοποιείται σε όλα από iOS, Android, macOS, Windows, Unity, HTML και άλλες τεχνολογίες που χρησιμοποιούνται για την πραγματική δημιουργία διεπαφών χρήστη και παιχνίδια. Η αντίδραση, για παράδειγμα, είναι ένας τρόπος δημιουργίας μεγάλων συστημάτων UI χωρίς τον πονοκέφαλο που χρειάζεται να κατανοήσουμε τα πάντα ταυτόχρονα, μέσω της σύνθεσης μικρότερων τμημάτων σε πιο περίπλοκη συμπεριφορά.

Τι γίνεται αν εφαρμόσαμε αυτή την έννοια στα εργαλεία σχεδιασμού;

Throwback στις παλιές ημέρες? Συστατικά σε λειτουργία - Ανοίξτε στο Σχ

Σχεδιασμός με στοιχεία

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

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

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

Η Προσέγγισή μας στα Εξαρτήματα

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

Κατά το σχεδιασμό των Components, ο στόχος μας ήταν να τους κάνουμε:

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

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

Πως δουλεύει

Στο Figma, τα Components λειτουργούν ακριβώς όπως τα Frames, με την συστροφή ότι τα διπλότυπα ενός συστατικού δημιουργούν νέες περιπτώσεις παρά αντίγραφα. Ξεκινάμε επιλέγοντας κάτι που θέλουμε να κάνουμε σε ένα στοιχείο και κάνουμε κλικ στη δράση "Δημιουργία συστατικού" στη γραμμή εργαλείων:

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

Μπορούμε να κρατήσουμε το alt-key και να σύρσουμε, να χρησιμοποιήσουμε την ενέργεια "Διπλότυπο" ή απλά να αντιγράψουμε και να επικολλήσουμε ένα στοιχείο για να δημιουργήσουμε στιγμιότυπα:

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

Κάθε αλλαγή που κάνουμε στο Component μας αντικατοπτρίζεται άμεσα στις περιπτώσεις του:

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

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

Αλλαγή στυλ και ιδιοτήτων

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

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

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

Όταν αλλάζουμε το μυαλό μας και θέλουμε να καθαρίσουμε τις παρακάμψεις από τις περιπτώσεις μας, μπορούμε απλά να επιλέξουμε τα πράγματα που θέλουμε να επαναφέρουμε και να επιλέξουμε "Reset Instance".

Σύνθετα εξαρτήματα

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

Περιορισμοί

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

Άνοιγμα στο Figma

Διαβάστε περισσότερα σχετικά με τους περιορισμούς στα συστήματα πλέγματος για το σχεδιασμό οθόνης

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