Skitse 39 Ændring af størrelse: Cheat Sheet

Sådan fungerer størrelse og størrelse på størrelse

Skitse netop frigivet version 39 og tilføjet muligheden for at tildele lydhør regler til lag i et symbol eller gruppe. Selvom dette ikke skaber omfattende responsive eller tilpasningsfulde designfunktioner til Sketch, er disse 4 størrelsesindstillinger ekstraordinært kraftige. Og de kan tage nogle ved at vænne sig til, især fordi ...

... nogle af disse størrelsesregler indeholder skjult funktionalitet.

Mens jeg lavede Sketch's frigivelsesvideo til den nye funktion (nedenfor), fandt jeg det nødvendigt at oprette et snyderi om nøjagtigt, hvordan hver størrelse af funktionen fungerede. Jeg refererede det konstant, så jeg stiller det til rådighed for dig her.

Strække

  • Dette er standardindstillingen og er den ændrede størrelse, som vi alle er vant til.
  • Tænk på det som størrelse på alle lag baseret på procenter. Hvis et lag optager 50% af gruppens bredde, fortsætter det med - i alle størrelser.

Fastgør til hjørne

  • Lag i gruppen forbliver den samme størrelse.
  • Hvert lag opretholder afstanden til det nærmeste hjørne på gruppen.
  • Når der er lige tæt på 2 hjørner, ændres Pin to Corner for at holde dette lag centreret. Laget opretholder den samme afstand fra den delte kant mellem disse hjørner.

Ændre størrelse på objekt

  • Lag ændrer størrelse for at bevare de samme afstande fra hver kant af gruppen.
  • MEN, når et lag berører 3 af de 4 kanter i en gruppe, ændrer størrelse på objekt dets opførsel - så afstanden fra 4. kant kan være fleksibel og laget forbliver den samme størrelse langs den akse. Dette er kun tilfældet, når afstanden fra 4. kant er mindre end halvdelen af ​​gruppens dimension i den retning (tak for at have påpeget dette, Raphael Schaad). Opførslen er især nyttig til titellinjer, som vist i denne sammenligning:

Float på plads

  • Ingen lighed med Float i CSS
  • Lag inden for en gruppe forbliver den samme størrelse
  • Lag genplaceres baseret på procenter. For eksempel kan et lag have en x-position på 25% inden for denne gruppe og vil bevare den relative position uanset gruppens bredde.
  • Lag, der er placeret langs kanterne af en gruppe, forbliver der
  • Float in Place er mere kompliceret under hætten end blot at tildele procentvise koordinater til det øverste venstre hjørne eller midtpunktet for hvert lag, hvilket fremgår af kantpositioneringsevnen. Bortset fra lag placeret ved 0% (kant), 100% (anden kant) og 50% (centrum), har jeg bemærket, at der kan forekomme en mindre forskydning i lagets position efter ændring af størrelsen på gruppen. Med andre ord, Float in Place genplacerer lagene til omtrent det korrekte sted, men kan være slukket med en procentdel eller to. Når nøjagtigheden er af afgørende betydning, skal du tjekke Float på plads efter at have ændret størrelse på en gruppe.

Tips & tricks

  • Jeg anbefaler stærkt, at du tænder for “Pixel fit, når du ændrer størrelse på lag” i Sketchs præferencer. Jeg slukker lejlighedsvis for dette, når jeg arbejder med elementer fra et UI-kit (som ofte bruger decimaler på lagstørrelser eller positioner for mere perfekt at replikere det originale element).
  • Både Pin to Corner og Float in Place holder et lag centreret. Hvis du kun centrerer langs en akse, er forskellen, at Pin to Corner opretholder den samme afstand fra gruppens nærmeste kant, mens Float in Place ændrer denne afstand, fordi laget er placeret ved hjælp af procenter til koordinater. Hvis du centrerer langs begge akser, skal du bruge Float på stedet for at få mere pålidelige resultater.
  • Bemærk, at ændring af regler betragtes som en del af et lags kerneattributter, ikke dets stylingattributter, og derfor er udelukket fra delte stilarter.
  • Tastaturgenveje ⌃1, ⌃2, ⌃3 og ⌃4 tildeler hver ændring af størrelsesregel til det valgte lag.
  • I deres nuværende form anbefaler jeg ikke at bruge disse størrelsesbestemmelser for lag, der strækker sig uden for en maskeret gruppe. Denne funktionalitet ville være fantastisk, når man arbejder med masker og lagene inde i dem, så lad os håbe, at den tilføjes i en fremtidig opdatering.

Tilmeld mig mit nyhedsbrev for at være den første, der ved, når jeg udgiver nye designartikler og ressourcer.
 
Hvis du nød denne artikel, vil du elske Sketch Master - mine online træningskurser for fagfolk, der lærer Sketch. Du lærer masser af tricks og praktiske arbejdsgange ved at designe virkelige UI / UX og appikonprojekter.