Skitsevejledninger

Skitse 44 Ændring af størrelse: Hvordan fungerer det ???

Det er nyt! Det er intuitivt! Det er bedre! Det er ekstra strækkende!

Stretch Armstrong ™ virkede som et passende overskriftsbillede. Hvis du ikke voksede op i 70'erne i USA eller havde en bedstemor med rigtigt gammelt legetøj, gik denne reference sandsynligvis langt over dit hoved.

Folk på Sketch har arbejdet hårdt med at polere de seneste opdateringer og funktioner til Sketch version 44, og de har foretaget en temmelig stor opdatering til måden, hvorpå størrelse ændres:

NYT I SKETCH 44
Ændrelsesindstillinger er blevet opdateret for at give dig mere magt og kontrol over, hvordan dine lag skal opføre sig, når deres forælder ændres til størrelse.

Der er masser af andre tweaks, der kommer i Sketch 44, men jeg vil lige dække det nye størrelse til størrelse.

Jeg har sammensat en hurtig freebie, der viser dig, hvordan alle de gamle ændringsfunktioner oversættes til det nye værktøj.

DU SKAL HENTE SKETCH 44 BETA ELLER SKETCH 44 OFFENTLIGE UDLYSNINGER TIL DENNE FIL AT ARBEJDE.

Klik for at downloade Sketch 44 Beta

(det er en separat app og vil ikke overskrive din nuværende)

Først en opdatering:

Disse skal se kendte ud. Hvis de ikke gør det, har Peter Nowell et fantastisk cheatsheet for, hvordan disse fungerer i Sketch-version 39–43. De var en massiv spiludveksler i 39, og har været min favoritfunktion lige siden.

Disse størrelsesindstillinger er måder at fortælle Sketch, hvordan du ønsker, at lag og grupper skal opføre sig inden for deres forælder. Temmelig cool!

Problemet med disse er, at de ikke er 100% intuitive med hensyn til, hvordan de fungerer. Jeg fandt mig selv gætte et stykke tid. Peters cheatsheet hjalp virkelig med at tilføje noget klarhed, men det tog stadig meget tid at virkelig få tingene under mine fingre. Med Sketch 44 bliver tingene meget bedre!

Nu, opdateringerne!

Sketch har gjort størrelsen på størrelse og fastgørelse meget mere intuitivt ved at give dig et billede af, hvordan tingene opfører sig. Tjek dette smukke nye værktøj:

De nye ændringsmuligheder giver os meget mere fleksibilitet med hensyn til, hvordan ting reagerer, når vi ændrer størrelse på genstande med børnelag.

Det grundlæggende

Fastgørelse er meget mere intuitivt nu, og du behøver ikke at gætte til hvilken kant et lag klikker på. Så længe du fortæller det, hvilken kant du vil have den til at holde sig til, vil den forblive der, som når du kanaliserede din bror på væggen.

I dette skærmbillede har jeg fastgjort den hvide blok til de øverste og højre kanter. Når du fastgør et lag, opretholder det afstanden fra kanten af ​​dens overordnede beholder (i dette tilfælde den lilla kasse).

Den hvide boks er 20px fra øverste og højre kant, så nu den er fastgjort, forbliver den altid 20px fra toppen og højre:

Dette er den nye måde at “Pin to Corner” på.

Sådan ser det ud, når jeg ændrer størrelse på gruppen:

Dette er

Så vi har den hvide boks fastgjort øverst til højre, og den opretholder 20 px margen fra kanten, men det ser ud til at ændre størrelsen på resten af ​​gruppen. Trist!

Hvis du ønsker, at den hvide boks skal opretholde sin størrelse, skal du markere afkrydsningsfelterne “Fix Width” og “Fix Height”. Giver mening!

Dette er den nye måde at gøre ”Pin to Corner” på. Sørg for at fastsætte højden og bredden!

Det ser bedre ud! Og du kan blive kreativ med den måde tingene fastgør og ændrer størrelsen på. Måske vil du holde bredden fast, men du vil have højden til at ændre størrelsen på hele gruppen? For at gøre det, kan vi feste toppen og bunden af ​​underlaget (det hvide rektangel) og markere afkrydsningsfeltet “Fix Width”:

Jeg tror ikke, at dette var muligt i Sketch 39–43. Kun med andre plugins. Nu er det native funktionalitet!

Lad os lade som om vi vil have vores blok til Float in Place lige i midten af ​​boksen. Vi ønsker ikke noget fastgjort, men vi ønsker at holde højden og bredden fast:

Dette er den nye måde at gøre

Ændre størrelse på objekt er meget lettere at forstå nu, da du kan vælge, hvilke kanter der skal fastgøres. Her har jeg noget tekst inde i min kasse, og jeg vil have 20px polstring til venstre / højre / top:

“Ændre størrelse på objekt” opnås ved at fastgøre venstre / højre kanter.

Det er vigtigt at bemærke, at hvis du ikke spænder en kant, vil den strække sig, mens du ændrer størrelsen på den overordnede beholder. Se hvordan teksten bevæger sig lodret, når du ændrer størrelsen på boksen op og ned:

Sandsynligvis ikke, hvad vi vil ske!

Symboler og tegnebræt

I Skitse 39–43 arbejdede størrelsen på funktioner inden i grupper og symboler, men ikke selve tegnebræt.

Nå, med det nye værktøj til ændring af størrelse, får tegnebræt også denne funktionalitet. Men du får et valg! Der er en ny mulighed kaldet "Juster indhold på størrelse":

Sådan ser størrelsen på et tegnebræt ud uden at dette afkrydsningsfelt er markeret:

Dette er dybest set, hvad vi er vant til uden andre plugins. Det bare slags afgrøder indholdet af tavle.

Hvis du markerer "Juster indhold på størrelse", opfører sig tingene ligesom i en gruppe eller symbol, men denne gang på hele tegnebrættet:

Indfødt fastgørelse lige på selve tegnebrættet!

Bemærk: Denne boks markeres automatisk, hvis du fastgør NOGT basislag på dit tegnebræt. Så lad ikke det forvirre dig:

Denne afkrydsningsfelt bliver slået til for dig, hvis du fastgør noget basisspjældslag.

Det er det!

Jeg er temmelig interesseret i dette forbedrede størrelse til ændring af størrelse! Det tilføjer et niveau af intuitivitet til det, der virkelig manglede før. Ikke mere gætteri!

Jeg åbnede UX elværktøjer inde i Sketch 44 for at se, hvordan det ville fungere med de nye ændringsmuligheder, og alt så godt ud af kassen. Sketch gjorde sit bedste for at oversætte over alle de gamle indstillinger for oprindelig størrelse til de nye. Jeg testede ikke udtømmende det, men de få komponenter, jeg prøvede, fungerede perfekt.

Hvis du har spørgsmål, skal du sætte dem i kommentarerne! Jeg gør mit bedste for at besvare dem, og når jeg ikke kan, lader jeg Sketch chime ind

Jeg opretter designsystemer i Sketch kaldet UX Power Tools. Lær mere her.