Εισαγωγή
Το Figma έχει γίνει ένα απαραίτητο εργαλείο για σχεδιαστές UI/UX, επιτρέποντας τη συνεργασία και την αποτελεσματική δημιουργία σχεδίων. Μια από τις πιο ισχυρές λειτουργίες του είναι η δυνατότητα χρήσης local styles, τα οποία μπορούν να απλοποιήσουν σημαντικά τη ροή εργασίας σας και να διασφαλίσουν τη συνέπεια του σχεδιασμού. Σε αυτό το άρθρο, θα σας καθοδηγήσουμε βήμα προς βήμα για το πώς να χρησιμοποιήσετε σωστά τα local styles στο Figma, βελτιώνοντας την παραγωγικότητά σας και δημιουργώντας επαγγελματικά σχέδια.
Τι είναι τα Local Styles στο Figma;
Τα local styles στο Figma είναι επαναχρησιμοποιήσιμες ιδιότητες σχεδιασμού, όπως χρώματα, τυπογραφία, εφέ και layout grid, που μπορούν να αποθηκευτούν και να εφαρμοστούν σε διάφορα στοιχεία του σχεδίου σας. Αυτό σημαίνει ότι μπορείτε να δημιουργήσετε ένα σύνολο προκαθορισμένων στυλ και να τα εφαρμόσετε σε ολόκληρο το έργο σας, διασφαλίζοντας τη συνέπεια και εξοικονομώντας πολύτιμο χρόνο.
Γιατί να Χρησιμοποιήσετε Local Styles;
Συνέπεια: Τα local styles διασφαλίζουν ότι όλα τα στοιχεία του σχεδίου σας έχουν την ίδια εμφάνιση, δημιουργώντας μια συνεκτική και επαγγελματική εμπειρία χρήστη.
Αποδοτικότητα: Αντί να αλλάζετε μεμονωμένα τις ιδιότητες κάθε στοιχείου, μπορείτε να ενημερώσετε ένα local style και οι αλλαγές θα εφαρμοστούν αυτόματα σε όλα τα στοιχεία που χρησιμοποιούν αυτό το στυλ.
Συνεργασία: Τα local styles διευκολύνουν τη συνεργασία μεταξύ των σχεδιαστών, καθώς διασφαλίζουν ότι όλοι χρησιμοποιούν τα ίδια στυλ και ακολουθούν τις ίδιες οδηγίες σχεδιασμού.
Οργάνωση: Τα local styles βοηθούν στην οργάνωση του σχεδίου σας, καθιστώντας ευκολότερο τον εντοπισμό και την τροποποίηση των ιδιοτήτων των στοιχείων.
Πώς να Χρησιμοποιήσετε τα Local Styles στο Figma:
Δημιουργία Local Style:
Επιλέξτε το στοιχείο που θέλετε να αποθηκεύσετε για local style.
- Εάν πρόκειται να αποθηκεύσετε γραμματοσειρά, στην δεξιά στήλη στο typography, θα βρείτε το εικονίδιο του local styles. Κλικάροντας, θα ανοίξει το παράθυρο της βιβλιοθήκης για τα local styles και θα κάνουμε κλικ στο “+” για να αποθηκεύσουμε την γραμματοσειρά μας. Θα δώσουμε όνομα και θα κάνουμε κλικ στο κουμπί “Create Style”.
- Εάν πρόκειται να αποθηκεύσουμε χρώμα, επιλέγουμε το στοιχείο που περιέχει το χρώμα και με τον ίδιο τρόπο όπως παραπάνω αλλά στο πεδίο fill της δεξιάς στήλης, αποθηκεύουμε το χρώμα μας (στο παράθυρο που θα ανοίξει, θα πρέπει να βεβαιωθούμε ότι έχουμε επιλέξει “style” και όχι “variable”).
- Εάν πρόκειται να αποθηκεύσουμε κάποιο effect, η διαδικασία είναι όπως και παραπάνω αλλά το εικονίδιο του local styles θα βρίσκεται στην δεξιά στήλη στα effects.
- Εάν πρόκειται να αποθηκεύσουμε ένα layout grid, επιλέγουμε το frame που το έχουμε δημιουργήσει και στη συνέχεια από τη δεξιά στήλη στο πεδίο layout grid βρίσκουμε το εικονίδιο του local styles και με τον ίδιο τρόπο αποθηκεύουμε και αυτό.
Εφαρμογή Local Style:
Εφόσον έχουμε δημιουργήσει τα local styles μας πλέον μπορούμε να τα κάνουμε χρήση με τον εξής τρόπο:
- Επιλέξτε το στοιχείο στο οποίο θέλετε να εφαρμόσετε το local style.
- Στη δεξιά στήλη θα κάνουμε κλικ στο εικονίδιο του local styles που βρίσκεται στο ανάλογο πεδίο που θέλουμε να εφαρμόσουμε (π.χ.: fill για χρώμα, typography για γραμματοσειρά κλπ).
- Όταν ανοίξει το παράθυρο της βιβλιοθήκης, όπως κάναμε και κατά τη δημιουργία local style, αντί να κάνουμε κλικ στο “+”, θα βρούμε παρακάτω το local style που θέλουμε να εφαρμόσουμε.
Επεξεργασία Local Style:
Για να μπορέσουμε να επεξεργαστούμε ένα αποθηκευμένο local style, θα πρέπει να μην έχουμε κάποιο στοιχείο επιλεγμένο. Για να το καταφέρουμε αυτό, πατάμε ESC ή κάνουμε κλικ έξω από το frame μας.
Στην δεξιά στήλη θα βλέπουμε πλέον όλα τα αποθηκευμένα local styles μας.
Θα βρούμε το local style που θέλουμε να κάνουμε επεξεργασία, θα ακουμπήσουμε τον κέρσορα του mouse μας επάνω του και θα εμφανιστεί στην δεξιά πλευρά ένα εικονίδιο για να κάνουμε edit style.
Κλικάροντάς το, θα μας ανοίξει το παράθυρο με τις επιλογές που είχαμε αποθηκεύσει προηγουμένως, θα κάνουμε τις απαραίτητες αλλαγές και είμαστε έτοιμοι.
Θα παρατηρήσουμε ότι σε όσα στοιχεία είχαμε επιλέξει να έχουν το συγκεκριμένο local style, πλέον έχουν ανανεωθεί αυτόματα σε ολόκληρο το project μας.
Οργάνωση Local Styles:
Για τη σωστή οργάνωση των local styles το Figma μπορεί να καταλάβει τι θέλουμε να κάνουμε εφόσον έχουμε δώσει τη σωστή ονομασία στα στοιχεία που αποθηκεύσαμε.
Για παράδειγμα, έχουμε αποθηκεύσει 9 διαφορετικά typography styles που περιλαμβάνουν headers και body texts.
Στην εικόνα παρακάτω θα δούμε πως θα εμφανίζονται τα local styles μας χωρίς μετονομασία.
Θα παρατηρήσουμε ότι έχουν αποθηκευτεί όλα μαζί σε μία λίστα που αν έχουμε περισσότερα αποθηκευμένα στοιχεία, θα είναι δύσκολο να τα βρίσκουμε και να τα επιλέξουμε.
Στην παρακάτω εικόνα, θα δούμε την σωστή μετονομασία των στοιχείων μας.
Βλέπουμε ότι με την χρήση της καθέτου “/” δημιουργήσαμε έναν υποφάκελο και πλέον θα μπορούμε ευκολότερα να βρούμε τα local styles που θέλουμε να επιλέξουμε.
Εάν ενδιαφέρεστε να μάθετε Web Design, προσφέρουμε εντελώς δωρεάν 1 ώρα μάθημα Figma χωρίς καμία δέσμευση έτσι ώστε να μας γνωρίσετε. Κάντε κλικ στο κουμπί “Ενδιαφέρομαι” παρακάτω, συμπληρώστε τη φόρμα και σύντομα θα επικοινωνήσουμε μαζί σας!
Δωρεάν 1 ώρα μάθημα Figma για να μας γνωρίσετε!
Χωρίς καμία δέσμευση.
Συμπληρώστε τη φόρμα εκδήλωσης ενδιαφέροντος και θα σας καλέσουμε σύντομα.
