Sustav dizajna za Figmu - Snaga dinamičkih elemenata

Tijekom prethodne godine pokušavao sam slijediti čvršći sustav dizajna pomoću Figme. Moć alata kao što su Figma Components dostiže vrhunac svojih performansi ako kao dizajner može dominirati svojom fleksibilnošću u procesu u kojem se čovjek osjeća sigurno.

Evo nekoliko mjeseci nakon otkrivanja alata, izlaganja kako pristupam organizaciji elemenata i komponenti. Ovaj je članak namijenjen pokretanju rasprave o tome što drugi ljudi mogu raditi drugačije i pozdravlja povratne informacije, jer to nikako nije zabranjen postupak.

Za vrijeme, Figma komponente neće biti ovdje detaljno objašnjene. U slučaju da niste upoznati sa Figma Componentsima, Figma ima ovaj sjajan članak.

Dobivanje opsega svakog elementa

Prilikom dizajniranja održivih sučelja, važno je biti svjestan sastava svakog elementa. Složeniji elementi imaju šire grane unutar njih, što rezultira prirodnom hijerarhijom elemenata.

Upotrijebimo preklopne gumbe kao primjer elementa. U svom najčišćem obliku, preklopni gumb rezultat je zbroja dvaju podelemenata - pozadinskog pravokutnika s zaobljenim rubom + krug koji će se pomaknuti udesno i ulijevo kad se klikne.

Stoga preklopni gumb možemo razbiti na više komada. Ovi komadi su dijelovi kostura tipke za prebacivanje. U ovom trenutku možemo predvidjeti da će i sam gumb za preklop biti dio kostura elementa više hijerarhije i tako dalje.

Skok u Figmu odmah mogao bi postati problem u nekom trenutku dizajnerskog procesa jer nismo predvidjeli koji će elementi biti dio našeg elementa. Koji su podelementi koji omogućuju ovaj element da postoji? Što je element složeniji, to je veća vjerojatnost da će utjecati na održivost elemenata koje gradimo.

Dizajn na papiru najprije može pomoći. Nedostatak vjernosti u brzoj skici daje nam slobodu riskirati i testirati različite podelemente prije donošenja odluke. Moje iskustvo govori mi da skakanje na Figmu nakon toga znatno olakšava posao.

Prve komponente - kvarkovi

Svaki kvark bit će jedinstvena komponenta

Kroz ovaj članak ćemo izraditi skup od tri različita gumba koja se razlikuju po boji pozadine i položaju preklopnog kruga.

Već smo slomili najjednostavnije podelemente sastava preklopnog gumba:

  • tri pozadine - svaka od njih sa svojom specifičnom bojom
  • bijeli krug - zasjenjen za skeuomorfne svrhe

Do ovog zaključka dolazimo jer znamo da želimo tri vrste preklopnih gumba koji se razlikuju u boji njihove pozadine. S druge strane, bijeli krug nema promjena u sebi preko ostalih preklopnika (samo njegov položaj na prekidaču, koji je vanjski sam po sebi).

Ti se osnovni elementi nazivaju Quarks.

Kvarkovi su osnova osnove. Iz istog razloga moramo ih pretvoriti u Dijelove.

Zašto stvarati komponente?

Ako mislite da stvaranje komponenti ne vrijedi puno vremena i truda, pokušajte ih ne stvoriti. Plakat ćete i mrziti sebe jer to niste učinili prije. Povrh toga imat ćete dokument Figma s preko 30 ploča umjetnina koje sadrže 200 primjeraka elementa koji nije komponenta, a sada želite promijeniti njegovu boju. Zamisli to.

Prethodno iskustvo dovelo me do zaključka da biste trebali stvoriti Komponente kada:

  • vi ćete - najvjerojatnije - kasnije htjeti promijeniti neki aspekt tog elementa
  • taj ćete element upotrijebiti negdje drugdje

U prošlim projektima izgubio sam puno vremena obnavljajući elemente, pretvarajući ih u komponente i zatim distribuirajući ove komponente preko sučelja. Ta se dva glavna pravila teško naučiti, ali pokazalo se da su vrlo korisna.

Atomi ulaze u sliku

Atomi su rezultat kombinacije Quarkova

Samo kvarkovi obično nemaju nikakvu vrijednost u dizajnu. Moraju ih kombinirati kako bi nastali s Atomima kojega želimo.

Atomi su elementi koji nastaju kombinacijom Quarkova, tvoreći elemente više razine složenosti i vjernosti.

Budući da želimo imati veću kontrolu nad izgradnjom Atoma, pretvorit ćemo ih u Dijelove. U slučaju da ikad budemo trebali promijeniti položaj Quarkova unutar atoma, to će biti puno lakše zahvaljujući snazi ​​komponenata. Jedinstvena promjena Atom glavne komponente primijenit će promjene na sve distribuirane komponente.

Projektiranje na umu prototipa - Dynamic Elements

Grupirajte komponente s magijom iznutra

U ovom trenutku imamo tri komponente - Active Toggle, Inactive Toggle i Gold Toggle - koje možemo koristiti u našem sučelju.

U većini slučajeva prototip će se izrugivati ​​u nekom trenutku tijekom faze dizajniranja. Nakon testiranja s korisnicima, prikupit ćemo uvidljive podatke i ponoviti na našem sučelju.

Izgradnja prototipa - stvarno detaljnih - zahtijeva mnogo stanja elemenata. Obično se elementi nazivaju prema višestrukim stanjima, kao što su "gumb-crveno-lebdi", "gumb-crveno-posjećeno" i tako dalje.

Prilikom izrade prototipa osjećam potrebu za brzim promjenama stanja elemenata. U slučaju preklopnika, umjesto svakog Atoma zasebno koristim ono što nazivam dinamičkim elementom.

Dinamički element je komponenta koja grupira sve podelemente koji predstavljaju različita stanja ili varijacije jednog podelementa.

Korištenje dinamičkih elemenata rješava problem promjene stanja Atoma između ekrana u fazi prototipiranja. Korištenjem skrivenih slojeva, možemo koristiti dinamički element preklopnika (koji sadrži sve Atom preklopnike) i sakriti onaj sloj koji želimo vidjeti na svakom zaslonu.

To možemo učiniti tako što brzo odaberemo Atome koje želimo sakriti i pritisnemo Ctrl + Shift + H (Windows) ili Shift + Cmd + H (Mac). Također postoji mogućnost odabira sloja koji želimo vidjeti, uputite se na Objekt> Sakrij ostale slojeve, a svi ostali slojevi unutar dinamičkog elementa bit će skriveni.

Dinamički elementi su u osnovi vreća. Zapravo čarobna torba. I svaku čarobnu vrećicu možemo staviti na naše sučelje. U ovom slučaju imamo čarobnu vrećicu preklopnika koja sadrži sve postojeće preklopnike unutar nje. Na sučelje koje gradimo možemo postaviti više čarobnih vrećica i reći: „hmmm, ovdje si, postani zlatna pregrada. Vi tamo, trebali biste biti neaktivni preklopnik. "

Takvi su elementi bili nadahnuti postovima Thomasa Lowryja, kao i odgovorom Toma Johnsona, gdje opisuju korištenje različitih varijacija elementa (ikone, u njihovom slučaju) unutar jedne komponente.

Imenite dinamičke elemente> Osvojite svijet

U ovom specifičnom slučaju, dinamički element sadrži sve atome preklopnika (aktivni preklop + neaktivan preklop + zlatni preklop). Riječ dinamika koristi se za opisivanje takvih komponenti jer mogu imati mnogo oblika. Sakrivanjem slojeva možemo prikazati prekidače na dinamičan način.

Ako ove elemente imamo kroz sva sučelja, postaje važno prepoznati ih. U suprotnom, oni ne najavljuju svu snagu unutar njih (mogućnost promjene između mnogih stanja unutar njih). Stoga je važno da ih u skladu s tim imenujemo.

Prolazeći kroz fazu prototipiranja, osjetio sam potrebu da postojim nešto zbog čega bi se ovi dinamički elementi istakli. Važno je reći da ni na koji način nisam stručnjak za imenovanje metodologija (i složit ćete se u sekundi). To je polje koje još istražujem, ali mogu vam reći što djeluje za mene.

Koristim emojis.

Preciznije, koristim tri jednoroga, kao u

Nema šanse da nam nedostaje dinamički element na ovaj način. Kad god element na početku imena ima tri mistična bića, znamo činjenicu da će unutar te komponente postojati varijacija stanja. Možemo ga otvoriti, sakriti / sakriti slojeve i vratiti se u fazu prototipiranja.

ALI FIGMA UVIJEK IMA INSTANCIJU NEŠTO !!!

Istina, čini se. Ali osjećam da mu nedostaje razumijevanja.

Kad odaberete dijete komponente, opcija Instanca omogućava nam prelazak na drugu komponentu. Drugim riječima, zamijenio bi dinamičke elemente. Instanca je čak pametna! Predložit će drugim komponentama slične izvornoj koju želimo promijeniti i dati prednost tom izboru.

Baš super!

U ovom slučaju pokušavamo promijeniti veliku plavu komponentu elipse u drugu komponentu. Instanca sugerira druge koji bi mogli biti ispravna opcija za promjenu.

Ali dopustite mi da vam ispričam još jednu priču.

Prilično c-ČITAJ, ŠTO ?!

Iznad možete vidjeti primjer kako Instance izgleda kada imamo puno komponenti. Teško je kretati se kroz sve komponente - u ovom konkretnom slučaju, na mom zaslonu postoji stranica koja nije dostupna zbog ogromne količine prikazanih komponenti.

Ponekad nas Instance može izdati. Neki prijedlozi koje dobijemo pri pokušaju promjene komponenata možda nisu ni blizu onome što tražimo - i tada ćemo možda morati plivati ​​oceanom komponenata, kao što je prikazano gore. Budući da je njegova organizacija vrlo ovisna o imenovanju komponenata, može se odbiti.

Održavanje čistog i urednog

Sve na svoje mjesto

Obično uvrštavam ove elemente u Okviri nazvani prema vrsti sadržaja koji Komponente predstavljaju u svrhu pristupačnosti.

Važno mi je da tim elementima budu dostupni. Ako se nešto treba promijeniti, znamo gdje ih možemo pronaći. Obično koristim strukturu poput gornje gdje imam:

kvarkovi

  • 3 različite pozadine za gumb (Komponenta)
  • 1 bijeli krug (komponenta)

atomi

  • 3 različita preklopna gumba (komponenta)

Dinamički elementi

  • 1 element koji sadrži sve izmjene preklopnika (komponenta)

Jasno su prikazani različiti podelementi i elementi koje predstavljaju, kao i dinamički elementi.

Prototipiziranje s dinamičkim elementima

Stavite jednu komponentu, ima ih više

Prototipiranje s dinamičkim elementima postalo je mnogo lakše.

Koristeći samo jednu komponentu koja je imenovana s tri jednoroga, znamo da unutar te komponente imamo sva stanja i varijacije. Sakrivanjem slojeva moguće je brzo preskočiti između stanja i izbjeći nered u potrazi za drugim varijacijama u izborniku Instance.

Kako koristite Components i organizirate svoje elemente na Figmi? Moj je cilj poboljšati ovaj pristup. Evo nekoliko pitanja:

  • U kojim bi me slučajevima ovaj pristup mogao blokirati u budućnosti?
  • Gdje trošim vrijeme i resurse i kako to mogu izbjeći?
  • Koje su vaše najbolje prakse i kako sve možemo učiti od njih?

Veze koje bi mogle biti od koristi

  1. Možete pronaći tijek dijagrama procesa komponente na Juauz.com/figma.jpg
  2. Kliknite ovdje kako biste istražili Component organizaciju dobivanjem kopije Figma datoteke koju sam koristio kao primjer (s elementima + prototipom)

S obzirom na raspon koji kreće od "Trebao sam zatvoriti ovu karticu prije 5 minuta" do "Gdje mogu angažirati ovog tipa?", Nadam se da vam je to na neki način pomoglo. Usput, stvar o zapošljavanju bila bi na juauz.com - hvala!