Εισαγωγή
Το Figma έχει φέρει επανάσταση στον κόσμο του σχεδιασμού, προσφέροντας εργαλεία που κάνουν τη δουλειά μας πιο εύκολη και αποτελεσματική. Ένα από αυτά τα εργαλεία είναι το auto layout, μια λειτουργία που αλλάζει τον τρόπο με τον οποίο δημιουργούμε και τροποποιούμε τα σχέδιά μας.
Τι είναι το Auto Layout;
Το auto layout είναι ένα χαρακτηριστικό του Figma που μας επιτρέπει να δημιουργούμε δυναμικά πλαίσια (frames) που προσαρμόζονται αυτόματα ανάλογα με το περιεχόμενό τους. Αντί να ρυθμίζουμε χειροκίνητα τις διαστάσεις και την απόσταση μεταξύ των στοιχείων, το auto layout αναλαμβάνει αυτή τη δουλειά για εμάς.
Γιατί να Χρησιμοποιήσετε το Auto Layout;
Εξοικονόμηση Χρόνου: Το auto layout αυτοματοποιεί τη διαδικασία προσαρμογής των στοιχείων, επιτρέποντάς μας να επικεντρωθούμε στη δημιουργική πλευρά του σχεδιασμού.
Συνέπεια: Εξασφαλίζει ότι τα στοιχεία μας είναι πάντα σωστά ευθυγραμμισμένα και με σταθερές αποστάσεις, διατηρώντας την ομοιομορφία του σχεδίου μας.
Προσαρμοστικότητα: Κάνει τα σχέδιά μας πιο εύκολα προσαρμόσιμα σε διαφορετικές οθόνες και συσκευές, βελτιώνοντας τη responsive σχεδίαση.
Ευκολία Τροποποίησης: Όταν προσθέτουμε, αφαιρούμε ή τροποποιούμε περιεχόμενο, το auto layout αναπροσαρμόζει αυτόματα το πλαίσιο, αποφεύγοντας την ανάγκη χειροκίνητων αλλαγών.
Πώς να Χρησιμοποιήσετε το Auto Layout στο Figma;
Αρχικά, θα δημιουργήσουμε τα στοιχεία μας. Στο παράδειγμα αυτό, έχουμε δημιουργήσει ένα εικονίδιο (είναι το εικονίδιο του Auto Layout) και 2 text στοιχεία.
Τα προσαρμόζουμε περίπου εκεί που θέλουμε να είναι. Αναφέραμε “περίπου” διότι η στοίχιση θα γίνει σωστά και αυτόματα με τη χρήση του Auto Layout.
Όταν είμαστε έτοιμοι, επιλέγουμε τα στοιχεία μας και κάνουμε κλικ στο εικονίδιο του Auto Layout από την δεξιά στήλη ή δεξί κλικ και “Add Auto Layout” ή Shift+A.
Και μόλις δημιουργήσαμε το Auto Layout μας. Τώρα θα δημιουργήσουμε ένα frame, θα μεταφέρουμε τα στοιχεία μας μέσα σε αυτό και θα προσαρμόσουμε το width έτσι ώστε να χωράνε όλα τα στοιχεία μας μέσα στο frame μας.
Πλέον, μπορούμε να δώσουμε και το στυλ που επιθυμούμε όπως:
- Background χρώμα
- Paddings (αποστάσεις)
- Radius (καμπυλότητα)
- Σκιά
- Background blur κλπ.
Στο δικό μας παράδειγμα, επιλέξαμε το Auto Layout και κάναμε κλικ στο “Fill” στη δεξιά στήλη. Αυτόματα το fill μας δίνει λευκό χρώμα αλλά χαμηλώσαμε το opacity από 100% σε 10%.
Στη συνέχεια, εφαρμόσαμε:
- 16px radius (καμπυλότητα)
- 40px οριζόντιο padding
- 40px κάθετο padding
- 24px gap (κενό ανάμεσα σε κάθε στοιχείο)
Συμβουλές και Κόλπα
- Χρησιμοποιήστε το Auto Layout για να δημιουργήσετε κουμπιά, λίστες, κάρτες και άλλα στοιχεία.
- Συνδυάστε το Auto Layout με Components για ακόμα μεγαλύτερη ευελιξία και αποτελεσματικότητα.
- Να χρησιμοποιείτε padding για να ρυθμίσετε τις αποστάσεις εσωτερικά.
Δωρεάν 1 ώρα μάθημα Figma για να μας γνωρίσετε!
Χωρίς καμία δέσμευση.
Συμπληρώστε τη φόρμα εκδήλωσης ενδιαφέροντος και θα σας καλέσουμε σύντομα.
