Griglia Flex reattiva in Sketch usando AutoLayout e Stack Group

Miglioramento dei sistemi di progettazione per struttura, modularità e scala

Strumenti come FlexBox in CSS, UIStackView in iOS e FlexboxLayout in Android hanno da tempo fornito agli sviluppatori i flussi di lavoro necessari per gestire la moltitudine di visualizzazioni adattive e reattive che esistono oggi.

Per i progettisti, tuttavia, il processo di progettazione del layout in alcuni dei nostri strumenti di progettazione preferiti è sempre stato più manuale, più statico, più noioso e generalmente meno matematicamente preciso. Ma grazie all'incredibile lavoro svolto dalla gente di Anima, potremmo presto avere la struttura e la flessibilità di cui abbiamo bisogno per colmare meglio questa lacuna.

Con la nuova funzionalità Stacks inclusa nell'ultimo plug-in Auto-Layout, ora abbiamo un flusso di lavoro che soddisfa meglio l'output dell'interfaccia utente e ci consente di ottenere maggiore coerenza e manutenibilità attraverso i nostri sistemi di progettazione. (Dichiarazione di non responsabilità - Questo concetto è ancora in una fase iniziale. Non tutti i tipi di layout trarranno beneficio da questo sistema, quindi mescola e abbina come meglio credi).

La demo

Nel video qui sotto, ho messo insieme un layout di griglia flessibile di prova per mostrare la bellezza di Stack. È una tavola da disegno che rispecchia la struttura di una pagina web di base.

Mentre è ancora nelle prime fasi esplorative, la seguente funzionalità è inserita nel modello:

  • Desktop per dispositivi mobili in pochi clic.
  • Le tavole da disegno sono ridimensionabili e l'allineamento / distribuzione della griglia non si interrompe
  • Griglia strutturata da:
  • Corpo
     - Intestazione
     - Principale
     - —sections
     - - - gruppi di righe (ha un livello di ridimensionamento della casella di pari livello)
     - - - - righe
     - - - - - colonne
     - - - - - - moduli
     - - - - - - - componenti (simboli nidificati con logica interna)
     - Piè di pagina
  • Utilizzare simboli nidificati, definiti da una combinazione di proprietà di ridimensionamento di schizzo, pinzatura di prelievo automatico e gruppi di stack per creare un sistema modulare di componenti sostituibili.
  • Il layout si adatta alla larghezza della tavola da disegno (il contenuto ha una larghezza massima di 1200 px e il mobile ha grondaie integrate).
  • Varietà di distribuzioni di colonne e facile collasso / modifica di grondaie.
  • e
    crescono e si restringono indipendentemente da
    .
  • L'altezza cambia in
    spingendo
    verso il basso nella tavola da disegno, mantenendo intatti i margini e le imbottiture come farebbe una pagina web.
  • L'altezza di può essere regolata per influenzare l'altezza delle colonne figlio
  • L'allineamento delle colonne (superiore, centrale, inferiore, tratto) può essere definito a livello di riga.
  • L'aggiunta di una nuova colonna (o l'eliminazione di una) dalla riga regola automaticamente la larghezza delle colonne di pari livello per adattarle di conseguenza.
  • L'aggiunta di un nuovo modulo figlio all'interno della colonna farà crescere quella colonna verticalmente (i moduli contengono un numero qualsiasi di tipi di contenuto, come immagini, testo, elenchi, tabelle, gruppi e simboli)
  • L'allineamento dei moduli (sinistro, centrale, destro, tratto) può essere definito a livello di colonna.
  • simbolo scambia i componenti per sostituire il contenuto o aggiungere nuovi livelli al componente esistente.
  • La tavola da disegno desktop è stata impostata per utilizzare una griglia di base 8pt.

Il file di schizzo

Ecco qui. Sentiti libero di migliorarlo in qualsiasi modo e fammi sapere.
* IMPORTANTE * - Il file NON funzionerà se non si dispone dell'ultima versione di Auto Layout con supporto pile (.0.2.0 al momento della stesura).

https://cl.ly/2v2I373P2E1f

Alcuni pensieri finali

Spero che sia stato utile per alcune persone. So che esplorerò le possibilità di Autolayout e Stack più in profondità. A partire da questa versione, ho notato alcune piccole stranezze con l'arrotondamento della matematica, ma spero che quelle verranno risolte in tempo. Tra alcune delle richieste che ho suggerito agli sviluppatori, penso che potrebbero essere preziose.

  • La possibilità di aggiungere uno sfondo a un gruppo sovrapposto (riga principale delle colonne) senza influire sulla logica dello stack. In HTML / CSS, questo sarebbe semplicemente fatto a livello di o “div”, ma Sketch non consente un modo per farlo fin d'ora.
    Esiste un approccio per fare questo in questo momento che prevede il raggruppamento di un livello di sfondo con un gruppo impilato e il blocco del bg in alto / a sinistra / 100% di larghezza e altezza, e mentre lo sfondo cresce per adattarsi al contenuto, non si riduce quando il contenuto è stato rimosso. Credo che il restringimento sia già nella lista delle cose da fare del team.
  • Introduzione di punti di interruzione nella tavola da disegno e scambio di simboli basato sulla tavola da disegno (scambio di un nav di 4 elementi con un'icona di hamburger quando tavola da disegno <400px, o meglio ancora, usando un approccio di query contenitore.
  • Con detti punti di interruzione, la possibilità di alternare tra gruppi impilati orizzontali e verticali, in modo tale che le colonne si sovrappongano l'una sull'altra quando lo spazio è insufficiente. E per le colonne da avvolgere se specificato.
  • La possibilità di specificare la larghezza percentuale per colonna.
    (Aggiornamento - Una versione di questa idea è stata appena implementata nel plugin utilizzando la funzione Pesi)
  • Sebbene ciò non rientri necessariamente nel team di Anima, Sketch dovrebbe anche introdurre il supporto per le variabili, soprattutto ora con proprietà come spaziatura, altezza minima e massima e altri valori che devono essere mantenuti coerenti su più livelli. Queste variabili potrebbero essere ulteriormente utilizzate per mappare anche i colori e aiutare nel processo di handoff Sass.

Bene, questo è tutto quello che ho! Volevo solo dare una scossa alla squadra di Anima ancora una volta. Sono incredibilmente talentuosi, reattivi e invitanti, quindi assicurati di sostenere il loro duro lavoro! Unisciti alla loro pagina Facebook.

Se hai domande o commenti (carini!), Non esitare a postare qui sotto o a contattare Twitter.