Bag scenen :)

Adaptive tekstelementer i skitse

Sød!

Opdatering: I går meddelte Sketch-teamet, at en af ​​deres mest efterspurgte funktion er tilgængelig i beta-versionen af ​​appen.
De kalder det "Smart Layout", og det ser A M A Z I N G.
Hvad det også betyder er, at metoden i dette indlæg bliver forældet (endelig!).

Et par eksempler på nettet for, hvad der er muligt:
twitter.com/mds/status/1167145339457069062
twitter.com/svorklab/status/1167350673857482752
twitter.com/gaddafirusli/status/1167157688867835904

Gå og tjek det> www.sketch.com/beta

Dette indlæg blev først tænkt den 19. august 2016, men så aldrig dagens lys (på grund af dovenskab / udsættelse / du kalder det). Da tiden gik, bemærkede jeg, at folk taler (og endda skriver Medium-indlæg) om den opførsel, jeg vil tale om. Så jeg besluttede at afslutte med at redigere udkastet og offentliggøre det. Yay for mig ...

Det hele begyndte med et simpelt spørgsmål ...

For ikke et stykke tid siden stødte jeg på et lille, men kedeligt problem, der bugede mig lige siden. Jeg designede en dashboardgrænseflade til en af ​​mine klienter, og i det var en temmelig almindelig ui-komponent; Det viste oplysninger om en bestemt bruger med elementer som: avatarbillede, udgivelsesdag og et tidsstempel. Det så sådan ud:

Da jeg blandede sig med ui og skiftede længden på komponenten forskellige gange, spekulerede jeg på, om der var en lettere måde at ændre indholdet, polstret og længden på hele komponenten uden at skulle ændre hvert element igen og igen.

Ændring af størrelsesfunktion hjalp lidt, da jeg var nødt til at ændre række længden. Der er mange tutorials og indlæg om denne fantastiske funktion, som denne eller denne, som jeg anbefaler at læse, hvis du ikke allerede har gjort det.

Hvad jeg virkelig ønskede at opnå var en dynamisk tekstelementer, der skubber hinanden, når deres størrelse ændres. Så hvis jeg f.eks. Bruger et plugin som Craft af InVision (eller ethvert andet plugin, der automatisk udfylder data), vil brugernavnelementet skubbe datoelementet ved siden af ​​det og så videre, som i et rigtigt fungerende produkt.

Mens jeg drøftede et lignende problem med Eran Lahav (en kollega af mig, der også er en fantastisk designer ), var jeg fast besluttet på at finde en løsning på problemet. Jeg huskede at have læst en artikel om muligheden for at oprette dynamiske tabeller med den nye ændringsfunktion (introduceret i version 39). Reony Tonneyck gjorde det ved at bruge skjulte grafiske elementer, der blev brugt til polstring af bordindholdet. Dette gav mig en idé om at placere et skjult grafisk element mellem to tekstobjekter. Og gæt hvad?

Det fanden virkede!
Så jeg fulgte faktisk Reony's metode til at oprette en dynamisk række, men da jeg sendte filen til Eran, fortalte han mig, at det fungerede med den størrelse, du har valgt for elementerne.

Det overraskede mig, fordi jeg var sikker på, at denne opførsel er knyttet til størrelsen på størrelse. Efter at have gravet lidt i den officielle Sketch-dokumentation fandt jeg ud af, at det er en opførsel, der er knyttet til symbolet tilsidesætter funktionen:

Og det er det originale indlæg om denne funktion:

Sagen er, at de brugte et grafisk objekt ved siden af ​​et tekstobjekt, ikke to tekstobjekter ved siden af ​​hinanden. Og da jeg prøvede denne metode med kun tekstobjekter, virkede den ikke ...

Efter en masse test, som Eran og jeg gjorde, er vi temmelig sikre på, at når vi bruger symboler med flere tekstobjekter ved siden af ​​hinanden med grafiske objekter imellem, er grafikadfærden som en "værge", der holder tekstobjekterne i at røre ved hver andet (se opdatering nedenfor).

Opdatering:
Det ser ud til, at denne funktion stadig fungerer i version 44. Jeg indså også, at når afstanden mellem to tekstelementer, der står ved siden af ​​hver er mindre eller lig med 20px, vil den automatiske størrelse ændre sig. Hvis afstanden er mere end 20 px, vil tingene begynde at nedbrydes. Der er ingen "værger" :)

Erans eksperimenter

Problemet med tilsidesættelser er nu, at plugins med reelt indhold (som Craft) ikke altid fungerer. Bortset fra en (så vidt jeg ved - tak Eran): Sketch Data Populator af dyrebart designstudie. Når du bruger plugin, påvirker det overstyringsafsnittet i stedet for det originale symbolindhold, og det løser perfekt problemet med overstyringspopulation.

EDIT: Tilsyneladende understøtter Craft-plugin tekstoverskridelser, så min undskyldning for fejlen (Da jeg begyndte at skrive dette indlæg tilbage i august understøttede Craft ikke tekstoverskridelser, deraf fejlen)

Konklusion

Denne funktion er langt den mest uintuitive jeg stødte på i Sketch, men hej, den er stadig bedre end Illustrator.
For at opsummere er den vigtigste ting, du skal overveje, før du bruger denne metode, at hvis du prøver at ændre bredden eller højden på hovedkomponenten, vil alt helvede løsne dig.
Jeg ved godt, at de fantastiske fyre fra Anima App arbejder på at forbedre deres plugin til at fungere på en lignende måde, og det vil gøre komponenten fuldstændig lydhør (selvom når jeg prøvede min metode med deres plugin i dag, 30. januar, skøjte styrtede).

Jeg håber, at dette indlæg hjalp, det er min første nogensinde, og det tog mig et stykke tid at passe og skrive det ned. Hav en fantastisk dag .