Kan designere og ingeniører bruge en enkelt sandhedskilde? Del 2.

Nu hvor du forstår den konstante trækning mellem designere og udviklere (læs del en af ​​denne artikel her), lad os tale om, hvordan du løser dette.

Designsystemer og en enkelt kilde til sandhed (del 2 af 2)

De sidste 10 år bragte en masse modenhed til verdenen af ​​webteknologier. CSS blev ekstremt magtfuld og voksede i værktøjer, der gav mulighed for forudsigelige og bæredygtige arbejdsgange (fra forbehandlere til moduler og stillinter). JavaScript blev udviklingsstandarden for en række forskellige platforme. Det tilføjede funktioner, der øger læsbarheden (kort, pilefunktioner ...) og modularitet af koden (ES6-moduler). Det fik endda fantastisk værktøj, der bragte økosystemet til det næste niveau (NPM, Webpack, React.js).

Begge fremskridt inden for CSS og JavaScript førte til en hurtig voksende popularitet af en modulær arkitektur af webapplikationer. Som en konsekvens førte det også til en drastisk popularitet af designsystemer. Behovet for designsystemer stammer fra kaos, dyre vedligeholdelse og inkonsekvente oplevelser fra den tidlige web. Den hurtige vækst i populariteten af ​​designsystemer blev mulig takket være fremskridt inden for webteknologier.

Designsystemer gav mange løfter:

  • Enheden af ​​sandhedskilderne
  • Forudsigelighed af produktudviklingsarbejdsgangen
  • Forøgelse af kvaliteten af ​​brugeroplevelsen
  • Fald i vedligeholdelsesomkostninger

Som en arbejdsgangsrevolution, der blev startet af Toyota Production System, tilbød designsystemer lindring af smerterne ved moderne produktudvikling takket være en systematisering af processer.

Det er stadig for tidligt at bedømme den samlede effekt af boomsystemet i designsystemet. Det bliver dog mere og mere indlysende, at den nuværende generation af designsystemer er fantastisk til at systematisere frontend-engineering og kun er semi-succesfuld med at fikse forbindelsen mellem design og engineering.

Tag for eksempel design-tokens, som er en grundlæggende del af mange gode designsystemer. De kan bruges til at generere komplekse sæt stilark og farvepaletter til designværktøjer, men interaktive komponenter, der er essentielle for ethvert designsystem, forbliver frakoblet fra designværktøjer.

Få forsøg på at bygge bro over dette hul opnåede hverken masse popularitet eller betydelig trækkraft. Den bedste blandt dem, HTML Sketchapp, tilbyder en import af HTML-elementer til Sketch. Desværre går alle tilstande og interaktioner tabt undervejs. Sketch, i sidste ende et vektorillustrationsværktøj, tilbyder ikke tilstande eller interaktioner på komponentniveau.

Skyld ikke designsystemer for den mangel. Blame design værktøjer. Så længe designværktøjer håndhæver vektorformatet på designere af brugergrænseflader, vil implementering af en enkelt sandhedskilde forblive umulig.

Spørgsmålet om en enkelt kilde til sandhed lyder teoretisk, men tænk over de praktiske implikationer.

Hvad hvis designere kunne bruge de samme komponenter, som ingeniører bruger, og de er alle gemt i et delt designsystem (med nøjagtig dokumentation og test)? Mange af de frustrerende og dyre misforståelser mellem designere og ingeniører ville stoppe med at ske.

Gennemgå historien om to konfliktfulde dataplukkere fra den første del af denne artikel. Hvis designeren havde adgang til en interaktiv komponent, der er synkroniseret med produktionsdatabasen, kunne hun tage en informeret designbeslutning om oplevelsen af ​​at vælge data og genbruge en eksisterende komponent. Hele konflikten ville opløses, hvilket resulterer i en hurtigere designproces, hurtigere udviklingsproces og en mindre frustrerende oplevelse for hele teamet.

At stole på manuel tegning af produktionskodede komponenter i et vektorillustrationsværktøj er ikke kun dyre, men også tilbøjelige til kritiske fejl.

I den perfekte implementering af et designsystem bruger designere og ingeniører en enkelt kilde til sandhed til at dække alle aspekter af arbejdsgangen. Når designere grøfter deres gamle vektorillustrationsværktøjer (uundgåeligt mister alle problemer i forbindelse med dette gamle paradigme), vil dette niveau af en integration og modenhed af processen blive muligt.

Unified Design - Teknisk samarbejde med UXPin Merge

Hos UXPin har vi brugt de sidste 8 år på at opbygge en samarbejdende, kodebaseret designeditor. Med nøjagtige rendering, tilstødende komponenter, avancerede interaktioner på komponentniveau (betingede interaktioner, variabler, API-integration ...) har vi formået at undgå mange af manglerne i vektorillustrationsværktøjer som Sketch, Figma eller XD. I stedet for at stole på hundredvis af statiske tegnebræt, giver UXPin designere mulighed for at skabe fuldt interaktive og genanvendelige tilstande. Det er let at designe formularer med fuld validering, selv for designere, der ikke koder.

Hver gang en designer opretter noget i UXPin, bygger vores rendemotor HTML CSS og JavaScript (til alle avancerede interaktioner). Så designere og ingeniører kan være sikre på, at der vil være en 100% match mellem design oprettet i UXPin og den endelige produktionsimplementering. Misforståelser angående animationer eller font gengivelse nævnt i den første artikel findes ikke i UXPins univers.

Vi løste ikke alle problemerne på én gang. Selv vores kodebaserede editor, som på alle måder synes at være den stærkeste på det brede marked af designværktøjer, faldt i et problem med foreningen af ​​sandhedskilderne. Vores værktøj hjalp designere med at undgå mange misforståelser, men vi havde ikke en måde at opbygge en varig forbindelse med kodede komponenter, der findes i et designsystem. Vi havde ikke det ... indtil nu.

For næsten 2 år siden er vi begyndt at arbejde på at opbygge en varig forbindelse mellem design og engineering. Efter at have udforsket flere ideer, har vi besluttet at fortsætte følgende arbejdsgang:

  • UXPin opretter forbindelse til et Git-lager (kommandolinjeværktøj installeres som projektafhængighed)
  • UXPin lærer om koden for komponenter, der er gemt i depotet og serienummerer dets indhold
  • UXPin kører byggeprocessen og leverer produktionskode til UXPin designeditor, hvor alle komponenter er identiske med produktionsmiljøet, fuldt interaktive og tilgængelige for designere (selvom de ikke ved, hvordan de skal kode)
  • UXPin giver mulighed for at oprette forbindelse til en kontinuerlig integrationsserver for at muliggøre automatisk synkronisering mellem et Git-lager og vores designeditor (hver ændring i produktionskoden afspejles automatisk i komponenterne i UXPins designeditor)
  • UXPin viser nøjagtige specifikationer for alle designprojekter, der viser informative kodestykker for at fortælle udviklere, hvordan man implementerer et givet design

Denne tilgang var yderst ambitiøs og meget bredere i sin rækkevidde end nogen konkurrencedygtig løsning. Fra starten ønskede vi at undgå:

  • Oprettelse af en gimmick-funktion, der er i stand til at få lidt opmærksomhed på markedet, men ikke løse de vigtigste problemer i design-engineering arbejdsgang
  • Tvinge designere til at lære at kode (hvilket kendetegner den tilgang, Framer benytter)
  • Tvunger teams, der implementerer vores workflow-løsning til at oprette kode bare til UXPin (i stedet troede vi på en plug and play-tilgang, hvor uændret produktionskode kan forbruges af UXPin).

Det tog os over 18 måneder, men jeg er glad for at sige, at UXPin Merge netop har leveret en løsning, der virkelig forener design og konstruktion i en kontinuerlig arbejdsgang.

Flet forbindes problemfrit til ethvert GIT-lager, importerer React.js (understøttelse af flere biblioteker og rammer i fremtiden!) -Komponenter til UXPins designeditor og holder alle versionerne synkroniseret takket være CI-integration. Uanset hvad der findes i kode findes i UXPin, hvilket giver designere adgang til rigtige kodede komponenter uden at tvinge dem til at lære kodning.

Med CI-integration sørger UXPin Merge for synkronisering af kode - designværktøjet.

Med UXPin Merge bruger designere og ingeniører en enkelt kilde til sandhed og kan endelig arbejde sammen uden unødvendige misforståelser og frustrationer. Gæt hvad? Den perfekte implementering af et designsystem er muligt.

Komplekse komponenter som dataplukkere er umiddelbart tilgængelige for designere.

UXPin Merge findes i øjeblikket i en lukket beta. Tilmeld dig for hurtig adgang nedenfor. Vores kunder og mest lidenskabelige troende i en samlet arbejdsgang (hvis det er dig, så fortæl os om dine tanker på Twitter!) Får først adgang. Vi ses på den anden side.

Få tidlig adgang til UXPin-fletning