Sviluppo del sistema di progettazione. Come evitare routine impreviste.

Quattro semplici cose da ricordare e seguire prima dello sviluppo del sistema di progettazione

Se stai sviluppando sistemi di progettazione, probabilmente hai imparato che la sequenza è importante. Quando un componente o un simbolo è stato creato e lo hai moltiplicato prima che gli siano state assegnate le proprietà necessarie, è diventato possibile il rischio di una routine.

Esempio: hai creato il componente da simboli nidificati al suo interno. Se hai dimenticato di specificare i parametri / vincoli di ridimensionamento in tempo, tutti i clonati vengono ridimensionati in modo errato.

Accelera i tempi di progettazione e sviluppo fino al 50%

Il sistema di progettazione dei materiali per Figma è costituito esattamente da 512 componenti dell'interfaccia utente dei materiali e 1171 icone dei materiali.

  • Architettura unica per una rapida personalizzazione
  • Dotato di documentazione semplice e chiara
  • Dedicato per adattarsi alle applicazioni desktop e mobili
  • Realizzato con le seguenti linee guida per la progettazione dei materiali
  • Utilizza al massimo le funzionalità "Istanza" di Figma
  • Supporta l'API Web Figma per l'integrazione in tempo reale
  • I clienti supportano 7 giorni alla settimana!

Ulteriori informazioni → http://setproduct.com/material

Se hai ancora dubbi, ti consiglio di guardare la panoramica

① Formare un elenco di elementi ripetuti

Identifica e raggruppa tutti gli oggetti ricorrenti in layout, prototipo o concetto esatti. Non solo pulsanti nella lista. Etichette, icone, input, intestazioni e così via. Vale la pena aggiungere sfondi e persino parametri di ombre, se si desidera creare un sistema sufficientemente flessibile. Di seguito imparerai lo scopo di queste azioni.

Alcuni dei componenti ripetuti

② Determinare tutti gli stati possibili

Ora inizia a formare un elenco per un tipo di elementi in cui la risposta del sistema è possibile o l'utente probabilmente interagirà con. Se la tua missione richiede la descrizione di stati anche onhover, consiglierei di mantenere questo processo in un secondo momento fino alle ultime fasi di sviluppo, quando tutti i componenti sono visivamente noti e quindi puoi chiederti “Quale di essi richiede di essere clonato per stati aggiuntivi ?”

Pochi stati possibili per gli input di testo

③ Regola i vincoli o ridimensiona i parametri

Regalati una regola: "quando lavoro su un componente, tengo sempre a mente come si ridimensiona". Potresti ricordare l'esempio da cui ho iniziato questo post? La linea di fondo è che è necessario impostare i vincoli / i parametri di ridimensionamento immediatamente dopo aver convertito il frame in un componente. Altrimenti, rimarrai bloccato con la routine nel caso in cui dovrai regolarlo manualmente per ogni elemento in futuro.

Le icone che ridimensionano i parametri sono impostate per scattare a destra

④ I nomi accessibili sono arrivati ​​per primi, afferma - dopo

Il componente è stato predisposto e lo clonerai per altri stati? Eccellente, ma per la prima applica un nome accessibile ad esso. Abbi cura di te e del team di sviluppo e usa nomi chiari. Tieni presente che il componente clonato conserva il nome del genitore. Se preferisci l'ordine, mi aspetto che il tuo campo di testo suoni come:

Campi di testo / Sottolineato / Predefinito

Ora il componente può essere clonato in modo sicuro. Quindi scollega l'istanza, applica le modifiche visive necessarie e alla fine rimane solo da modificare:

Campi di testo / Sottolineato / Attivo

⑤ Qualcosa per il dessert

Nessuna routine Il mio processo di progettazione ora è impegnato con il sistema di progettazione e mostrato in diretta su YouTube:

La linea di fondo ⤑ mantiene la sequenza ♛

Questo è tutto sulle basi per oggi. Non ci sono dubbi, ci sono molte più sfumature nello sviluppo dei sistemi di progettazione, forse descriverò più avanti. Per favore, condividi nei commenti i tuoi metodi / passaggi quando inizi a progettare il sistema da zero. Saluti.

Qual è il prossimo? Avvia rapidamente il tuo progetto di progettazione dei materiali con questa libreria Figma

Creato con il sistema di prototipazione dei materiali per Figma
❶ Esplora il sistema → http://setproduct.com/material
❷ Panoramica dei componenti → http://setproduct.com/material/components
❸ Altri video → http://setproduct.com/material/videos
❹ Acquista e scarica → http://setproduct.com/material/download
❺ 1000+ icone dei materiali → http://setproduct.com/material/icons_pro