Negli ultimi mesi ho aiutato a sviluppare e integrare un'istanza WordPress altamente personalizzata per un cliente. È piuttosto l'equilibrio tra lo stile, l'estensione di WordPress attraverso campi personalizzati, tipi di post personalizzati, un framework di progettazione, un tema figlio e plug-in personalizzati.
La parte difficile è che lo sto facendo da semplici prototipi da una piattaforma di prototipazione proprietaria. Sebbene sia una solida piattaforma per la visualizzazione e il design, non si traduce facilmente in HTML5 e CSS3. Aggiungi tutte le altre iterazioni e le mie giornate diventano piuttosto frustranti con i progressi estremamente lenti.
Un pezzo del puzzle è che l'agenzia di design ha semplicemente consegnato i prototipi, senza fornire alcun tipo di foglio di stile principale ... quindi stiamo lavorando per realizzarlo esportando i prototipi in zepline quindi tradurre il CSS in WordPress. Il numero di passaggi necessari e gli spazi tra le piattaforme lo rendono un processo difficile. Per non parlare del tentativo di semplificare le complessità per velocità e scalabilità
Figma
Figma centralizza gran parte di questo lavoro con una piattaforma che consente progettazione, feedback e collaborazione in ogni membro del team, tra cui:
- Designers - Collabora nel contesto e in tempo reale. Non preoccuparti mai che i tuoi file non siano aggiornati o che si sovrascrivano a vicenda.
- Stakeholder - Invia un collegamento per raccogliere feedback, ricevere richieste di modifica e consentire alle parti interessate di eseguire copie di aggiornamenti nei tuoi progetti.
- Sviluppatori - Gli ingegneri hanno sempre accesso all'attuale fonte di verità e possono ispezionare elementi, esportare risorse e copiare codice.
Figma ha alcune caratteristiche uniche:
- Operazioni booleane - Con quattro formule: unione, sottrazione, intersezione ed esclusione, puoi combinare con precisione qualsiasi insieme di livelli forma.
- Componenti - Crea più velocemente e in modo più coerente con elementi riutilizzabili e scalabili nei tuoi file. Accedi ai livelli in ogni istanza in modo da poter modificare e sostituire in modo intuitivo testo e immagini in linea.
- vincoli - Ridimensiona il tuo progetto per adattarlo a qualsiasi dimensione dello schermo fissando gli oggetti a un frame principale, agganciando gli oggetti a una griglia o persino creando componenti in scala.
- Frame del dispositivo - Presenta i tuoi progetti negli ambienti giusti. Puoi anche scegliere tra la modalità verticale e orizzontale.
- Interazioni - Dai vita ai tuoi prototipi definendo le interazioni al clic, al passaggio del mouse, alla pressione e altro ancora.
- Sovrapposizioni - Con il posizionamento relativo e manuale hai il pieno controllo su dove e come appaiono le sovrapposizioni.
- Pixel-perfezione - L'editing interattivo a 60 fps ti offre anteprime ed esportazioni estremamente nitide e perfette per i pixel.
- Prototipazione - Crea rapidamente flussi collegando schermate e aggiungendo elementi come interazioni, transizioni, sovrapposizioni e altro ancora. Invece di sincronizzarti con altri strumenti, condividi semplicemente un URL per ricevere feedback.
- Responsive design - Allunga i tuoi layout e guarda come risponderanno ai cambiamenti nelle dimensioni dello schermo.
- Scorrimento - Abilita lo scorrimento orizzontale, verticale o in qualsiasi direzione all'interno delle singole forme o dell'intero frame principale.
- Stili - Sincronizza colori, testo, griglie ed effetti in tutti i tuoi progetti. Mantieni meno stili di testo e allinea i tuoi disegni su diversi dispositivi con gli stili di griglia unici di Figma.
- Librerie del team - Condividi componenti e stili in Figma: non sono necessari drive condivisi o strumenti aggiuntivi. Tu e il tuo team potete controllare come e quando vengono implementate le modifiche con semplici flussi di lavoro di pubblicazione.
- Reti vettoriali - Figma ha creato lo strumento penna per essere più intuitivo, consentendo la manipolazione diretta preservando la retrocompatibilità con i percorsi.
Fatti impresa clienti, Figma può promuovere coerenza, efficienza e sicurezza su larga scala. La piattaforma consente ai clienti aziendali di gestire facilmente i sistemi di progettazione con le librerie dei team e la possibilità di caricare e condividere caratteri personalizzati in tutta l'organizzazione. Sono inclusi Single Sign-On, controlli di accesso e registri delle attività.
Inizia con Figma
Figma ha una vasta selezione di tutorial che mantengono sul loro file Canale Youtube, ecco un video introduttivo:
Figma offre agli sviluppatori la possibilità di ispezionare, copiare, esportare risorse e copiare CSS direttamente dal file di progettazione. Puoi anche abilitare i tuoi flussi di lavoro esistenti con integrazioni, tra cui zeplin, Avocodice, Jira, dropbox, ProtoPiee Principio per Mac. Hanno anche un'API robusta.
