Samspillet mellem design og udvikling

TL; DR: Interplay er det første designværktøj, der sætter design og konstruktion i stand til at arbejde problemfrit på de samme skærme fra hvor som helst i verden og bevæge sig tættere på produktionen med hver iteration.

Samspil - Design med reelle kodekomponenter (Foto af designecologist)

Hvorfor?

Design af digitale produkter er blevet stadig vanskeligere i de senere år. Programmer er mere komplekse, fungerer på et voksende antal enheder med forskellige tilstande og sofistikerede interaktioner.

Nogle har givet udtryk for, at designere skal kode for at håndtere denne kompleksitet, men i Interplay mener vi, at en bedre løsning er at få designere til at arbejde tættere sammen med udviklere. For nylig har dette samarbejde haft stor fordel af vedtagelsen af ​​Design Systems og ved at strukturere vores teams til at arbejde i multidisciplinære pods. Kaelig sætter det bedst i sit inspirerende indlæg “Design Systems Ops”:

”De bedste produkter er bygget af teams med store kommunikationsbroer mellem designere og ingeniører. Uanset om du er den ene eller den anden, i slutningen af ​​dagen ... vi leverer alle software. “- Kaelig

Vi elsker dette, men vi fandt, at god kommunikation alene ikke er nok. Adam Michela går endnu længere i sit indsigtsfulde Quora-svar på ”Bygger vi de rigtige designværktøjer?”.

”Jeg tror, ​​at der fremover er mulighed for at skabe værktøjer, der blander (snarere end bro) design og implementering.” - Adam Michela

Uden et værktøj, der blander design og implementering, oplever vi smerten ved designfiler, der adskiller sig fra produktionskode, af designsystemer og stilguider, der bliver uaktuelle og forældede, og af slutproduktet, der ikke nøjagtigt afspejler den hensigt, der er udtrykt i det originale design.

Forestille

Forestil dig, om designere og udviklere kunne arbejde sammen i hurtige iterative sløjfer, og samtidig arbejde på de samme skærme fra hvor som helst i verden og komme nærmere produktionen med hver iteration.

Forestil dig at kunne teste, hvordan et design føles lige fra den første version af designet. Evaluer hver version i flere tilstande og sammenhænge og i fuld tro med alle de rige interaktioner og overgange, der allerede er bagt i dit designsystem.

Introduktion af interplay

Dette er nøjagtigt, hvad vi har opbygget med Interplay, og vi er virkelig glade for at lancere vores offentlige beta om et par uger. Her er en smugkig på nogle af de ting, vi har arbejdet på ...

Design med reelle kodekomponenter

Takket være kraften i kodekomponenter kan vi sige farvel til dagene med simulering af tilstande og interaktivitet ved at duplikere tegnebræt og tilføje hotspots. Fordi kodekomponenter har tilstande, overgange og begivenheder, der er indbygget lige i, kommer prototyperne, du opretter i Interplay, med alle de gode ting gratis. Det betyder rigtige knapper med korrekt polstring og svævertilstande, reelle formindgange med pladsholdere, etiketter og fejlmeddelelser og korrekt lydhør navigation.

Googles materialekomponenter i samspil

Bygget til at løsne dit designsystem - eller hjælpe med at få det til at ske

Designsystemer indeholder hundreder (hvis ikke tusinder) hårdt vundne designbeslutninger - fra fuldt interaktive kodekomponenter med animationer til systemer til typografi, afstand, farver og ikoner. Hos Interplay er Design Systems førsteklasses borgere. Designere har de nyeste produktionskodekomponenter lige ved hånden, så deres design arver automatisk al den godhed og konsistens. Men det er ikke kun en envejs ting - udviklere kan opdatere komponenter undervejs, og designere kan bidrage tilbage til designsystemet, så det fortsætter med at vokse og modnes over tid.

Brug af farvetiketter fra dit Design System

Live samarbejde og øjeblikkelig deling

Foretag visuelt ændringer, mens dit team kan se øjeblikkeligt på enhver enhed, hvor som helst i verden. (Vi ELSKER dette, og håber, at du også vil!)

Responsive React-komponenter fra Seek Style Guide, Seek.com.au - tak @markdalgleish

Eksport af smuk kode

Vi hører dig ... vi har set mange designværktøjer forsøge at tilbyde kodeeksport men ofte ender med at generere en grød med HTML og CSS. Dette er fordi de forsøger at konvertere billeder eller rektangler til kode.

Når vi eksporterer kode fra Interplay, eksporterer vi virkelig bare et arrangement af de komponenter i produktionskvalitet, som du importerede. Eksport kan tilpasses med skabeloner, der passer til dine udviklers foretrukne kodestil (f.eks. Redux & css-moduler / mobx & stylede komponenter / ...).

Eksport af Polaris React-komponenter ved hjælp af eksportskabelon med stylede komponenter

Og der er så meget mere!

  • Layouts - CSS Grid, Stacks (Flexbox), Document Flow, Frame (og vent til du ser Auto Grid! )
  • Workflow Integration - import af aktiver fra de værktøjer, du kender og elsker, hvad enten det er kode (React, Angular, Vue, ...) eller designværktøjer (Sketch, InVision Studio, Figma, ...)
  • Data og stater - stresstest dit design med rigtige data.

Vi er kun få uger fra vores offentlige beta-lancering, og vi frigiver flere oplysninger i de kommende uger - hold øje med at følge os @interplayapp eller tilmelde dig for tidlig adgang på https://interplayapp.com

Endelig til alle de fantastiske mennesker, der gav os tidlig feedback om konceptet, spillede med tidlige versioner af Interplay eller gav indsigtsfulde svar på vores undersøgelser en kæmpe tak !

Michael (@mkeftz) og Adam (@MrAdamWalters)

Medstiftere, interplayapp.com