Smartere borde med sketch + paddy

Opdatering: Paddy understøttes ikke længere i Sketch, derfor fungerer denne tutorial ikke længere. Tak til alle for at have læst og delt. Forhåbentlig implementerer Sketch snart lignende funktioner!

Bordvisninger er ofte et nødvendigt onde i produktdesign og designsystemer, men ved hjælp af tip og nogle nyttige plugins kan vi oprette en skabelon, der vil gøre meget af det tunge løft for dig i fremtiden.

Jeg har for nylig introduceret det nye plugin Paddy til min Sketch-arbejdsgang og har været begejstret over at finde flere og flere måder at fremstille smartere symboler og komponenter på. Hvis du ikke kender Paddy, skal du tjekke det ud her og læse deres dokumentation gennem. Du bliver nødt til at downloade og installere Paddy for at følge med i denne tutorial.

Her er et link til den skissefil, der oprettes fra tutorial, hvis du har brug for at henvise til den (eller bare vil springe til slutningen).

1. Bygge dit cellsymbol

Polstring af cellesymbol + lagstruktur.

Cellen er den mindste komponent, du vil integrere i tabellen, så det er vigtigt at starte der. Vi bruger Paddys attributter til brugerdefineret lag til at hjælpe med at oprette en smartere, automatisk ændre størrelse på cellen.

1 - Første trin
Opret en rektangulær form med den højde, der svarer til din planlagte rækkehøjde og en bredde på omkring 120 pixels og navngiv den cellBackground. Tilføj nu en ny tekstform i rektanglet og omdøb dette lag til cellText.

Gruppér disse to lag sammen, og navngiv den tabel / celle / standard. Denne navnestruktur hjælper med at organisere din symbolliste og giver dig mulighed for at gaffel symbolet og oprette forskellige ikke-standardcelle symboler og tabelelementer.

Ændre størrelse på celletekstlaget til at være 12px (eller din polstring du vælger) fra venstre og højre side af cellBackground. Indstil desuden celletekstlagets størrelse til ændring af størrelse til at fastgøre til venstre, højre og øverste kant. Dette tvinger din celle til at opretholde en fast kolonnebredde inde i din tabel og tillader teksten at vikle til en anden linje.

Til sidst oprette et nyt symbol fra dem ved at vælge gruppen og gå til Lag> Opret symbol. Dobbeltklik på symbolet for at springe til symbolredigeringssiden for at fortsætte med det næste trin.

2 - Opsætning af 'Paddy'-polsterværdier
Cellebaggrundsformen bruger Paddy til at opretholde specificerede marginer rundt om teksten. Vælg dit cellText-lag, og naviger til Plugins> Paddy> Implementering af polstring til valg Du vil bemærke, at en streng med værdier tilføjes til din cellBackground. Afhængigt af din cellText-polstring fra hver side, kan du ende med 2-4 værdier mellem firkantede parenteser ([]). Disse følger traditionel CSS polstring rækkefølge på [øverste højre nederste venstre]. Reference Paddys dokumentation for mere information om disse attributter.

Ignorer polstring til venstre og højre

Nu vil vi redigere disse forudindstillede polsterværdier. Vi ønsker at erstatte venstre og højre polstringsværdier med x. Dette beder Paddy om at ignorere polstring for disse kanter, hvilket forhindrer vores celle i at ændre størrelsen automatisk, når vi definerer vores kolonnebredder i en tabel.

Celle minimumshøjde

Vi knytter også en minimumshøjde til cellBackground-laget, der er lig med din cellehøjde. Vi gør dette ved at tilføje tilføjelse; h> = DIN CELLHEIGHT efter dine polstringværdier på cellBackground-lagnavnet.

3 - Test af symbolet
Nu hvor du har oprettet cellesymbolet, indsæt det i et af dine tegnebræt og test symbolet tilsidesætter for at være sikker på, at Paddy fungerer korrekt. Du skal muligvis aktivere automatisk opdatering i Paddys plugin-præferencer.

Aktivér automatisk opdatering!

Inde i dit nyligt placerede cellesymbol, prøv at indsætte en lang streng tekst. Du skal se symbolet vokse automatisk i højden for at gøre det muligt for teksten at indpakkes. Ændr nu størrelsen på cellens bredde, så den passer til teksten på en linje. Temmelig praktisk, ikke?

Testning af vores nydesignede celle

2. Fletning af celler i en tabelrække

Tabel række lag struktur

Nu hvor vi har oprettet vores skudsikker cellesymbol, lad os bruge dem til at oprette vores første tabelrække. Vi bruger Paddys 'Afstand og distribution' -funktioner for at holde vores celler tæt på hinanden. Denne funktion giver dig mulighed for at tilføje afstands- og distributionsegenskaber til en forældregruppe og få disse indstillinger til at påvirke dens børn. Du kan gøre dette på både en vandret og lodret akse, men i øjeblikket vil vi være fokuseret på den vandrette akse for at distribuere celleelementer jævnt over vores tabel række.

1 — Opsætning af dine data

Indsæt et par (prøv mindst fire) cellesymboler i et tegnebræt, og udfyld nogle dummy-tekstdata. Gør cellerne varierende i bredden afhængigt af de data, du vil bruge. I vores tilfælde vil jeg oprette en grundlæggende tabel med brugerdata, herunder: navn, jobtitel, e-mail og telefonnummer. Dette er også en god mulighed for at omdøbe dine lag for at henvise til de data, de har.

2 - Tilføjelse af 'Paddy'-parametre

Når du har placeret dine celler i en række, skal du oprette en gruppe fra dem og navngive den tabelRow [0h t]. [0h] i gruppenavnet henviser til Paddys vandrette fordelingsegenskab. 0 betyder, at hver celle har 0px polstring mellem hver og h refererer til retningen for at fordele børnene (celler). Leg dig rundt med denne værdi og se, hvad den gengiver. T refererer simpelthen til justeringen af ​​cellerne. Dette fortæller hver celle at tilpasse sig til toppen af ​​gruppen.

Tabelrad 'Paddy'-parametre

Du bemærker muligvis ikke med det samme en enorm fordel ved denne Paddy-egenskab, men prøv at fjerne jobtitelcellen fra din tabelRow. Hvad der sker? Du kan gøre det samme, når du tilføjer nye celler. Kan du prøve at kopiere e-mail-feltet? Cellen skal udfyldes på linje med resten af ​​cellerne og justere afstanden mellem den omgivende celle, så den passer til. Hvad sker der, hvis du prøver at trække en celle ud af sted, Temmelig cool. Du kan henvise til Paddy-dokumentation for alle korte koder og andre egenskaber for afstand, distribution og justering.

For at understøtte dynamisk størrelse af rækkehøjde skal vi desuden oprette et rektangel, der matcher din cellebaggrundsfarve og indstille dets lagnavn til tableRowBackground [0]. Sørg for at placere dette i din nyligt oprettede tabelRow-gruppe. Jeg anbefaler også at låse den nye form, så du ikke utilsigtet vælger den. Se skærmbilledet ovenfor for struktur.

3. Opret tabeloverskrifter

Lignende layout til vores celsymbol

Nu hvor vi har bygget vores første fulde tabelrække, kan vi nu gå videre til at oprette ordentlige overskrifter for hver af disse cellekolonner. Dette skulle være en meget berømt proces til de første trin.

1 - Opret et nyt overskriftssymbol

Den første ting, vi vil gøre, er at navigere tilbage til vores symbolsside og kopiere vores celsymbol fra tidligere. Omdøb denne nye symboltabel / overskrift / standard.

Tabellen / overskriften opretholder den samme struktur som dit duplikerede cellesymbol. Den eneste forskel vil være stylingen af ​​tekstlaget inde i symbolet. Tag dig tid til at style din overskriftstekst, uanset hvor du vælger, men prøv at opretholde den samme symbolbredde som din celle for at give mulighed for let symboludskiftning senere.

Du kan også bruge dette som en mulighed for at differentiere din overskriftskomponent ved at justere baggrundsfarven, tilføje et bundstrøg (indre skygge) eller fjerne baggrundsudfyldningen helt. Jeg valgte at gøre sidstnævnte.

Nu går vi tilbage til vores primære artboard, hvor vi opretter vores tabeloverskridende række.

Process til tilføjelse af tabeloverskrifter

2— Tilføjelse af tabeloverskrifter række

Den nemmeste måde at gøre dette på er at oprette en kopi af vores eksisterende tabelRow og flytte den direkte over vores første række af celler.

Vælg nu alle eksisterende cellesymboler i den nyligt duplikerede række og skift deres symbol til vores nye overskriftcelle. Tip - Ved at holde Cmd + Shift kan du vælge flere sider, mens du også klikker på mapper på øverste niveau.

Du kan derefter opdatere alt overskriftstekstindhold, så det passer til deres passende kolonnedata. Det kan også være en god ide at opdatere lagnavnet for at afspejle disse ændringer.

4. Opret vores sidste bord

Bord med flere rækker vedligeholdt med Paddy

Den sidste ting, vi vil gøre, er at bruge Paddys afstand og distributionsfunktioner, vi lærte tidligere, til at opbygge et fuldt fleksibelt bord med flere rækker.

Start med at vælge din tabelRow med overskrifter såvel som din enkelt tabelRow og gruppere dem sammen. Navngiv denne gruppetabel [0v l]. Dette fortæller Paddy at justere alle børn i gruppen lodret (v) med 0px polstring mellem hvert barn, samtidig med at hvert barn holdes på venstre side.

Vælg nu tableRow og tryk på Cmd + D et vilkårligt antal gange for at kopiere det. Det kan være nødvendigt, at du rammer Esc eller Enter for at være sikker på, at du ikke har valgt din række og Paddy automatisk opdaterer dit layout.

Voila! Du skal se hver af disse nyoprettede rækker befolke direkte under originalen og opretholde den strenge venstre justering og afstand.

Du er velkommen til at eksperimentere med denne tabel ved at kopiere en række inline, justere den lodrette afstand på tabellaget, slette en række, ændre størrelsen på tabellen og mere. Nedenfor er et par GIF'er i tabellen, der bruges til at demonstrere de forskellige måder, hvorpå Paddy hjælper vores tabel med at reagere på forskellige handlinger.

Responsiv cellehøjde + tekstindpakningResponsiv kolonnebreddeInline række duplikeringInline række sletningInline række rækkefølgenDynamisk lodret polstring på bordrader

Jeg håber, at denne tutorial var nyttig til at lære mere om Paddy og måderne, det kan forbedre dit produktdesign arbejdsgang på. Del dine tanker, ideer og forbedringer i kommentarerne. Kæmpe rekvisitter til @avidwilliames til oprettelse af Paddy (blandt andre fantastiske plugins). Del din støtte til hans arbejde i form af et eller via PayPal.