Πώς να χρησιμοποιήσετε την αυτόματη διάταξη στο Figma

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

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

Χρήση αυτόματης διάταξης

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

• Πατήστε "Alt + A" το πληκτρολόγιό σας (Λειτουργεί σε Mac και Windows).
• Κάντε δεξί κλικ στα αντικείμενα ή τα στοιχεία και κάντε κλικ στην Αυτόματη διάταξη (Πρέπει να προσθέσετε αυτήν τη δυνατότητα σε κάθε στοιχείο, καθώς είναι αδύνατο μαζικά).
• Πατήστε το εικονίδιο συν δίπλα στην επιλογή "Auto Layout" στο μενού στο Figma.

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

Προσθήκη και αφαίρεση αντικειμένων

Η προσθήκη αντικειμένων στο πλαίσιο σας είναι αρκετά απλή. Χρειάζεται μόνο να πιάσετε το αντικείμενο που θέλετε να προσθέσετε και να ακολουθήσετε την ένδειξη. Και αν πρόκειται να αφαιρέσετε ένα, σύρετέ το ξανά προς τα έξω και πατήστε διαγραφή. Εάν επιλέξετε να προσθέσετε ένα μεγαλύτερο αντικείμενο από το γονικό πλαίσιο, θα πρέπει να αποφύγετε τις προεπιλεγμένες ρυθμίσεις του Figma για να μπορέσετε να το κάνετε. Μπορείτε να το κάνετε κρατώντας πατημένο το κουμπί "Ctrl" για Windows και "Command" για Mac.

Αντιγραφή αντικειμένων

Εάν θέλετε να προσθέσετε δύο ή περισσότερα πανομοιότυπα αντικείμενα στο πλαίσιο, μπορείτε να τα αντιγράψετε, κάτι που είναι μια χρήσιμη λειτουργία Auto Layer. Έτσι μπορείτε να το κάνετε:

1. Πατήστε το αντικείμενο που θέλετε να αντιγράψετε.
   
2. Κρατήστε τα κουμπιά "Ctrl" και "D" ταυτόχρονα εάν έχετε Windows.
   
3. Για Mac, αντιγράψτε κρατώντας πατημένα τα κουμπιά "Command" και "D".
   

Τακτοποίηση αντικειμένων

Εάν δεν σας αρέσει η εμφάνιση του πλαισίου σας και η οργάνωση των αντικειμένων και των εξαρτημάτων μέσα σε αυτό, μπορείτε να τα αναδιατάξετε. Εάν έχετε συγχωνεύσει δύο επίπεδα, πρέπει να παρακάμψετε τις προεπιλεγμένες ρυθμίσεις του Figma πατώντας «Ctrl» για Windows και «Command» για Mac για να αποκτήσετε πρόσβαση στην επιλογή επιλογής σε βάθος και να μετακινήσετε το στοιχείο από το αρχικό επίπεδο. Ωστόσο, εάν είναι ένα πλαίσιο, μπορείτε να επιλέξετε ένα αντικείμενο και να το μετακινήσετε αλλού, παρόμοια με την προσθήκη αντικειμένων ή να χρησιμοποιήσετε το πλήκτρο βέλους.

Αυτόματα επίπεδα διάταξης

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

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

1. Επιλέξτε ένα πλαίσιο και όλα όσα θέλετε να προσθέσετε σε αυτό.
   
2. Πατήστε "Shift + A" για να προσθέσετε ένα πλαίσιο Auto Layout.
   

Λειτουργίες αυτόματης διάταξης

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

Κατεύθυνση

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

• Κάθετα – Τα αντικείμενα τοποθετούνται στον άξονα y. Αυτή η επιλογή είναι κατάλληλη για λίστες, μενού, ειδήσεις κ.λπ.
• Οριζόντια – Αντικείμενα και στοιχεία στον άξονα x (κουμπιά, εικονίδια κ.λπ.).
• Θέση αναδίπλωσης – Τα αντικείμενα ορίζονται σε πολλές στήλες και σειρές.

Παραγγελία στοίβαξης

Μπορείτε να επιλέξετε ποια σειρά στοίβαξης ταιριάζει καλύτερα στο πλαίσιο σας. Αυτή είναι μια οπτική αλλαγή μόνο αφού η σειρά στοίβαξης παραμένει η ίδια (αν είναι 1,2,3, παραμένει 1,2,3 αλλά με οπτικές προσαρμογές). Όταν τα αντικείμενα στοιβάζονται το ένα πάνω στο άλλο, μπορείτε να επιλέξετε ποιο θα είναι από πάνω. Έτσι, για παράδειγμα, εάν έχετε τρία πράγματα με 1, 2 και 3, μπορείτε είτε 1 είτε 3. Μπορείτε να το κάνετε αυτό:

1. Επιλέξτε το πλαίσιο Auto Layout.
   
2. Μεταβείτε στην επιλογή Auto Layout στα δεξιά της οθόνης σας.
   
3. Πατήστε τις τρεις οριζόντιες κουκκίδες για να ανοίξετε τις σύνθετες επιλογές.
   
4. Βρείτε την επιλογή «Σίβαξη καμβά».
   
5. Επιλέξτε "Πρώτος στην κορυφή" ή "Τελευταίος στην κορυφή".
   

Απόλυτη Θέση

Μια άλλη ιδιότητα "Ροή επιπέδου" είναι μια απόλυτη θέση, εκτός από τη σειρά και την κατεύθυνση στοίβαξης. Αυτή η δυνατότητα σάς επιτρέπει να τοποθετήσετε ένα αντικείμενο όπου θέλετε, αγνοώντας τα όρια του πλαισίου. Αυτός είναι ο τρόπος ενεργοποίησης:

1. Πιάστε ένα αντικείμενο και τοποθετήστε το μέσα στο πλαίσιο.
   
2. Στο μενού της δεξιάς πλευράς, δίπλα στις τιμές για το "X" και το "Y", πατήστε το εικονίδιο που μοιάζει με τετράγωνο χωρίς άκρες με συν μέσα.
   
3. Μετακινήστε το αντικείμενο κατά μήκος των γραμμών του πλαισίου.
   

Ρύθμιση κενού

Υπάρχουν μερικά χαρακτηριστικά που μπορείτε να προσαρμόσετε όσον αφορά την απόσταση, όπως το κενό. Έχετε δύο τρόπους για να αλλάξετε το κενό: αυτόματη και πληκτρολόγηση σε ένα συγκεκριμένο κενό. Εάν θέλετε το κενό σας να είναι όσο το δυνατόν μεγαλύτερο, τότε πρέπει να επιλέξετε την αυτόματη ρύθμιση στο μενού Auto Layout. Αλλά αν πρόκειται να εισαγάγετε τις τιμές σας, πληκτρολογήστε τις μέσα στα καθορισμένα πλαίσια.

Επιπλέον, η ρύθμιση κενού μπορεί να ρυθμιστεί για όλες τις κατευθύνσεις. Εάν τα εικονίδια σας είναι μόνο οριζόντια και κάθετα, μπορείτε να επιλέξετε ένα οριζόντιο κενό μεταξύ τους. Ωστόσο, εάν βρίσκονται σε θέση περιτύλιξης, μπορείτε να προσαρμόσετε τις ρυθμίσεις κάθετου και οριζόντιου κενού.

Ρύθμιση ευθυγράμμισης

Αφού ρυθμίσετε τις λειτουργίες κατεύθυνσης, padding και gap, μπορείτε να προσαρμόσετε την ευθυγράμμιση του θυγατρικού αντικειμένου στο κάδρο σας, καθώς αυτή η δυνατότητα εξαρτάται από τις ρυθμίσεις απόστασης. Δεν μπορείτε να αλλάξετε τη στοίχιση κάθε αντικειμένου, αλλά επιλέξτε ένα μοτίβο που προσφέρεται στο μενού της Αυτόματης διάταξης. Μπορείτε να κάνετε κλικ στο πλέγμα 3×3 στο μενού και να επιλέξετε ποια στοίχιση θέλετε. Αυτό μπορεί να γίνει με τα πλήκτρα βέλους ή τα κουμπιά WSAD στο πληκτρολόγιό σας.

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

Μπορείτε επίσης να προσαρμόσετε τη στοίχιση κειμένου ενεργοποιώντας αυτήν την επιλογή από το μενού και κρατώντας πατημένο το κουμπί "B".

Αλλαγή μεγέθους

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

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

Δημιουργία μοναδικών πλαισίων με αυτόματη διάταξη

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

Ποια λειτουργία Auto Layout χρησιμοποιείτε περισσότερο; Ενημερώστε μας στην παρακάτω ενότητα σχολίων.