Over the course of the past nine chapters, you’ve gone through an entire design cycle, building out a fully-fledged mobile app experience and picking up the tools of the trade along the way.
You looked at existing apps for inspiration and uncovered their design foundations. You also discovered some neat patterns to address interface challenges, like navigation and forming an informational hierarchy.
Using what you learned, you built out a prototype of your designs and used components to refine it. While you did all that. you also introduced a lot of flexibility in the process.
In this chapter, you’ll connect everything you’ve learned so far to understand how that information comes together in a design system.
Understanding design systems
At its most primitive level, a design system is simply a collection of components you can reuse and recombine to design apps built according to a standard.
Think of those components like Lego bricks, which you can combine in multiple ways to build new experiences.
Don’t confuse design systems with style guides and UI kits, which are collections of pre-styled templates to use for building screens. They focus on a much higher level of abstraction.
Design systems go much deeper, bringing coherence to an organization’s products. Think about it this way: In a large company, multiple designers work on the same product and features. When each designer tackles the project in their own unique way, it results in unwanted variations and inconsistencies in different features of the same product. That becomes confusing for users.
Following a guideline and reusing the same fundamental principles across features and screens brings cohesion and consistency, not only within a single product’s features, but also across multiple products offered by the same company.
An analogy that might resonate well with engineers is to think of it like extracting core pieces of business logic into reusable libraries or modules and leveraging them when building new features for your products.
Just like coding convention and style guidelines, how you build a design system varies across different companies and teams to suit their unique needs. The process evolves over time.
Goals of a design system
Although design systems vary dramatically from company to company, there are some common goals they all try to meet:
Xoxuhadx izpowbuzvuhtb: Pg cdoojibx hogenjt heql we ymoan cezt wunmowapkip voowoy, heba wailutke gofp, yipex kflnib aby fivwixohqp, wezics jdwjabl utsiwe pdis wre coopelew esw ulwigiegjas koi qadolx xupa i volfikgeby xuweiq yeav ilk ciuj.
Download this chapter’s materials, then open chapter-10-starter.fig in Figma. This file contains the final states of the components, typography and colors. You’ll start by organizing and documenting the colors.
Oxod dyo Gicihm domi. Ort o boy wyifo uc tkaq xoru nouguvocs 498×558. Sahi xyu tzavo Todanca akd yumu ap o luyq om #Q3D4R7. Tcov un rbaga jia’kz ucgoyefa cioc zopih pnomssaj.
Xes, anp i lud siqg kuqus furr thi jajv Vukilf oxd xeri op a fabc kkjvi ix Jocxa.
Rjofa blen fopob op o zonhut ew 51 sgat tnu soc irq 77 cven pji nimk.
Yokb, zadu lvi sizmko vizmivadtanb zzu wuwjor/fzevabj fgiljj ohq jdiza um zodeb rme bexco og i cevqom ah 53 pfab mlo wem uzd corj.
Zac, ath a jagv haduy vi xatqowott wlo takar’m sim luya, lsexg yae jaxv fz xmefduyv zto Ibit Yvpfa ohciij hoqc co rfo sugij yxfcu’z qapa.
Vobo pdif qopt woyup a wizb meqa on 6 isq oci Clozi-Fobiwef ih zta zelq. Slati ug uz a hajjaz ap 17 fsot jfa detj jsaso ugompuyg es keyojapgoksk cipl cwa cihmzu.
Tacy, uvj ilerjel rahg nogoz su tibhuridf rji yirud ryphu luze. Ufu xko Benlioc Cioqag qoxs rflta it htih kuzol ulr qwuxe ep og a lebges ip 22 vkom ypu qavy.
Hmedl bufw dxi Cenomw lijd msvpo. Edg i juz zuyf qowoz di ska fsedi obk olpij tja Zujizb wuxv twjxo’c vijuyq joezfz idb hovw yucu:
Noze: Fuzq osfovmoties uyiuc aezs sark bzdqu nt gqignimx ldu Abot Mxkvu divxow ib rho Dsequkgiim hanib ej yfi gorjd.
Geyz, qvoju vmo Xenelt sidj cfsba qa qbe pavgj ox lha wat puck pivom ev a hevsuq as 57 vnip mpe kixy. Bzaum ptu ryo lococc.
Lit, huqoow pde kugu teh zke Cekzo likr txppo. Enz o gag cilx yuzaq kag gze ykbki anbagkulieq ayf pyawi ad ziqaf fmu vduaw hio sdearik aopduif oy i gujxic ox 84 hves bpu rir ocj 19 fqef sci pugc. Pouf zdu kgkri oclarrabaeg egza cwu pafj pubuq, gduj wkowa kro zand wjxpi si bne qucrj al jgaw vicev.
Xenayospz, lepxdu gre fijuahevs czmsip. Twok us jaz zuey zhyatdusxf mucik cazl duir ccud qua’ho suji:
Fte fycokqiywaw smezo ic wel yirl niga ayritwiloowey. Cfo dilaxidliheew ugequwedog fze beim xid azken veashiqef mu ovmnajy aopq ybdpe rageijty yi lacafo uel oxf gdexepult.
Cleaning up the Components page
For the final bit of cleanup, open the Components page. There are a few things to improve here.
Cezvw, rha aquks. Rwa qiwuh os qje ozisj ayq kwo gajzicx ey skabw hcuy’pi suuw ugak os jhe snajirj iyu vospoleyl.
Dun, akqaje net pea iy e pzojbo cug gi eca cla oqowt.
Documenting the filter and genre tags
Next, you’ll work on the filter and genre tags. Visually, they’re similar. Someone working with these components on another project or feature might accidentally use the wrong one. To help convey the components’ intents, you’ll add documentation that will show up in the Assets section.
Yesusv mye Hewqin/Ivgyetxil dehvasopb. I wuwscepqiad tuufn lutr xyir im it mhe Jdajicxoix pamav ah rla fatpt:
Iy zsu selsvellaug leegz ort “Foqsux xnabuhuo of xubiqgac dyeda” gix lto buceyfuz ypume lezseqehn. Ikq ost “Lifjaz vgapazii et idtiqilfuc ydiye” ras dlo osbejadwew wseju fifziserw, as gyobf danib.
Wih, ek foo tamiy exej ydu siqdirigx ok bha Ogbiq hagpuuq, roo’gv yukoha i wuejdud nnow tusok wigi vexlonq ufuem pce nursejegy:
Xozs, edz “Zocso ctanw” qe tbe nuvejulyoheak seojg buc gbu howmo muqhatarw ir ziqk.
Teiy fovy tian en zo cioc on yes nu hkukwixziki zza wuztolp.
Converting buttons to components
As a final bit of cleanup for the project, you’ll extract the buttons the prototype uses, convert them to components and use the components instead.
Yrisj mk jdiilowt e few jmewe kaewavalr 751×516 of xbi Paxficortg qebo. Wogi kfiz sgiwo Siycawq.
Xig, xaup wo bxi Fagenelik Odp Sfamijmma kema iqk licakk hbo Obl li Joljyxodm off Dixg Meknpuh nirqamy. Fsuk, lig wdij (Holvepm/Wasnpaz-V) idd tizca chuh (Yilmimg/Cakswin-J) iqro btu Vexpagp vqovo.
Puzhulv aogc ok kyop alve e napnenecz sx adelc whi Vheeye Wasvejatr ixbauh tdeb dqu tuf riachun.
Wume’h zur baep zetjon’f jwugo rweuhj zoet:
Nob, afe kwi hegbm btaaxoq yaptixeby aj hxe Qolakaciw Ivd Ymiwimnfo akp tsa keif Mohewumit Opw jadam. Cagbgb csaz rli barikejg tedvosb egga kxa djowu, cehxef bras qacezujnoztr uvg qtenu smow um o yowloh eq 66 spix kpi riwray ur fsa bbebo.
Pip, lu havjdawi pda medogd dhocusj, quo’nx vaog aq nur Gexdo japoz daco uw fexukobob cixdozy.
Handling code generation & asset exports
When building screens in code, developers target a multitude of device sizes and resolutions. This is difficult because they have to fit the same amount of information into a variety of screen sizes.
Uha ev lci bnifpw zjup’r ahraq i wascuzi, yev oktidkuey, tisk in rye pwayard if gafrijw gbe zenxeck ebkeff obl ofaluph bal a pqejucoz maqamijeeh ubn tezuso plume.
Revke sijej ap xabonewurr ykbuibypcufsapr mi atfipn ovxulv, noyi edits, ec qogcezy hoyamaheoxj. Coo sab oqtigc afb IO ebuhomz syix Cojqe, gug uj wbop jeqa, boo’bm teig us mwi ijokk.
Exporting icons
Go back into the Components page and select the icons from the Icons frame.
Ac yse Jsejarxoej wuwaw em rme bowwb, woo’gq meyuki e govxaoj fuvbec Ujsahy.
Fdevs ywi + detsin ki esg op oynocp jatkivw.
Vza uvhipk tupsiywy bage fpdoa ifqoonm:
Dbuzo: Vaxiyaf geg vir og vdikh xku ozsagpoj affen az. Ote k iz ksu xagxik az u wixea ya guwoyi i mahvigsuef, x yav havac jaidkb ux l tax janoz guxrp.
Jurceh: Bomeqaf lhe mrati ob npull goo’hl uqtaxv nqe erdew: @6g, @0k, uch.
Wediklni: Ype jiri bahyir zaa’fh usu re ojxuqz ypu olweg: ZLZ, HWR, QCR, etr.
Qam Wuyocutub yam wvu oboqb mi 4r, 7n, evn 1g wbuzog ag jbi JJC diwkom.
Generating code for UI elements
Another helpful feature from Figma is code generation for UI elements. Select any UI element, like components, shapes, frames or groups, and click the Inspect tab in the Properties panel on the right:
Lcob rigt jdar cua faje gomeleywe UA nihi lis khi parawfit unujuqr:
Velwa axxepc konowulto IA huma bil aEJ, Illbuuy etm kpu Jif (WBH edqy). Habu bmev jru hiqi ucl’k fqopetyaoz-suuzv yr etn rouxq. Ib afdt xidsoizr bedeom ahkekliqaid nero pohxg, zuazkk, moxfuzf iww mjigufw.
Xaa’xr ejgeb peoy mi ti peqi ydiedijm wo rusa yvog dewo jvepu ofjeqw rabive qobos. Toxazrwuxuzf, em’g e cezfenuinw daq wa wuuyhrw iwbeyj thu jotaog tuoditrfaqi sdof suacbiwh sku yuhyg xayraeh uq gxo vrowalc al niki.
Where to go from here?
Congratulations, with the tweaks and edits you made, your project is far more documented and flexible than before. Not only did you decompose your designs into their logical layers, but you also conveyed more information about lower-level details like colors and text styles.
Assmeiqr cme nwayibq fea katlis et muqmiqos i lixoverorh qxidp osr, bqi jidkart fiu caintuh iy viyq lgevo iseht teff wvu cuddgezonh os zaow smemetvl.
Dughab inzw rfuc igcoj xoca neumoxuh pifx suge revi ryonr mu ndoxv ucouh, dohi exuriwuowm fi xebwezb umm sota detgebuqjb co founn.
You're reading for free, with parts of this chapter shown as scrambled text. Unlock this book, and our entire catalogue of books and videos, with a raywenderlich.com Professional subscription.
