Responsive Flex Grid in Sketch ved hjelp av AutoLayout og Stack Groups

Forbedring av designsystemer for struktur, modularitet og skala

Verktøy som FlexBox i CSS, UIStackView i iOS og FlexboxLayout i Android har lenge gitt utviklere de nødvendige arbeidsflytene for å håndtere mangfoldige tilpasningsdyktige og responsive synspunkter som finnes i dag.

For designere har imidlertid utformingsprosessen i noen av våre favorittdesignverktøy alltid vært mer manuell, mer statisk, mer kjedelig og generelt mindre matematisk presis. Men takket være det fantastiske arbeidet fra folk på Anima, kan det hende at vi snart har strukturen og fleksibiliteten vi trenger for å bedre det gapet.

Med den nye Stacks-funksjonen som er satt sammen i den nyeste Auto-Layout-plugin, har vi nå en arbeidsflyt som gir bedre plass til brukergrensesnittet og lar oss oppnå mer konsistens og vedlikehold på tvers av designsystemene våre. (Ansvarsfraskrivelse - Dette konseptet er fremdeles på et tidlig stadium. Ikke alle typer oppsett vil dra nytte av dette systemet, så miks og match som du vil).

Demoen

I videoen nedenfor har jeg satt sammen et proof-of-concept flex-rutenettoppsett for å vise frem awesomeness av Stacks. Det er et tavle som speiler strukturen på en grunnleggende webside.

Mens den fremdeles er i tidlige utforskende stadier, bakes følgende funksjonalitet inn i malen:

  • Desktop til mobil med noen få klikk.
  • Tavler kan endres størrelse og nettjustering / distribusjon går ikke i stykker
  • Rutenett strukturert av:
  • Kropp
     - Overskrift
     - Hoved
     - seksjoner
     - - - rader grupper (har søskenboksstørrelseslag)
     - - - - rader
     - - - - - kolonner
     - - - - - - moduler
     - - - - - - - komponenter (nestede symboler m / intern logikk)
     - Bunntekst
  • Bruk nestede symboler, definert av en kombinasjon av skissestørrelsesegenskaper, autolayout-festing og stabelgrupper for å lage et modulbasert system med byttbare komponenter.
  • Oppsettet justeres til tavlebredde (innholdet har en maksimal bredde på 1200px, og mobilen har innebygde takrenner).
  • Ulike kolonnefordelinger og enkel kollaps / modifisering av takrenner.
  • og
    vokser og krymper uavhengig av
    .
  • Høydeendringer til
    skyv ned på tavlen, mens du holder marginer og paddinger intakte som en webside ville gjort.
  • Høyden på kan justeres for å påvirke høyden på barnesøyler
  • Innretningen av kolonner (topp, midt, bunn, strekning) kan defineres på radenivå.
  • Å legge til en ny kolonne (eller slette en) fra raden justerer automatisk bredden på søskenkolonnene slik at de passer deretter.
  • Ved å legge til en ny barnemodul i kolonnen vil den kolonnen vokse vertikalt (moduler inneholder et hvilket som helst antall innholdstyper, for eksempel bilder, tekst, lister, tabeller, grupper og symboler)
  • Innretningen av moduler (venstre, sentrum, høyre, strekning) kan defineres på kolonnivå.
  • symbol bytt komponenter for å erstatte innhold eller feste nye lag til den eksisterende komponenten.
  • Skrivebordets artboard er satt opp for å bruke et 8pt baseline rutenett.

Skissefilen

Her er det. Føl deg fri til å forbedre det på noen måte og gi beskjed.
* VIKTIG * - Filen fungerer IKKE med mindre du har den siste utgaven av Auto Layout med Stacks Support (.0.2.0 fra og med dette skrivet).

https://cl.ly/2v2I373P2E1f

Noen siste tanker

Jeg håper det var nyttig for noen mennesker. Jeg vet at jeg vil utforske mulighetene for Autolayout og Stacks dypere. Fra denne versjonen har jeg lagt merke til noen få små påfall med matematikkrundingen, men forhåpentligvis blir de sortert ut i tide. Blant noen av forespørslene jeg har foreslått til devs, tror jeg at disse kan være verdifulle.

  • Muligheten til å legge til en bakgrunn til en stablet gruppe (overordnet rad i kolonnene) uten å påvirke stabellogikken. I HTML / CSS vil dette ganske enkelt gjøres på eller "div" -nivå, men Sketch tillater ikke en måte å gjøre det på nå.
    Det er en tilnærming for å gjøre dette akkurat nå som innebærer å gruppere et bakgrunnslag med en stablet gruppe og feste bg til topp / venstre / 100% bredde og høyde, og mens bakgrunnen vokser for å få plass til innholdet, krymper den ikke når innholdet fjernes. Jeg tror at krympingen allerede er på teamets TO-DO-liste.
  • Innføringen av banepunkter i tavlen og bytte av symboler basert på tavlen (bytte en 4-punkts nav med et hamburgerikon når tavle <400px, eller enda bedre, ved å bruke en containerspørringstilnærming.
  • Med nevnte bruddpunkter er muligheten til å veksle mellom horisontale til vertikale stablede grupper, slik at kolonnene stabler oppå hverandre når det ikke er nok plass. Og for at kolonner skal pakkes hvis det er spesifisert.
  • Muligheten til å spesifisere prosentvis bredde per kolonne.
    (Oppdatering - En versjon av denne ideen er nettopp implementert i pluginen ved å bruke vekterfunksjonen)
  • Selv om dette ikke nødvendigvis vil falle på Anima-teamet, bør Sketch også introdusere støtte for variabler, spesielt nå med egenskaper som avstand, min og maks-høyde, og andre verdier som bør holdes konsistente på tvers av flere lag. Disse variablene kan også brukes til å kartlegge til farger også, og hjelpe til med Sass-overleveringsprosessen.

Det er alt jeg har! Ville bare gi en shoutout til teamet på Anima nok en gang. De er utrolig talentfulle, lydhøre og innbydende, så vær sikker på å støtte deres harde arbeid! Bli med på Facebook-siden deres.

Hvis du har spørsmål eller (fine!) Kommentarer, kan du gjerne poste nedenfor eller nå ut på Twitter.