Δημιουργήστε έναν ταμπλό που ανταποκρίνεται με το Figma

Το Figma είναι ένα εργαλείο γραφικών για τους σχεδιαστές UI. Έχει μια απλή διεπαφή και σας επιτρέπει να συνεργαστείτε στην εργασία με τους συμπαίκτες σας. Εάν θέλετε να εργαστείτε εκτός σύνδεσης, μπορείτε να επιλέξετε να χρησιμοποιήσετε την εφαρμογή Desktop. Εναλλακτικά, το Figma λειτουργεί σε οποιοδήποτε λειτουργικό σύστημα (γεια, παράθυρα), οπότε δεν χρειάζεται να εγκαταστήσετε τίποτα καθόλου. Και το ξεκίνημα είναι εύκολο - μπορείτε να εισάγετε τα προηγούμενα σχέδια διάταξης από το σκίτσο.

• Επιλέξτε έναν οικοδόμο ιστότοπου: 16 κορυφαία εργαλεία

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

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

01. Εγγραφή

Πρώτα απ 'όλα, πρέπει να εγγραφείτε στο www.figma.com . Αποφασίστε εάν θέλετε να χρησιμοποιήσετε το εργαλείο στο πρόγραμμα περιήγησης ή να κάνετε λήψη της εφαρμογής επιφάνειας εργασίας. Για να κατεβάσετε την έκδοση της επιφάνειας εργασίας, μεταβείτε στο μενού Hamburger στην επάνω αριστερή γωνία και κάντε κλικ στο 'Get Desktop App'.

02. Δημιουργήστε ένα πλέγμα και πλέγμα

Κτύπημα ΕΝΑ για να δημιουργήσετε ένα χαρτόνι. Μπορείτε να επιλέξετε μία από τις προεπιλογές ή να δημιουργήσετε το δικό σας προσαρμοσμένο μέγεθος. Για το έργο αυτό, θα χρησιμοποιήσουμε το τηλέφωνο & gt; iPhone 7 (375x667px). Για να δημιουργήσετε ένα πλέγμα, επιλέξτε πρώτα το Artboard. Στη συνέχεια, στη δεξιά πλευρά, βρείτε το "Layout Grid" και πατήστε '+'. Ρυθμίστε τον αριθμό στήλης: 6, υδρορροή: 16, περιθώρια: 8 και τύπου: τεντώστε.

03. Σχεδιάστε ένα ορθογώνιο για το φόντο

Ας ξεκινήσουμε με το φόντο. Τύπος R Για να φέρετε το εργαλείο ορθογώνιο και να σχεδιάσετε ένα ορθογώνιο # 5F98FA χωρίς σύνορα. Ορίστε τις διαστάσεις στο 375x363 χρησιμοποιώντας τον πίνακα Ιδιότητες στη δεξιά πλευρά.

04. Προσθέστε μια γραμμή κατάστασης

Στη συνέχεια θέλουμε να τοποθετήσουμε μια γραμμή κατάστασης στην κορυφή της οθόνης. Τύπος R Για να ορίσετε το πλάτος: 375, Ύψος: 64, θέση (x: 0; y: 0). Για τη ράβδο πλοήγησης, ας ορίσουμε την κλίση πλήρωσης χρησιμοποιώντας τον πίνακα επιθεωρητών ιδιοτήτων στα δεξιά. Βρείτε την επιλογή "πλήρωσης", πατήστε την προεπισκόπηση χρωμάτων και επιλέξτε "Γραμμική" από το αναπτυσσόμενο μενού. Το χρώμα στην κορυφή πρέπει να είναι # 77A6F7, και στο κάτω μέρος # 5A93F5 (αδιαφάνεια 100 τοις εκατό και για τα δύο).

05. Εισαγάγετε μια γραμμή κατάστασης iOS

Δυστυχώς, το Figma δεν περιλαμβάνει στοιχεία UO UI από προεπιλογή. Ωστόσο, υπάρχει ένα αρχείο που ονομάζεται «αρχείο δείγματος», ο οποίος είναι ένας σχεδιασμός AP IOS, ώστε να μπορέσουμε να δανειστούμε τη γραμμή κατάστασης από αυτό. Αντιγράψτε τη γραμμή γραμμής φωτός κατάστασης, επικολλήστε το στο τρέχον αρχείο και τοποθετήστε το στο (x: 0; y: 0). Χρησιμοποιώντας το εργαλείο κειμένου ( T ), κάντε κλικ στο Artboard για να προσθέσετε μια κεφαλίδα στη γραμμή πλοήγησης. Έχω πάει για Avenir βαριά, 15px, #ffffff. Ευθυγραμμίστε την επικεφαλίδα με οριζόντιο κέντρο, Y: 33.

06. Δημιουργήστε ένα πίσω εικονίδιο

Στα αριστερά της γραμμής πλοήγησης θα πρέπει να είναι ένα εικονίδιο "πίσω". Πάω να το δημιουργήσω από το μηδέν. Δημιουργήστε ένα ορθογώνιο 14x14px, προσθέστε περιστροφή 45 μοιρών, x: 14; Y: 43. Αντιγράψτε αυτό το ορθογώνιο και τοποθετήστε το στο X: 18; Y: 43. Επιλέξτε και τα δύο ορθογώνια και κάτω από το επάνω μενού Πηγαίνετε στις ομάδες Boolean & GT; Αφαιρέστε την επιλογή. Μετά από αυτό, επιστρέψτε στις ομάδες Boolean & GT; Επιλογή ή πατήστε cmd + e .

07. Τελειώστε το εικονίδιο βέλους

Το εικονίδιο του βέλους μας έχει σχεδόν γίνει. Τώρα πρέπει απλώς να ορίσουμε το πλάτος και το ύψος στις αριθμητικές τιμές - στην περίπτωσή μου πλάτος: 12px; Ύψος: 20px. Το τελικό βήμα είναι να ορίσετε το χρώμα πλήρωσης στο #ffffff.

08. Δημιουργήστε ένα γράφημα

Τώρα πρόκειται να δημιουργήσουμε ένα γράφημα. Πρώτον, θα θέσουμε σε ορισμένες οδηγίες. Επιλέξτε το εργαλείο ορθογωνίου ( R ) και ορίστε το x: 24 y: 147; Πλάτος: 1; Ύψος: 166; Συμπληρώστε το χρώμα # B3DCFF και αδιαφάνεια 20%.

Διπλασιάστε αυτό το ορθογώνιο τέσσερις φορές με περιθώρια 80px. Στο κάτω μέρος κάθε κατευθυντήριας γραμμής, πρέπει να προσθέσουμε μια ετικέτα ημερομηνίας χρησιμοποιώντας στρώματα κειμένου («Feb 2», «Feb 9», «Feb 16», «Φεβρουαρίου», «Μαρ 1»). Έχω χρησιμοποιήσει το Avenir Medium, στο 11px, # c1d8ff.

09. Κάντε τη γραμμή δεδομένων

Χρησιμοποιώντας το εργαλείο στυλό ( Π ) Πρέπει να δημιουργήσουμε ένα φορέα για να αντιπροσωπεύσουμε τη γραμμή δεδομένων. Κάντε κλικ και σύρετε για να δημιουργήσετε ένα σημείο Bézier. Αυτό το σχήμα θα πρέπει να έχει ένα εγκεφαλικό επεισόδιο 4px και χωρίς πλήρωση, #ffffff.

Ας προσθέσουμε μια σκιά σταγόνας για να βοηθήσουμε τη γραμμή να ξεχωρίζει: Κάντε κλικ στο ενότητα "+" στην ενότητα Εφέ και επιλέξτε "Σκιά πτώσης". Χρησιμοποιήστε τις παρακάτω ρυθμίσεις για να κάνετε μια ομαλή και κομψή σκιά: θολούρα: 3px, y: 7px, # 2951ff, αδιαφάνεια: 100%.

10. Προσθέστε λεπτομέρειες στο γράφημα

Στα σημεία όπου οι κατευθυντήριες γραμμές τέμνονται με τη γραμμή δεδομένων που θα προσθέτουμε κύκλους. Αυτή τη φορά θα χρησιμοποιήσουμε το εργαλείο ελλείψεων ( O ), το οποίο θα βρείτε στο αναπτυσσόμενο μενού που συνοδεύει το εργαλείο ορθογώνιο. Σχεδιάστε 8x8px κύκλους σε κάθε διασταύρωση και ρυθμίστε το χρώμα πλήρωσης στο # 5F98FA. Πρέπει να προσθέσουμε ένα εγκεφαλικό επεισόδιο: Κάντε κλικ στο κουμπί '+' δίπλα στο τμήμα εγκεφαλικού επεισοδίου, ορίστε το βάρος: 2px και ευθυγραμμίστε: Κέντρο.

11. Τελικές πινελιές

Για να ολοκληρώσετε το τμήμα γραφικών, πρέπει απλά να προσθέσουμε τιμές στα σημεία διασταύρωσης. Με το εργαλείο κειμένου ( T ) Επιλέξτε Avenir Black, 11px, # 1F4991.

12. Τρία ενημερωτικά πλαίσια

Κάτω από το γράφημα γραμμής θα δημιουργήσουμε τρία κελιά που εμφανίζουν περισσότερες πληροφορίες. Χρησιμοποιώντας το εργαλείο κειμένου ( T ) Ας δημιουργήσουμε την πρώτη μας κλάση: «Εκτιμώμενη αξία των μετοχών σας»: x: 16; Y: 391, Avenir Medium, 15px, # 5D7EB6. Στα δεξιά του κελιού Τοποθετήστε την τιμή '$ 1.115', στυλ κειμένου: Avenir βαριά, 22px, # 5F98FA, ευθυγράμμιση κειμένου: αριστερά, Χ: 287; Y: 387.

13. Κάνοντας έναν διαχωριστή

Σχεδιάστε ένα ορθογώνιο που είναι 1px σε ύψος και καλύπτει το πλήρες πλάτος της οθόνης (# F5F5F5, X: 0, Y: 435) - αυτό θα λειτουργήσει ως διαχωριστής μεταξύ των κυττάρων. Επιλέξτε την επικεφαλίδα, την τιμή και τον διαχωριστή και δημιουργήστε μια ομάδα ( cmd + g ).

14. Προσθήκη τίτλων

Διπλασιάστε αυτή την ομάδα, ώστε να έχετε τρεις ομάδες με 24px κάθετη απόσταση μεταξύ τους. Αλλαγή της δεύτερης επικεφαλίδας στα «συνολικά μέλη» και στην τρίτη κατευθύνουσα ομάδα στους «φίλους που υπογράφηκαν» και ενημερώνουν τις σχετικές τιμές.

15. Σχεδιάστε και ευθυγραμμίστε ένα άλλο ορθογώνιο

Τώρα θα προσθέσουμε μια κλήση σε δράση. Σχεδιάστε ένα ορθογώνιο κάτω από το τελευταίο κύτταρο, πλάτος: 195; Ύψος: 44, Άξονας Υ από τον τελευταίο διαχωριστή 21px.

Χρησιμοποιώντας τα εργαλεία ευθυγράμμισης, παραδώστε το ορθογώνιο με οριζόντιο κέντρο. Στη συνέχεια, ρυθμίστε το χρώμα πλήρωσης στο # 5F98FA και στρογγυλοποίηση στο 22 (θα βρείτε αυτό το πεδίο μετά την «περιστροφή» στον πίνακα Ιδιότητες). Μετά από αυτό προσθέστε ένα αποτέλεσμα σκιά σταγόνας (χρώμα: #abdaff, αδιαφάνεια: 100%; y: 5; θολούρα: 11).

16. Βάλτε κάποιο κείμενο στο κουμπί

Προσθέστε κείμενο στο κουμπί χρησιμοποιώντας το εργαλείο κειμένου ( T ): 'Πάρτε περισσότερες μετοχές!' Ορίστε αυτό στο Avenir Black, 15px, #ffffff. Ευθυγραμμίστε το κείμενο από το κέντρο του κουμπιού. Τέλος, ομαδοποιήστε όλα τα στοιχεία μαζί και τα ονομάζεστε σωστά.

17. Κάντε την ανταποκρινόμενη

Τώρα πρόκειται να προσαρμόσουμε τη διάταξή μας, έτσι ώστε να ανταποκρίνεται σε διαφορετικά iPhones (320x568, 375x667 και 414x736). Για να γίνει αυτό, πρέπει να χρησιμοποιήσουμε περιορισμούς, τα οποία θα βρείτε κάτω από το μενού Ιδιότητες στα δεξιά.

18. Να πάρει το σωστό διάταγμα

Εάν επιλέξετε 'αριστερά' ή 'δεξιά' στην οριζόντια αναπτυσσόμενη, η ομάδα θα καρφώσει στην επιλεγμένη πλευρά της οθόνης και δεν θα τεντώσει. Εάν επιλέξετε 'Κέντρο', η ομάδα ή το στρώμα θα τεντώσει έτσι ώστε να γεμίσει το πλάτος της οθόνης. Πρέπει να κάνουμε τη γραμμή κατάστασης να επιπλέουμε στη θέση τους, οπότε θέλουμε η επιλογή "Δεξιά & ΑΜΡ · Αριστερά" (ή να κρατήσει κάτω "CMD" και κάντε κλικ στην αριστερή και δεξιά μπάρες στο διάγραμμα).

19. Δοκιμάστε το

Ας το δοκιμάσουμε. Με την επιλεγμένη γραμμή κατάστασης, πατήστε την επιλογή "Δεξιά & ΑΜΡ · Αριστερά". Επιλέξτε ένα Artboard και, αντί για iPhone 7, επιλέξτε το iPhone 7 Plus. Λειτουργεί σωστά ακόμα κι αν επιλέξετε το μέγεθος του iPhone SE.

20. Ελέγξτε κάθε στρώμα

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

21. Ορίστε το γράφημα γραμμής

Τώρα ας ορίσουμε το γράφημα γραμμής. Για τις οδηγίες, τις ημερομηνίες και τους κύκλους διασταύρωσης, θέλουμε να χρησιμοποιήσουμε το «κέντρο». Για τη γραμμή δεδομένων και το υπόβαθρο, θα χρησιμοποιήσουμε "Δεξιά & ΑΜΡ, Αριστερά". Στην ενότητα επιπλέον δεδομένων θέλουμε να χρησιμοποιήσουμε το «αριστερό» για κάθε τίτλο, «δεξιά» για κάθε τιμή και «δεξιά & amp» για τις γραμμές διαχωριστή. Για την ομάδα κουμπιών CTA Ας θέσουμε το 'Κέντρο'.

22. Ορίστε τους κάθετους περιορισμούς

Το τελικό βήμα είναι να ορίσετε τους κάθετους περιορισμούς. Η γραμμή κατάστασης, η ράβδος πλοήγησης, η γραμμή δεδομένων και οι κύκλοι διασταύρωσης και οι σχετικοί τίτλοι πρέπει να ρυθμίζονται στο 'TOP'. Το φόντο του γραφήματος, ημερομηνιών και οδηγιών θα πρέπει να οριστεί σε «κέντρο». Κάθε ομάδα επιπλέον δεδομένων θα πρέπει να ρυθμιστεί σε κάθετο 'Κέντρο' και η ομάδα κουμπιών CTA θα πρέπει να ρυθμιστεί στο 'Bottom'.

23. Κάντε την εργασία για κάθε μέγεθος οθόνης

Ας διπλασιάσουμε το σχέδιο δύο φορές και να ορίσετε ένα στο μέγεθος ενός iPhone 7 συν και το άλλο στο μέγεθος σε ένα iPhone SE. Στην έκδοση Plus, θα χρειαστεί να μειώσετε το κενό μεταξύ του τελευταίου κυττάρου των επιπλέον πληροφοριών και του κουμπιού CTA επιλέγοντας την ομάδα των κυττάρων και αυξάνοντας το ύψος του από το 195 έως το 225. Στην έκδοση SE θα δείτε ότι η υπερχείλιση πληροφοριών υπερχείλισης Το κουμπί CTA, οπότε πρέπει να επιλέξουμε την ομάδα των κυττάρων και να μειώσουμε το ύψος του σε 150.

24. Όλα έγιναν!

Γεια σου, Συγχαρητήρια! Έχουμε τελειώσει ολόκληρη την οθόνη εφαρμογής στο Figma. Γιατί τώρα ελέγχετε τα πάντα, και μπορείτε να καθίσετε και να νιώσετε σαν ειδικός.

Αυτό το άρθρο εμφανίστηκε αρχικά στο καθαρό περιοδικό Τεύχος 288; Αγοράστε το εδώ.

Σχετικά Άρθρα:

• Η νέα ιδέα Behance μοιάζει με μια εφαρμογή δολοφόνων
• Σχεδιασμός για κοινωνικές επιπτώσεις
• 8 συμβουλές στις συνεντεύξεις ACE Tech Jobs