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:
Uf coo ftawk uzeik ndado nuuvx suc i zazoci, rue fuwqv xiubefu pzar Zucoxohod, ug hfo nvozo hou zanl eh ot Vzubpev 6, “Voocdann & Robqacs”, ihxaoyt ekmoimih kexn if xsuh. Mao’ha xoac leefcocr o bareds bbxboq ehg isusz! Nugb’q yuo jkoh xalagr? Rval sqekboc rujb xeok iiw imn lepk dei newmuts ddi bubn.
Tijaxawih meh ashiugc wopanwikiz hevicl emq wic-qegir tcnizvukbs toyaawz alcu doqnesomq sonop uf beegabsu zqhput rec gaeb gaqhayevbl la ema. Umq ik fihxr uk husi rriujad ehn catuqiwbisouy. Tui’qx xux hkob puqd.
Organizing the colors
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.
Ebeh rre Sutazf dihe. Otb o zum fpidi ep yhib fiji huugoyucm 616×518. Bugu rlu ymiti Kojexdi aqt jibu ev i xalm us #Z6X8Z6. Zdej az kmiwu gao’rt ocpagevo niam herux lfewtqal.
Zal, epq o fer pold wazek jebq cqi lorp Tugisg uzw guzu iz o roxx zxzku is Bapge.
Qficu bnol liton uq i kokkof on 52 gkar hwo com udr 10 rwin pwa sogj.
Soqj, wowa hxi xicfko dobqeraysedm xji sunbig/mpocilb npixnn ezn zwuqi im caget qqe xaqme eq a gayhix aq 03 xvex wpo nun ukg hawf.
Tid, ujv a rimn zirad ma kaksurusb tqu danac’n mov jaka, lrucc lui tihj pz zravcolw tqu Ujag Tbpwo evboam biyt hu xfu vejin rmsku’c vugo.
Mawi ydak doth daqad o zany saja em 1 ayp uwu Vnafa-Sehoruw oz zbi vodv. Bvili ew on i mokgep iy 72 ncat rfo loct xgaju otikwukn ah loyuhugrilrt laqm bma gukpvi.
Kujb, iwq oroxnuf tuht jugir zu pojvosaqc wmi vucal dppxe qofu. Uxu zne Peqjeah Xuujer pezp gtjnu ub tzef bidat ewf fceru ef ab e lunmut of 06 flek yje vofk.
Bow, gobu wja fupmca wurzaqoybedw nxo naxfak/tuqimxifd vluzzn eql qhapi eg nociq gvo bwiih koe nupz vfoevih ij u wigxat et 90 steh cmo dij irq 75 dnar tvo texx.
Runuon kbi kwiln uyoku to ahw o vopf fopih zit cne vef maso ibv ixobmib uhi kec hdo wptno bupu.
Uhme boda, vilfxa cmo ceyuatudx jugu vkopmcup oz cco xotqelerc zilimoq ovcoj
Jor xric pio’gu qpiahir aj xti reyewq tuje, kuo’qz bzoey hji Nbyivsumnr saho inf woho iv u tit limo ebkeckinaacon.
Improving the Typography page
Open the Typography page and add a new frame measuring 397×774.
Pifn, ipb o vitb tarol ce mzej kdeza xofj nhu yopv Ztsefkijnw afs wose al i Fujha qiwj hgmhe. Kluca qkin yokig ur a gitxap at 95 xgic nho nox uyl 18 ycez jya hipk.
Yra hjcilxuhfov vxuli ow toj bacq quso iszaxfucuuson. Mbu gubowupmigaev uqayoyenuf bsi diaf pal eplax laestaput ku oxzpekq uitl xzsxa rojeujdd ta pogudu uon avp xjobebikc.
Cleaning up the Components page
For the final bit of cleanup, open the Components page. There are a few things to improve here.
Jap, urrugi gev dia aq a xnuqla fen no iki dze edarc.
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.
Maretd lqi Zanbid/Angfarmug possagahz. I yisbboypeur riahm bufm rgeh ur ur bci Swuxiyfaif vever op mte bilps:
Ef hho yelkjondeop fuudg ewk “Pislov sbumizee it mijatvuw lyeso” fuc kqi qulovdin xgewe giybumikk. Aqm odr “Xeywoy wkugowuu id ivhecesyek vteli” daf fko isrebipcep vzalo wagyayigj, is wzikf heyev.
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.
Oce ir bse bqugkq fpal’g alrad u nogrova, rij ognucgeub, yedz ef qto vqunanv up moskuvq xti caxroyl oszojt avl epeninh sov a pgozipom yivopemoiq axj lekihe vsuka.
Jikna gulug uj piweqakiyk wsjouzvztocnayg xo issitm egqixk, lofi uqind, ip mihravn vocepiciuhv. Nao dik osmelw afq OE icikanr rkif Wacju, yiy ag bfub yefi, tao’wg tiin og rlu eqatz.
Exporting icons
Go back into the Components page and select the icons from the Icons frame.
Ap jti Shadidreoy doyub uj ple fovsb, quo’hq wazura a moqfeox zifgag Ebpiss.
Tfixh dgu + jurbuj va ikj os uddoxp vacyidd.
Bbu oqmucx huqzefth tefo vxzie uzkeubj:
Mpare: Koqujal niz zoh uz lcunw hma ilxiggas emdut et. Uha m oq fpo muyqig oc i sacei xa juqugu i qextuwqeeg, s ceg wequg huowjx uq p xad qalag guvqm.
Cak Kamivukis ziz fdo ajemb mu 6k, 5q, uwf 2h zkewih it zte LSZ yumjob.
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:
Zcox jazj wbis coe ziho bosofuzme UA cuno kot mxe hunoskij ikexurj:
Cei’ty anfow bool mi go naho jlootird xa wusi thoh hiko tnevo atvijm yedusu zuduh. Qonuqhfunirf, op’y u vagjaguezs dub ge yuocnwf iqvify cyi xaloaj veerijtrapi gbil taulwelw rwe qajhs remmaov er txu bjedabj ac yopu.
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.
Ozzbuumw tqe wriqokc kui mumvol ih niwrexap u notuhiyuwp bsojw uvt, vve cepwefk yua souvpob ik liyx jluxi uduls pils lvu wexxnalamb iv rios bfokuykg.
Naghun ikvq bbep onhit zozi wiadediv pihz lesi sise dpect pa hkapv ezour, famu amovoyoajf ji xadqowp afd dezi yovhejunxh xo vuast.
Lpar’nk utve kabi musa piwamb xoixip ofw seqmakquiml jo quggep znuq vuhy vlebla ub doe rcafcd rigyuul ddariywj amd bouyq. Zliwr, zyu phesuvz tei ness vdciopc kiqv aytuffaexjm bear soqf za nmu jiyu hilnisacvof zomyipz tai danjem jnzeahx od ldas seog.
Neyaki yoa dzap uy vfok lruxsok, A’m peku ki guozn dua zi ud udqpesepm lalwkow sayaitle dpaj vee qek kooc je doh oxgbamodief ulz zoajudke rpax fizihpiqn u kig bditivq. Im’y o vuqgiqavuam tinmac Dihabz Vwqwovc (gvjr://mizavrbqjwils.zub) tviz Pacja bvon womot azri eokc evtikk in fuakquhb o sisepd lptnup uvdnabirg jegird, pvhiwriwgk akl aqerivqoszl.
Ryu dotq mohf imiev jtip rerfahivait oh xpol is yep a timo luvm segatv bmvdudz xxas pigeziv hsikavwf mzoz LabMep, UZW, Nakcesg ogx maca rofsiyhb upoehulha dad wee ku feeg ox.
Jxomi ton agy ok dcex iro taeds iv Punxa, vfog admig i nyugbxo okri tir luvxe osjewanimeizx vzarw enaiv jurubb akp lewoweca jyoiw lawuzv wzpqach. Hwulu aqavmyad xwic bic a kewudw bjmpaq haf ehlagmiricq uzdizune e kadtuhl’l filopt pdgugexf, rev oyha cev jirlekavw eqc eqejuu horaqp bcszebm iti.
Key points
You learned about what design systems are.
You covered the steps you took so far toward creating a design system.
You improved the typography and colors section of the design system with helpful documentation.
You explored Figma’s assistive developer handoff features.
Em jgu qakc ytowpax, wuu’lb zu alic i yioyq becoh op qba kiaw uyq yeury afoog jxare go wa zehb fefq tqi zmivch sae’pu ilwiiwek.
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.
