Δημιουργήστε Εντυπωσιακά Κουμπιά στο Figma: Ένας Οδηγός Βήμα προς Βήμα
Το Figma είναι ένα ισχυρό εργαλείο σχεδίασης που επιτρέπει στους σχεδιαστές να δημιουργούν διαδραστικά πρωτότυπα και να συνεργάζονται απρόσκοπτα. Ένα από τα βασικά στοιχεία της σχεδίασης διεπαφής χρήστη (UI) είναι τα κουμπιά, τα οποία καθοδηγούν τους χρήστες σε συγκεκριμένες ενέργειες. Σε αυτόν τον οδηγό, θα σας δείξουμε πώς να δημιουργήσετε εντυπωσιακά κουμπιά στο Figma.
Βήμα 1: Προσθέστε Κείμενο
- Επιλέξτε το εργαλείο “Text” (T) και κάντε κλικ μέσα στο πλαίσιο.
- Πληκτρολογήστε το κείμενο που θα εμφανίζεται στο κουμπί, όπως “Κάντε Κλικ Εδώ” ή “Αποστολή”.
Βήμα 2: Δημιουργία Auto Layout
Επιλέξτε το text element που δημιουργήσατε και δημιουργήστε Auto Layout.
Για δημιουργία Auto Layout δεν θα εμφανίζεται το κουμπί στην δεξιά στήλη διότι έχουμε επιλέξει μόνο ένα element. Για να μπορέσουμε να δημιουργήσουμε Auto Layout σε μόνο ένα element, θα κάνουμε δεξί κλικ > Add Auto Layout ή απλά θα πατήσουμε Shift+A
Βήμα 3: Στυλ Κουμπιού
Εφόσον δημιουργήσαμε Auto Layout, πλέον θα μπορούμε να βρούμε και τις αντίστοιχες ρυθμίσεις στη δεξιά στήλη.
Στην περίπτωσή μας παραπάνω, βλέπουμε στην δεξιά στήλη τις ρυθμίσεις του κουμπιού. Για παράδειγμα, ο αριθμός 16 αντιστοιχεί σε 16px horizontal padding και ο αριθμός 12, σε 12px vertical padding για να δώσουμε χώρο στο text και το background. Επίσης έχει χρησιμοποιηθεί και η επιλογή Fill έτσι ώστε να δώσουμε το background χρώμα.
Τέλος, μπορείτε να χρησιμοποιήσετε και effects για να δώσετε σκιά στο κουμπί σας.
Τι πρέπει να αποφύγετε στη δημιουργία κουμπιού στο Figma
Αρκετοί χρήστες σχεδιαστικών προγραμμάτων όπως το Illustrator, InDesign κλπ, έχουν “συνηθίσει” να δημιουργούν κουμπιά με την χρήση Rectangle (ορθογώνιο πλαίσιο). Αυτός ο τρόπος είναι λάθος για το Figma διότι δεν θα μπορέσουμε ποτέ να δημιουργήσουμε responsive κουμπιά.
Ας δούμε ένα παράδειγμα:
Παραπάνω, βλέπουμε ότι έχουμε δημιουργήσει 2 κουμπιά με 2 διαφορετικές τεχνικές.
Η πρώτη τεχνική είναι με χρήση Rectangle και η δεύτερη με χρήση Auto Layout.
Βλέπετε καμία διαφορά; Ίσως όχι, αλλά εάν επεξεργαστούμε το κείμενο, θα δούμε αμέσως ότι ο τρόπος δημιουργίας με rectangle είναι λάθος.
Παρατηρούμε ότι στον τρόπο δημιουργίας με rectangle το κουμπί μας δεν είναι responsive αλλά με την χρήση του Auto Layout οτιδήποτε γράψουμε για κείμενο στο κουμπί μας, το background θα προσαρμόζεται πάντα σωστά.
Μερικά Tips για κουμπιά στο Figma
Η σωστή χρήση δημιουργίας κουμπιών απαιτεί και τις σωστές τεχνικές. Θα πρέπει να έχουμε αποθηκεύσει στις βιβλιοθήκες μας τα χρώματα, την τυπογραφία ακόμα και τα effects έτσι ώστε τα κουμπιά μας να είναι flexible και να μπορούμε να κάνουμε αλλαγές εύκολα και γρήγορα. Επίσης, θα πρέπει να δημιουργήσουμε και ένα σύστημα κουμπιών με τη χρήση Components έτσι ώστε να είναι επαναχρησιμοποιούμενα, να έχουν διαφορετικά states (πχ hover state όταν το mouse είναι επάνω στο κουμπί για να αλλάζει χρώμα κλπ) και όλα αυτά να τα επεξεργαστούμε στο Prototype για να μπορέσουμε να δηλώσουμε τα interactions που επιθυμούμε.
Για τον λόγο αυτό, προσφέρουμε 1 ώρα δωρεάν μάθημα Figma χωρίς καμία δέσμευση έτσι ώστε να μας γνωρίσετε. Συμπληρώστε την παρακάτω φόρμα και θα επικοινωνήσουμε μαζί σας!
Δωρεάν 1 ώρα μάθημα Figma για να μας γνωρίσετε!
Χωρίς καμία δέσμευση.
Συμπληρώστε τη φόρμα εκδήλωσης ενδιαφέροντος και θα σας καλέσουμε σύντομα.
