Responsiv design i skitse - Del 1

Hvad er nyt i funktionen til gruppens størrelse.

Med den nyeste version af Sketch (v.44) er gruppens størrelse til ændring blevet opdateret. Selvom der ikke er nogen grundlæggende ændring, har vi lidt mere kontrol over funktionen nu.

Jeg har skrevet om denne funktion før i detaljer. I denne artikel vil jeg dække opdateringerne og give nogle nye tip. I den næste del af denne artikel vil jeg sammenligne funktionen til gruppens størrelse med Animas plug-in til automatisk layout.

Kort ændring af størrelsesfunktion

Før jeg kommer til ændringer, vil jeg hurtigt forklare funktionen til gruppens størrelse til begyndere.

Det er en funktion til at gøre lag lydhør over for størrelse på forældregruppe eller tegnebræt. På den måde, når du ændrer størrelse på grupperne, og alle lagene indeni ville reagere som de skulle, i stedet for bare at strække og derfor deformere.

Hvad er ændret?

Med hensyn til kapacitet er der ikke meget ændringer, der vil gøre væsentlig forskel i output. Nu har vi mere indflydelse på detaljerne som at sætte laget fast på de sider, du ønsker. På den anden side ser kontrollerne muligvis mindre tydelige ud for førstegangsbrugere, især når de konfigureres til flydende og strækningsmetoder; men ingen bekymringer, det er let at finde ud af det!

Jeg kan sige, at du også kunne gøre de fleste af tingene i den forrige version. Måske kræver det nogle hacks som at bruge usynlige lag, men alligevel kan du gøre. Så denne opdatering bør ikke betragtes som en væsentlig fremgang i den responsive designfunktion, det var sådan, den skulle være i første omgang.

Et rigt eksempel, der dækker de fleste muligheder

Den vigtigste detalje i dette eksempel er gallerigruppen i den nederste del. For at opnå dette netlayout skal du bruge nogle usynlige lag i gruppen; Ellers ville det hvide rum mellem gitterne vokse eller krympe, når størrelsen ændres.

Jeg lavede en tabel, der beskrev nogle af sagerne og viser de tilsvarende indstillinger i den forrige version. Selvfølgelig vil nogle af dem ikke være gældende i den forrige version, da du ikke kan vælge flere indstillinger på samme tid, som den femte.

Download eksemplerne

Her er skissefilen med eksemplerne præsenteret i denne artikel.

Tips & tricks

1. Fastgør hurtigt til alle sider

2. Nulstilling af gruppens ændring af størrelse

3. Sådan ændres størrelse på grupper, der indeholder tekst

For tekstændringer, der forårsager lodret vækst, kan du bruge den matematiske inputfunktion i Sketch og liniehøjdeværdien af ​​etiketten. Vælg bare gruppen og ændre højden til 241 + 24 * 2 og tryk på enter. 241 er den aktuelle højde, 24 er liniehøjden og 2 er den nye linietælling - ja du skal tælle! Sketch beregner resultatet og indstiller gruppens højde til den korrekte værdi.

Ved tekstændringer, der forårsager horisontal vækst, som knapper, kan du bruge et Sketch-plugin ved navn Relabel (med Runner-plugin for at være mere effektiv).

Jeg håber, at automatisk ændring af størrelse ændres snart, og beregningen af ​​størrelser manuelt føles forældet!

4. Udforskning af funktionen "Auto Layer Alignment" i symboler

Der er en lille ekstra lydhør designfunktion i symboler for at gøre det lettere at ændre størrelse på symbolforekomster. Når du overskriver en tekst i en symbolforekomst, flytter Sketch et hvilket som helst lag i nærheden af ​​det tekstlag automatisk.

Denne funktion fungerer afhængigt af lagets nærhed og størrelse. Så hvis du undrer dig over, hvorfor det ikke fungerer i dit tilfælde, skal du kontrollere disse værdier.

Kritik

Det har været næsten et år, siden gruppens størrelse blev introduceret. Det var rigtigt og nødvendigt. Men denne opdatering er, hvordan den skulle være i første omgang. Så jeg forventede en større forbedring i stedet for bare at gøre det rigtigt, men ikke tilføje meget krævede funktioner som: stabling, automatisk ændring af størrelse, lag-til-lag begrænsninger, gitter og layout.

Jeg tror, ​​at der også er noget meget vigtigt, at Bohemian Coding ikke har været omhyggelig nok: arbejdsgang ændres. Langsomt og ikke gennemtænkt opdateringer i nogle nøglefunktioner har fået designere til at finde midlertidige, uholdbare arbejdsgange. Især i lagformater og symbolfunktioner. Det er ikke godt at skubbe designere og teams til at indstille tingene fra bunden og tilpasse dem ofte. Jeg synes, dette er virkelig ætsende.

Sammenfattende synes jeg, at Bohemian Coding burde have et bedre køreplan og være mere forsigtig, når man udvikler de vigtigste funktioner. Vi elsker Sketch, og vi ønsker, at det skal være bedre!

Hvad er det næste?

I den næste del af denne artikel vil jeg dække Animas plug-in til automatisk layout. Det har flere funktioner, og det ser også mere anvendeligt ud. Du kan også bruge dem sammen, så jeg vil forklare ting i detaljer og overlade valget til dig.

Følg mig for at blive opdateret og applauder, hvis du kunne lide det!