Οδηγός oνοματοδοσίας μεταβλητών στο Figma: Πώς να oργανώσετε το design σας

Ακολουθεί ένας αναλυτικός οδηγός για το πώς να δομήσετε σωστά τις μεταβλητές στο Figma.

Το Figma έχει εισαγάγει τις μεταβλητές (variables), μια λειτουργία που επιτρέπει στους designers και developers να αποθηκεύουν και να χρησιμοποιούν επαναχρησιμοποιήσιμες τιμές για χρώματα, διαστάσεις και άλλα στοιχεία UI.

Ένα σωστό σύστημα ονοματοδοσίας μεταβλητών είναι κρίσιμο για την οργάνωση και τη διαχείριση των designs σας, ειδικά όταν εργάζεστε σε μεγάλες ομάδες.

Ακολουθεί ένας αναλυτικός οδηγός για το πώς να δομήσετε σωστά τις μεταβλητές στο Figma.

1. Γιατί είναι σημαντική η ονοματοδοσία των μεταβλητών;

Οι μεταβλητές επιτρέπουν στους designers και developers να διαχειρίζονται χρώματα, αποστάσεις, διαστάσεις και άλλες τιμές πιο αποδοτικά.

Οφέλη σωστής ονοματοδοσίας:

• Διευκολύνει τη συνεργασία μεταξύ σχεδιαστών και προγραμματιστών.
• Κάνει τις αλλαγές στο design ταχύτερες και πιο ευέλικτες.
• Εξασφαλίζει συνέπεια σε ολόκληρο το project.
• Διευκολύνει την κλιμάκωση και την επαναχρησιμοποίηση στοιχείων UI.

2. Κατηγορίες μεταβλητών και πώς να τις ονομάσετε

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

Α. Χρώματα

Τα χρώματα πρέπει να έχουν σαφή και οργανωμένη ονοματοδοσία, ώστε να είναι εύκολο να εντοπιστούν και να χρησιμοποιηθούν.

Βέλτιστη προσέγγιση:

1. Καθορίστε τον τύπο του χρώματος (π.χ. primary, secondary, background).
2. Χρησιμοποιήστε παραλλαγές (shades & tints) για διαφορετικές εντάσεις.
3. Χρησιμοποιήστε ένα συνεπές format.

Παραδείγματα σωστής ονοματοδοσίας:

• color/primary/500 (βασικό χρώμα)
• color/primary/700 (πιο σκούρα απόχρωση)
• color/background/light
• color/text/primary

Β. Αποστάσεις (Spacing & Sizing)

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

Τρόπος οργάνωσης:

• Ονομάστε τις αποστάσεις αριθμητικά (σε px ή rem).
• Χρησιμοποιήστε σαφή labels (small, medium, large).

Παραδείγματα:

• spacing/8
• spacing/16
• spacing/32
• padding/small
• padding/medium
• padding/large

Γ. Διαστάσεις (Sizes)

Οι διαστάσεις μπορούν να αφορούν κουμπιά, containers, card sizes κ.λπ.

Παραδείγματα σωστής ονοματοδοσίας:

• size/button/small
• size/button/large
• size/avatar/32
• size/container/full-width

Δ. Τυπογραφία (Typography Variables)

Η διαχείριση των γραμματοσειρών μέσω μεταβλητών βοηθά στη συνοχή του design.

Καλές πρακτικές:

• Διαχωρίστε τα styles σε headings, body, captions κ.λπ.
• Χρησιμοποιήστε σαφείς διαβαθμίσεις (π.χ. small, medium, large).

Παραδείγματα ονοματοδοσίας:

• typography/heading/large
• typography/heading/medium
• typography/body/regular
• typography/caption/small

3. Γενικές αρχές ονοματοδοσίας στο Figma

Η σωστή ονοματοδοσία εξασφαλίζει εύκολη κατανόηση και γρήγορη πρόσβαση στις μεταβλητές.

Κανόνες που πρέπει να ακολουθήσετε:

• Χρησιμοποιήστε λογική ιεραρχία: Ξεκινήστε από τη γενική κατηγορία και προχωρήστε σε λεπτομέρειες.
• Αποφύγετε γενικούς όρους όπως “newColor” ή “style1”.
• Διατηρήστε συνέπεια μεταξύ σχεδιαστών και developers.
• Χρησιμοποιήστε lowercase και διαχωριστικά (π.χ. /, _ ή -).
• Δημιουργήστε documentation, ώστε όλοι στην ομάδα να καταλαβαίνουν το σύστημα.

4. Συνεργασία developers και designers

Η χρήση σωστών ονομάτων διευκολύνει τη μεταφορά του design στο development.

Tips για καλύτερη συνεργασία:

• Οι designers πρέπει να ακολουθούν ένα σαφές naming convention.
• Οι developers μπορούν να αντιστοιχίσουν τις μεταβλητές του Figma με τα design tokens του κώδικα.
• Τα naming conventions πρέπει να είναι ευθυγραμμισμένα μεταξύ UI και CSS variables.

Παράδειγμα mapping Figma → CSS:

• color/primary/500 → --color-primary-500
• spacing/8 → --spacing-8px
• typography/heading/large → --font-heading-large

Συμπέρασμα

Η σωστή ονοματοδοσία των μεταβλητών στο Figma βελτιώνει την ταχύτητα και την αποδοτικότητα στη συνεργασία μεταξύ σχεδιαστών και developers.

• Ακολουθήστε μια σταθερή ιεραρχία.
• Χρησιμοποιήστε κατανοητές ονομασίες.
• Ευθυγραμμίστε το naming με τις μεταβλητές του κώδικα.

Με αυτόν τον τρόπο, το design system σας θα είναι καθαρό, οργανωμένο και έτοιμο για ανάπτυξη χωρίς περιττές καθυστερήσεις.

Διαβάστε επίσης:

• Όλα όσα πρέπει να γνωρίζουν οι developers για το Figma