Intheory,everybodyhasarelativelysimilarconceptforwhata“DesignSystem”means,thoughnuancesstartshowingupasweapproachtherealworld.Thetargetmaystillbethesame,butdifferentorganizationswillrequirediversestrategiestoaccomplishthem.Aswithmanycomplicatedtasksinengineeringandarchitecture,thereisnosilverbulletforwhatmakesagoodDesignSystem.
Althoughsuccessfulendeavorsshareafewcommonpatternsthathaveallowedfortoolingandbestpracticestoarise.Inthisarticle,wewillhavealookatwhatsolutionsfitinsidetheumbrellaofaDesignSystem,andafewimportantstepsandcheckpointsyouneedtokeepaneyeonthroughoutyourprojects.Ourexperiencemaydiverge,buthopefully,therewillbelearningsforyouwhereIpersonallyfailedandsucceeded.
Ifweconsidera“system”asacombinationofpartsworkingtogether,and“design”astheplanoflookandfunctionofsomething.ThenwecanunderstandtheDesignSystemasacollectiveofdefinitionsthatwilldictatepatternsinwhichtheinterconnectingpartsofasystemwilllook,feel,andwork.Thisisstillquiteabstract,butenoughtounderstanditasmorethanlooks.
It’snotacomponentlibraryyouassemblelikeapuzzleandarriveataconsistentlayout.Adesignsystemindeedhasapresentationaspect,butitisalsoaboutfunctionandintegration.Itisaboutexperience.
Withsomanymovingpieces,itisunderstandablethereisn’tasingleanswerforalldesignsystems.
WhenateamdecidestocreateaDesignSystem,therearetwoapproacheswheretheyneedtodecideupfront:
WhenallowingtheDesignSystemtodeveloporganicallythesuccessoftheendeavorcomesdowntobuy-infromstakeholdersandadopters.Andhoweffectivelytheteamwillbeabletoreactastheyclearalltheunknownstheyfindalongthewaywithoutbeingexcessivelydisruptivewithcontinuoussupport.It’satrickyroadandcommunicationiskey.Thereisn’taclearpathofactionasit’stightlycoupledwithteam’scontext.
Additionally,it’shardtotweakasasystemwhileit’srunning(askyourlocalelectrician)andastaskstaketime,requirementsmaychange:themarketwillnotwaitforyourcomponentlibrary.Ausual“makeitorbreakit”momentforanorganicDesignSystemisfindingoutthedevelopmentstoryforacomponentMVP(minimumviableproduct).
Ononehand,wehavedevelopersanddesignerswantingtocraftthebestpossibleexperienceandquintessentialcodequality;ontheother,thereareKPIs,ROIs,anditsbandofacronymstomeasuresuccess.Findingthebalanceandremainingscalableistricky.Howtoabstractsomethingunfinishediseventrickier,andavoidingthosefollow-uptasksfrombeingforgottenatthebacklogistheone-million-dollarquestionofproductmanagement.
BeingabletoiteratequicklyandincrementallyonyourDesignSystembecomesabasicrequirementwhendealingwiththeorganicapproach.Anditalsorequiresanextralevelofclarityfromyourconsumerdevelopers(incasethereareseparateteams:onecreatingtheDesignSystem,theothercreatingproductfeatures).Bothmustalignexpectationsclearlyonproductrequirementsanddeveloperexperiencerequirementsinordertohaveapropersymbiosis.BecauseaDesignSystemisnothingifit’sannoyingtouse,orifitmakestheuserexperienceworseinanyway.
Thereismuchmoreplanningrequired,unknownstobecleared,andinfrastructuretopreparewhenmakingtheconsciouschoiceofbuildingtheDesignSystembeforehavingaproducttouseiton.Theflipsidebringsmoreclaritywithconstraints.goals,andexpectations.Ifthesailsaredouble-checkedbeforeleavingtheharbor,thestormislessfrightening.
Thepredictabilityofthesystemalsogrowswhenplanningahead,andthisisbecausetheDesignSystembecomesitsownproductandnotthetooltomakeothersbetter.Withthisabstraction,patternsandsolutionsusedinothersaremoreeasilytransported.
ThoughchoosingIntentionaloverOrganicmayseemcounterproductiveatfirstforteamswithlessexperiencebynothavingaproof-of-concepttoteston,itisespeciallyhelpfultoavoidcommonpitfallswhengettingstarted.“Standingontheshouldersofgiants”isacommonjargonandholdstruthfulinthiscase.So,thebestrecipegoingforwardonthisshouldberoughly:
Thosefivestepsmaysoundsimpleandobvious,butthey’renot.It’seasytoskiponeoftherequirementgatheringsorcutresearchshort.Pieceofadvice,though:youwillpayinterestonstep4ifyouforgoteitherofthose.
Nopackageconsumerenjoyswhenadependencyupdatebreakstheirappinanyway.It’snodifferentwhenthepackageinquestionispartofaDesignSystem.Actually,onecouldpointoutit’sworse.Thebacklashofanin-housedependencybreakinganapptendstobebiggerthanwhenit’sanopen-sourcepackage,additionally,UIchangestendto“breaksilently”infrontoftheend-usersfirst:whichisparticularlyfrustrating.
Withthatinmind,wecanalreadylineupafewissues:
Importanttopointout,howmuchofapriorityeachoftheseitemsismayvaryaccordingtoyourmileage.ButthenecessityforthemwillincreaseastheDesignSystemscales,adoptionincreases,andthefeaturesgrow.Theymaynotbeenoughtopreventateamfrommovingforward,buttheywillforsurehinderproductivityifcapacityisskewedtofigureoutthosesolutions.
AnothereventualpainpointmanyteamsfaceisidentifyingthesourceoftruthinaDesignSystem.Isitcode,UI,ordocumentationFormanykindsofproducts,wejustlooktotheconsumersideandwecaneasilyidentifywhatisthemainoutput.Thereasonitgetstrickyinthiscaseisbecauseeachkindofconsumerwilluseitdifferentlyandthereforetheanswerwillvarybasedonthedemographicasked.
ADesignSystemisoftenamixofacomponentlibrary,documentation,andastyleguide.Andnotonlytheconsumerisdifferentforeachoneofthoseartifacts,butthecraftspersonisalsodifferent.Adeveloper,adesigner,atechnicalwriter;differentpeoplewillbenecessarytocreateeachoutput.
Inordertokeepdeliveryconsistent,communicationandcollaborationarekey.Andthealreadyestablishedwaterfall-likeprocessisnotencouragingforeither.
Thereisnodesigned(pun-intended)spaceforcollaborationoriterationbasedoneachspecialty.Oftentimesdesignerisunawareofsomecodelimitations,andthedeveloperiscluelessabouttheUXintendedfortheoutput.Thisapproachisnotextremelyprejudicial,itispossibletocreateagoodproductwithit.Butagreatoneishard,eachpartoftheprocessisalmostdisconnectedunlesstheteammakesanactiveefforttocorrectit.
Makingthiskindofcollaborationfrictionlessiseasiersaidthandone,though.Evensittingside-by-sidetododgethe“youaremuted”,“myconnectiondropped”,and“canyouhearme”annoyances,whencollocatedtheinformationexchangetendstogoinformaleasily,andthentheprocessmayenduphardtodocumentortoosynchronous.Wewantfewerbottlenecks,notmore.
Livecollaborationhascometogreatlengthsbetweenpeers.LikeVSCodeShareorFigma’sFigJams,cloudIDEs,therearemanyoptions.Butwhenitcomestoiteratingbetweendifferentspecialties,it’snotsuperstraightforward.Addthistothepileoftooling,architecture,orprocessesmentionedintheprevioussectionsandyougotapileofworktodobeforeevenstartingtowork.
Aspointedoutabove,maintainingadesignsystemisalotofwork.Thebestadviceisprobablytotryandnottodothingsfromscratchwheneverpossible.Usecommunityresourceswhereconvenient.Doingsowillmakeitupforlesstimetomaintainspecificpointsofthesystemanditwillhelponboardingengineersanddesignersiftheyarealreadyfamiliarwithcertainchunksofthesystem.
Oncethere,itwillarrangeintegrationwithaversioningplatform(GitlabandGitHubaresupported),aStorybookbasedsandbox,aVSCodebasedIDE,unittests,andevenpublishingtoNPMregistry(thislastwilldependonyourplanwiththem,itcanbetoyouraccountortheirs).
Wemappedpreviouslythereareatleast3differentoutputsmostDesignSystemsrequire:documentation,code,userinterface.Oncearchitectureisreadytooutputeachofthem,theteamusuallyfindsoutanotherchallenge:keepingtheminsync.Developersarealwayseagertomakechangesatomical,youtouchoneplaceandtheyspreadouttoeveryplaceconsumingthatinformation.WithinaDesignSystem,thatisn’talwaysclearhowtoaccomplish.
Ifyouaren’tfollowingtheHotPotatoProcess,it’seasytolosetrackonwhichUIupdateswerealreadyaddressedbydevelopers.Andevenifyoudo,thenthere’sdocumentation.Backlightaddressesthisproblembycollocatingeverything.
Andoncechangesaredone,withoutleavingtheplatform’sdashboard.Itispossibletochecktheupdatedlivedocumentation.
Andallthisisonlyscratchingthesurfaceofwhattheycanboostyourarchitecturewith.Youalsoget:
ItisacompletedevelopmentenvironmentforyourDesignSystem.Andyoustillgetallthoseintegrationsevenifyoudecidenottousetheirstarters.TheinfrastructureisthereforyoutobuildthecomponentlibrarythatwillfeedyourDesignSystemfromscratch.
Asmentionedbefore,theHotPotatoProcesscanbecometroublesomeforteamstosetuparemoteandasynchronouswayofworking.Backlightaddressesthatwithacombooftwofeatures:
Designintegrationbringsthedesignartifactfromyourdesigningtoolwithinthesameplatform.Sotherestoftheteamcanlook,addcomments,andreferenceworkstraightfromthesamedashboard:
Withthisfeature,thehotpotatoprocessstartsrightatthedrawingboardnomatterwhereyourteamislocated.Andwithoutswitchingtabs,itsmoothsbackandforththecodingprocesstoowiththelink-sharingfeature,betterexplainedwiththeirpromotionalgifthananythingIcoulddomyself.Developerscanshareareal-timeremotelinkoftheirworkwithoutpublishingthingsanywhere,noin-betweenprocess,that’sabigboostforteamsthatneedtorapidlyiterateondetailedwork.
Incaseitwasn’tyet,hopefully,it’sclearernowwhatcreatingandmaintainingaDesignSystementails.MuchmorethanahandfulofCSSclasses,tokendefinitions,andtypefaces;it’stooling,activesupport,andadvocacy.Theusefulnessofaprojectisdictatedbythequalityofitsoutputandhowfastitcanadapttotheever-changingrequirements.