Cosa significa la modalità Dev di Figma per gli sviluppatori

In qualità di sviluppatore che collabora con i designer allo sviluppo del prodotto, dovrai affrontare varie sfide che possono ostacolare un lavoro di squadra efficace. Molti di questi problemi derivano da un coinvolgimento limitato nel processo di progettazione o da risorse di progettazione incomplete.

Figma ha introdotto Figma Dev Mode per affrontare questi problemi, con l'obiettivo di supportare una collaborazione perfetta tra progettazione e sviluppo.

In che modo questo influenzerà il tuo flusso di lavoro come sviluppatore? Immergiti nella Figma Dev Mode, esplora le sue funzionalità e scopri le migliori pratiche per il suo utilizzo.

Cos'è la modalità Figma Dev?

Figma, il popolare strumento di progettazione di interfacce, è popolare tra i team che creano prototipi o modelli di siti web. La sua modalità Dev, che la società ha annunciato a Config 2023, mira a fungere da spazio di lavoro per gli sviluppatori dopo che i creatori si sono resi conto di quanto fosse difficile per loro interagire con la tela di Figma.

La modalità Dev è simile allo strumento di ispezione in Chrome, ma trasmette l'intento di un designer in un linguaggio più familiare.

La modalità Dev di Figma offre una gamma di funzionalità, tra cui ispezione, frammenti di codice, plug-in, sistemi di progettazione, stato della sezione e la possibilità di confrontare le modifiche. Queste funzionalità dovrebbero aiutare a migliorare la comunicazione, semplificare i processi e mantenere un flusso di lavoro coerente dalla progettazione allo sviluppo.

Attualmente, Dev Mode è in versione beta, quindi per accedervi è necessaria l'app desktop Figma beta.

Comunicazione continua con la modalità Dev

Quando accedi ai file di progettazione, i contenuti possono apparire come un multiverso di pannelli, pieni di terminologie di progettazione che potrebbero essere difficili da comprendere e potresti non sapere nemmeno da dove iniziare. Con la semplice pressione di un pulsante, ti materializzi in uno spazio che ti sembra più familiare.

Il pannello di navigazione è meno angusto con menu a discesa contenenti più frame e livelli che si espandono per mostrare diverse sezioni. Questa nuova versione è molto più organizzata.

Un'altra grande caratteristica che potresti notare è il timestamp che indica l'ultima modifica. È possibile visualizzare i dettagli della modifica selezionando l'opzione Confronta modifiche nel pannello Ispeziona. Significa che puoi vedere e tenere traccia delle modifiche apportate, in modo simile alla cronologia delle versioni, un concetto adatto al tuo vocabolario.

Il pannello Ispeziona presenta le informazioni rilevanti per te utilizzando un linguaggio che comprendi: il codice. Puoi ispezionare elementi e aggiungi plugin più adatti al tuo lavoro. La modalità Dev offre varie funzionalità di interazione, che ti consentono di condividere idee e suggerimenti in diversi punti. Queste funzionalità includono la chat del cursore, il blocco dei commenti, la chat audio e un pulsante di condivisione.

Queste funzionalità abilitano la simultaneità collaborazione progettazione-sviluppo, poiché il feedback avviene in tempo reale all'interno dello stesso ambiente. Di conseguenza, migliora la produttività e accelera il flusso di lavoro.

Estrazione efficiente delle risorse

Non è raro che i progettisti forniscano risorse di progettazione incomplete, il che può essere frustrante. Gli sviluppatori apprezzano le risorse e la disponibilità dei componenti per garantire l'efficienza della build. Con Dev Mode, l'estrazione delle risorse è facile come pochi clic.

Ogni volta che selezioni un fotogramma, il pannello di ispezione visualizza un elenco delle risorse utilizzate. Li rende anche prontamente disponibili per il download in quattro diversi formati.

Questo strumento ti consente di accedere alle risorse senza dover andare avanti e indietro con il team di progettazione. Questo aiuta a evitare errori o confusione, aiutandoti a risparmiare tempo e permettendoti di concentrarti su altre attività.

Processi di consegna semplificati

Dev Mode è il miglior pacchetto per gestire i trasferimenti. Combina tutto ciò di cui hai bisogno in un'unica posizione che puoi adattare al tuo flusso di lavoro. Dev Mode aiuta ad accelerare il processo di trasferimento abilitando:

• Progettazione e sviluppo in un unico ambiente
• Collaborazione in tempo reale
• Ispezione e frammenti di codice
• Integrazione del sistema di progettazione
• Etichette di stato della sezione (ad es. "Pronto per lo sviluppo")

Best practice e suggerimenti per l'utilizzo della modalità Dev

Puoi utilizzare la modalità Dev di Figma come parte del tuo flusso di lavoro, ma come puoi sfruttarla al meglio? Prova questi suggerimenti.

• Usa le risorse e i plug-in Dev per personalizzare la tua esperienza; collega gli strumenti che già utilizzi in Dev Mode per semplificare il tuo flusso di lavoro. Da GitHub ai framework nel tuo stack, ci sono varietà tra cui scegliere.
• Utilizza le funzionalità di ispezione e frammenti di codice per accedere a misurazioni, specifiche, stili e risorse degli elementi di progettazione. Puoi anche generare codice in diverse librerie utilizzando i plug-in.
• Tieni traccia delle modifiche al design per assicurarti di non perdere nulla. IL Confronta le modifiche funzione funge da strumento di cronologia delle versioni: assicurati di controllarlo regolarmente.
• Sfrutta tutte le funzionalità di collaborazione per la comunicazione e raggiungi i designer utilizzando commenti, chat con il cursore e altro ancora.
• Puoi anche ispezionare elementi in VS Code con la nuova estensione Figma VS Code. Ti consente inoltre di fare di più, tra cui la navigazione nei file, il rilevamento delle modifiche, la collaborazione con i progettisti e l'accelerazione dell'implementazione del progetto, senza uscire da VS Code.
• Rimani aggiornato sulle nuove funzionalità, scopri come possono servirti al meglio e migliora le tue capacità in ogni occasione.

Abbraccia la modalità Dev per semplificare il tuo flusso di lavoro

Figma Dev Mode dovrebbe rendere il tuo flusso di lavoro più efficiente, consentendo una migliore collaborazione designer-sviluppatore con le funzionalità necessarie.

Ci sono più parti nell'ecosistema Figma e la popolarità dell'app significa che è uno strumento prezioso che puoi portare da un lavoro all'altro.