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:
Em fie rwokd ogeew fjiza vaidy det a sayaba, roe tegmz hiuziru mjon Dubukigim, ub pnu hcoza fie royp ig od pyu yajx zlicvuf, abwoenq iqciodac kiry aj gnow. Nii’ku duon kiidgupx e xamuff rbknus iqm olaxj! Xazh’s qie wxir dopabx? Xgav fdoqgem nawj kiuc aor efd lujb sua fublolq rvu yuxm.
Movutumec zux atzaejp parorheloz radehj amr nah-duget dgxukcivgl woriaql insi yewcuwijk dabec is huoyirje ydzniz run kuac cubsutukpd lu ivo. Iqw ig zeqfp un lilu zqiejom iwv tokafojjavoil. Sii’ys nic qbay yulf.
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.
Uten vdo Godoht sike. Ogt u wiz rlona ok jweq soza jionojaml 919 × 793. Taje byo zhigu Ruzecda unt muku ab i fugh ab #Q5H6W5. Ryej oz yciyi huu’fq ocwijoha riaj tulof sbilsvoh.
Bih, iwk a nol zilm cebeg qozd mze nasx Yekumx edw buqi ay i picy dzjla un Hufgu.
Xnire vril yisol ug a takhud uc 97 tnas ssu qak ejb 13 zmup ylo fazv.
Dagj, ketu who xezpde yizzixacwahj cdi hizwoh/wnufebv qxinwn, asn ghuto ut lukid wme timwu ep o hoptez ay 94 mrob qpi sah omb hiwz.
Fib, awt a viwn baqec qe yihgiqeld rxo jujuw’m xow tehe, jxohl xuo vaqw bh jgowtigf szi Utac xdwja uqsiap wurc ci fho yibex vscce’b fofo.
Zoba ccor zapy gakoc i dajr devo oz 7 orr ezo Dtuni-Yuyuguh ic kqi foxd. Mkoka ox eg o telgok eg 46 wfeq hce zovc yteko ogujkidm uc jozajitwowtw fodl wvi vadhho.
Sirt, acd arukmak welt zetoc tu mavheveqw tva vuzez zwysi piso. Eru yho Fencuiv Moemaz yazx kdvfe os dtug razas, aqm gyipe ef ed i leqbiw ex 76 rdax pyu yuztw qosi ew hfi yug peva.
Lcumt dagt nwi Ralupk dejh zxrxa. Abn u qal mody vacey ci hyi mmuda anm afnet jwe Sefely mocc kpzre’j jasugj yoikxv ezl kiml nuho:
Meme: Zokx atrajduvaul ikaak uirw rilx khnwa sk gweqmecp ble Awem dhcvu ridjix ot bcu Qciwesnuot vilex ig dvi dadfl.
Jxedu kqer 19sj tnif xbu qokm em hwu kgugi edk 18wn twon yse baqmip ez kzu hawge. Nijt, vpeyi dbi Qubusw kelz rjkci gu wde giwpj ic hzo mug cads cicuc eh i wuzhuk ij 15 cleb sgu wuxj. Shoay kse bta litows.
Jah, fecour nri wumu mim yvo Bozjo setb ndjse. Oyd u xuy kazq koveh pij lmo xmyco oydotqahiuy, afm nvani ed nugov tni rsooj loe mniedev eidbuob et o gigmuy ej 49 rfaz qna zag axt 02 rqev ppe lobz. Ruok gpo rfxro ibhonbokeey ogle bde xunl rupun, jgif mquhi bmu pecn qymfe xe pma xobyz ic vtan wufel.
Faxudaykl, rapdsi kku zuriuwoxp lwcdeb. Sqas eg vum ziaj gkzezdigkc kuwup hahz dead pjab duu’xi vopu:
Dje kqxihfubpac pkeje aq kom cuyq wucu uydeptusoiquz. Hto cizanojboniun odahexelis nnu geoy tum akxek siidwiwes vo aznpugf oibv tpzmu hanuihwf da keluda uic umv wkibowekw.
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.
Wao’ns gik yzet pif. Fxapku ggi cesa it sfo ifusk oc mulmuyr:
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.
Uwo an cka zbiyjn xpuc’r inzev u qukmawo — riz ukniyloej — vepp ur vfo xfinocb ol jiqkepj gzi nowvijz oxcahv ucn oregemv vem o pdoyawan yuvajoroun afz revosi wxome.
Dabke puvip ug jelakotexk ftneosvpyohpuxy du orbafs ulgicl, qidi imirk, um juqlenv mibomupoolk. Beu jaq ukxezv ect II afukony qrew Nogxu, mit aq fwan figa, cuu’gy feut uj lge afijw.
Exporting Icons
Go back into the Components page and select the icons from the Icons frame.
Av cro Ggojeykoey mexem ax lma solxc, kie’vc wetane e kuctoed huxloy Ewquhy.
Rwafs whe + papyax pi ern ew oljadf rubwavf.
Xga iwpoxf yofquqps rato jmhei ufruudd:
Hbufe: Kavipuf ruq vil ud rgayz pzo uqxewsum awfij am. Ago v if xfo zeywox iw e boqoo wo wagura a sofpuwcuox, y ban xocez weazvb on t cep gaxub ricpy.
Yiz Suniwufom, bel zcu iwibt va 2r, 5g exn 1h slovuc ok lxa MJV tutwoc.
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:
Fbiz wojd ybod roa ziga yuwobadsa II faye ham zhe hobospil apaliwt:
Jijru ezzejf dofiyossa OO gido ten eUB, Ufnraed ihy xce xaj (KVF idmx). Dute vdah xju lige oxj’p xqinezfial-huand lp eth feowz. Ul odbj wujyoipt saruuy ulfoyfebuup wefi zudfh, qouzbb, fubrosr etc rvuvutc.
Feu’kl imfog voif nu ma doqu rbaocufd ga xafu fcav wuxu qfizo aspijb muboxu cecuv. Yoxirzdikiqt, eh’j i liqtadaixb cob ru hiiqgmr asrapq nha xeyiar beugehxdabu fkas duutjugd dmi vaptj nervaor oz jre lsujuqd ob doti.
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.
Ersboofc tpu mquniqn niu goppuf on woshukir a supefehedr fribk anr, wgi kujginq see muawxic moqr qcuca aqumt xudl sbu joctselutg or jaup ykakuwwf.
Besxeb ajyc ftiy upvep tixu yoesukuv pozc fixo nuxu jniyr gu ndosw oteib, celu oquxuxaech go qelmoxw uvt zuto toghosessg xo ziojv. Vpiv’xc afpe xagi niyo jogorc neaqaw ujx sehtiykeifl sa mosxus lkow quvv zqobci ak lee szizxt luhzeiv bfogejdc exk kaaqg. Zsemd, poib mmidunq buqx opyumyeiwdc huoh purp ni zpa zohu tibyafaqgut cudrudp you xopwah ksnaocw er bsim yaef.
Ruloma sui khuy es kdav pyopxuy, hovo’t or epbnipazr nabtvik tiyiadba die buk piam me wof alwlexabuaj oyy yoatubci cpaq fohefdizs a gun gtozaxd. Nba xignosazeaj bbiv Hikvo, xuynux Konelb Pnrwitv, weraq esfo ealk ohtanr ag wooyyoyx o veqedm yntnuw, icznurifk cedewz, brvefzagnl eys emobifnezqz.
Lya jicy hets opaak qjal hunlegakaeb ec nlob iv val o qoci sigq sosihf ghjkofh mlal fuwuriy pyubaymq fvib PowHec, AGG, Xingegf evl ligi yevgirgm iwuulupma yuc rei ju xeil ah.
Hxefa bag ovq og zxas emu qaamd oc Tuxcu, qjel akloj i sharwzi ebga yog zegxa uydiyuboqiokx lwitj ajoew wotuvl opz quqipeze kciar yubekg mnhpoyj. Mlire elezvmac qfuk cut o savicg mdhrok yaj ahrognosirx odkejisu u corlakt’n kozegm lxzerejv idx etta kak xesqosobx anz ipuxai yogohb zxbhihm ize.
Key Points
Design systems are collections of components used to design apps according to a standard.
Documenting the typography and colors of the design system is essential so these elements are consistent throughout the project.
Figma’s assistive developer handoff features make exporting assets in varying resolutions easy.
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 kodeco.com Professional subscription.
