Πώς να δημιουργήσετε ένα κουμπί στο Figma

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

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

Δημιουργία κουμπιού

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

Ακολουθεί ένας οδηγός βήμα προς βήμα για τη δημιουργία κουμπιών:

1. Δημιουργήστε ένα νέο σχέδιο Figma.
   
2. Προσθέστε ένα πλαίσιο πατώντας το πλήκτρο F στο πληκτρολόγιό σας και, στη συνέχεια, επιλέξτε «επιφάνεια εργασίας» ή «τηλέφωνο».
   
3. Προσθέστε ένα ορθογώνιο με διαστάσεις ύψους 50 εικονοστοιχείων και πλάτους 200 εικονοστοιχείων χρησιμοποιώντας το πλήκτρο R του πληκτρολογίου.
   
4. Προσθέστε κείμενο πατώντας «T» στο πληκτρολόγιό σας. Κεντράρετε το κείμενό σας έτσι ώστε να βρίσκεται στη μέση του πλαισίου κειμένου σας οριζόντια και κάθετα.
   
5. Τοποθετήστε αυτό το πλαίσιο κειμένου στη μέση του ορθογωνίου σας.
   
6. Ομαδοποιήστε τα στοιχεία όπως θέλετε να είναι.

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

Αντίθεση

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

Δημιουργία βασικών κουμπιών

Υπάρχουν τρία βασικά κουμπιά που μπορούν να δημιουργηθούν στο Figma.

Κύριο κουμπί

Τα κύρια κουμπιά είναι συμπαγή χρώματα με μαύρο ή άσπρο κείμενο. Αυτό το κουμπί σχεδιάζει τους χρήστες καθώς χρησιμοποιούν μια εφαρμογή. Έτσι μπορείτε να δημιουργήσετε ένα:

1. Επιλέξτε ένα χρώμα για το κουμπί σας.
2. Επιλέξτε το ορθογώνιο και μετά εφαρμόστε το επιλεγμένο χρώμα.
   
3. Έγχρωμο κείμενο σε λευκό ή μαύρο, ανάλογα με την καλύτερη αντίθεση.
   

Δευτερεύον κουμπί

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

1. Αλλάξτε το χρώμα του ορθογωνίου σας σε λευκό (#FFFFFF).
   
2. Στο ορθογώνιο, προσθέστε μια πινελιά. Μπορείτε να επιλέξετε το χρώμα που προτιμάτε εδώ.
   
3. Αλλάξτε το χρώμα του κειμένου σας ώστε να έχει το ίδιο χρώμα με το κείμενο.
   

Τριτογενές κουμπί

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

1. Κάντε το ορθογώνιο σας λευκό χωρίς πινελιές.
   
2. Αλλάξτε το χρώμα του κειμένου σε αυτό που προτιμάτε.
   

Μπορείτε να δημιουργήσετε ένα τριτογενές κουμπί που μοιάζει με κύριο ή δευτερεύον κουμπί. Μπορείτε επίσης να αλλάξετε το πλάτος διαδρομής για καλύτερη ορατότητα.

Δημιουργήστε ένα κουμπί χρησιμοποιώντας κείμενο, αυτόματη διάταξη και χρώμα

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

Δημιουργία επιπέδου κειμένου

Σε αυτό το βήμα, χρησιμοποιείται το εργαλείο κειμένου.

1. Πατώντας το εργαλείο κειμένου στη γραμμή εργαλείων ή πατώντας το γράμμα "T".
   
2. Όταν το εργαλείο κειμένου είναι ενεργό, πατήστε στον καμβά σας και εισαγάγετε τη λέξη "Κουμπί". Λάβετε υπόψη ότι το όνομα του επιπέδου κειμένου θα ταιριάζει με ό,τι πληκτρολογείται στον καμβά, εκτός και αν έχει αλλάξει με μη αυτόματο τρόπο στον πίνακα επιπέδων.
   
3. Εάν το όνομα του επιπέδου πρέπει να αλλάξει, κάντε διπλό κλικ στην αριστερή πλαϊνή γραμμή και, στη συνέχεια, πληκτρολογήστε το νέο όνομα που έχετε επιλέξει.
   

Τώρα, μπορείτε επίσης να παίξετε με το μέγεθος της γραμματοσειράς αυξάνοντας ή μειώνοντάς το.

1. Επιλέξτε το επίπεδο κειμένου σας.
   
2. Πλοηγηθείτε στη δεξιά πλαϊνή γραμμή και αλλάξτε το μέγεθος της γραμματοσειράς στην ενότητα "Κείμενο". Μπορείτε επίσης να αλλάξετε τη γραμματοσειρά ή να διατηρήσετε την προεπιλεγμένη επιλογή.
   

Μετατρέψτε το επίπεδο κειμένου σας σε πλαίσια αυτόματης διάταξης

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

Η αυτόματη διάταξη μπορεί να εφαρμοστεί για να μετατρέψει τα επίπεδα σε πλαίσια ή σε υπάρχοντα πλαίσια. Για να εφαρμόσετε τη διάταξη σε ένα υπάρχον πλαίσιο, επιλέξτε το επίπεδο κειμένου σας και, στη συνέχεια, πατήστε τη συντόμευση "Shift" "A". Μόλις εφαρμοστεί η διάταξη, θα παρατηρήσετε κάποιες αλλαγές.

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

Styling το κουμπί

Μπορείτε να ξεκινήσετε προσθέτοντας χρώμα.

1. Επιλέξτε ένα επίπεδο πλαισίου και, στη συνέχεια, επιλέξτε "Γέμισμα ρυθμίσεων" στη δεξιά πλαϊνή γραμμή. Αυτό γεμίζει το χρώμα
   αυτόματα. Ο επιλογέας χρώματος αλλάζει το χρώμα.
   
2. Επιλέξτε το επίπεδο κειμένου και προσαρμόστε το γέμισμα σε #FFFFFF.
   
3. Επιλέξτε ξανά το πλαίσιο και, στη συνέχεια, χρησιμοποιήστε τη ρύθμιση της δεξιάς πλευρικής γραμμής για να προσαρμόσετε την ακτίνα γωνίας.
   

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

Μπορείτε να ενημερώσετε το padding όπως θέλετε. Η αριστερή και η δεξιά γέμιση ή η επάνω και η κάτω επένδυση μπορούν να αλλάξουν ταυτόχρονα με τις παρακάτω συντομεύσεις:

• Κρατήστε πατημένο το <⌥ option=""> ή και, στη συνέχεια, κάντε κλικ στην περιοχή πλήρωσης για να εισαγάγετε την τιμή πλήρωσης για τις αντίθετες πλευρές
• Κρατήστε πατημένο το <⌥ option=""> ή ενώ σύρετε τις λαβές για να αλλάξετε το padding για τις αντίθετες πλευρές

Σε αυτό το σημείο, το κουμπί φαίνεται καλό, αλλά μπορείτε ακόμα να ενημερώσετε την ετικέτα. Πρέπει να κάνετε διπλό κλικ στο κείμενο για να επιτρέψετε την επεξεργασία. Πληκτρολογήστε τις λέξεις "Εγγραφείτε". Το κουμπί αλλάζει μέγεθος καθώς πληκτρολογείτε. Με αυτόν τον τρόπο σχεδιάζετε ένα κουμπί χρησιμοποιώντας το εργαλείο αυτόματης διάταξης και κειμένου. Τώρα μπορείτε να δοκιμάσετε κάτι νέο, όπως να μετατρέψετε το κουμπί σε στοιχείο ή να προσθέσετε μια παραλλαγή.

Δημιουργία κουμπιού με δυνατότητα κλικ

Το Figma χρησιμοποιείται από εταιρείες όπως η Uber, το Facebook, η Google και το Netflix. Η λειτουργία κουμπιού με δυνατότητα κλικ διευκολύνει τους σχεδιαστές σε τέτοιες εταιρείες να δημιουργήσουν διαδραστικά και κουμπιά με δυνατότητα κλικ. Τα κουμπιά κάνουν την πλοήγηση πολύ πιο εύκολη σε τέτοιες πλατφόρμες.

Δείτε πώς μπορείτε να αναπτύξετε τέτοια κουμπιά στο Figma:

1. Επιλέξτε «Πρωτότυπο» στο μενού (δεξιά).
   
2. Κάντε κλικ στο εικονίδιο "Συν" (+) που βρίσκεται κάτω από την καρτέλα Πρωτότυπο. Αυτό σας επιτρέπει να προσθέσετε μια αλληλεπίδραση.
   
3. Επιλέξτε "Με κλικ" στο παράθυρο λεπτομερειών αλληλεπίδρασης.
   
4. Επιλέξτε την επιλογή «Άνοιγμα συνδέσμου».
   
5. Προσθέστε τον σύνδεσμο της σελίδας όπου θα κατευθυνθεί το κουμπί μόλις κάνετε κλικ.
   
6. Πατήστε το εικονίδιο "X" για έξοδο από το παράθυρο Λεπτομέρειες αλληλεπίδρασης.
   
7. Μεταβείτε στο κουμπί επιλογής "Αναπαραγωγή" στην επάνω δεξιά γωνία.
   
8. Πατήστε το κουμπί "Αναπαραγωγή" για να λάβετε μια προεπισκόπηση σχεδίασης.
   

Εάν τοποθετήσετε το δείκτη του ποντικιού πάνω από το κουμπί σας, αλλάζει σε ένα εικονίδιο που μοιάζει με το χέρι. Αυτό υποδηλώνει ότι το κουμπί είναι πλέον με δυνατότητα κλικ.

Σημείωση: Κατά τη δημιουργία του κουμπιού Figma με δυνατότητα κλικ, να χρησιμοποιείτε πάντα το "On click" και όχι το "On drag". Το "Με κλικ" επιτρέπει την προσθήκη ενός συνδέσμου με δυνατότητα κλικ στο κουμπί. Δεν μπορείτε να κάνετε κλικ στα κουμπιά "Σε μεταφορά".

Σχεδιάστε καλύτερα με κουμπιά Figma

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

Δοκίμασες να δημιουργήσεις κουμπιά στο Figma; Αν ναι, πώς ήταν η εμπειρία σας; Ενημερώστε μας στην παρακάτω ενότητα σχολίων.