Φοβερά πράγματα στο Figma

Έχει περάσει πολύς καιρός από τότε που μπορώ να θυμηθώ ότι είμαι τόσο ενθουσιασμένος με την κατάσταση των εργαλείων σχεδιασμού. Από τη μετάβαση της Adobe στο Creative Cloud, φάνηκε να υπάρχει συγκριτικά [τώρα] στάσιμο χρονικό πλαίσιο, όπου η αντιμετώπιση της διευρυνόμενης γκάμας μεγεθών προβολής και πυκνοτήτων εικονοστοιχείων γινόταν ολοένα και πιο απογοητευτική. Ευτυχώς υπάρχουν μικρότερες πιο ευέλικτες εταιρείες λογισμικού που κατασκευάζουν φανταστικά προϊόντα που προσφέρουν εντελώς νέες προσεγγίσεις και ροές εργασίας για να σχεδιάσουν εργαλεία στο είδος UI / UX.

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

Εάν είστε νέοι στο Figma, θα αισθανθείτε πολύ οικείο εάν έχετε χρησιμοποιήσει ποτέ το Sketch. Η διαμόρφωση παραθύρων είναι σχεδόν ίδια: τα εργαλεία στην κορυφή, τα στρώματα στα αριστερά, ο επιθεωρητής στα δεξιά και ο καμβάς στη μέση - το UI είναι όμως διαφορετικό: επίπεδο (σε στυλ) και ελάχιστο σε σύγκριση με το OSX GUI στο Sketch. Οι πίνακες τέχνης ονομάζονται πλαίσια και τα σύμβολα ονομάζονται συστατικά στο Σχ. Η επεξεργασία των στοιχείων γίνεται σε σειρά (όχι σε ξεχωριστή σελίδα όπως στο Sketch) και ακόμη και η συμπλήρωση και η διαδρομή των χρωμάτων και άλλων χαρακτηριστικών μπορούν να αντικατασταθούν εκτός από την αλλαγή του κειμένου. Ένα από τα πιο εντυπωσιακά και μοναδικά χαρακτηριστικά του Figma είναι η λειτουργία του για πολλούς παίκτες που επιτρέπει στους χρήστες να συνεργάζονται σε πραγματικό χρόνο - βλέπετε τους συνεργάτες σας να δουλεύουν πάνω στον ίδιο καμβά που αλληλεπιδρούν με το σχέδιο. Επειδή βασίζεται στο πρόγραμμα περιήγησης (μην αφήνετε να σας τρομάξει - είναι γρήγορο και ανταποκρίνεται), οποιοσδήποτε με πρόγραμμα περιήγησης μπορεί να το χρησιμοποιήσει, ανεξάρτητα από το λειτουργικό σύστημα. Αυτό σημαίνει ότι δεν απαιτείται κανένα ιδιόκτητο λογισμικό που να οδηγεί σε ακόμα πιο εύκολη μεταβίβαση στους προγραμματιστές.

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

Τυχαία άκρη: Μετά από χρόνια χρήσης του Illustrator, αγαπώ εντελώς ότι μπορώ να πατήσω απλά το "I" για να αποκτήσετε πρόσβαση στο εργαλείο σταγονόμετρο!

Ενώ το Figma (αυτή τη στιγμή) λείπει κάποια από τα χαρακτηριστικά που έχει το Sketch (ειδικά γύρω από τους ορισμούς στυλ και ένα προσβάσιμο API για ανάπτυξη plugin), υπάρχουν πολλά πραγματικά έξυπνα χαρακτηριστικά που είμαι ενθουσιασμένος. Το πρόγραμμα ταχείας απελευθέρωσής τους με αφήνει σίγουρο ότι πολλά από τα ελλείποντα χαρακτηριστικά και λειτουργίες που προτείνουν οι χρήστες δεν είναι πολύ μακριά από το δρόμο. Σκοπός αυτής της θέσης δεν είναι να μιλήσουμε για πολλά από τα χαρακτηριστικά γνωρίσματα του Figma που έχουν τεκμηριωθεί αλλού (εδώ, εδώ, εδώ και εδώ). Αντίθετα, ήθελα να τονίσω μερικές από τις αγαπημένες μου "μικρές μεγάλες λεπτομέρειες" που επικροτώ για την υλοποίηση της ομάδας στο Figma. Αυτές οι λεπτομέρειες σωρευτικά κάνουν μια τεράστια διαφορά.

Επιλογή αντικειμένων στο προσκήνιο

Όταν έχετε μια ποικιλία αντικειμένων που στοιβάζονται πάνω από ένα αντικείμενο φόντου (όπως μια κάρτα UI ή που περιέχει φόντο), μπορείτε εύκολα να επιλέξετε αντικείμενα στην κορυφή χωρίς να χρειάζεται να μετακινήσετε + κάντε κλικ σε αυτά μεμονωμένα ή να κλειδώσετε το στρώμα φόντου για να κάνετε μια καμπύλη επιλογής. Αυτό θα λειτουργήσει ακόμη και για την επιλογή αντικειμένων μέσα σε στοιχεία ή ομάδες. Απλά κρατήστε πατημένο το CMD και σύρετε ένα περιθώριο επιλογής γύρω από τα αντικείμενα που θέλετε να επιλέξετε. Πριν σύρετε, ενώ πιέζετε το CMD, τοποθετήστε το ποντίκι πάνω από το αντικείμενο που το περιέχει - θα τον επισημάνει με περίγραμμα - μόλις πατήσετε και αρχίσετε να το σύρετε για να το επιλέξετε θα αγνοήσει αυτό το αντικείμενο και θα σας επιτρέψει να επιλέξετε αντικείμενα στο προσκήνιο. Εξυπνος!

Μεγέθυνση και ευθυγράμμιση πλαισίου κειμένου

Το Figma σάς επιτρέπει να ρυθμίσετε τόσο τα πλάτη όσο και τα ύψη των πλαισίων κειμένου, καθώς και την κατακόρυφη ευθυγράμμιση του κειμένου. Αυτό είναι ένα πραγματικά βασικό χαρακτηριστικό, αλλά λείπει από το Sketch. Πάρτε την παραπάνω περίπτωση. Στο Sketch θα χρειαζόταν να δημιουργήσω δύο σύμβολα: ένα για ετικέτες κουμπιών μίας γραμμής και ένα για δύο διαμορφώσεις γραμμών - ή - θα ήθελα να δημιουργήσω τρία σύμβολα. δύο για να στεγάσει κάθε διαμόρφωση πλαισίου κειμένου και να τις αντικαταστήσει ως αντικαταστάσεις σε ένα τρίτο κύριο σύμβολο. Ο εναλλακτικός τρόπος αντιμετώπισης, ενώ είναι εφικτός, είναι δυσκίνητος και οδηγεί σε πρόσθετα σύμβολα, και η πρόσθετη ταλαιπωρία της ανάγκης να αντικαταστήσετε τις παρακάμψεις όταν ανακαλύπτω ότι μια συγκεκριμένη συμβολοσειρά κειμένου είναι πολύ μεγάλη. Στο Σχ. 1 μπορώ να το ολοκληρώσω με ένα μόνο σύμβολο. Όταν η συμβολοσειρά κειμένου είναι πολύ μεγάλη για τη μία γραμμή, αναδιπλώνεται σε δύο γραμμές και παραμένει κάθετα κεντραρισμένη στο πλαίσιο κειμένου σταθερού ύψους.

Μπορούν να προστεθούν πολλαπλά πλέγματα σε κάθε πλαίσιο. Τα πλέγματα μπορούν να ρυθμιστούν ώστε να είναι σταθερά στο κέντρο ή αριστερά ή να τεντώνουν. Κάθε πλέγμα μπορεί να χρωματιστεί ανεξάρτητα.

Πλέγματα

Οι ρυθμίσεις πλέγματος (layout) στο έργο Sketch ... αλλά υπάρχει κάτι για αυτό που ποτέ δεν ένιωσα σωστό για μένα. Η δημιουργία πλέγματος στο Figma αισθάνεται πολύ απλούστερη και ευέλικτη. Μπορείτε να προσθέσετε τόσα πλέγματα σε ένα πλαίσιο όπως θέλετε και μπορείτε ακόμη να προσθέσετε πλέγματα μέσα στα στοιχεία σας. Μπορείτε να διαμορφώσετε κάθε πλέγμα ξεχωριστά για αναγνώριση. Για παράδειγμα, θα μπορούσατε να έχετε ένα 3 πλέγμα στήλης και ένα πλέγμα 6 στηλών και να τα χρωματίσετε μοναδικά. Το Figma έχει επίσης μια ρύθμιση που θα τεντώσει το πλέγμα και θα το προσαρμόσει στις διαστάσεις του πλαισίου σας. Η δυνατότητα καθορισμού πλεγμάτων σταθερού και υγρού (stretch) είναι πολύ βολική όταν δημιουργείτε ένα σύστημα που να λειτουργεί σε μια σειρά μεγεθών προβολής. Η προσθήκη σειρών στο πλέγμα λειτουργεί με τον ίδιο ακριβώς τρόπο, αλλά ελέγχεται ανεξάρτητα από τις στήλες ως πρόσθετο στρώμα πλέγματος. Κάθε πλέγμα μπορεί να ελεγχθεί ανεξάρτητα και να μετακινηθεί από τον επιθεωρητή. Το CTRL + G θα εναλλάσσει γρήγορα τα πλέγματα σε όλα τα πλαίσια.

Ευθυγραμμίστε στο πλέγμα

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

Περιεχόμενο κλιπ

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

Περιορισμοί

Δεν θα μπω σε μεγάλη λεπτομέρεια για τους περιορισμούς, επειδή αυτό είναι ένα αρκετά καλά τεκμηριωμένο χαρακτηριστικό, αλλά θα ήταν δύσκολο να γράψω για το Figma χωρίς να αναφερθώ σε αυτούς που δεν ήταν εξοικειωμένοι με αυτούς. Σε σύγκριση με το Σκίτσο (το οποίο σας δίνει 4 διαφορετικούς τρόπους περιορισμού), το Figma σας δίνει 5 διαφορετικούς τρόπους και σας επιτρέπει να τις αντιστοιχίσετε ανεξάρτητα ως κατακόρυφα ή οριζόντια χαρακτηριστικά. Το UI για τον έλεγχο των περιορισμών είναι εκπληκτικά απλό. Μπορεί να ελεγχθεί μέσω επιλογών με αναπτυσσόμενο μενού ή με τον προσδιορισμό των θέσεων περιορισμού σε μια μικρή οπτική απεικόνιση σταυροειδών. Αν το διάγραμμα δεν έχει νόημα στην αρχή, θα ξεκινήσει κάποτε οι επιλογές από τα dropdowns. Μου αρέσει ότι δεν προσπάθησαν να επιλέξουν να συγχέουν εικονίδια μέσα στο dropdown εδώ, οι επιλογές κειμένου είναι πολύ πιο περιγραφικές. Το Figma σάς δίνει τη δυνατότητα να ορίσετε τους περιορισμούς μέσα στα εξαρτήματά σας και στο σύνολο σας ως προς το πλαίσιο σας, ώστε να ανταποκρίνονται στις αλλαγές στο μέγεθος του πλαισίου.

Μερικά πράγματα που θα ήθελα να δω στο Figma

Περιορισμοί συνιστωσών-εξαρτημάτων
Η ικανότητα ορισμού περιορισμών ή σχέσεων μεταξύ δύο ή περισσοτέρων στοιχείων. Όταν ένα αντικείμενο ή ένα πλαίσιο κειμένου διαρκεί περισσότερο, η ικανότητά του να επανατοποθετεί / μεταφέρει ένα παρακείμενο αντικείμενο ή ακόμα και να επεκτείνει το αντικείμενο που περιέχει.

Ζωντανά δεδομένα
Δυνατότητα εισαγωγής ζωντανών δεδομένων ή προσαρμοσμένων συνόλων δεδομένων, συμπεριλαμβανομένων των εικόνων στο σχέδιο (όπως βλέπουμε με το Craft from Invision).

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

Πληκτρολογήστε στοιχεία ελέγχου
Περισσότερες επιλογές για τον έλεγχο τύπου, όπως πρόσβαση σε λειτουργίες OpenType, ταξινομημένες και αριθμημένες λίστες, κρέμονται σημεία στίξης, πρόσβαση σε μια παλέτα glyph και δυνατότητα ορισμού στυλ καθολικού τύπου.

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

Η Figma δεν έχει ακόμη ανακοινώσει το μακροπρόθεσμο πρόγραμμά της τιμολόγησης (είναι επί του παρόντος δωρεάν) ή εάν υπάρχουν σχέδια για λειτουργία χωρίς εργασία ή εναλλακτικές μεθόδους για χειρισμό έργων που είναι πολύ ευαίσθητα για αποθήκευση στο σύννεφο - αλλά με ενθουσιασμό προς τα εμπρός για να δούμε τι θα ακολουθήσει. Θα ήθελα επίσης να σημειώσω ότι ενώ έχω απολαύσει πολλά από αυτά τα χαρακτηριστικά, χρησιμοποιώ επίσης το Sketch καθημερινά και απολαμβάνω πλήρως τη χρήση του επίσης. Υπάρχει μια φανταστική κοινότητα ανάπτυξης plugin με Sketch και χρήσιμα add-ons όπως το Craft. Δεν έχω διαβάσει τίποτα ενημερωμένο για την ανάπτυξη plugin ή για ένα προσβάσιμο API για το Figma, αλλά έχω διαβάσει ότι η ομάδα διερευνά τρόπους για τους χρήστες να φέρουν πραγματικά δεδομένα στο σχεδιασμό. Αγαπώ ότι τόσο μεγάλο μέρος της λειτουργικότητας του Sketch επεκτείνεται γενναιόδωρα από μια κοινότητα προγραμματιστών plugin, αλλά αναρωτιέμαι αν αυτό δημιουργεί προκλήσεις καθώς απελευθερώνονται νέες εκδόσεις του Sketch. Το πρόσθετο ανοικτού κώδικα στο οποίο έχετε βασιστεί εξακολουθεί να λειτουργεί το ίδιο μετά από κάθε ενημέρωση; Είναι δύσκολο να διατηρηθεί η συμβατότητα ή η δοκιμή για συγκρούσεις / σφάλματα; Είμαι πραγματικά περίεργος. Σε κάθε περίπτωση, δεν μπορώ να περιμένω να δούμε τι θα ακολουθήσει!

Μοιραστείτε τις αγαπημένες σας δυνατότητες / λεπτομέρειες στο Figma!