Πώς να αλλάξετε το θέμα χρώματος στο κιτ σας για το Figma UI

Σε αυτό το γρήγορο σεμινάριο, μάθετε πώς να αλλάζετε όλα τα παλιά χρώματα μπλε μάρκας στο UI της εφαρμογής με το νέο μωβ χρώμα της μάρκας! →

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

Έχετε δει πώς το κάναμε αυτό στο Sketch. Πώς λοιπόν η Figma χειρίζεται τη διαχείριση στυλ χρώματος σε UI κιτ; Ακολουθεί ένας οδηγός βήμα προς βήμα.

Σημείωση: Ο συγγραφέας χρησιμοποιεί την απελευθέρωση Figma 85 τη στιγμή της εγγραφής.

Βήμα 1: Βεβαιωθείτε ότι τα στοιχεία σας είναι κατασκευασμένα με τη χρήση Στυλ χρώματος.

Όλα τα επώνυμα μπλε εξαρτήματα είναι κατασκευασμένα με στυλ χρώματος.

Βεβαιωθείτε ότι τα στρώματα που περιέχουν τα χρώματα της επωνυμίας σας - γεμίσματα, κτυπήματα, κείμενα κ.λπ., που ονομάζονται εδώ ως "Πρωτογενή", κατασκευάζονται χρησιμοποιώντας το λαμπερό μπλε χρώμα της επωνυμίας μας στο Color Style.

Βήμα 2: Στο επιλεγμένο στυλ χρώματος, κάντε κλικ στο εικονίδιο Επεξεργασία στυλ.

Μπορείτε να επεξεργαστείτε ένα στυλ χρώματος από ένα επιλεγμένο επίπεδο ή από τον πίνακα τοπικών στυλ.

Ας υποθέσουμε ότι το προϊόν σας έχει ένα νέο χρώμα επωνυμίας και πρέπει να αλλάξουμε όλα τα συστατικά που περιέχουν το παλιό μπλε (πρωτογενές), σε αυτό το νέο χρώμα. Επιλέξτε πρώτα το Κύριο μπλε χρώμα και, στη συνέχεια, κάντε κλικ στην παλέτα Χρώμα στυλ.

Βήμα 3: Αλλάξτε το χρώμα στο νέο εμπορικό σήμα της εφαρμογής σας.

Επιλέξτε το νέο χρώμα από εδώ.

Βήμα 4: Κανένα άλλο βήμα 4;

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

Ανασκόπηση: Χρησιμοποιήστε Στυλ χρώματος. Επεξεργασία στυλ χρώματος.

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

Ίσως υπάρχει ένα μειονέκτημα σε αυτό που δεν έχω ακόμα ανακαλύψει ... Ίσως κάποιος από την Team Sketch να προσπαθήσει να με πείσει;

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

Αν θέλετε, δείτε πώς κάναμε το ίδιο πράγμα στο Sketch: