Projekteerimissüsteemi väljatöötamine. Kuidas vältida ootamatut rutiini.

Neli lihtsat asja, mida tuleb enne disainisüsteemi väljatöötamist meelde jätta ja järgida

Kui arendate disainisüsteeme, olete tõenäoliselt õppinud, et järjestus on oluline. Kui komponent või sümbol loodi ja olete selle enne vajalike omadustega omistamist korrutanud, sai rutiini oht võimalikuks.

Näide: olete komponendi loonud selle sisemuses asuvatest pesast sümbolitest. Kui unustasite parameetrite / piirangute suuruse muutmise õigeks ajaks täpsustada, siis skaleeritakse kõik kloonitud valesti.

Kiirendage projekteerimis- ja arendusaega kuni 50%

Figma materjalide kavandamise süsteem koosneb täpselt 512 materjali UI komponendist ja 1171 materjali ikoonist.

  • Ainulaadne arhitektuur kiireks kohandamiseks
  • Varustatud lihtsa ja selge dokumentatsiooniga
  • Pühendatud laua- ja mobiilirakendustele
  • Valmistatud vastavalt materjalide kujundamise juhistele
  • Kasutab maksimaalselt Figma 'eksemplari' funktsioone
  • Toetab Figma veebi API-d reaalajas integreerimiseks
  • Kliendid toetavad 7 päeva nädalas!

Lisateave → http://setproduct.com/material

Kui teil on endiselt kahtlusi, soovitan teil vaadata ülevaadet

① Koostage korduvate elementide loend

Tuvastage ja rühmitage kõik korduvad objektid täpse paigutuse, prototüübi või kontseptsiooni järgi. Mitte ainult loendis olevad nupud. Sildid, ikoonid, sisendid, pealkirjad ja nii edasi. Kui soovite luua piisavalt paindliku süsteemi, tasub lisada taustad ja isegi varjude parameetrid. Allpool saate teada nende toimingute eesmärgi.

Mõned korduvad komponendid

② Määrake kõik võimalikud olekud

Alustage nüüd elementide loendi moodustamist, kus süsteemi reageerimine on võimalik või vastasel juhul kasutaja tõenäoliselt suhtleb. Kui teie missioon nõuab isegi ühe oleku oleku kirjeldamist, soovitaksin seda protsessi hiljem hoida viimastes arenguetappides, kui kõik komponendid on visuaalselt teada ja siis võite endalt küsida: „Milline neist nõuab täiendavate olekute kloonimist? ? ”

Vähesed võimalikud olekud tekstisisestuste jaoks

③ Reguleerige piiranguid või parameetrite suuruse muutmist

Pange endale endale reegel: aKomponendi kallal töötades pean alati meeles, kuidas see skaleerub❞. Kas te mäletate näidet, millest ma selle postituse alustasin? Põhimõte on see, et peate kohe pärast kaadri teisendamist komponendiks seadma piirangud / muutma parameetreid. Vastasel juhul on teil rutiin kinni, juhuks kui peate tulevikus seda iga elemendi jaoks käsitsi kohandama.

Parameetrite suuruse muutmise ikoonid on seatud paremale klikkima

④ Ligipääsetavad nimed olid esimesed, osariigid - pärast

Kas olete oma komponendi valmis teinud ja kavatsete selle täiendavate olekute jaoks kloonida? Suurepärane, kuid esmakordselt rakendage sellele juurdepääsetavat nime. Hoolitse enda ja arendajate meeskonna eest ning kasuta selgeid nimetusi. Pidage meeles, et kloonitud komponendil säilib vanema nimi. Kui eelistate korrektsust, peaks minu tekstiväli kõlama järgmiselt:

Tekstiväljad / allajoonitud / vaikimisi

Nüüd saab komponenti ohutult kloonida. Seejärel eemaldage eksemplar, rakendage vajalikud visuaalsed muudatused ja redigeerimine jääb ainult lõpus:

Tekstiväljad / allajoonitud / aktiivsed

⑤ Midagi magustoiduks

Pole rutiini. Minu disainiprotsess on nüüd seotud disainisüsteemiga ja seda näidatakse YouTube'is otseülekandena:

Alumine rida ⤑ hoia järjestust ♛

See kõik puudutab tänapäeva põhitõdesid. Pole kahtlust, et disainisüsteemide arendamisel on veel palju nüansse, mida võib-olla kirjeldan hiljem. Kui hakkate süsteemi nullist alustama, palun jagage kommentaarides oma meetodeid / samme. Terviseks.

Mis järgmiseks? Selle Figma raamatukogu abil saate oma materjalikujunduse projekti kiiresti käivitada

Loodud Figma jaoks materjali prototüübisüsteemiga
❶ Avastage süsteemi → http://setproduct.com/material
❷ Komponentide ülevaade → http://setproduct.com/material/components
❸ Veel videoid → http://setproduct.com/material/videos
❹ Ostke ja laadige alla → http://setproduct.com/material/download
❺ 1000+ materjaliikooni → http://setproduct.com/material/icons_pro