I progettisti e gli ingegneri possono usare un'unica fonte di verità? Parte 2.

Ora che hai compreso il costante tiro alla fune tra designer e sviluppatori (leggi la prima parte di questo articolo qui), parliamo di come risolvere questo problema.

Sistemi di progettazione e un'unica fonte di verità (parte 2 di 2)

Gli ultimi 10 anni hanno portato molta maturità nel mondo delle tecnologie web. I CSS sono diventati estremamente potenti e sono cresciuti in strumenti che hanno permesso flussi di lavoro prevedibili e sostenibili (dai preprocessori ai moduli e ai linter stile). JavaScript è diventato lo standard di sviluppo per una varietà di piattaforme. Ha aggiunto funzionalità che aumentano la leggibilità (mappe, funzioni freccia ...) e la modularità del codice (moduli ES6). Ha persino ottenuto strumenti straordinari che hanno portato l'ecosistema al livello successivo (NPM, Webpack, React.js).

Entrambi, i progressi in CSS e JavaScript, hanno portato a una popolarità in rapida crescita di un'architettura modulare di applicazioni web. Di conseguenza, ha anche portato a una drastica popolarità dei sistemi di progettazione. La necessità di sistemi di progettazione è nata dal caos, dalla costosa manutenzione e dalle esperienze incoerenti della prima rete. La rapida crescita della popolarità dei sistemi di progettazione è diventata possibile grazie al progresso delle tecnologie web.

I sistemi di progettazione hanno offerto molte promesse:

  • L'unificazione delle fonti della verità
  • Prevedibilità del flusso di lavoro di sviluppo del prodotto
  • Aumento della qualità dell'esperienza dell'utente
  • Diminuzione dei costi di manutenzione

Come una rivoluzione del flusso di lavoro avviata dal Toyota Production System, i sistemi di progettazione hanno offerto una soluzione alle sofferenze dello sviluppo di prodotti moderni grazie a una sistematizzazione dei processi.

È ancora troppo presto per giudicare l'effetto complessivo del boom del sistema di progettazione. Tuttavia, sta diventando sempre più ovvio che l'attuale generazione di sistemi di progettazione è eccezionale nel sistematizzare l'ingegneria del frontend e solo parzialmente riuscita nel fissare la disconnessione tra progettazione e ingegneria.

Prendiamo, ad esempio, i token di progettazione, che sono una parte fondamentale di molti grandi sistemi di progettazione. Possono essere utilizzati per generare serie complesse di fogli di stile e tavolozze di colori per gli strumenti di progettazione, ma i componenti interattivi essenziali per qualsiasi sistema di progettazione rimarranno disconnessi dagli strumenti di progettazione.

Pochi tentativi di colmare questo divario non ottennero popolarità di massa o trazione significativa. Il migliore tra questi, HTML Sketchapp, offre un'importazione di elementi HTML in Sketch. Sfortunatamente, tutti gli stati e le interazioni si perdono lungo la strada. Lo schizzo, in definitiva uno strumento di illustrazione vettoriale, non offre stati o interazioni a livello di componente.

Non dare la colpa ai sistemi di progettazione per quella mancanza. Incolpare gli strumenti di progettazione. Finché gli strumenti di progettazione impongono il formato vettoriale ai progettisti di interfacce utente, l'implementazione di un'unica fonte di verità rimarrà impossibile.

Il problema di un'unica fonte di verità sembra teorico, ma pensa alle implicazioni pratiche.

E se i progettisti potessero utilizzare gli stessi componenti utilizzati dagli ingegneri e fossero tutti archiviati in un sistema di progettazione condiviso (con documentazione e test accurati)? Molti fraintendimenti frustranti e costosi tra progettisti e ingegneri smetterebbero di accadere.

Rivedi la storia di due raccoglitori di date in conflitto dalla prima parte di questo articolo. Se il progettista avesse accesso a un componente interattivo sincronizzato con il database di produzione, potrebbe prendere una decisione di progettazione informata sull'esperienza di selezione dei dati e riutilizzare un componente esistente. L'intero conflitto si dissolverebbe, determinando un processo di progettazione più rapido, un processo di sviluppo più rapido e un'esperienza meno frustrante per l'intero team.

Affidarsi al ridisegno manuale dei componenti con codice di produzione in uno strumento di illustrazione vettoriale non è solo costoso, ma anche soggetto a errori critici.

Nella perfetta implementazione di un sistema di progettazione, designer e ingegneri utilizzano un'unica fonte di verità per coprire tutte le sfaccettature del flusso di lavoro. Una volta che i progettisti abbandoneranno i loro vecchi strumenti di illustrazione vettoriale (perdendo inevitabilmente tutti i problemi relativi a questo vecchio paradigma), questo livello di integrazione e maturità del processo diventerà possibile.

Progettazione unificata - Collaborazione tecnica con UXPin Merge

In UXPin, abbiamo trascorso gli ultimi 8 anni a costruire un editor di progettazione collaborativo basato su codice. Con rendering accurato, componenti con stato, interazioni avanzate a livello di componente (interazioni condizionali, variabili, integrazione API ...), siamo riusciti a evitare molte carenze degli strumenti di illustrazione vettoriale come Sketch, Figma o XD. Invece di fare affidamento su centinaia di tavole da disegno statiche, UXPin consente ai progettisti di creare componenti con stato completamente interattivi e riutilizzabili. Progettare moduli con piena convalida diventa facile anche per i progettisti che non programmano.

Ogni volta che un designer crea qualcosa in UXPin, il nostro motore di rendering crea CSS HTML e JavaScript (per tutte le interazioni avanzate). Quindi i progettisti e gli ingegneri possono essere certi che ci sarà una corrispondenza del 100% tra i progetti creati in UXPin e l'implementazione della produzione finale. I malintesi riguardanti le animazioni o il rendering dei caratteri menzionati nel primo articolo non esistono nell'universo di UXPin.

Non abbiamo risolto tutti i problemi contemporaneamente. Persino il nostro editor basato su codice, che sembra essere il più forte sul vasto mercato degli strumenti di progettazione, ha avuto un problema di unificazione delle fonti della verità. Il nostro strumento ha aiutato i progettisti a evitare molti fraintendimenti, ma non avevamo modo di stabilire una connessione duratura con i componenti codificati esistenti in un sistema di progettazione. Non ce l'avevamo ... fino ad ora.

Quasi 2 anni fa, abbiamo iniziato a lavorare per costruire una connessione duratura tra design e ingegneria. Dopo aver esplorato più idee, abbiamo deciso di perseguire il seguente flusso di lavoro:

  • UXPin si connette a un repository Git (lo strumento da riga di comando viene installato come dipendenza a livello di progetto)
  • UXPin apprende il codice dei componenti archiviati nel repository e serializza il suo contenuto
  • UXPin esegue il processo di generazione e consegna il codice di produzione all'editor di progettazione di UXPin, dove tutti i componenti sono identici all'ambiente di produzione, completamente interattivi e disponibili per i progettisti (anche se non sanno come programmare)
  • UXPin consente la connessione a un server di integrazione continua per consentire la sincronizzazione automatica tra un repository Git e il nostro editor di progettazione (ogni modifica al codice di produzione si riflette automaticamente nei componenti nell'editor di progettazione di UXPin)
  • UXPin mostra specifiche precise per tutti i progetti di design che mostreranno frammenti di codice informativo per dire agli sviluppatori come implementare un determinato design

Questo approccio era estremamente ambizioso e molto più ampio rispetto a qualsiasi soluzione competitiva. Fin dall'inizio volevamo evitare:

  • Creazione di una funzione espediente in grado di attirare un po 'di attenzione sul mercato, ma non riuscendo a risolvere i problemi chiave del flusso di lavoro di progettazione-ingegneria
  • Costringere i progettisti a imparare a programmare (che caratterizza l'approccio adottato da Framer)
  • Costringendo i team a implementare la nostra soluzione di flusso di lavoro per creare codice solo per UXPin (invece abbiamo creduto in un approccio plug and play, in cui il codice di produzione non modificato può essere utilizzato da UXPin).

Ci sono voluti oltre 18 mesi, ma sono felice di dire che UXPin Merge ha appena fornito una soluzione che unifica veramente design e ingegneria in un flusso di lavoro continuo.

Unire si collega perfettamente a qualsiasi repository GIT, importa i componenti React.js (supporto di più librerie e framework in futuro!) Nell'editor di progettazione di UXPin e mantiene sincronizzate tutte le versioni grazie all'integrazione CI. Qualunque cosa esista nel codice, esiste in UXPin, offrendo ai progettisti l'accesso a componenti codificati reali senza costringerli ad apprendere la codifica.

Con l'integrazione CI UXPin Merge si occupa della sincronizzazione dello strumento Code - Design.

Con UXPin Merge, i progettisti e gli ingegneri utilizzano un'unica fonte di verità e possono finalmente lavorare insieme senza inutili equivoci e frustrazioni. Indovina un po? La perfetta implementazione di un sistema di progettazione è possibile.

Componenti complessi come i selettori di data sono immediatamente disponibili per i progettisti.

UXPin Merge è attualmente in beta chiusa. Iscriviti per un accesso anticipato di seguito. Ai nostri clienti e credenti più appassionati in un flusso di lavoro unificato (se sei tu, facci sapere cosa ne pensi su Twitter!) Verrà loro offerto l'accesso per primo. Ci vediamo dall'altra parte.

Ottieni l'accesso anticipato a UXPin Merge