Η πρόκληση στη σχεδίαση των UI tabs
Αν είστε UI designer, είναι σίγουρο ότι έχετε σχεδιάσει τουλάχιστον μία φορά tabs. Τα tabs είναι θεμελιώδη για την οργάνωση περιεχομένου, την εξοικονόμηση χώρου και την καθοδήγηση των χρηστών μέσα στην διεπαφή. Αλλά όταν πρόκειται για το σχεδιασμό τους στο Figma, τα πράγματα μπορεί να γίνουν πιο περίπλοκα.
Το Figma προσφέρει εξαιρετική ευελιξία για τη δημιουργία συστατικών που μπορούν να εμφανίζουν διαφορετικές καταστάσεις tab, μεγέθη και διατάξεις. Μπορείτε επίσης να δημιουργήσετε σύνολα παραλλαγών και να τα επαναχρησιμοποιείτε καθ’ όλη τη διάρκεια του έργου σας. Ωστόσο, ένα από τα βασικά προβλήματα είναι ότι τα tabs συνήθως περιλαμβάνουν κινούμενα σχέδια, πράγμα που σημαίνει ότι δεν λειτουργούν ως στατικά στοιχεία. Έτσι, ο στόχος είναι να κινούμε αυτά τα tabs και να διασφαλίσουμε ότι θα μπορούν να επαναχρησιμοποιηθούν στο σύνολο της διεπαφής σας.
Ιδιότητες και Δυνατότητες του Figma
- Παραλλαγές components ✅
- Ιδιότητες components ✅
- Responsive UI ✅
- Animation Όχι ακριβώς!
Παρά τις ισχυρές δυνατότητες των εργαλείων πρωτοτύπου του Figma, υπάρχουν ακόμα περιορισμοί όσον αφορά τον συνδυασμό αυτών των χαρακτηριστικών με τα κινούμενα σχέδια (animations). Μπορείτε να δημιουργήσετε κινούμενα σχέδια, αλλά συχνά δεν είναι επαναχρησιμοποιήσιμα. Iδανικά, θέλουμε τα συστατικά μας να αντανακλούν την πραγματική χρήση όσο το δυνατόν πιο πιστά.
Υπάρχουν παραδείγματα προσέγγισης με animation στην κοινότητα του Figma, όπως αυτό, αλλά τα περισσότερα επικεντρώνονται κυρίως στην animation ως βασικό χαρακτηριστικό, συχνά σε βάρος της ευελιξίας και της επαναχρησιμοποίησης.
Πολλοί απο εμάς έχουν βρεθεί σε αυτή την κατάσταση, όπου για ώρες παραμένουμε στο Figma προσπαθώντας να δημιουργήσουμε το τέλειο συστατικό tab, μόνο για να καταλήξουμε να επιλέξουμε ανάμεσα σε οργανωμένες παραλλαγές ή ομαλά animations, αλλά ποτέ και τα δύο.
Αλλά οι ανθρωποι της Frames X τα κατάφεραν και μοιράζονται τη λύση τους:
Η Προσέγγισή τους στα Tabs στο Figma
- Παραλλαγές tabs σε σχήμα πιλέτας και γραμμής
- Ιδιότητες components με εσωτερικά στοιχεία
- Ομαλά animations, με διαδραστικές καταστάσεις για hover, active και clicked
- Διατήρηση θέσης tab ανάμεσα στις παραλλαγές
Μπορείτε τώρα να κατεβάσετε το Figma Tabs UI kit δωρεάν.
Αν και τα animations δεν είναι τόσο ρευστά όσο μερικοί θα ήθελαν, λειτουργούν άψογα και εμφανίζουν τις αλληλεπιδράσεις του χρήστη με σαφήνεια. Με τις ιδιότητες συστατικών και τις παραλλαγές, αυτά τα tabs προσαρμόζονται τέλεια για διαφορετικά μεγέθη και διατάξεις οθόνης.
Αυτό το UI kit είναι ένα εξαιρετικό σημείο εκκίνησης για το σχεδιασμό των tabs σας, προσφέροντάς σας όλα όσα χρειάζεστε για να δημιουργήσετε responsive και διαδραστικά tabs με τη χρήση όλων των δυνατοτήτων του Figma.
