Το Figma μετασχηματίζει όλη μου τη ροή εργασίας

Και είναι φοβερό!

Το Figma έστειλε πρόσφατα την πρώτη πλήρη έκδοση του συστήματος Team Libraries. Δεν είναι μυστικό που έχω εμμονή για την ανάπτυξη αυτού του προϊόντος. Πήγα σε σκεπτικιστές σχετικά με μια διαδικτυακή εφαρμογή σύννεφο ως καθημερινό εργαλείο σχεδίασης και βγήκε πάνω από την κορυφή εντυπωσιασμένος όχι μόνο από την απόδοση (με το ότι αισθάνεται πιο ευαίσθητο και ντόπιο απ 'ότι θα περίμενε κανείς ότι μια εφαρμογή στο διαδίκτυο αισθάνεται ), αλλά και ως προς το πόσο νόημα κάνει αυτό το είδος εργαλείου να ζει εντελώς στο σύννεφο. Εάν ήσασταν πάντα στο φράχτη - οι Team Libraries είναι ο τέλειος λόγος για να επιβιβαστείτε.

Έτσι, στην τρίτη δόση των άρθρων με κεντρικά στοιχεία Figma, εδώ θα ήθελα να καλύψω:

  1. Λιγότερα εργαλεία, περισσότερος σχεδιασμός
  2. Ομάδα Βιβλιοθηκών και οργάνωση συνιστωσών
  3. Πώς χρησιμοποιώ το Figma για μια δημιουργική ομάδα

Λιγότερα εργαλεία, περισσότερος σχεδιασμός

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

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

  • εργαλεία πρωτοτύπων χαμηλής πιστότητας τρίτων μερών (ή ανεπαρκώς ενσωματωμένα πρόσθετα) για απλό κλικ
  • υπηρεσίες / εργαλεία τρίτων για τη διευκόλυνση της συνεργασίας και της σχολιασμού
  • υπηρεσίες / εργαλεία τρίτων για τη διευκόλυνση της προώθησης από τους προγραμματιστές
  • υπηρεσία cloud / network storage για κοινή χρήση αρχείων ή βιβλιοθηκών υποδοχής
  • υπηρεσίες / εργαλεία ελέγχου εκδόσεων τρίτου μέρους

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

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

Η τελευταία σημαντική ενημέρωση του Figma (μόλις 2 μήνες πριν!) Εισήγαγε την πρώτη επανάληψη του πρωτοτύπου κλικ-μέσω. Σε δευτερόλεπτα μπορείτε να ξεκινήσετε να συνδέετε οθόνες μαζί για να παραδώσετε ένα πρωτότυπο. Συνδυάζεται με έξυπνες λειτουργίες όπου τα συνδεδεμένα στοιχεία θα θυμούνται σε ποιο πλαίσιο έχετε συνδέσει και δημιουργούν αυτόματα αυτές τις συνδέσεις για όλες τις περιπτώσεις. Αυτό είναι μόνο ένα από τα πολλά "μικρά μεγάλα στοιχεία" στη Figma που διατηρούν πολύτιμο χρόνο.

Η δημιουργία πρωτοτύπων click-through είναι τόσο εύκολη όσο η εναλλαγή σε λειτουργία πρωτότυπου και η σύνδεση αντικειμένων σε οθόνες.

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

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

Ομάδα Βιβλιοθηκών και οργάνωση συνιστωσών

Όταν άρχισα να μεταφέρω τη δουλειά μου από το Sketch στο Figma, πρέπει να ομολογήσω ότι αρχικά αισθανόμουν λίγο χαμένος χωρίς ένα μέρος για να βάλω τα στοιχεία μου ή έναν εύκολο τρόπο να τα αποκτήσω πρόσβαση. Λείπει πραγματικά η σελίδα "Σύμβολα". Εισάγετε τις ομάδες βιβλιοθηκών. Τώρα δεν μπορείτε μόνο να δημοσιεύσετε στοιχεία από οποιοδήποτε έργο στην Ομάδα Βιβλιοθήκη, μπορείτε επίσης να έχετε εύκολα πρόσβαση σε οποιοδήποτε στοιχείο του αρχείου σας από τον πίνακα στοιχείων. Η αριστερή πλαϊνή μπάρα, η οποία προηγουμένως προοριζόταν αποκλειστικά για στρώματα, έχει τρεις καρτέλες: μία για στρώματα, μία για στοιχεία (τοπικά στο έγγραφο) και μία για πρόσβαση στα στοιχεία της συλλογικής σας ομάδας (Συμβουλή: συντομεύσεις πληκτρολογίου alt + 1, alt + 2 και alt + 3 είναι πολύ βολικό για να περιηγηθείτε γρήγορα ανάμεσα στις καρτέλες).

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

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

Η οργάνωση των στοιχείων σας στη βιβλιοθήκη της ομάδας σας μπορεί να επιτευχθεί με διάφορους τρόπους. Μπορείτε να επιλέξετε να ρυθμίσετε ένα κύριο έγγραφο για να φιλοξενήσετε ολόκληρο το σύστημα σχεδιασμού σας ή να το διαγράψετε σε πολλά αρχεία. Μπορείτε επίσης να δημοσιεύσετε απλά στοιχεία από τα έγγραφα στα οποία έχετε δημιουργήσει τα βασικά συστατικά στοιχεία σας χωρίς να μεταφέρετε τα στοιχεία σας στο δικό τους αρχείο. Αυτό λειτουργεί πολύ, αλλά το βρίσκω πολύ πιο εύκολο να διατηρήσετε έγγραφα που είναι αφιερωμένα σε εξαρτήματα αν έχετε ένα μεγάλο σύστημα UI. Λόγω του τρόπου με τον οποίο η Figma οργανώνει τα στοιχεία στο παράθυρο Team Libraries, μπορείτε να χρησιμοποιήσετε πλαίσια ή ομάδες για να τα ταξινομήσετε σε λογικούς κουβάδες (π.χ. κουμπιά, καρτέλες, στοιχεία φόρμας, ειδοποιήσεις κ.λπ.). Η αλλαγή του χρώματος φόντου πλαισίων ή ομάδων θα ενημερώσει την προεπισκόπηση στην πλαϊνή γραμμή. Φυσικά, οι δυνατότητες είναι ατελείωτες όταν πρόκειται για το πώς οργανώνετε το σύστημά σας. Ο William Newton έγραψε ένα μεγάλο άρθρο για το πώς οργανώνει τα στοιχεία του στο Gusto εδώ.

Πώς χρησιμοποιώ το Figma για δημιουργική ομάδα

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

Παρουσιάσεις και κοινή χρήση
Ας ξεκινήσουμε με το multiplayer. Βλέπω συζήτηση για την έλλειψη ανάγκης πολλών σχεδιαστών να εργάζονται στο ίδιο αρχείο. Ενώ έχω ήδη βιώσει μεγάλη επιτυχία στη χρήση του για να συνεργαστώ με άλλους σχεδιαστές για να δημιουργήσω γρήγορα και να ξεφύγω από τις ιδέες, βλέπω πολλά οφέλη για τους μη σχεδιαστές. Για παράδειγμα, έχουμε συχνά εβδομαδιαία ή διήμερα check-in για τα έργα όπου πρέπει να παρουσιάσω μια ενημέρωση κατάστασης. Προηγουμένως, σε αυτές τις ενημερώσεις θα μοιραζόμουν συχνά την οθόνη μου (χαμηλή ποιότητα, ζητήματα κλιμάκωσης, πρόσθετο λογισμικό, "παρακαλώ με προωθήστε στον παρουσιαστή!") Ή πρέπει να εξαγάγω ακόμα comps και να τα διανείμω, % Μέγεθος. Η αναζήτηση ανατροφοδοτήσεων ήταν μια ταλαιπωρία και συνήθως με ενέπλεξε να γράφω πολλές σημειώσεις ή να κάνω σχόλια σε αρχεία PDF.

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

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

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

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

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

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

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

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

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

Παρακαλώ μοιραστείτε τις εμπειρίες σας!

Για εκείνους που βρίσκονται κοντά στο Waterloo, ON, θα φιλοξενήσω ένα βράδυ στο Κέντρο Επιταχυντών όπου θα παρουσιάσω μια ζωντανή επίδειξη για το Figma και τις δυνατότητές του στις 24 Οκτωβρίου. Περισσότερες πληροφορίες εδώ.

Αποποίηση: Το Figma βρήκε αυτό το άρθρο για να είναι χρήσιμο για άλλους σχεδιαστές, γι 'αυτό το διαφημίζετε στο Twitter και στο Facebook με την άδειά μου.