Πώς το Kiwi.com χειρίζεται τη δομή του έργου, την έκδοση και τα συστατικά του Figma

Ένας πρώην σκεπτικιστής Figma αλλάζει τη μουσική του

Εικόνα που δημιουργήθηκε για το Figma από τον Peter Barnaba

Σημείωση του συντάκτη Figma: Με αυτή την ιστορία, εκτυπώνουμε εξαιρετική δουλειά από τον σχεδιαστή Kiwi.com Denis Rojcyk, ο οποίος αρχικά εμφανίστηκε στην προσωπική του ιστοσελίδα. Κάναμε κάποιες αλλαγές για γραμματική, μορφοποίηση και κατανόηση, αλλά δεν υποστηρίξαμε αυτή τη θέση. Ενδιαφέρεστε να γράψετε για το σχεδιασμό ή τη διαδικασία του Σχάσματος για το ιστολόγιό μας; Μήνυμα content@figma.com.

Η κινητή ομάδα σχεδιασμού του site booking travel Kiwi.com είναι μικροσκοπική, υπάρχουν μόνο δύο από εμάς. Αλλά υπάρχουν περίπου είκοσι άνθρωποι που συμβάλλουν στα σχέδιά μας με κάποιο τρόπο, είτε σχολιάζουν τις τελευταίες μας επαναλήψεις, καθορίζοντας αντίγραφα είτε σχεδιάζοντας χαρακτηριστικά cross-platform. Επί του παρόντος, το μπροστινό μας άκρο σχεδιάζεται στο Sketch, όπως και το σύστημα σχεδιασμού Orbit. Αλλά επειδή το κινητό μέρος του Orbit είναι οπτικά διαφορετικό, αποφασίσαμε να προσπαθήσουμε να το σχεδιάσουμε στη Figma και να δούμε πώς λειτουργεί για εμάς.

Αυτή η ανάρτηση καλύπτει:

1. Γιατί κατασκευάσαμε το κινητό μας σύστημα σχεδιασμού στο Figma
2. Πώς η τελευταία ενημέρωση άλλαξε τον τρόπο που εργαζόμαστε
3. Πώς οργανώσαμε το σύστημα σχεδιασμού (με παραδείγματα)

Προχωρήστε στο 3ο τμήμα ("Οι αρχές της συνιστώσας της βιβλιοθήκης μας") αν είστε ήδη μετασχηματιστής Figma και απλά θέλετε έμπνευση για την οργάνωση εξαρτημάτων, το χειρισμό του ιστορικού των εκδόσεων και άλλων οικιακών εργασιών.

Πηγαίνετε στο "Component Principles" εάν είστε ήδη ένα Figma convert & απλά θέλετε οργάνωση αρχείων / ιδέες διάρθρωσης

Γιατί Figma;

Μια ροή εργασίας προσανατολισμένη στο σκίτσο βασίζεται σε εργαλεία όπως το Zeplin για χειρισμό χειρισμών, το Abstract για να καλύψει τον έλεγχο της έκδοσης και το Marvel για το σχεδιασμό στατικών πρωτοτύπων. Όμως, από καιρό σε καιρό, τα πράγματα ξεφεύγουν από το συγχρονισμό. Τα πρωτότυπα παραμένουν κολλημένα στις πιο πρόσφατες δοκιμασμένες επαναλήψεις, οι άνθρωποι ξεχνούν να πιέσουν δεσμεύσεις για την Περίληψη, ίσως η Zeplin δεν έχει ενημερωθεί με τα πιο πρόσφατα εγκεκριμένα γραφικά ή οι PNG που είναι ενσωματωμένες στο Dropbox Paper είναι ηλικίας 3 εβδομάδων. Αυτά τα εργαλεία, από το σχεδιασμό, είναι υποχρεωμένα να ξεφύγουν από το συγχρονισμό .

Προτού ένωσα το Kiwi.com, έπαιζα με την ιδέα να δοκιμάσω το Figma, αλλά ήταν δύσκολο για μένα να φτάσω σε αυτό. Δεν είχα πολύ μεγάλη αξία στη χρήση του και δεν έπρεπε να κρατώ όλα τα εργαλεία συγχρονισμένα.

Ήμουν επίσης αναβληθεί από την προσέγγιση του προγράμματος περιήγησης / cloud σε αυτό. Μου άρεσε που θα μπορούσα να πυροβολήσω το Sketch όποτε ήθελα, και είναι μια μητρική εφαρμογή Mac. Και στη συνέχεια με χτύπησε, δεν υπάρχει τρόπος γύρω από αυτό - είτε έχετε τα πάντα στο σύννεφο και συγχρονίζεται το 100% του χρόνου, είτε έχετε τα πράγματα εκτός σύνδεσης στις αποσυντονισμένες ροές εργασίας. Έτσι, προσπάθησα να συνεργαστώ με τη Figma, λίγο λίγο στην αρχή, και μου άρεσε πολύ.

Τότε μπήκα στο Kiwi.com τον περασμένο Νοέμβριο. Η Vojta ήταν η μόνη που εργαζόταν εκεί σε κινητά την εποχή εκείνη. Καλύπτει όλες τις πλατφόρμες και όλες τις συσκευές από μόνη της . Ενώ έκανε πολύ καλή δουλειά, το έργο του δεν είχε ένα συνεπές σύστημα πίσω από αυτό.

Θέλαμε να το δοκιμάσουμε, αλλά το στοίχημα για το Figma χωρίς όλη την ομάδα και το σχεδιασμό του Orbit σε αυτό, φαινόταν σαν μια κακή κλήση. Δεν ήταν πολύ σαφές σε ποια κατεύθυνση θα οδηγούσε η ομάδα του Figma και σε τι θα επικεντρωθεί. Επιπλέον, ορισμένα από τα χαρακτηριστικά μόλις δεν ήταν έτοιμα. Και όμως, αποφασίσαμε να το δοκιμάσουμε ούτως ή άλλως, αλλά μόνο με κινητά. Το μπροστινό μας άκρο και το Orbit εξακολουθούν να σχεδιάζονται και να συντηρούνται στο Sketch.

Στη συνέχεια, με χτύπησε: Έχετε πάντα τα πάντα σε συγχρονισμό 100% στο σύννεφο ή έχετε τα πράγματα εκτός σύνδεσης στις αποσυντονισμένες ροές εργασίας.

Σχ. 3.0

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

Ευτυχώς, το Figma παρουσίασε μια τεράστια έκδοση 3.0. Δεν θα πάω σε πολύ λεπτομέρεια εδώ (απλά ακολουθήστε τον σύνδεσμο), αλλά βασικά η ενημέρωση:

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

Οι βασικές αρχές της βιβλιοθήκης μας

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

Μέγιστη τοποθέτηση δύο επιπέδων βαθιάς βάσης

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

Πηγαίνοντας 2 βαθιά βαθιά στη σύνθεση των στοιχείων σας παρέχει την καλύτερη ισορροπία χρηστικότητας και δυνατότητας.

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

Ενσωματωμένα στοιχεία σε δράση

Κάντε πιο εύκολη την επιλογή των επιπέδων (ειδικά με κείμενο)

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

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

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

(Κορυφή) Το

Λογική αντικατάστασης εξαρτήματος

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

GroupIt ProTip ™

Συμπλέκουμε όλα τα συστατικά μας σε ομάδες. Με αυτόν τον τρόπο δεν γεμίζουν την πλαϊνή γραμμή στη βιβλιοθήκη στοιχείων αρχείων. Αυτό κάνει πολύ πιο εύκολη την εργασία με σελίδες με πολλά συστατικά. Είναι κάτι που μου λείπει πολύ το Sketch.

Βελτιστοποιήστε τα στοιχεία bitmap

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

  • Βελτιστοποιούμε τις εικόνες: με εργαλεία όπως ImageOptim, Optimage, tinyPNG και τέτοια. Δεν είμαι σίγουρος αν το Figma κάνει κάποια βελτιστοποίηση, αλλά το κάνουμε ούτως ή άλλως.
  • Βελτιστοποιούμε τη μορφή αρχείου: PNG για απλές εικόνες και JPEG για φωτογραφίες.
  • Αλλάζουμε το μέγεθος των περιουσιακών στοιχείων: Γενικά δεν χρειαζόμαστε φωτογραφίες μεγέθους billboard στις μακέτες μας.

Ακολουθώντας αυτήν την πρακτική βελτιώνεται ο χρόνος λήψης των αρχείων και των στοιχείων της βιβλιοθήκης. Κάνει επίσης την επανάληψη των αρχείων λιγότερο από μια ταλαιπωρία.

Εξαρτήματα και δομή έργου

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

Καλύψτε το έργο

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

Δομή αρχείου έργου

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

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

Έκδοση έργου

Χρησιμοποιούμε τις σελίδες ως διαφορετικές εκδόσεις του έργου με μια τυπική σύμβαση ονοματοθεσίας XY. Το X αντιπροσωπεύει τεράστιες ενημερώσεις εκδόσεων, ενώ οι Y μικρότερες επαναλήψεις, με την τελευταία επανάληψη στην κορυφή. Η σελίδα των συστατικών στοιχείων φιλοξενεί τους υποψήφιους που θεωρούμε ότι μετακινούνται στην κύρια βιβλιοθήκη UI.

Βοηθητική βιβλιοθήκη

https://www.figma.com/embed?embed_host=share&url=https://www.figma.com/file/Mutou0a3WLf4bZrApWVRU9Kz/Helpers?node-id=0%3A1

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

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

Σημεία

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

Σημεία - Χρώματα

Σημεία - Τυπογραφία

Η τυπογραφία είναι ίδια με τα χρώματα. Έχουμε ήδη ορίσει ό, τι χρειαζόμαστε στο σύστημα σχεδιασμού μας (λείπει ορισμένοι ορισμοί στυλ γραμματοσειράς FE), και έτσι σπάνια αγγίζεται. Η τυπογραφία που ορίζεται παραπάνω φαίνεται απλή, αλλά σε συνδυασμό με άλλα κοινόχρηστα στυλ, είναι όλα όσα χρειαζόμαστε στο κινητό.

Σημεία - Σκιές

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

Εικόνες

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

Εικονογραφήσεις

Τα εικονογραφήματα είναι πολύ παρόμοια με τα εικονίδια. Είναι απλά ένας τεράστιος καμβάς γεμάτος από εικονογραφήσεις προϊόντων μας. Όλοι μοιράζονται το ίδιο μέγεθος. Αλλά λόγω ορισμένων περιορισμών των εισαγωγών του SVG στο Figma, πρέπει να εργαστούμε με bitmap για τώρα.

Orbit Mobile

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

Ο νάισαϊερ τρώει τα λόγια του

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

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

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