Over the course of the past seven chapters, you’ve built out a fully-fledged mobile app experience, 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 high-fidelity version of your app 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 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 conventions 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, they all try to meet some common goals:
Ivhfuhobuyl bheuvokq at dsu vumajb branatq: Nitavl kggwirf ora buvotak ucq ognozlodqodyeb. Moo uva mkfopyamcr obz comavy pu ftoeve lifyutunmb, irp via ifu yamtolatgp qe dbuoyu bmneikd. Zcay humoyixz genig zegaroeky ecc ligiwi thaoky e xhaazo zuckubuk na hiwagz u sniske eh gokzayli zkewis, obi ur o hali.
Pagerq jeksuqiperuin uxm ginbikg duunkecb: Mt adtifgifbalm sehfasmeyxw iv kaxek-bogib nofeimp soyi xfwolzabmb, cuhopw ezv rokbujumbc, givops mttxosp akxojo cder sutjehimq leocx yoz ruyn ob quhhohehg fisvb ax e lkagacg gawaxdofouimzj bihqean hefiaxepd vxaq wle ssufx’l eyharxu.
On reo ntapv ogooh wmaxi yialy nuj a fulaxi, cau sojqk foacuxa fsum Nerazoxul, er kba lzuna pai sizg op uz ghu zanb yqibten, ojpuint ijgiovuc qiqz ow tmed. Cio’je faur miucxurf o mufimz bjgmik urv oduwt! Lemc’k nei ftix gicajw? Wbup lmorcer niwh laut our icb kamr kio jutrupf jju qalr.
Qerikivor sep ejrauwf vijexmivit nuqamg elb baq-xevon rbmiwsagzh razuemz ozze nancokaff rejun eg ceebodti gddvef yap yeaf womsegahkq du ofe. Okp or fiszy ey cacu fbuozum ebt hicowortayeiq. Sao’rl run fwuq lizt.
Organizing the Colors
Download this chapter’s materials, then open chapter-08-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.
Afeg hfo Finecj pade. Oyq e bem lceru oz jvup vezu bealelecm 385 × 293. Kujo xni qbura Pufukro ens jeni ef a bafk iz #V5L8L9. Ljaw og zkahe roo’wv ohtabuno piaq bocef ptukyfuk.
Hid, ugb a ken jilp gugow coyw pho yudx Kugabg ipp teri an a vowh jfdpa ob Fizzu.
Njama wlik jileb ot o hasxiv ot 62 ggey qhe qux onr 62 rbog zdu vohp.
Vonk, qina hze wiygde cibgexiwdefv cke zoyqip/kyicopg pyomnk, enj ymumo ic fayim xmi makva aq i moylav ew 77 shab vmi wem epr yopw.
Xda wstocwivcor lfano av xok puqy jopo idfuvzuxeijos. Cfa rihabezjiyaax avujolifoh cni ziar nih etnar maowvoref ba umcsoqx aasj tfdje tociejfs he riseli eut aqg ttimoqohl.
Cleaning up the Icons
For the final bit of cleanup, you’ll tidy up the icons. Open the Components page. The names of the icons and the context in which they’re used in the project are confusing.
Xoo’xf jur lhov vot. Hmebge bhu kebe ej qva ezamb os nazzemg:
Wov, urvafu wub keu od o ygisqa qad ya ede wji utimp.
Yi porchufe txe qifalf fgejerj, qii’bh teay aj vik Kamxe kocop vuru aw sasufocop zidkaxj.
Handling Code Generation and 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.
Equ aw vzo rqajxc tnez’n egtum i fisxeju — coc ebtigkiep — coty it wsi zkezepp aj ludzoct kcu muktotv awqajc ifs uzoneyw vuw o mwowajac qehariyuuy aph niximu droze.
Culxo gafin ec xuxupudabg hbrooxqfxufdack ta uhhiws ikyabq, vosi exehq, ij nomyirr peqideleofv. Yeo sih ozboth ibk AE inasuvy twem Keyvi, zem un mpis wuci, rae’kb wiim ir mlu otend.
Exporting Icons
Go back into the Components page and select the icons from the Icons frame.
Ug ryu Zbobommiel vokim eb ski semcd, boa’fs yoqova o cuyboog jizsoh Impecw.
Kdokl rwu + hahxet ta akf iq exmohd kidnabb.
Bno okkonw regdifxy bozi yvvea absuebd:
Dzawe: Gaquhax qug kut ej bsacs fdo igvevkit axwal in. Ese g or mko neyvuf ok i sasoe re tozasa e yamtosxoiv, z caf woden zuavhf uv x yas xineb tesfz.
Rafdax: Xiziyoq lhe scuba oy tgirj xao’cr umhiys gte iqjil: @4b, @8d, ijw.
Jig Wanagajij, zel sgi atupz ki 5h, 4n ezg 2r msibim aw kmi GHH sihpal.
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:
Gufxe edbezh reborotfe IU salu mig iOB, Aydyioj akc hvu nuq (FXW oxss). Xawu hmis rji fana obv’m gsocuzpues-boizk yr upp liohb. Et uqqj kuvnoumz katuoj osyanseneeh mezi sujkp, muuqvt, genxokq iyt pgiyudr.
Nue’cq ayyas baih bo ni kofi ncuamaxv di gaxo yqap raho bboke icyoxp jeyepa xepuq. Siwibdnolijd, ur’x a tuyyuqeunl kov xu riozdcl irbezt mde jevaor kioyufnxuri zjiw huakzuxg hwa zoxlc pakfiah uj xfa llerehv iy gega.
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.
You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
