Responsive Flex Grid in Sketch met behulp van AutoLayout en Stack Groups

Verbetering van ontwerpsystemen voor structuur, modulariteit en schaal

Tools zoals FlexBox in CSS, UIStackView in iOS en FlexboxLayout in Android hebben ontwikkelaars al lang de nodige workflows gegeven om de vele adaptieve en responsieve weergaven aan te kunnen die vandaag bestaan.

Voor ontwerpers is het lay-outontwerpproces in sommige van onze favoriete ontwerptools echter altijd handmatiger, statischer, saaier en over het algemeen minder wiskundig nauwkeurig geweest. Maar dankzij het geweldige werk van de mensen bij Anima, hebben we misschien binnenkort de structuur en flexibiliteit die we nodig hebben om die kloof beter te overbruggen.

Met de nieuwe Stacks-functie die is gebundeld in de nieuwste Auto-Layout plug-in, hebben we nu een workflow die de UI-uitvoer beter aanpast en waarmee we meer consistentie en onderhoudbaarheid in onze ontwerpsystemen kunnen bereiken. (Disclaimer - Dit concept bevindt zich nog in een vroeg stadium. Niet elk type lay-out zal baat hebben bij dit systeem, dus mix en match naar eigen inzicht).

De demo

In de onderstaande video heb ik een proof-of-concept flex grid-indeling samengesteld om de geweldigheid van Stacks te laten zien. Het is een tekengebied dat de structuur van een eenvoudige webpagina weerspiegelt.

Hoewel het nog in een vroeg verkennend stadium is, is de volgende functionaliteit in de sjabloon ingebakken:

  • Desktop naar mobiel in een paar klikken.
  • Tekengebieden kunnen worden aangepast en rasteruitlijning / distributie breekt niet
  • Raster gestructureerd door:
  • Lichaam
     - Koptekst
     - Hoofd
     - —secties
     - - - rijen groepen (heeft een broer / zus grootte)
     - - - - rijen
     - - - - - kolommen
     - - - - - - modules
     - - - - - - - componenten (geneste symbolen met interne logica)
     - Voettekst
  • Gebruik geneste symbolen, gedefinieerd door een combinatie van Sketch Resize-eigenschappen, automatisch vastzetten en stapelgroepen om een ​​modulair systeem van verwisselbare componenten te maken.
  • De lay-out past zich aan de breedte van het tekengebied aan (inhoud heeft een maximale breedte van 1200 px en mobiel heeft ingebouwde rugmarge).
  • Verscheidenheid van kolomverdelingen en eenvoudig inklappen / aanpassen van goten.
  • en
    groeien en krimpen onafhankelijk van
    .
  • De hoogte verandert in duwt de
    omlaag in het tekengebied, terwijl marges en opvullingen intact blijven zoals een webpagina.
  • De hoogte van kan worden aangepast om de hoogte van onderliggende kolommen te beïnvloeden
  • De uitlijning van kolommen (boven, midden, onder, uitrekken) kan worden gedefinieerd op rijniveau.
  • Als u een nieuwe kolom toevoegt (of er een verwijdert) uit de rij, wordt de breedte van de zusterkolommen automatisch aangepast.
  • Door een nieuwe onderliggende module in de kolom toe te voegen, groeit die kolom verticaal (modules bevatten een willekeurig aantal inhoudstypen, zoals afbeeldingen, tekst, lijsten, tabellen, groepen en symbolen)
  • De uitlijning van modules (links, midden, rechts, stretch) kan op kolomniveau worden gedefinieerd.
  • symbool verwissel componenten om inhoud te vervangen of nieuwe lagen vast te maken aan de bestaande component.
  • Het bureaublad-tekengebied is ingesteld om een ​​basislijnraster van 8pt te gebruiken.

Het schetsbestand

Hier is het. Voel je vrij om het op elke manier te verbeteren en laat het me weten.
* BELANGRIJK * - Het bestand werkt NIET tenzij u de nieuwste versie van Auto Layout met Stacks-ondersteuning (.0.2.0 vanaf dit schrijven) hebt.

https://cl.ly/2v2I373P2E1f

Enkele laatste gedachten

Ik hoop dat dat nuttig was voor sommige mensen. Ik weet dat ik de mogelijkheden van Autolayout en Stacks dieper zal onderzoeken. Vanaf deze versie heb ik een paar kleine eigenaardigheden opgemerkt met de wiskundige afronding, maar hopelijk worden die op tijd opgelost. Onder sommige van de verzoeken die ik aan de ontwikkelaars heb voorgesteld, denk ik dat deze waardevol kunnen zijn.

  • De mogelijkheid om een ​​achtergrond toe te voegen aan een gestapelde groep (bovenliggende rij van de kolommen) zonder de stapellogica te beïnvloeden. In HTML / CSS zou dit eenvoudig worden gedaan op het niveau of “div”, maar Sketch biedt geen manier om dat vanaf nu te doen.
    Er is een benadering om dit nu te doen, waarbij een achtergrondlaag met een gestapelde groep wordt gegroepeerd en de bg naar boven / links / 100% breedte en hoogte wordt vastgezet, en terwijl de achtergrond groeit om de inhoud te accommoderen, krimpt deze niet wanneer de inhoud is verwijderd. Ik geloof dat het krimpen al op de TO-DO lijst van het team staat.
  • De introductie van breekpunten in het tekengebied en symboolwisseling op basis van het tekengebied (een navigatie van 4 items met een hamburgerpictogram verwisselen bij tekengebied <400 px, of beter nog, met behulp van een containerquerybenadering.
  • Met genoemde breekpunten, de mogelijkheid om te schakelen tussen horizontaal naar verticaal gestapelde groepen, zodat de kolommen op elkaar stapelen wanneer er onvoldoende ruimte is. En voor kolommen om te wikkelen indien gespecificeerd.
  • De mogelijkheid om percentagebreedte per kolom op te geven.
    (Update - Een versie van dit idee is zojuist in de plug-in geïmplementeerd met behulp van de functie Gewichten)
  • Hoewel dit niet noodzakelijkerwijs op het Anima-team zou vallen, zou Sketch ook ondersteuning voor variabelen moeten introduceren, vooral nu met eigenschappen zoals afstand, minimale en maximale hoogten en andere waarden die consistent moeten worden gehouden over verschillende lagen. Deze variabelen kunnen verder worden gebruikt om ook naar kleuren toe te wijzen en te helpen bij het Sass-overdrachtsproces.

Nou, dat is alles wat ik heb! Ik wilde het team van Anima gewoon nog een keer schreeuwen. Ze zijn ongelooflijk getalenteerd, responsief en uitnodigend, dus zorg ervoor dat je hun harde werk ondersteunt! Word lid van hun Facebook-pagina.

Als je vragen of (leuke!) Opmerkingen hebt, kun je deze hieronder posten of contact opnemen met Twitter.