Luonnoksen käyttäjän näkökulma vaihtamiseen Figmaan

Kaikki mitä sinun tarvitsee tietää

Kuvan luonut Figma-blogiin Peter Barnaba

Figma-toimittajan huomautus: Emme yleensä laita Figma-arvosteluja blogiimme, mutta teimme tässä poikkeuksen. Marco Pacifico selitti työkalumme edut paremmin kuin meillä olisi voinut olla, joten halusimme hänen artikkelinsa (joka alun perin ilmestyi Prototypr.io) olevan resurssina käyttäjillemme. Kiitos Marco, että annoit meille postituksen. !

Käytin Figmaa kuukauden ajan, ja sen ominaisuudet ja kuinka hyvin se toimii. Pidin siitä niin paljon, että olen kampanjoinut joukkueeni puolesta siirtyäkseen Sketchistä. Tämä viesti on mukautettu keskusteluihin, joita olen käynyt työssä, ja se on eräänlainen piki tuotetiimejä, etenkin jaettuja joukkueita, jotka puhuvat siitä, miksi Figma on parempi monin tavoin.

Ensin poistetaan perusasiat tieltä

Figma on verkkopohjainen suunnittelutyökalu, jolla on reaaliaikainen yhteistyö

Se on kuin Craft Freehand, mutta kaikilla Sketchin (ja enemmän) ominaisuuksilla. Se toimii selaimissa, ja on myös natiivisovelluksia, joiden avulla voit työskennellä offline-tilassa.

Miksi verkkopohjainen on hyvä asia?

  • Ohjelmistoa ei voi ladata, asentaa ja päivittää jatkuvasti.
  • Tiedostoja ei tarvitse tallentaa ja järjestää. Työt tallennetaan automaattisesti jaettuun tilaan pilvessä.
  • Yhdestä URL-osoitteesta tulee totuuden lähde, jonka kaikki saavat nähdä. Joka tarkoittaa…
  • PNG-tiedostoja ei tarvitse ladata jatkuvasti, synkronoida ja järjestää jatkuvasti useisiin paikkoihin.

Mutta onko Figma hidas?

Ei. Ihmiset kokevat, että Figma on esiintyvämpi kuin Sketch. Tämä on ollut myös kokemukseni, jopa työskennellessään suuren tiedoston kanssa.

Entä Sketch-ekosysteemi? Luonnoksessa on niin paljon laajennuksia, että luotamme työnkulkuun

No, olen täällä kertoakseni, että menetämme mitään merkittävää käyttämällä Figmaa; me vain voisimme.

Figmassa on kaikki Sketch + Abstract + InVision + Craft + Liveshare + Freehand + Zeplin + Dropbox kaikki ominaisuudet ja ominaisuudet yhdessä ja joukko muita. Tässä on vain joitain ominaisuuksia, joita Figmalla on:

  • Samanlainen käyttöliittymä ja kaikki samat piirtotyökalut kuin Sketch.
  • Prototyyppien. Figmassa on napsautettavissa oleva prototyyppitoiminto, joka on samanlainen kuin Craft + InVision.
  • Sisäinen kommentointi. Kuka tahansa linkin omaava voi lisätä kommentteja mihin tahansa muotoilun tapaan, kuten kommentointi toimii InVisionissa. Voit merkitä ihmiset kommentteihin, merkitä kommentit ratkaistuiksi ja jopa integroida Slackiin.
  • Kehittäjän vaihto. Dev-ohjelmat voivat saada ulottuvuuksia, tyylejä ja ladata kuvakkeita ja kuvia projektin URL-osoitteesta. Se on kuin Zeplin, mutta jälleen kerran, sinun ei tarvitse synkronoida tauluita aina päivittäessäsi malleja.
  • Version hallinta. Figma sisältää versiohistorian kaikille yhteistyökumppaneille. Voit siirtyä takaisin edelliseen tilaan tai haarukkaan. Tämä toimii kuin aikakone Macissa.
  • Moninpelin yhteistyö. Useat ihmiset voivat tehdä yhteistyötä reaaliajassa. Kuten Freehand, me kaikki näemme toisteni kohdistimet näytöllä ja voimme piirtää asioita ja kommentoida.
  • Liveshare. Jos napsautat jonkun avataria, saat nähdä mitä he näkevät näytöllä ja seurata kohdistintaan. Tämä toimii aivan kuten InVision Liveshare (RIP Liveshare).
  • Komponentteja. Samanlainen kuin Sketch-symbolit, mutta joustavampi ja helpompi suunnitella. (Lisää tästä alla)
  • Rajoitteet. Samanlainen kuin Sketch-koon muuttaminen, mutta intuitiivisempi.
  • Joukkuekirjastot. Voit jakaa ja päivittää komponenttikokoelmia projektien välillä.
  • Bonus: Voit upottaa jopa Figma-projekteja Dropbox-paperiin.

Katsotaanpa nyt todella hyviä juttuja ...

Figma kattaa kaikki emäkset edellä mainituilla ominaisuuksilla. Mutta se tulee todella mielenkiintoiseksi, kun mietit miten se parantaa työnkulkuamme.

Seuraavassa on neljä tapaa, jolla Figma voi perustavanlaatuisesti parantaa toimintaamme.

1. Voimme iteroida WAY nopeammin reaaliaikaisella yhteistyöllä

Voit tarkistaa suunnittelun, tehdä päivityksiä lennossa ja saada heti palautetta muutoksistasi. Toistojen välinen aika voi siirtyä päivistä minuutteihin, koska näyttöjen lähettämisessä tai synkronoinnissa, jakamislinkkien luomisessa, viestien lähettämisessä linkkien katsomiseen on nolla aikaa. Kun koin tämän ensi käden, se oli niin hämmästyttävää, että vuodatin yhden ryypillisen ilon.

Alla on joitain tosielämän skenaarioita, jotka voivat tehdä työstä hitaata ja tylsää parhaimmillaan aikoina ja uskomattoman turhauttavaa pahimpina aikoina. Kaikki nämä skenaariot katoavat käyttämällä Figmaa:

  • Kun olet synkronoinut kaikki näytöt InVisioniin, huomaat, että haluat suurentaa kirjasinkokoa hieman otsikkokomponentissa, joten muutat suunnittelutiedostoasi ja joudut sitten synkronoimaan kaikki näytöt uudelleen InVisioniin.
  • Kun käytät Craft -sovellusta synkronoidaksesi monimutkaisen, moninäyttöisen prototyypin InVisioniin, ja sinun on sitten vietettävä tunti, kun vedät ja pudotat näytöt oikeassa järjestyksessä InVision-tunnissa, koska Craft lataa ne satunnaisessa järjestyksessä.
  • Kun joku toisesta aikavyöhykkeestä unohtaa sitoutua tai lähettää työtään, sinun on odotettava, kunnes hän on jälleen verkossa saadaksesi uusimmat mallit.
  • Kun ohjelmisto on päivitetty ja kaikki kolmannen osapuolen liitännäiset rikkoutuvat ja menetät tunteja.

2. Suunnitteluprosessistamme tulee entistä kattavampaa ja saumattomampaa

Yhtäkkiä suunnittelutiedostosta tulee paikka, jossa kuka tahansa voi tavata ja keskustella malleista. Tämä tarkoittaa, että suunnittelijoiden on helpompaa työskennellä samanaikaisesti, tutkimalla vaihtoehtoja ja iteroimalla lyhyemmin. Tämä tarkoittaa, että kehittäjät voivat havaita ja ilmaista teknisiä huolenaiheita ennemmin kuin myöhemmin. Ja tämä tarkoittaa, että sidosryhmät, projektipäälliköt tai kuka tahansa jolla on linkki näkevät, kuinka muotoilu etenee ideasta kiillotettuun visuaalisuuteen sen sijaan, että odottaa suurta paljastamista.

Sen sijaan, että suunnitteluprosessi hajotetaan useisiin tiedostoihin, on nyt yksi paikka, joka voi kertoa koko tarinan ja kehittyä suunnitteluprosessin edetessä.

Pidän siitä, mitä OpenText-suunnittelija Thomas Lowry kirjoitti siitä, kuinka hänen suunnitteluprosessinsa on muuttunut käyttämällä Figmaa:

Kun alamme sukella massiiviseen verkkosivustoprojektiin, Figmasta on nopeasti tulossa olennainen osa prosessiamme. Tuotamme lankakehys- ja matalatarkkuuden prototyyppimme Figmassa aina visuaalisen suunnittelun vaiheeseen saakka. Tämän prosessin aikana aloitamme komponenttien perustamisen ja siirrämme ne ryhmäkirjastoon monien tiedostojen käyttöä varten. Kun tarkistamme komponentit eri skenaarioissa ja muotoilu kehittyy, mahdollisuus tehdä kaikkien tiedostojen maailmanlaajuisia muutoksia on valtava ajan säästö.

3. Siirtymämme suunnittelusta koodiin on todennäköisesti nopeampaa ja johdonmukaisempaa

Siksi, että Figman kanssa on helpompaa rakentaa mallisi tavalla, joka heijastaa sitä, kuinka nuo mallit koodataan.

Ymmärtääksesi miksi sinun on tiedettävä, kuinka kehykset toimivat. Figma käyttää kehyksiä taulujen sijasta. Kehykset ovat erilaisia, koska voit sijoittaa kehyksiä kehyksen sisään. Kun asetat pienemmän kehyksen suuremman kehyksen päälle, kaksi kehystä ryhmitellään automaattisesti ja pienemmästä kehyksestä tulee suuremman vanhemman kehyksen lapsi. Lasten kehykset on sijoitettu ja rajoitettu vanhempiinsa nähden. Tämä on yksi niistä asioista, joka vaatii jonkin verran totuttelua, mutta kun kerran teet, ihmettelet kuinka pärjäät koskaan ilman sitä.

Voit jakaa ruudun avulla ruudun sisältöalueille ja sitten pesätä komponentteja (jotka ovat itsessään joukko sisäkkäisiä kehyksiä) kyseisten osien sisällä. Tämä lähestymistapa yhdistettynä automaattiseen ryhmittelyyn, suhteelliseen sijoittamiseen ja rajoituksiin tekee helpoksi nopeasti rakentaa yhdenmukaiset ja reagoivat mallit.

Tällaisten kehyksien käyttäminen on hyödyllistä kehittäjille, koska Figmassa oleva kehys muistuttaa HTML-säiliötä. Kun kehittäjät tarkastavat mallit, he näkevät käyttöliittymäelementit, jotka on sijoitettu vastaaviin säiliöihinsä, mikä tarkoittaa, että heillä on tarkempi suunnitelma, johon viitata, kun he kirjoittavat koodiaan.

4. Suunnittelujärjestelmämme ovat joustavampia ja helpompia suunnitella, mikä tarkoittaa, että säästää aikaa ja saavutamme johdonmukaisuuden kaikissa projekteissa

Luonnoksessa on symboleja ja Figmassa on komponentteja. Ero on siinä, että komponentit ovat joustavampia kuin symbolit, mikä tarkoittaa, että voimme tehdä enemmän vähemmällä niistä, mikä tarkoittaa, että käytämme niitä todennäköisemmin sen sijaan, että rikkoisimme niitä tai aloittaisimme tyhjästä.

Kuinka komponentit ovat joustavampia kuin symbolit?

Luonnoksessa voit käyttää Symbol Overrides -sovellusta muokataksesi tekstiä tai vaihtaaksesi sisäkkäisiä symboleja. Mutta jos haluat muuttaa jotain muuta - esimerkiksi tekstin kokoa, reunuksen painoa tai taustaväriä - sinun on irrotettava symbolista ja luotava hiukan erilainen versio samasta käyttöliittymäelementistä. Tämän ratkaisemiseksi voit sijoittaa jokaisen variaation yhteen symboliin, mutta päädyt sitten ohituspaneeliin helvetistä. Suurten projektien ja monimutkaisten käyttöliittymien kanssa kaikkien permutaatioiden järjestäminen ja ylläpitäminen tulee nopeasti kestämättömäksi.

Figman avulla voit käyttää ja muokata komponentin minkä tahansa kerroksen ominaisuuksia irrottamatta sitä masterista. Sama asia koskee sisäkkäisiä komponentteja. Nyt aina, kun muutat pääkomponentin kerroksen ominaisuutta, muutokset levitetään vain tapauksiin, joissa kyseistä ominaisuutta ei ole vielä ohitettu.

Mielestäni nämä kolme gifiä tekevät hyvää työtä kuvaamaan visuaalisesti, miten se toimii.

1. Luo komponentti ja kopioi se sitten luodaksesi kaksi master-esiintymää.2. Pääkomponentin muutokset siirretään heti kaikkiin sen esiintymiin.3. Paitsi, että kaikki korvatut ominaisuudet pysyvät korvattuina, vaikka isäntä vaihdetaan.

Kuinka komponentteja on helpompi suunnitella kuin symboleja?

Ensinnäkin, sinun ei tarvitse huolehtia nimeämisrakenteesta (ts. Kuvakkeet / haku), kun luot komponentteja. Voit nimetä isäntäkomponentin myöhemmin, ja se päivittää kaikki esiintymät - ei Sketch-tapauksen tapaus. Ja luodaksesi luokka komponentteja, vain ryhmittele ne kehykseen ja nimeä se kehys mitä luokka tahansa on. Tämä tarkoittaa, että on helppo järjestää asiat myöhemmin uudelleen vetämällä komponentteja ympäri. Minulle tämä todella pienensi sekä komponenttien luomisen että niiden seuraamisen kognitiivisia yleiskustannuksia.

Toiseksi, komponenttien käyttäminen Figmassa on paljon helpompaa kuin piirrosten käyttäminen. Jälleen kerran sinun ei tarvitse miettiä nimeämisrakennetta navigoidaksesi symbolien nimien sisäkkäisessä valikossa. Sen sijaan voit löytää (ja nähdä!) Komponentit pikkukuvien luettelona. Voit lisätä komponentin näytölle tai vaihtaa ilmentymää vetämällä ja pudottamalla kankaalle. Tai voit kopioida ja liittää pääkomponentin luodaksesi uuden ilmentymän - et voi edes tehdä sitä Sketchissä luomatta uutta symbolia.

Tarkastele ja käytä komponentteja tasot-paneelin välilehdeltä

Toinen asia, joka helpottaa komponenttien suunnittelua, on se, että Figmassa voit muokata pääkomponenttia suuremman näkymän yhteydessä sen sijaan, että tarvitset mennä erilliselle sivulle muokataksesi. Mielestäni on erittäin ärsyttävää saada pomppimaan toiselle Sketch-sivulle joka kerta, kun haluan muokata kuvaa, joudun vaihtamaan takaisin malliin nähdäkseni muutokset muuttuvanaan.

Lähettäjä https://blog.figma.com/components-in-figma-e7e80fcf6fd2

Käärimistä

Mitä enemmän käytän Figmaa, sitä enemmän syitä pidän siitä. Siellä on paljon yksityiskohtia, jotka päädyt selvittämään, kun aloitat työskentelyn sen kanssa. Kaiken kaikkiaan se tuntuu kehittyneemmältä ja harkiten työkalulta rajapintojen suunnitteluun.

Muut resurssit

Toimittajan huomautus: Alun perin julkaistu osoitteessa blog.prototypr.io 6. huhtikuuta 2018. Figma ei tukenut tämän viestin luomista.