socialgekon.com
  • Glavni
  • Okretna
  • Mobilni
  • Vlagatelji In Financiranje
  • Drugo
Ui Design

Mini vadnica - izkoriščanje značilnosti Figme za celoten postopek oblikovanja

Svet nastajajočih oblikovalskih orodij je neverjetno razburljiv. Obetavni novi programi se začenjajo hitro zaporedoma, vendar je še posebej takšen, ki je počasi postal najboljša izbira za večje in večinoma porazdeljene oblikovalske ekipe.

Figma lahko podpira celoten postopek oblikovanja od konca do konca. Prve skice, zbiranje povratnih informacij, sodelovanje, prototipi, pripravljeni na preizkušanje, in predaja razvijalcem so v okviru njegovih zmožnosti. Figma tudi poenostavlja delo produktnih menedžerjev in oblikovalcev ter vseh drugih deležnikov.

Torej, kaj določa Figma razen konkurence? Obstaja več ključnih vidikov, vendar je vse mogoče izslediti do dejstva, da je Figma spletna. To je dvignilo veliko obrvi, ko je bilo orodje prvič izdano, vendar je navsezadnje odprlo pot Figmi do prilagodljivosti in edinstvenih funkcionalnosti.



Značilnosti Figme vključujejo načrtovanje, izdelavo prototipov, sodelovanje, sisteme za oblikovanje in vtičnike

Kaj je bistvenega pomena za nemoten postopek oblikovanja izdelkov?

Res je, da ima lahko vsaka ekipa in projekt drugačen potek dela, vendar obstajajo funkcije in faze, ki so bistveni sestavni deli oblikovanja in upravljanja izdelkov. Figma pokriva vsakega.

  1. Dostopnost in sodelovanje . Ne glede na orodja, ki jih ekipa uporablja, mora obstajati način sodelovanja, predstavljanja projektov, zbiranja povratnih informacij in ohranjanja vključenosti zainteresiranih strani. Vse te funkcije so na voljo v Figmi.
  2. Prilagodljivost za ponavljanje in izdelavo končnih rezultatov . Figma je prilagodljiva in se lahko uporablja kot skupna tabla za skiciranje začetnih idej in ponavljanje vsega, od žičnih okvirjev do maket z visoko ločljivostjo.
  3. Sposobnost izdelave prototipov in testiranje . Oblikovanje mobilne aplikacije? Izdelajte in objavite interaktivne prototipe ter jih preizkusite neposredno na pametnih telefonih - vse iz Figme.
  4. Vzpostavitev enega samega vira resnice . Figma je odličen način za opredelitev sistemov za oblikovanje izdelkov, ki so v celoti na spletu. Privzeto gre za en vir resnice. Nič več se ne sprašujete: 'Je to najnovejša različica?'
  5. Gladka predaja . Preprosto delite povezavo z razvijalci in imeli bodo dostop do vseh informacij, potrebnih za izvedbo načrtovalnih linij, meritev in grafičnih elementov, pripravljenih za izvoz.
  6. Vsestranskost, ki jo je treba prilagoditi in izboljšati . API vtičnikov Figma omogoča skupinam, da napišejo svoje vtičnike ali se dotaknejo širše uporabniške skupnosti in razširjajo orodje z novimi funkcionalnostmi.

1. Dostopnost in sodelovanje

Spravite ekipo na krov

Oglejmo si podrobneje, kako Figma prispeva k šestim ključnim področjem, zajetim zgoraj. Novi uporabniki bodo morda želeli ustvariti brezplačen račun Figma, ustanoviti ekipo in gledati začnite z Figmo . Ko je ekipa ustvarjena, povabite člane ekipe in ustrezne zainteresirane strani, da se pridružijo.

Vadnica Figme

Na voljo so tri stopnje dostopa. Dokaj samoumevno je, toda običajno imajo pravice za urejanje dodeljene oblikovalski skupini, pravice do ogleda pa vsem ostalim. Sem spadajo razvijalci in druge zainteresirane strani, ki morajo biti sposobne slediti postopku oblikovanja in zagotavljati povratne informacije.

Prototip Figme

Podobne možnosti skupne rabe so na voljo na ravni skupine (prikazano zgoraj), ravni projekta in ravni datotek. Če ravni dostopa niso določene, se širijo od ekipe do projekta in od projekta do datotek.

Ker je Figma na voljo v brskalniku, ni pomembno, kako je nekdo povabljen ali v katerem sistemu je. Dokler naprava in brskalnik, ki ju uporabljajo, ustrezata minimalne zahteve , lahko skočijo naravnost s povezavo, vmesnik pa se spremeni glede na to, ali imajo pravice za urejanje ali ogled.

Vdelava projektne datoteke

Datoteke projekta Figma je mogoče vdelati v programsko opremo drugih proizvajalcev. Na primer, dokument Dropbox Paper v skupni rabi se lahko uporabi za predstavitev trenutnega stanja projekta.

Če želite vdelati datoteke projekta, nastavite vidnost datoteke na Kdor koli s povezavo - si lahko ogleda , kopirajte vdelano kodo in vdelajte projektno datoteko v katero koli podprto programsko opremo drugih proizvajalcev embed.ly .

Nadzor različice Figma

Povratne informacije in revizije

Druga ključna funkcionalnost postopka oblikovanja izdelka je sposobnost distribucije modelov, zbiranja povratnih informacij in upravljanja revizij. Kdor ima povezavo Figma, lahko vidi najnovejšo različico in neposredno komentira točko, o kateri želi dati povratne informacije.

Animacija Figma

Če želite člane ekipe označiti z znakom @, sistem bo prikazal seznam imen, med katerimi lahko izbirate. S tem obvestite člane ekipe in po obdelavi povratnih informacij lahko razgovore zaključite s klikom na Reši .

Aplikacija Figma

Za ohranitev poravnanosti ekip obstaja lepo integracijo ki lahko objavi razpravo iz datotek Figma v določenem kanalu Slack.

Sodelovanje v realnem času

Ena izmed bolj zanimivih funkcij Figme je, kar imenujejo več igralcev . Omogoča več članom ekipe, da hkrati odprejo in delajo z oblikovalsko datoteko. Vsi, ki delajo z datoteko, so vidni v zgornjem desnem kotu strani, njihovi avatarji pa so poimenovani in jih je mogoče klikniti.

Traja lahko nekaj časa, da ugotovimo, kaj to v praksi pomeni. Čeprav je to malo verjetno oblikovalci bo uporabljal več igralcev za hkratno delo na istem delu datoteke, neverjetno je tolažilno, če vas ne skrbi glede konflikta različice datoteke, zlasti pri večjih distribuiranih skupinah.

Multiplayer je priročen pri predstavitvi na daljavo, saj vsem, ki so povezani z datoteko, omogoča, da sledijo pogledu predstavitelja. Skupinam omogoča tudi, da obidejo dodatne programe in Figmo uporabijo kot spletno tablo (čeprav posebne rešitve, na primer gledam , morda na koncu bolj primeren za delo).

V ta namen je priporočljivo ustvariti komponente po meri za kopiranje določenih sredstev kot navideznih zapiskov ali elementov diagrama.

2. Prilagodljivost ponovitve in izdelave končnih rezultatov

Ko so člani ekipe povabljeni in začnejo začetne skice, lahko Figmo uporabite za ponovitev. Glavni razlog, da je bila Figma ustvarjena, je oblikovanje vmesnika —Po končani tabli se ekipe lahko premaknejo na zemljevide in žične okvire. Ponovno je pametno zgraditi knjižnice komponent, ki jih je mogoče ponovno uporabiti za te naloge. The zbirka uradnih predlog ponuja navdih in oblikovalske aranžmaje za začetek.

3. Sposobnost izdelave prototipov in testiranje

Ustvariti interaktivno je zelo enostavno prototipov z Figmo. Ko je datoteka Figma odprta s pravicami urejanja, je mogoče preklopiti med načinom načrtovanja in prototipiranja. Ko ste v prototipu, lahko kliknete element, da postane interaktiven, bodisi s stopničke ali stranske vrstice slojev.

Arhetip Figma

Z elementom, izbranim v načinu Prototype, se na strani prikaže majhen krog. Ko povlečete, se pojavijo modre črte, ki jih lahko spustite na zaslon ali stanje, da se prikaže rezultat interakcije.

Oblikovanje Figma

Skupni prehodi so na voljo v Figmi, kar olajša ustvarjanje prototipov z visoko natančnostjo. Pravzaprav je ekipa Figma pred kratkim izdala pametna funkcija animiranja in vlečenja . Pametni animirani vidik interpolira gibanje podobnih elementov, medtem ko je sprožilec povlečenja nova vrsta interakcije. Oba drastično izboljšata kakovost interaktivnih prototipov.

Testiranje uporabnikov

Še enkrat, povezava je vse, kar je potrebno za distribucijo prototipov Figma, tudi za testiranje uporabnikov. S klikom na majhno ikono za predvajanje v zgornjem desnem kotu se zažene prototip in ustvari se nov URL. Možno je kopirati URL ali uporabiti modro Skupna raba prototipa . Ko uporabniki odprejo povezavo, jim je predstavljen interaktivni prototip in lahko po želji pustijo komentarje.

Testiranje na mobilni napravi

Modeli za mobilne naprave so predstavljeni z vzorcem dejanske naprave, ki obdaja prototip. Če je za preizkus interakcije potrebno več realizma, je najbolje, da ga prenesete Aplikacija Figma Mirror za preskušanje, specifično za napravo.

4. Vzpostavitev enotnega vira resnice

Zgodovina različic

Ali ne bi bilo super, če bi bile projektne datoteke vedno aktualne in nenehno varnostno kopirane? Ta funkcionalnost je privzeto vključen v Figmo . Vsaka datoteka se med delom samodejno shrani in Figma po 30 minutah neaktivnosti ustvari nov vnos v zgodovino različic. Ustvari se dnevnik vseh samodejno shranjenih različic in vsako različico lahko po potrebi obnovite.

Orodje za oblikovanje Figma

Seveda samodejna različica ni edina možnost za prihranek dela. Različico je mogoče ročno shraniti ali urediti določeno različico v zgodovini različic.

Figma kako izdelati prototip

Sistemi za oblikovanje in komponentne knjižnice

Drug vidik, pri katerem Figma zasije, je, kako omogoča oblikovalcem ustvarjanje, organiziranje in distribucijo knjižnic komponent. Vsako datoteko je mogoče objaviti kot knjižnico, v drugih datotekah Figma pa je na voljo vsaka barva, slog besedila, učinek, mreža ali komponenta.

Prototip Figme

Ko se v katerem koli elementu v knjižnici spremenijo spremembe, jih je mogoče objaviti in razširiti v datoteke, ki uporabljajo te elemente. Oblikovalci ki delajo na teh datotekah, se lahko nato odločijo, ali bodo sprejemali spremembe.

Sposobnost odločanja, kako distribuirati knjižnice, skupaj z možnostjo preklopa vidnosti ali nevidnosti elementov knjižnice naredi celotno izkušnjo gladko in zmogljivo.

Komponente in knjižnice lahko ugnezdijo, da ustvarijo dovršene sisteme oblikovanja, kjer je vse različice in posodobljeno za vse vpletene. Vse komponente lahko označite s komentarji.

5. Smooth Handoff

Razvijalec Handoff

Z Figmo oblikovalci in razvijalci ne potrebujejo ločenega orodja, kot je Zeplin, za upravljanje predaje. Lahko preprosto odprejo datoteke in preklopijo na Koda v desni stranski vrstici, tudi z dostopom samo za ogled.

Zasnova uporabniškega vmesnika Figma

Kdaj Koda način je aktiven, izbira elementa na odru bo razkrila vse ustrezne informacije, potrebne za izvedbo, in vse druge informacije o položaju komponente v zvezi z drugimi elementi so vidne. Tako kot pri podobnih rešitvah tudi ustvarjena koda ni namenjena popolnemu kopiranju, vendar je koristno imeti tako enostaven dostop.

6. Vsestranskost, ki jo je treba prilagoditi in izboljšati

API-ji Figma in vtičniki po meri

Figma OGNJ in sistem vtičnikov najrazličnejšim oblikovalskim skupinam in disciplinam olajšajo prilagajanje programa njihovim specifičnim procesnim potrebam. Prilagodljivost Figme uporabnikom omogoča programsko interakcijo s platformo. Nekaj ​​primerov:

Uporaba resničnih podatkov

Neizmerno dragoceno je, da lahko uporabljamo resnične podatke v maketah in prototipih, Figma pa omogoča, da dovoli uvoz vsebin iz zunanjih virov. Z izkoriščanjem resnične vsebine je mogoče preizkusiti komponente oblikovanja, vzdrževati sprotne vzorce in vključiti ekipe, ki niso povezane z oblikovanjem.

Vtičnik z imenom Google Sheets Sync je odličen primer tega, kar je mogoče storiti. Ta vtičnik olajša integracijo Google Preglednic kot vira za zapolnitev in sinhronizacijo vsebine komponent v datotekah Figma.

Napredni tokovi dela

Sposobnost nastanitve a sistem oblikovanja v programu za načrtovanje uporabniškega vmesnika je dragocen le, če je sistem dosledno implementiran na zaslone, usmerjene k strankam. Na srečo obstajajo API-ji, vtičniki in integracije Figma, ki vam lahko pomagajo.

The Zgodovina addon sinhronizira datoteke Figma in prikazuje komponente Figma-design na plošči poleg implementiranih komponent. Še en zanimiv primer uporabe je Pretvornik Figma v reaktor , izboljšava delovnega toka, ki komponente Figma pretvori v kodo.

Izdelava prototipov z Figmo: pretvornik Figma to React

Uporabljati Pretvornik Figma v reaktor za posodobitev sloga na seznamu, ki ga je mogoče razvrstiti.

Figmine lastnosti so idealne za celoten postopek oblikovanja

Nobenega enotnega oblikovalskega programa ni, ki bi lahko kos potrebam vsakega oblikovalca ali oblikovalske težave, in to je dobro. Konkurenca med oblikovalskimi orodji je ugodna za oblikovalci . Zagotavlja, da podjetja, ki izdelujejo naša orodja, poslušajo tisto, kar potrebujemo, in nam zagotavlja najnovejše funkcije, primerne za delovna mesta, ki jih opravljamo.

Kljub temu je Figma napredno, a intuitivno orodje, ki se je več kot sposobno spoprijeti s celotnim postopkom digitalnega oblikovanja. Posamezni oblikovalci in ekipe lahko izkoristijo njegove edinstvene funkcije sodelovanja in ponovitve, kadar program ne uspe, pa ogromen izbor vtičnikov zapolni praznino.

• • •

Nadaljnje branje na blogu ApeeScape Design:

  • Moč Figme kot orodja za oblikovanje
  • Figma vs. Sketch vs. Axure - Pregled na podlagi nalog
  • Mini vadnica - Delo s komponentnimi gumbi Figma
  • Obvladajte svojo obrt s temi vrhunskimi orodji UX
  • Natančno oblikovanje - pregled Adobe XD

Razumevanje osnov

Ali Figma generira kodo?

Da. Figma generira kodo, ki jo lahko uporabljajo razvijalci. Ko je način kode aktiven, bo izbira elementa na odru razkrila vse ustrezne informacije, potrebne za izvedbo, in vse druge informacije o položaju komponente v zvezi z drugimi elementi so vidne.

Ali Figma temelji na brskalniku?

Da. Že od svojih prvih dni je bila Figma program za oblikovanje, ki temelji na brskalniku. To je dvignilo veliko obrvi, ko je bilo orodje prvič izdano, vendar je navsezadnje odprlo pot Figmi do prilagodljivosti in edinstvenih funkcionalnosti, zlasti kar zadeva sodelovanje in dokumentacijo.

Kaj je Figma design?

Figma je spletno orodje za oblikovanje, ki lahko ustvarja makete, interakcijske animacije in prototipe z visoko ločljivostjo. Številne oblikovalske skupine Figmo uporabljajo tudi kot knjižnico komponent oblikovalskega sistema. Poleg tega Figmi zaupajo nadzor nad različicami, funkcije sodelovanja, način predstavitve in generiranje kode.

Za kaj se uporablja Figma?

Figma je spletno orodje za skupno oblikovanje vmesnikov, ki se uporablja za oblikovanje digitalnih izdelkov. Ima napredne funkcije sodelovanja in omogoča oblikovalcem interaktivne makete. Prav tako je sposoben opraviti širok spekter nalog, kot je oblikovanje naborov ikon, ilustracij, logotipov in še več.

Kaj lahko stori Figma?

Figma je orodje za digitalno oblikovanje izdelkov, ki se odlikuje na šestih področjih: 1) dostopnost in sodelovanje; 2) prilagodljivost za ponavljanje in izdelavo končnih rezultatov; 3) Sposobnost izdelave prototipov in testiranje; 4) Vzpostavitev enega samega vira resnice; 5) gladka predaja razvijalcem; 6) Prostor za izboljšave z vtičniki.

Dobro strukturirana logika: Vadnica za Golang OOP

Back-End

Dobro strukturirana logika: Vadnica za Golang OOP
Kdaj je najboljši čas za objavo na Instagramu in ali sploh obstaja čas največje obremenitve?

Kdaj je najboljši čas za objavo na Instagramu in ali sploh obstaja čas največje obremenitve?

Objava

Priljubljene Objave
Spoznajte RxJavo: Manjkajoča knjižnica reaktivnega programiranja za Android
Spoznajte RxJavo: Manjkajoča knjižnica reaktivnega programiranja za Android
Znotraj skupine za izdelke ApeeScape
Znotraj skupine za izdelke ApeeScape
Vodnik po najboljših praksah za učinkovito vključevanje uporabnikov
Vodnik po najboljših praksah za učinkovito vključevanje uporabnikov
Naj to naredi LoopBack: predstavitev ogrodja API-ja Node, o katerem ste sanjali
Naj to naredi LoopBack: predstavitev ogrodja API-ja Node, o katerem ste sanjali
Odprtokodna programska oprema - naložbeni poslovni model ali ne?
Odprtokodna programska oprema - naložbeni poslovni model ali ne?
 
Nasveti za razvijalce celotnega sklada ustvarjalca knjižnice obrazcev Redux
Nasveti za razvijalce celotnega sklada ustvarjalca knjižnice obrazcev Redux
Grow Growth: S to odprtokodno kodo izvedite svojo analizo kohort
Grow Growth: S to odprtokodno kodo izvedite svojo analizo kohort
ApeeScape je bil leta 2019 priznan kot 'najboljši v svojem razredu' pri svetovalcu za digitalno kadrovanje Ardent Partners
ApeeScape je bil leta 2019 priznan kot 'najboljši v svojem razredu' pri svetovalcu za digitalno kadrovanje Ardent Partners
ApeeScape in partner za šotore za podporo globalni begunski krizi
ApeeScape in partner za šotore za podporo globalni begunski krizi
Spletna animacija v obdobju po Flash
Spletna animacija v obdobju po Flash
Kategorije
Prihodnost DelaŽivljenjski Cikel IzdelkaNačrtovanje In NapovedovanjeObjavaRise Of RemoteLjudje In EkipeUx OblikovanjePorazdeljene EkipeStreljanjeMobilni

© 2023 | Vse Pravice Pridržane

socialgekon.com