Figma Vs. Σκίτσο

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

Ενημερώθηκε: 06/29/19

Δεδομένου ότι οι περισσότεροι σχεδιαστές της UX στην προηγούμενη δουλειά μου χρησιμοποίησαν το Sketch και λίγοι είχαν δοκιμάσει ακόμη και το Figma, σκέφτηκα ότι θα κάνω έναν διαγωνισμό head-to-head με βάση τους τελευταίους 18 μήνες που χρησιμοποιώ το Figma ως κύριο εργαλείο σχεδιασμού μου.

Σε μια προηγούμενη εταιρεία προώθησα το Sketch πάνω από το Illustrator και βρήκα παρόμοια αντίσταση στο "νέο πράγμα". Ο στόχος μου ως aficionado εργαλείο σχεδιασμού είναι να βρω το καλύτερο εργαλείο για οποιαδήποτε εργασία χρειάζεται να κάνει.

Θα πρέπει να προπαρασκευάσω αυτή τη σύγκριση με μερικά σχόλια:

  • Ο λόγος που κάποιοι άνθρωποι δεν βλέπουν το πλεονέκτημα του Figma πάνω από το Sketch είναι απλά επειδή δεν συνεργάζονται στενά σε συγκεκριμένα αρχεία με άλλα μέλη της ομάδας. Αυτό δεν είναι μια κριτική - εργάζονται σε ένα μόνο αρχείο Sketch και μοιράζονται μόνο ως συγχρονισμό ή εξαγωγή σε Invision ή σε ένα φάκελο. Δεδομένου ότι δεν μπορούν να δουλέψουν σε ένα αρχείο μαζί (όπως μπορείτε να κάνετε στα Έγγραφα Google ή στο Figma), δεν το κάνουν.
  • Πρέπει να χρησιμοποιήσετε το Figma σε μια ομάδα για να δείτε πραγματικά πόσο φανταστικό είναι να συνεργαστείτε σε αρχεία έργου. Εάν διαπιστώσετε ότι η συνεργασία των Εγγράφων Google είναι "ανατριχιαστικό" και νομίζετε ότι εργάζεστε καλύτερα μόνος σας (που δεν πρέπει να χρησιμοποιείτε σήμερα στο UX), τότε δεν αγκαλιάζετε το μέλλον και τη φύση των αρχών σχεδιασμού του συστήματος. Πρόκειται για τη συνεργασία των διεπιστημονικών ομάδων.
  • Ο άλλος λόγος είναι ότι πολλοί από εμάς δεν χρησιμοποιούν σύμβολα ή συστατικά στη δουλειά μας. απλά αναπαράγουμε στοιχεία ανάλογα με τις ανάγκες και δημιουργούμε μια άλλη σελίδα χωρίς τη χρήση τεχνολογίας συμβόλων για την ενημέρωση στοιχείων. Ακόμα και με τα δελτία τρυπών βιβλιοθήκης μοτίβου της εταιρείας μου, θα πρέπει να δημιουργήσετε σκόπιμα σύμβολα για να επωφεληθείτε από αυτό στο Sketch. Εάν δεν χρησιμοποιείτε σύμβολα σε οποιοδήποτε από τα δύο εργαλεία, δεν χρησιμοποιείτε το εργαλείο για την καλύτερη δυνατή λειτουργία του.

Χαρακτηριστικά Head to Head

Κόστος

Νικητής - Figma

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

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

Σύμβολα και Βιβλιοθήκες

Νικητής - Figma

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

06/29/19: Υπάρχουν πολλά εργαλεία δημιουργίας συστήματος σχεδιασμού που λειτουργούν τώρα με το Σκίτσο και το Figma τώρα. Δείτε τα παραδείγματα Abstract και Zeroheight. Και οι δύο εταιρείες πιέζουν να κάνουν τα εργαλεία τους να λειτουργούν ως ένα μέρος του συστήματος σχεδιασμού σας, εξακολουθώ να υποστηρίζω ότι το Figma το κάνει καλύτερα λόγω του πραγματικού χρόνου φύσης της εφαρμογής. Η Bohemian Coding εργάζεται στο Sketch for Teams, το οποίο προφανώς σας επιτρέπει να συνεργαστείτε σε ένα αρχείο ταυτόχρονα. Θα πρέπει να περιμένουμε και να δούμε αν είναι απλώς ένα hack για να καλύψουν το Figma. Το Sketch for Teams προσθέτει επίσης αυτόματη έκδοση, κάτι που το Figma είχε και βελτιώθηκε για μερικά χρόνια.

  • Το Σκίτσο προσθέτει τοπικά σύμβολα σε μια πρόσθετη σελίδα στο αρχείο .sketch (ή προαιρετικά στην ίδια σελίδα), ενώ το Figma έχει ένα αποκλειστικό παράθυρο διαλόγου με τα ίδια "συστατικά" (όπως το σύμβολο καλεί το Figma). Το Figma δεν δημιουργεί ούτε ένα παράδειγμα του συμβόλου, το οποίο θεωρώ δυσκίνητο στο Sketch, ειδικά αφού δημιουργείτε μια βιβλιοθήκη με πολλά σύμβολα.
  • Το Sketch μόλις πρόσφατα παρείχε τη δυνατότητα χρήσης βιβλιοθηκών ομάδων και ενημέρωσης συμβόλων διασταυρώσεων, ενώ το Figma το έχει ήδη αρχίσει.
  • Μπορείτε επίσης να ανταλλάξετε κοινόχρηστα στοιχεία μεταξύ των αρχείων, πράγμα που σημαίνει ότι τα ενσωματωμένα στοιχεία θα διατηρήσουν την κατάσταση τους ως στιγμιότυπο, ώστε να μπορείτε να ανταλλάξετε την ένθετη παρουσία για άλλους.
  • Το Sketch το κάνει τώρα, αλλά η προσέγγισή τους είναι να αντικατασταθούν σε μια μακρά λίστα drop-downs στον πίνακα ιδιοτήτων, ενώ το Figma σάς επιτρέπει να αντικαταστήσετε τη θέση σας, την οποία βρίσκω πολύ πιο εύκολη και πιο διαισθητική.

Νικητής: Figma

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

Εργαλεία σχεδίασης

Νικητής: Είναι ένα Draw

  • Υποστηρίζω ότι υπάρχουν περισσότερα προβλήματα στο εργαλείο σχεδίασης σκίτσων, αλλά ουσιαστικά το σετ εργαλείων λειτουργεί το ίδιο. Το Sketch έχει περισσότερα εργαλεία, αλλά δεν είναι απαραίτητα και προσθέτουν πολυπλοκότητα στη συνολική εφαρμογή.
  • Τα σημεία ασφάλισης, τα σχέδια και οι οδηγίες στο Figma είναι πολύ πιο εύχρηστα και κατανοητά. Αυτό που λείπει από τα χαρακτηριστικά γνωρίσματα που κερδίζει σε καλά διαφοροποιημένα εργαλεία με λιγότερα σφάλματα. Δοκιμάστε το εργαλείο γραμμή Bezier σε σχέση με το Sketch.
  • Νομίζω ότι οι οδηγοί και για τα δύο προϊόντα θα μπορούσαν να χρησιμοποιήσουν βελτίωση. θα πρέπει να μπορούμε να τα ομαδοποιούμε, να τα επιλέξουμε και να τα διαγράψουμε (αντί να τα σπρώχνουμε από τον καμβά), ακόμα και να τα αποθηκεύσουμε. Και κάνουν το αντίθετο κατά τη δημιουργία οδηγών, οι οδηγοί Figma σύρονται από τον χάρακα x δημιουργούν έναν οριζόντιο οδηγό, ενώ το Sketch δημιουργεί έναν κατακόρυφο οδηγό όταν κάνετε κλικ στον x χάρακα. Αυτό είναι ένα από εκείνα τα χαρακτηριστικά που έχουν νόημα είτε τον βλέπετε για κάποιο λόγο.

Ταχύτητα και απόδοση

Νικητής - Figma

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

Σύστημα αρχείων

Νικητής - Figma

  • Το Figma είναι πλατφόρμα agnostic αφού τρέχει σε ένα πρόγραμμα περιήγησης ώστε να μπορείτε να το εκτελέσετε σε οποιαδήποτε μηχανή με πρόγραμμα περιήγησης.
  • Τα αρχεία Figma είναι διαθέσιμα σε όλους. Εδώ είναι ένας σύνδεσμος σε ένα αρχείο που εμφανίζει ένα πλαίσιο Figma που δείχνει τη δυνατότητα μείωσης στα βήματα της διαδικασίας όταν χρησιμοποιείτε το εργαλείο ως μέρος της διαδικασίας UX.
  • Υπάρχει επίσης μια εφαρμογή desktop Figma για εκείνους που προτιμούν μια τοπική εφαρμογή μέσω ενός προγράμματος περιήγησης. Αυτό είναι διαθέσιμο για Mac και Windows.

Συνεργασία

Νικητής - Figma

  • Ως εφαρμογή βασισμένη σε πρόγραμμα περιήγησης, το Figma επιτρέπει πλήρη συνεργασία σε πραγματικό χρόνο σε έργα και αρχεία. Η επιλογή του avatar σας σε μεταφέρει στην τρέχουσα προβολή.
  • Υπάρχει μια πολύ σημαντική πτυχή στη χρήση ζωντανής συνεργασίας σε ένα αρχείο σχεδιασμού που έχω γράψει για το Medium - αποφεύγοντας την σχεδίαση.
  • Οι προγραμματιστές είναι πάντα ενημερωμένοι και μπορούν να αναζητήσουν ένα αρχείο Figma (χωρίς ξεχωριστά plugins ή εργαλεία) για να αποκτήσουν χαρακτηριστικά αντικειμένων για την εργασία τους.

Επανεξέταση

Νικητής - Figma

  • Δεδομένου ότι τα αρχεία προβάλλονται ζωντανά, οι κριτικές μπορούν να γίνουν από οποιονδήποτε αριθμό ανθρώπων, πλοηγώντας στις απόψεις του άλλου, κάνοντας κλικ στον avatar τους στην κεφαλίδα Figma, ιδιαίτερα ισχυρό κατά τη διάρκεια απομακρυσμένης εργασίας.
  • Το Σκίτσο βασίζεται σε αρχεία και επομένως δεν έχει τρόπο να μοιραστεί τη δουλειά σας εκτός αν βασίζεστε στο Sketch Cloud ή σε άλλα εργαλεία για συγχρονισμό ή / και παρουσίαση.
  • Στο Figma, μπορείτε απλά να πιέσετε ένα βέλος "Present" στη γραμμή εργαλείων για να ξεκινήσετε μια ζωντανή παρουσίαση και να πλοηγηθείτε μεταξύ των πλαισίων.

Σχολιάζοντας

Νικητής - Figma

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

Εισαγωγή / Εξαγωγή

Νικητής: Figma

06/29/19: Αυτή ήταν μια ισοπαλία μέχρι αυτή την ενημέρωση, το Figma έχει κάνει τέτοια σπουδαία δουλειά με τα χαρακτηριστικά εισαγωγής και εξαγωγής Sketch, παίρνει το βραβείο. Και δεν μπορείτε να πάρετε ένα αρχείο Figma και να το εισαγάγετε στο Sketch.

  • Και τα δύο εργαλεία μπορούν να εισαγάγουν / εξάγουν bitmaps και SVG και και οι δύο κάνουν μια παρόμοια δουλειά. Ωστόσο, μπορείτε να αφήσετε ένα αρχείο .sketch απευθείας στο Figma και να έχετε πλήρη ισοτιμία, δεν μπορείτε να εισάγετε αρχεία Figma στο Sketch εκτός από τα SVG που έχουν τις τυπικές υποβάθμιση.
  • Ένας από τους κύριους λόγους για τους οποίους επέστρεψα στο Figma ήταν να μπορώ να βγάλω τα υπάρχοντα μου αρχεία Sketch στο Figma και να συνεχίσω να δουλεύω. Ποτέ δεν κοίταξα πίσω - δεν χρειαζόταν. Και η Figma συνέχισε να βελτιώνει το χαρακτηριστικό εισαγωγής Sketch.

Μοιρασιά

Νικητής - Figma

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

Ενσωμάτωση αρχείων

Νικητής - Figma

  • Το Σκίτσο δεν υποστηρίζει την ενσωμάτωση ζωντανών αρχείων. με το Figma μπορείτε να χρησιμοποιήσετε ένα iFrame και να φορτώσετε ένα ενημερωμένο αρχείο Figma σε πραγματικό χρόνο. Έχω ενσωματώσει τα mockups μας σε Confluence για παράδειγμα, χρησιμοποιώντας τη μακροεντολή "ένθετο HTML" στο Confluence
  • Οι PO σας και οι προγραμματιστές δεν πρέπει ποτέ να ρωτήσουν "είναι αυτή η τελευταία έκδοση"; Είναι πάντοτε - μπορείτε να βάλετε ακόμη και την προβολή σελίδας Confluence δίπλα στην προβολή αρχείου Figma και να παρακολουθήσετε αλλαγές στην ενημέρωση του Figma στο Confluence σε πραγματικό χρόνο. Απλά φοβερό.

Ενημέρωση και βοήθεια πρόσβασης

Νικητής - Figma

  • Το Figma είναι μια εφαρμογή βασισμένη στον περιηγητή που είναι πάντα ενημερωμένη κάθε φορά που την εκκινείτε. Δεν χρειάζεται να περιμένετε για πλήρη ενημέρωση εφαρμογής και επανεγκατάσταση.
  • Το Figma χρησιμοποιεί επίσης βοήθεια ενδοσυνεννόησης που έχει γίνει συνηθισμένο στις εφαρμογές ιστού. Θεωρώ ότι αυτό είναι εξαιρετικά χρήσιμο για γρήγορες ερωτήσεις και πρόσβαση σε σημείωση. Και σημειώσεις απελευθέρωσης είναι ένα κλικ μακριά από τους; στο κάτω δεξιό τμήμα της εφαρμογής.
  • Το σκίτσο απαιτεί ενημερώσεις που συχνά προκαλούν αστοχία plugin. Ήταν ένας από τους κύριους λόγους που έγινα τόσο απογοητευμένοι με την κωδικοποίηση της Βοημίας. έχουν δημιουργήσει μια πλατφόρμα αλλά δεν έχουν ένα πολύ σταθερό σύστημα συντήρησης για τους τρίτους προμηθευτές. Το Sketch βελτίωσε πρόσφατα τη διαδικασία ενημέρωσης και τώρα δείχνει μια μικρή τοστιέρα (έρχομαι σε παιδιά, δεν θα έβλαβα αν ήταν μεγαλύτερη, εγώ μόλις το παρατηρήσω) για να ειδοποιήσω για ενημερωμένα plugins.

Plugins

Νικητής - Σκίτσο (προς το παρόν)

06/29/19: Το Figma σύντομα θα υποστηρίξει plugins και μπορείτε να εξάγετε στη Zeplin για εργασία redline.

  • Το Figma διαθέτει τώρα ένα ανοιχτό API που υπόσχεται να δημιουργήσει μια κοινότητα προγραμματιστών add-on για το Figma. Η κύρια ανησυχία μου είναι πώς χειρίζεται αυτό - όπως αναφέρθηκε, το Σκετς έσπαζε τα πρόσθετα συνεχώς όταν άρχισαν να προσφέρουν το χαρακτηριστικό γνώρισμα.
  • Το Sketch διαθέτει ένα πλήθος plugins για όλες τις λειτουργίες και με την πρόσφατη προσθήκη ενημέρωσης ζωντανού plugin, είναι λιγότερο πιθανό να σπάσουν με κάθε νέα ενημέρωση εφαρμογών.

Υποστήριξη συστήματος σχεδιασμού

Νικητής - Ισοπαλία

  • Το μεγαλύτερο πρόβλημα που τα περισσότερα εργαλεία σχεδιασμού έχουν τώρα είναι ότι δεν έχουν κανένα τρόπο να γίνουν το "ζωντανό" front-end σε ένα σύστημα σχεδιασμού. Οι αλλαγές που έγιναν σε ένα κύριο αρχείο σχεδιασμού θα πρέπει να ενημερώνουν αυτόματα μια βιβλιοθήκη μοτίβων σχεδίασης, προωθώντας έτσι τις αλλαγές απευθείας σε μια σταδιακή κατασκευή.
  • Η Google έχει παράσχει την προσθήκη υλικού σχεδίασης για σκίτσο, η οποία έχει γίνει πολύ καλά.
  • Υπάρχει μια κούρσα αγώνα για να δούμε ποιος θα κερδίσει σε αυτό το αρένα? Υποθέτω ότι το Figma έχει ένα πλεονέκτημα επειδή είναι μια πλατφόρμα βασισμένη σε πρόγραμμα περιήγησης και έχει προτείνει μια πιθανή λύση πριν από μήνες.

Συμπερασματικά

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

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

Ευχαριστώ για την ανάγνωση!