Responsive Flex Grid i Sketch ved hjælp af AutoLayout og Stack Groups

Forbedring af designsystemer til struktur, modularitet og skala

Værktøjer som FlexBox i CSS, UIStackView i iOS og FlexboxLayout i Android har længe givet udviklere de nødvendige arbejdsgange til at håndtere de mange adaptive og lydhør visninger, der findes i dag.

For designere har layoutdesignprocessen i nogle af vores foretrukne designværktøjer altid været mere manuel, mere statisk, mere trættende og generelt mindre matematisk præcis. Men takket være det fantastiske arbejde, som folk i Anima har, kan vi måske snart have den struktur og fleksibilitet, vi har brug for, for at forbedre broen.

Med den nye Stacks-funktion, der er samlet i det nyeste Auto-Layout-plugin, har vi nu en arbejdsgang, der passer bedre til UI-output og lader os opnå mere konsistens og vedligeholdelighed på tværs af vores designsystemer. (Ansvarsfraskrivelse - Dette koncept er stadig på et tidligt tidspunkt. Ikke alle typer layout vil drage fordel af dette system, så mix og match, som du finder det passende).

Demoen

I videoen herunder har jeg sammensat et proof-of-concept flex-gitterlayout for at fremvise Stackes ægthed. Det er et tegnebræt, der spejler strukturen på en grundlæggende webside.

Mens den stadig er i tidlige efterforskningsfaser, bages følgende funktionalitet i skabelonen:

  • Desktop til mobil med et par klik.
  • Artboards er ændret til størrelse, og justering / distribution af gitter går ikke i stykker
  • Rist struktureret af:
  • Legeme
     - Header
     - Hoved
     - —afsnit
     - - - rækkegrupper (har søskekasse-størrelseslag)
     - - - - rækker
     - - - - - kolonner
     - - - - - - - moduler
     - - - - - - - komponenter (indlejrede symboler m / intern logik)
     - Sidefod
  • Brug indlejrede symboler, defineret af en kombination af egenskaber for skitse-størrelse, autolayout-fastgørelse og stakegrupper til at oprette et modulopbygget system med udskiftelige komponenter.
  • Layoutet tilpasses til artboardbredde (indholdet har en maksimal bredde på 1200px, og mobilenheden har indbyggede tagrender).
  • Forskellige søjlefordelinger og let sammenklapning / ændring af tagrender.
  • og
    vokser og krymper uafhængigt af
    .
  • Højde ændres til
    skubbe ned på tegnebrættet, mens du holder margener og polstringer intakte, som en webside ville.
  • Højden på kan justeres for at påvirke højden på børnesøjler
  • Justeringen af ​​kolonner (øverste, midterste, nederste, strækning) kan defineres på række niveau.
  • Tilføjelse af en ny kolonne (eller sletning af en) fra rækken justerer automatisk bredden på søskensøjler, så de passer i overensstemmelse hermed.
  • Tilføjelse af et nyt underordnet modul i kolonnen vil få denne søjle til at vokse lodret (moduler indeholder et hvilket som helst antal indholdstyper, såsom billeder, tekst, lister, tabeller, grupper og symboler)
  • Tilpasningen af ​​moduler (venstre, midt, højre, strækning) kan defineres på kolonniveau.
  • symbol skift komponenter for at erstatte indhold eller fastlægge nye lag til den eksisterende komponent.
  • Skrivebordets artboard er indstillet til at bruge et 8pt basislinjenet.

Sketch-filen

Her er det. Du er velkommen til at forbedre det på nogen måde og fortæl mig det.
* VIGTIGT * - Filen fungerer IKKE, medmindre du har den seneste udgivelse af Auto Layout med Stacks Support (.0.2.0 fra dette tidspunkt).

https://cl.ly/2v2I373P2E1f

Nogle sidste tanker

Jeg håber, det var nyttigt for nogle mennesker. Jeg ved, at jeg vil undersøge mulighederne for Autolayout og Stacks dybere. Fra denne version har jeg bemærket et par små påfald med matematik afrundingen, men forhåbentlig bliver de ordnet ud i tide. Blandt nogle af de anmodninger, jeg har foreslået til devs, tror jeg, disse kan være værdifulde.

  • Muligheden for at tilføje en baggrund til en stablet gruppe (forælderække i kolonnerne) uden at påvirke stakkelogikken. I HTML / CSS ville dette ganske enkelt ske på eller “div” niveau, men Sketch tillader ikke en måde at gøre det på nuværende tidspunkt.
    Der er en tilgang til at gøre dette lige nu, som involverer at gruppere et baggrundslag med en stablet gruppe og fastlægge bg til top / venstre / 100% bredde og højde, og mens baggrunden vokser til at rumme indholdet, krymper den ikke, når indholdet fjernes. Jeg tror, ​​at krympningen allerede findes på holdets TO-DO-liste.
  • Introduktion af breakpoints i tegnebrættet og bytte af symboler baseret på tegnebrættet (bytte en 4-punkts nav med et hamburgerikon, når tegnebræt <400px, eller endnu bedre, ved hjælp af en containerspørgsmålstilgang.
  • Med nævnte breakpoints er muligheden for at skifte mellem vandrette til lodrette stablede grupper, således at søjlerne stables oven på hinanden, når der ikke er tilstrækkelig plads. Og for kolonner, der skal indpakkes, hvis angivet.
  • Muligheden for at specificere procentdelbredde pr. Kolonne.
    (Opdatering - En version af denne idé er netop implementeret i plugin ved hjælp af funktionen Vægter)
  • Selvom dette ikke nødvendigvis falder på Anima-teamet, skal Sketch også introducere understøttelse af variabler, især nu med egenskaber som afstand, min og maks-højder og andre værdier, der skal holdes konsistente på tværs af flere lag. Disse variabler kunne også bruges til at kortlægge farver også og hjælpe med Sass-overdragelsesprocessen.

Det er alt, hvad jeg har! Ville bare give et råb til teamet på Anima igen. De er utroligt talentfulde, lydhøre og indbydende, så sørg for at støtte deres hårde arbejde! Deltag i deres Facebook-side.

Hvis du har spørgsmål eller (nice!) Kommentarer, er du velkommen til at skrive nedenfor eller nå ud på Twitter.