Konsekvent Design System i Skiss Med Atom-Design och Auto-Layout Plugin

0
57

Gör du design av digitala produkter (eller webbplatser) och hand design filer iväg till utvecklare för genomförandet? Om du svarat ja, bosätta sig i! Medan bör-designers-kod rasar debatten om att vi kommer att titta på hur du lägger en metod för att din design workflow kan göra dig snabbare, mer konsekvent, och älskad av alla utvecklare… även om du inte har koden.

Låt oss gräva i!

Varför en metod?

I utvecklingen världen, det verkar som att minst hälften av din karriär är om att hålla sig uppdaterad med ny teknik och eliteskepp dina kunskaper. Medan takten kanske inte fullt så desperata i design landskapet, så som det är i utveckling, och det har definitivt varit en enorm förändring i verktyg under de senaste tre åren eller så.

Verktyg som Skiss har gjort en hel del av den gamla smärtan av att arbeta i design filer en sak av det förflutna. Smarta kombinationer av text stilar, objektets stil, symboler och bibliotek nu att innebära genomgripande förändringar är bara ett klick bort. Inget mer att plocka igenom 40 Photoshop lager för att göra en enda färg förändras.

Men, svepande ändrar färg i en marknadsföring målsidan är inte längre den största design challenge. Design-och utvecklingsteam är nu förväntas leverera komplexa gränssnitt laddad med samverkan och med vissa stater… för varje enhet som finns nu och nästa dag. Att arbeta som både designer och utvecklare, har jag sett arbetsflödet friktion från båda sidor.

Utöver verktyg, designers behöver en strategi.

Att tänka i termer av “delar”

Om du arbetar i den tekniska utrymme i någon kapacitet, du har förmodligen hört talas om utveckling ramar som Reagerar, vinkel, eller Vue.

Um ja, jag är en designer så som egentligen inte berör mig, bye.

Kinda. Men om du hoppas att inte arbeta med design för moderna digitala produkter, det är en ganska stor chans att dessa produkter kommer att byggas med hjälp av dessa ramar. Ingen förväntar sig att en arkitekt för att bygga strukturer för sig själva, men de är bättre att få en god förståelse av vilka verktyg som finns och hur de kommer att användas.

Så här är vad du behöver veta om modern front-end ramverk:

De har fört om ett paradigmskifte för utvecklare i vilka produkter som är byggd genom att kombinera en serie av mindre komponenter i komplexa system som kan anpassa sig till olika sammanhang och enheter. Detta gör koden lättare att underhålla, och hela systemet mer flexibelt.

För en mångfald av legitima skäl, många designers har inte fångas på detta paradigmskifte så snabbt som utvecklare. Vi saknar en mental modell för att skapa de bitar som utgör dessa gränssnitt oberoende av sin miljö/pages/skärmar/viewport etc.

En sådan strategi är Atomär Design.

Vad är Atomär Design?

Först myntades av Brad Frost, Atomär Design är en metod som försöker att svara på en enkel fråga: om hundratals enhet storlekar betyder att vi inte längre effektivt design “sidor” så hur ska vi även designa?

Svaret ligger i att bryta ner allt som kan göra upp en “sida” eller “visa” i mindre och mindre bitar, skapa ett “system” av block, som sedan kan användas modifierat i ett oändligt antal varianter för vårt projekt.

Du kan se det som att ingredienserna i ett recept. Visst, du kan göra muffins, men du kan lika gärna göra en tårta med samma lista över ingredienser.

Brad beslutat att använda kemi analogi, och så föreslår han att våra system består av:

  • Atomer
  • Molekyler
  • Organismer

För enkelhetens skull, låt oss ta en titt på hur vi kan tillämpa detta till en webbplats.

Atomer

Atomerna som utgör de minsta byggstenarna som bygger upp våra användargränssnitt. Föreställ dig en form etikett, en form input, och en knapp. Var och en av dessa representerar en atom:

En header text block, och länka varje fungera som atomer.

Molekyler

Molekyler är helt enkelt grupper av atomer kombineras för att skapa något nytt. För våra syften, kan vi tänka på molekyler som grupper av osammanhängande UI bitar som är kombinerade för att skapa en meningsfull komponent.

Atomerna kommer samman för att bilda en “kort” komponent.

Organismer

Organismer som består av grupper av molekyler (eller atomer eller andra organismer). Dessa är de delar av ett gränssnitt där vi kan tänka på som en “sektion.” I en fakturering ansökan, en organism kan vara en instrumentpanel som kombinerar en “ny faktura” – knappen (atom), ett sökformulär (molekyl), en “total öppna” kort (molekyl), och tabell över förfallna fakturor. Du får idén.

Låt oss titta på vad en “dagens block” organism kan se ut i vår enkla hemsida:

En header (atom), tre kort (molekyler), en bild (atom), och en teaser (molekyl) kombineras för att bilda en skisserat blocket organism.

Med hjälp av staplar för konsekvens

Så, nu när vi har en mental modell för “saker,” hur ska vi gå tillväga för att skapa dessa byggstenar? Skissen är bra ur lådan, men de plugins som finns för det ger en enorm prestanda verktyg… precis som textredigerare för utvecklare. Vi kommer att använda Skiss inbyggda symboler verktyg, liksom den fantastiska Högar” – funktionen från Anima App Auto-Layout-plugin.

Med hjälp av dessa verktyg kommer att ge några ovärderliga fördelar som jag kommer att peka ut när vi går, men åtminstone du kan räkna med:

  • bättre design konsekvens och snabbare iteration
  • en kontroll från att använda konsekvent avstånd multiplikatorer
  • snabbare registrering av innehåll
  • hjälp med att identifiera problem design snabbt och tidigt på

Exakt vad är det som stacks?

Om du någonsin har hört utvecklare ivrigt prata om flexbox för att bygga layouter i CSS, då kan du tänka travar Skissen motsvarande. Stackar (som flexbox) låter dig gruppera ett antal lager tillsammans och sedan definiera deras avstånd och anpassning på en vertikal eller horisontell axel.

Här har vi i grupp tre objekt, anpassa dem genom deras centrum, och ställa 48px vertikalt utrymme mellan varje:

En enkel staplade mapp anpassa och distribuera tre punkter.

Lagren kommer automatiskt att vara med i en blå mapp med en ikon i vertikala eller horisontella punkter för att visa vilken typ av skorsten som du har.

Titta på det! Du har just lärt dig flexbox utan att röra en rad kod. 😂

Kapslade stackar

Den verkliga kraften i stackar kommer från häckande stackar inuti andra stackar:

Stackar kan vara inkapslade i varandra för att skapa komplexa avstånd system.]

Här kan vi se en kort komponent som består av flera stackar:

  • kort__cta länk från föregående exempel.
  • kort__kopiera stack som hanterar anpassningen och utrymme för huvud och text.
  • kort__innehåll som reglerar avstånd och anpassning mellan kortet__cta och kort__kopiera stackar.

En snabb anteckning om namngivning lager

Jag nästan alltid använda BEM naming convention för mina komponenter. Utvecklare uppskattar logik när jag måste lämna bort design filerna, eftersom det ofta ligger i linje med de namnkonventioner som de använder i koden. I de fall där jag utveckla projektet till mig själv, det ger mig lite försprång så har jag börjat tänka på det påslag på projekteringsstadiet.

Om det är super förvirrande, oroa dig inte om det. Vänligen bara göra dina kollegors arbete lite lättare genom att organisera ditt lager och ge dem beskrivande namn.

Stackar shmacks, jag har stor uppmärksamhet till detaljer och kan göra allt detta manuellt!

Du har helt rätt! Men hur är det när du noggrant har lagt ut 10 artiklar, alla i olika storlekar, och nu behöver de extra utrymme mellan dem? Eller, behöver du lägga till en rad med text till en av dessa poster? Eller, du behöver för att dela upp innehållet i tre kolumner istället för fyra?

Som aldrig händer, rätt? 😱

En av två saker händer oftast i detta skede:

  1. Du starta det manuellt omorganisera alla saker och någon betalar för slöseri med tid (oavsett om det är du eller kunden).
  2. Du kinda fudge det… efter alla, utvecklaren säkert vet vad din ursprungliga intentioner var innan du åt vänster varje marginal av med ett par pixlar i din layout. _(ツ)_/

Här är vad stackar får du:

  • Du kan ändra justering och avstånd alternativ så mycket du vill med ett enkelt värde justering och saker kommer bara magiskt uppdatering.
  • Du kan ändra storlek på element utan att behöva plocka på din artboard att rejig alla saker.
  • Du kan sortera, lägga till, eller ta bort objekt från stacken mappen och titta på de objekt omfördela sig enligt dina inställningar—precis som kod. 🎉

Att märka hur snabbt det är att redigera innehåll och experimentera med olika layouter för alla med bibehållen konsekvens:

Stackar och symboler göra experiment billiga och konsekvent.

OK, så nu vet vi varför staplarna är fantastiska, hur vi faktiskt använder dem?

Skapa högar

Skapa en stack är en fråga om att välja två (eller flera) lager och träffa stackar mapp-ikonen i inspector. Därifrån kan du bestämma om du stapla dina lager horisontellt eller vertikalt och ställ in avståndet mellan objekt.

Här är ett exempel på hur vi skulle skapa en atom komponent med hjälp av staplar:

Skapa en horisontell stapel med 20px avståndet mellan text och en ikon.

Och, låt oss nu tillämpa stackar konceptet till en mer komplex molekyl komponent:

Skapa en kort molekyl med hjälp av nästlade stackar.

Skapa symboler från skorstenar

Vi har pratat om det många fördelar med staplar, men vi kan göra dem ännu mer effektiva genom att tillämpa Skiss symbol verktyg till dem. De resultat vi får är en stack som kan hanteras från en enda källa exempel och återanvändas var som helst.

Skapa en atom symbol

Vi kan ta som call-to-action stack vi just skapat och göra det till en symbol. Sedan kan vi använda företräde för texten och vet att travar kommer att hedra avstånd:

Skapa en symbol från en stack är bra för att säkerställa utrymme konsekvens med överskridanden.

Om jag bestämmer mig senare för att jag vill byta plats med några pixlar, jag kan bara justera stack avstånd på symbolen och har det uppdatering på varje instans 🎉

Skapa en molekyl som symbol

På samma sätt kan jag gruppera flera staplade atomer i en komponent, och göra det till en symbol:

Skapa en kort symbol från våra stackar och call-to-action-symbol.

Symboler + stackar = 💪

Skulle det inte vara trevligt om vi kunde behålla den spacial krav som vi ställer, oberoende av tweaks vi kan ge dem? Ja!

Att ersätta en artikel med en annan inne i en komponent

Låt oss anta att våra kort komponent kräver nu en knapp istället för en länk som en call-to-action. Så länge vi placera knappen i rätt stack mapp, alla pixel-knuffande händer automagiskt:

Eftersom vår symbol använder stackar, avståndet mellan kopia och call-to-action kommer automatiskt att vara respekterad.

Redigering molekyler och organismer i farten 🔥

Du kanske tänker att detta inte är en stor grej och att justera den lilla spacial frågan från föregående exempel skulle ha tagit en stund utan travar. Och du skulle inte vara fel. Men låt oss gå tillbaka till våra föreställningar om vad som är atomär design för en stund, och fråga vad som händer när vi har långt mer komplex “organismer” (grupper av atomer och molekyler) för att ta itu med?

Liknande till vår mobila exempel från början, det är där den inbyggda kraften i stackar verkligen skiner:

Stackar och symboler gör experiment billiga och konsekvent.

Med ett bibliotek av grundläggande symboler (atomer) på våra fingertoppar, och kraftfullt avstånd/anpassning verktyg, som vi kan experimentera och skapa oändliga variationer av komponenter. Det viktiga är att vi kan göra det snabbt och utan avkall på design konsekvens.

Komplexa layouter och mega stackar

Håller med de delar vi har redan skapat, låt oss se vad ett lager stack kan se ut för en enkel marknadsföring sida:

Ett exempel på ett utökat lager stack.

Låt inte det första intrycket av komplexiteten i dessa staplar skrämma dig. En icke-staplade versionen av detta artboard inte skulle se så annorlunda bortsett från färgen på mappen ikoner.

Men det är de mappar som ger oss all den effekt:

Layout experiment kan vara snabbt och billigt!

Vi kanske inte behöver koden, men vi har ett ansvar för att bemästra vårt verktyg för effektivitet och räkna ut nya arbetsflöden med våra utvecklare kollegor.

Detta innebär att flytta bort från att tänka på design i samband med sidor, och skapa samlingar av komponenter… moduler… ingredienser… legos… räkna ut en metafor som fungerar för dig och sedan se till att hela laget aktier ordförråd.

När vi gör detta, frågor kring arbetsflöde och samarbete smälta bort:

Snabbhet och Flexibilitet

Försiktigt bygga komponenter med symboler och med hjälp av automatiserad och konsekvent avstånd/anpassning med travar kräver lite tid investering i förskott. Emellertid avkastningen av enkla experiment och förmåga att ändra kurs, snabbt och till låga kostnader är väl värt det.

Konsekvens och UX

Med att tänka på hur element fungerar som kombinationer och i olika sammanhang kommer att fånga UX-luktar tidigt och utsätta frågor kring konsistens innan du är 13 skärmar. Ändra riktning genom att justera några variabler/components/avstånd enheter slår knuffande delar runt en artboard hela dagen.

Ansvar och Styrning

En enda 1440px sida av saken du bygger helt enkelt inte förutsatt en utvecklare med tillräckligt många sammanhang för flera skärmar och interaktion. Vid samma tid, crafting flera high fidelity comps en liten del i taget är en budget buster (och detta är särskilt sant för app-mönster). Så, vad brukar hända på små grupper? Utvecklaren får en underbar 1440px… aaaaand alla kognitiva overhead för att fylla i de luckor som för allt annat.

Att ge information är vårt jobb.

Atomär design gav oss hastighet, kreativ frihet och flexibilitet. Det förändrade allt.”

—Från fram av Atomär Design

Om vi arbetar med utvecklare på digitala produkter, vi ska vara glada om att lära sig hur korven är gjord och anpassa vårt sätt att utforma detta. Våra verktyg kan inte utvecklas lika snabbt som JavaScript-ramverk, men om du inte har tagit en titt under huven på några av dessa program under de senaste åren, detta är en bra tid att gräva i!