Έχετε ακούσει συναδέλφους σχεδιαστές να αναβλύζουν για το Figma, αλλά τώρα είναι η σειρά σας να το δοκιμάσετε!

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

Η Figma εισήγαγε το Figma Dev Mode για να αντιμετωπίσει αυτά τα ζητήματα, με στόχο να υποστηρίξει την απρόσκοπτη συνεργασία σχεδιασμού-ανάπτυξης.

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

Τι είναι το Figma Dev Mode;

Figma, το δημοφιλές εργαλείο σχεδιασμού διεπαφής, είναι δημοφιλές σε ομάδες που κατασκευάζουν πρωτότυπα ή δημιουργούν μακέτες ιστότοπων. Το Dev Mode του, το οποίο ανακοίνωσε η εταιρεία στο Config 2023, στοχεύει να χρησιμεύσει ως χώρος εργασίας προγραμματιστών αφού οι δημιουργοί συνειδητοποίησαν πόσο δύσκολο ήταν για αυτούς να αλληλεπιδράσουν με τον καμβά Figma.

instagram viewer

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

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

Επί του παρόντος, η λειτουργία Dev Mode είναι σε beta, επομένως θα χρειαστείτε την εφαρμογή επιφάνειας εργασίας Figma beta για να αποκτήσετε πρόσβαση σε αυτήν.

Απρόσκοπτη επικοινωνία με τη λειτουργία προγραμματιστή

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

Πίστωση εικόνας: Figma

Ο πίνακας πλοήγησης είναι λιγότερο γεμάτος με αναπτυσσόμενα μενού που περιέχουν πολλά πλαίσια και επίπεδα που επεκτείνονται για να εμφανίσουν διαφορετικές ενότητες. Αυτή η νέα έκδοση είναι πολύ πιο οργανωμένη.

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

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

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

Αποτελεσματική Εξόρυξη Περιουσιακών Στοιχείων

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

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

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

Απλοποιημένες διαδικασίες παράδοσης

Το Dev Mode είναι το καλύτερο πακέτο για το χειρισμό handoffs. Συνδυάζει όλα όσα χρειάζεστε σε μια ενιαία τοποθεσία που μπορείτε να προσαρμόσετε στη ροή εργασίας σας. Η λειτουργία προγραμματιστή βοηθά στην επιτάχυνση της διαδικασίας μεταβίβασης, ενεργοποιώντας:

  • Σχεδιασμός και ανάπτυξη σε ένα περιβάλλον
  • Συνεργασία σε πραγματικό χρόνο
  • Επιθεώρηση και αποσπάσματα κώδικα
  • Ενσωμάτωση συστήματος σχεδίασης
  • Ετικέτες κατάστασης ενότητας (π.χ. "Έτοιμος για προγραμματιστές")

Βέλτιστες πρακτικές και συμβουλές για τη χρήση της λειτουργίας προγραμματιστή

Μπορείτε να χρησιμοποιήσετε τη λειτουργία προγραμματιστή του Figma ως μέρος της ροής εργασίας σας, αλλά πώς μπορείτε να την αξιοποιήσετε στο έπακρο; Δοκιμάστε αυτές τις προτάσεις.

  • Χρησιμοποιήστε πόρους και προσθήκες προγραμματιστή για να προσαρμόσετε την εμπειρία σας. συνδέστε τα εργαλεία που χρησιμοποιείτε ήδη στη λειτουργία προγραμματιστή για να βελτιστοποιήσετε τη ροή εργασίας σας. Από το GitHub μέχρι τα πλαίσια στη στοίβα σας, υπάρχουν ποικιλίες για να διαλέξετε.
  • Χρησιμοποιήστε τις λειτουργίες επιθεώρησης και αποσπασμάτων κώδικα για να αποκτήσετε πρόσβαση σε μετρήσεις, προδιαγραφές, στυλ και στοιχεία στοιχείων σχεδίασης. Μπορείτε επίσης να δημιουργήσετε κώδικα σε διαφορετικές βιβλιοθήκες χρησιμοποιώντας πρόσθετα.
  • Παρακολουθήστε τις αλλαγές σχεδιασμού για να διασφαλίσετε ότι δεν θα χάσετε τίποτα. ο Συγκρίνετε τις αλλαγές Το χαρακτηριστικό χρησιμεύει ως εργαλείο ιστορικού εκδόσεων—φροντίστε να το ελέγχετε τακτικά.
  • Εκμεταλλευτείτε όλες τις δυνατότητες συνεργασίας για επικοινωνία και απευθυνθείτε σε σχεδιαστές χρησιμοποιώντας σχόλια, συνομιλίες με δρομέα και πολλά άλλα.
  • Μπορείτε επίσης να επιθεωρήσετε στοιχεία στο VS Code με τη νέα επέκταση Figma VS Code. Σας επιτρέπει επίσης να κάνετε περισσότερα—συμπεριλαμβανομένης της πλοήγησης αρχείων, της παρακολούθησης αλλαγών, της συνεργασίας σχεδιαστών και της επιτάχυνσης υλοποίησης σχεδίου—χωρίς να αποχωρήσετε από τον Κώδικα VS.
  • Μείνετε ενημερωμένοι για νεότερες λειτουργίες, δείτε πώς μπορούν να σας εξυπηρετήσουν καλύτερα και αναβαθμίστε τις δεξιότητές σας με κάθε ευκαιρία.

Αγκαλιάστε τη λειτουργία προγραμματιστή για να βελτιώσετε τη ροή εργασίας σας

Η λειτουργία Figma Dev πρέπει να κάνει τη ροή εργασιών σας πιο αποτελεσματική, επιτρέποντας καλύτερη συνεργασία σχεδιαστή-προγραμματιστή με τα απαραίτητα χαρακτηριστικά.

Υπάρχουν περισσότερα μέρη στο οικοσύστημα Figma και η δημοτικότητα της εφαρμογής σημαίνει ότι είναι ένα πολύτιμο εργαλείο που μπορείτε να μεταφέρετε από δουλειά σε δουλειά.