Μια προοπτική χρήστη Sketch για τη μετάβαση στο Figma

Όλα όσα πρέπει να γνωρίζετε

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

Σημείωση του συντάκτη Figma: Δεν βάζουμε συνήθως κριτικές για το Σχάμα στο blog μας, αλλά εδώ κάναμε μια εξαίρεση. Ο Marco Pacifico εξήγησε τα οφέλη του εργαλείου μας καλύτερα από ό, τι θα μπορούσαμε, έτσι θέλαμε το άρθρο του (το οποίο αρχικά εμφανίστηκε στο Prototypr.io) να αποτελεί πηγή για τους χρήστες μας. Σας ευχαριστούμε τον Marco για να μας αφήσει να διασταυρωθούμε μετά από αυτό!

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

Πρώτα ας πάρουμε τα βασικά έξω από το δρόμο

Το Figma είναι ένα εργαλείο σχεδιασμού μέσω διαδικτύου με συνεργασίες σε πραγματικό χρόνο

Είναι σαν το Craft Freehand αλλά με όλα τα χαρακτηριστικά του Sketch (και άλλα). Λειτουργεί σε προγράμματα περιήγησης ιστού και υπάρχουν επίσης μητρικές εφαρμογές που σας επιτρέπουν να εργάζεστε εκτός σύνδεσης.

Γιατί είναι καλό το web;

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

Αλλά είναι η Figma αργή;

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

Αλλά τι γίνεται με το οικοσύστημα Sketch; Το Sketch διαθέτει τόσες προσθήκες για τις οποίες βασίζουμε τη ροή εργασίας μας

Λοιπόν, είμαι εδώ για να σας πω ότι δεν θα χάσαμε τίποτα σημαντικό χρησιμοποιώντας το Figma. θα κερδίσαμε μόνο.

Το Figma διαθέτει όλα τα χαρακτηριστικά και τις δυνατότητες του Sketch + Abstract + InVision + Craft + Liveshare + Freehand + Zeplin + Dropbox όλα σε ένα, καθώς και ένα μάτσο περισσότερο. Εδώ είναι μερικά μόνο από τα χαρακτηριστικά που έχει το Figma:

  • Μια παρόμοια διεπαφή και όλα τα ίδια εργαλεία σχεδίασης με το Sketch.
  • Πρωτότυπα. Το Figma διαθέτει ένα χαρακτηριστικό με δυνατότητα δημιουργίας προτύπου που είναι παρόμοιο με το Craft + InVision.
  • Ενσωματωμένο σχολιασμό. Όποιος έχει τον σύνδεσμο μπορεί να προσθέσει σχόλια οπουδήποτε στον σχεδιασμό, παρόμοια με τον τρόπο με τον οποίο λειτουργεί η σχολιασμό στο InVision. Μπορείτε να επισημάνετε άτομα στα σχόλια, να επισημάνετε τα σχόλια ως επιλυμένα και ακόμα και να ενσωματώσετε το με το Slack.
  • Χρονομετρητής προγραμματιστών. Τα Devs μπορούν να αποκτήσουν διαστάσεις, στυλ και να κατεβάσουν εικονίδια και εικόνες από τη διεύθυνση URL του έργου. Είναι σαν το Zeplin, αλλά πάλι, δεν χρειάζεται να συγχρονίζετε τους πίνακες τέχνης σας κάθε φορά που ενημερώνετε τα σχέδιά σας.
  • Έλεγχος έκδοσης. Το Figma περιλαμβάνει το ιστορικό εκδόσεων για όλους τους συνεργάτες. Μπορείτε να επαναφέρετε ή να περάσετε από μια προηγούμενη κατάσταση. Αυτό λειτουργεί σαν μηχανή χρόνου σε Mac.
  • Συνεργασία για πολλούς παίκτες. Πολλοί άνθρωποι μπορούν να συνεργαστούν σε πραγματικό χρόνο. Παρόμοια με το Freehand, όλοι βλέπουμε τους δείκτες του άλλου στην οθόνη και μπορούμε να σχεδιάζουμε και να σχολιάζουμε.
  • Liveshare. Αν κάνετε κλικ στο avatar ενός ατόμου, θα δείτε τι βλέπουν στην οθόνη τους και ακολουθήστε τον κέρσορα τους. Αυτό λειτουργεί ακριβώς όπως το InVision Liveshare (RIP Liveshare).
  • Συστατικά. Παρόμοια με τα σύμβολα στο σκίτσο, αλλά πιο ευέλικτη και ευκολότερη με το σχεδιασμό. (Περισσότερα σχετικά με αυτό)
  • Περιορισμοί. Παρόμοια με την αλλαγή μεγέθους στο σκίτσο, αλλά πιο διαισθητική.
  • Ομάδα Βιβλιοθηκών. Μπορείτε να μοιραστείτε και να ενημερώσετε τις συλλογές στοιχείων σε διάφορα έργα.
  • Μπόνους: μπορείτε ακόμη και να ενσωματώσετε έργα Figma στο Dropbox Paper.

Τώρα ας φτάσουμε στα πραγματικά καλά πράγματα ...

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

Παρακάτω είναι τέσσερις τρόποι με τους οποίους η Figma μπορεί να βελτιώσει ουσιαστικά τον τρόπο με τον οποίο εργαζόμαστε.

1. Μπορούμε να επαναλάβουμε το WAY γρηγορότερα με συνεργασία σε πραγματικό χρόνο

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

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

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

2. Η διαδικασία σχεδιασμού μας γίνεται όλο και πιο συνεχής και χωρίς προβλήματα

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

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

Μου αρέσει αυτό που ο Thomas Lowry, σχεδιαστής στο OpenText, έγραψε για το πώς η σχεδιαστική του διαδικασία άλλαξε χρησιμοποιώντας το Figma:

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

3. Η μετάβασή μας από το σχεδιασμό στον κώδικα είναι πιθανόν να είναι ταχύτερη και πιο συνεπής

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

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

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

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

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

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

Πώς τα στοιχεία είναι πιο ευέλικτα από τα σύμβολα;

Στο Sketch μπορείτε να χρησιμοποιήσετε την επιλογή Αλλαγή συμβόλων για να επεξεργαστείτε κείμενο ή να ανταλλάξετε τα ένθετα σύμβολα. Αλλά αν θέλετε να αλλάξετε οτιδήποτε άλλο - ας πούμε, το μέγεθος κειμένου, το βάρος των συνόρων ή το χρώμα φόντου - θα πρέπει να αποσυνδεθείτε από το σύμβολο και να δημιουργήσετε μια ελαφρώς διαφορετική έκδοση του ίδιου στοιχείου UI. Για να λύσετε αυτό μπορείτε να φωλιάσετε κάθε παραλλαγή σε ένα σύμβολο, αλλά στη συνέχεια θα καταλήξετε με ένα πίνακα παρακάμψεων από την κόλαση. Με μεγάλα έργα και σύνθετα UIs, η οργάνωση και η συντήρηση όλων των μεταλλαγών γίνεται γρήγορα ακατάλληλη.

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

Νομίζω ότι αυτές οι τρεις gifs κάνουν καλή δουλειά να περιγράφουν οπτικά πώς λειτουργεί.

1. Δημιουργήστε ένα στοιχείο και στη συνέχεια αντιγράψτε το για να δημιουργήσετε δύο παρουσίες του master.2. Οι αλλαγές στο βασικό στοιχείο μεταδίδονται αμέσως σε όλες τις περιπτώσεις του.3. Εκτός από το γεγονός ότι οποιαδήποτε παρατεταμένη ιδιοκτησία θα παραμείνει παραμελημένη, ακόμα και όταν αλλάξει ο κύριος.

Πώς είναι ευκολότερο το σχεδιασμό των εξαρτημάτων από τα σύμβολα;

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

Δεύτερον, η πρόσβαση σε στοιχεία στο Figma είναι πολύ πιο εύκολη από την πρόσβαση στα σύμβολα στο Sketch. Για άλλη μια φορά δεν χρειάζεται να σκεφτείτε μια δομή ονοματολογίας για να πλοηγηθείτε σε ένα ένθετο μενού συμβόλων. Αντ 'αυτού, μπορείτε να βρείτε (και να δείτε!) Συστατικά ως λίστα των μικρογραφιών. Για να προσθέσετε ένα στοιχείο σε μια οθόνη ή για να εναλλάξετε μια παρουσία, απλά σύρετε και αποθέστε στον καμβά. Ή μπορείτε να αντιγράψετε-επικολλήσετε το κύριο στοιχείο για να δημιουργήσετε μια νέα παρουσία - δεν μπορείτε να το κάνετε αυτό στο Sketch χωρίς να δημιουργήσετε νέο σύμβολο.

Δείτε και αποκτήστε πρόσβαση σε στοιχεία από μια καρτέλα στο πλαίσιο των επιπέδων

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

Από https://blog.figma.com/components-in-figma-e7e80fcf6fd2

Τυλίγοντας

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

Άλλοι πόροι

Σημείωση του συντάκτη: Αρχικά δημοσιεύτηκε στο blog.prototypr.io στις 6 Απριλίου 2018. Η Figma δεν υποστήριξε τη δημιουργία αυτής της θέσης.