Η Επανάσταση του Figma: Δυναμικά Code Layers για Διαδραστικό Σχεδιασμό

Νέες δυνατότητες στο UX

Το Figma εισάγει μια καινοτόμο λειτουργία, τα code layers, που προσφέρουν πλήρη προσαρμογή μέσω ενός ενσωματωμένου AI-powered chat και ενός code editor. Το AI μπορεί να δημιουργήσει ή να βελτιώσει κώδικα με βάση τις οδηγίες του χρήστη, ενώ ο editor παρέχει την ευελιξία να γράφει και να προσαρμόζει κώδικα χρησιμοποιώντας React, TypeScript και Tailwind.

Η γέφυρα μεταξύ σχεδιασμού και ανάπτυξης

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

Τα code layers αποτελούν διαδραστικά στοιχεία που επιτρέπουν την εισαγωγή κώδικα σε σχέδια Figma. Η δυνατότητα αυτή προσφέρει πλήρη προσαρμογή μέσω ενός ενσωματωμένου AI-powered chat και ενός code editor. Το AI μπορεί να δημιουργήσει ή να βελτιώσει κώδικα με βάση τις οδηγίες του χρήστη, ενώ ο editor δίνει την ευελιξία να γράφει και να προσαρμόζει κώδικα χρησιμοποιώντας React, TypeScript και Tailwind. Με δυναμικές ιδιότητες, οι χρήστες μπορούν εύκολα να προσαρμόσουν τη συμπεριφορά ενός layer χωρίς να χρειάζεται να τροποποιήσουν τον υποκείμενο κώδικα.

Προσαρμοσμένα και δυναμικά στοιχεία

Το Figma Sites ήδη παρέχει προ-κατασκευασμένα components, όπως αντικείμενα που μπορούν να σύρονται και κείμενα με κινούμενες εικόνες. Ωστόσο, τα code layers προσφέρουν μια επιπλέον διάσταση. Οι σχεδιαστές μπορούν να ξεκινήσουν με ένα βασικό στοιχείο, να το μετατρέψουν σε code layer και να χρησιμοποιήσουν το AI για να ενισχύσουν τη συμπεριφορά του.

Τι μπορεί να δημιουργηθεί με τα code layers;

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

Τα code layers επιτρέπουν επίσης τη δημιουργία εργαλείων όπως υπολογιστές δανείων ή εκτιμητές τιμών προϊόντων, καθώς και διαδραστικά UI στοιχεία όπως λίστες που μπορούν να σύρονται και να ταξινομούνται. Μπορούν να χρησιμοποιηθούν για να προσθέσουν κομψές οπτικές πινελιές όπως ripple hover effects, ομαλές αλλαγές χρώματος ή ακόμα και σύνθετα shader-based visuals για μια high-end εμφάνιση.

Ευελιξία και επαναχρησιμοποίηση

Κάθε code layer μπορεί να περιλαμβάνει επεξεργάσιμες ιδιότητες, καθιστώντας το εξαιρετικά ευέλικτο και επαναχρησιμοποιήσιμο. Το AI chat θα προτείνει ιδιότητες με βάση την πρόθεση του χρήστη, ή οι χρήστες μπορούν να τις ορίσουν χειροκίνητα. Είναι επίσης δυνατό να δημιουργηθούν πολλαπλές εκδόσεις ενός code layer, να συγκριθούν πλευρικά και να πειραματιστούν ελεύθερα.

Τα code layers κυκλοφορούν αυτή την εβδομάδα για τους χρήστες με Full seat σε πληρωμένα προγράμματα.