Visandikasutaja vaatenurk Figmale üleminekul

Kõik, mida pead teadma

Figma ajaveebi jaoks illustratsiooni lõi Peter Barnaba

Figma toimetaja märkus: Figma arvustusi me tavaliselt oma blogisse ei pane, kuid siin tegime erandi. Marco Pacifico selgitas meie tööriista eeliseid paremini kui meil oleks olnud, seetõttu soovisime, et tema artikkel (mis ilmus algselt lehel Prototypr.io) oleks meie kasutajate ressurss. Tänud Marco, kes lubas meil selle risti postitada !

Ma kasutasin Figmat kuu aega ja selle funktsioonid ja kui hästi see töötab. Mulle meeldis see nii palju, et olen oma meeskonna jaoks teinud kampaaniat, et Sketchilt üle minna. See postitus on kohandatud vestlustest, mis mul tööl on olnud, ja see on justkui tootetiimide, eriti levitatavate meeskondade jaoks mõeldud kõne, mis räägib sellest, miks Figma on paljuski parem.

Kõigepealt eemaldage põhitõed

Figma on veebipõhine kujundusriist, mis pakub reaalajas koostööd

See on nagu Craft Freehand, kuid kõigi Sketchi (ja enama) funktsioonidega. See töötab veebibrauserites ja on ka natiivseid rakendusi, mis võimaldavad teil töötada võrguühenduseta.

Miks on veebipõhine asi hea?

  • Puudub tarkvara allalaadimiseks, installimiseks ja pidevaks värskendamiseks.
  • Teie faile pole vaja salvestada ja korraldada. Teie töö salvestatakse automaatselt pilve jagatud ruumi.
  • Ühest URL-ist saab tõe allikas, mida kõik saavad näha. Mis tähendab…
  • PNG-sid pole vaja pidevalt üles laadida, sünkroonida ja korraldada mitmesse kohta.

Kuid kas Figma on aeglane?

Ei. Inimesed kogevad, et Figma on pigem esituskunst kui Sketch. See on olnud ka minu kogemus, isegi suure failiga töötades.

Aga kuidas on Sketchi ökosüsteemiga? Visandil on nii palju pistikprogramme, et me loodame oma töövoo jaoks

Noh, ma ütlen teile, et Figma abil ei kaotaks me midagi märkimisväärset; me saaksime ainult kasu.

Figmal on kõik funktsioonid Sketch + Abstract + InVision + Craft + Liveshare + Freehand + Zeplin + Dropbox kõik ühes ja veel palju funktsioone ja võimalusi. Siin on vaid mõned funktsioonid, mida Figmal on:

  • Sarnane liides ja kõik samad joonistusriistad nagu Sketchil.
  • Prototüüpimine. Figmal on klõpsatav prototüüpimisfunktsioon, mis sarnaneb rakendusele Craft + InVision.
  • Sisseehitatud kommenteerimine. Igaüks, kellel on link, saab kommentaare lisada kuhu tahes kujunduses, sarnaselt sellega, kuidas kommenteerimine töötab InVisionis. Saate inimesi kommentaarides sildistada, kommentaarid lahendatuks märkida ja isegi Slackiga integreerida.
  • Arendaja jaotus. DEV-d saavad projekti URL-ist mõõtmeid, stiile ning ikoone ja pilte allalaadimiseks. See sarnaneb Zepliniga, kuid jällegi ei pea te oma kujundusi alati sünkroonima, kui oma disainilahendusi värskendate.
  • Versioonikontroll. Figma sisaldab kõigi kaasautorite versiooniajalugu. Võite eelmisesse olekusse tagasi pöörduda või seda tagasi hankida. See töötab nagu ajamasin Macis.
  • Mitme mängija koostöö. Mitu inimest saavad reaalajas koostööd teha. Sarnaselt Freehandiga näeme kõik ekraanil üksteise kursoreid ja saame asju joonistada ning kommentaare teha.
  • Liveshare. Kui klõpsate kellegi avatari, näete, mida nad oma ekraanil näevad, ja jälgige kursorit. See töötab täpselt nagu InVision Liveshare (RIP Liveshare).
  • Komponendid. Sarnane visandis olevate sümbolitega, kuid paindlikum ja hõlpsamini kujundatav. (Lähemalt sellest allpool)
  • Piirangud. Sarnane eskiisi suuruse muutmisega, kuid intuitiivsem.
  • Meeskonna raamatukogud. Saate jagada ja värskendada komponentide kollektsioone projektide vahel.
  • Boonus: saate isegi Figma projekte manustada Dropboxi paberisse.

Vaatame nüüd tõeliselt heade asjade juurde ...

Figma katab kõik ülalnimetatud tunnustega alused. Kuid see muutub tõeliselt huvitavaks, kui mõelda, kuidas see meie töökorraldust täiustab.

Allpool on neli viisi, kuidas Figma saab oma tööd põhimõtteliselt parandada.

1. Saame WAY iteratsiooni kiiremini reaalajas tehtava koostöö abil

Saate teha disainiülevaate, teha värskendusi lennult ja saada muudatuste kohta kohe tagasisidet. Iteratsioonide vaheline aeg võib ulatuda päevadest minutiteni, kuna ekraanide üleslaadimine või sünkroonimine, jagamislinkide loomine, sõnumite saatmine inimestele linkide vaatamiseks on nullist raisatud aega. Kui ma seda esmapilgul kogesin, oli see nii hämmastav, et valasin ühe pisara rõõmu.

Allpool on toodud mõned reaalse elu stsenaariumid, mis võivad parimal ajal teha töö aeglaseks ja tüütuks ning halvimal ajal uskumatult pettumust valmistavaks. Kõik need stsenaariumid kaovad, kasutades Figmat:

  • Pärast kõigi ekraanide sünkroonimist InVisioniga saate aru, et soovite fondi suurust päisekomponendis pisut suurendada, nii et muudate oma kujundusfaili ja peate seejärel kõik ekraanid sünkroonima InVisioniga.
  • Kui kasutate Craftit keeruka mitme ekraaniga prototüübi sünkroonimiseks InVisioniga ja peate seejärel kulutama tunni, lohistades ja kukutades ekraane InVisioni ekraanide õiges järjekorras, kuna Craft laadib need üles juhuslikus järjekorras.
  • Kui keegi teine ​​ajavöönd unustab oma töö pühenduda või üles laadida, peate uusimate kujunduste saamiseks ootama, kuni ta on taas võrgus.
  • Kui on tarkvarauuendus ja kõik kolmanda osapoole pistikprogrammid katkevad ja te kaotate tunde.

2. Meie disainiprotsess muutub kaasavamaks ja sujuvamaks

Ühtäkki kujundusfailist saab koht, kus igaüks võib kohtuda ja disainilahendusi arutada. See tähendab, et disaineritel on lihtsam töötada paralleelselt, uurida võimalusi ja iteratsiooni lühemate sammude kaupa. See tähendab, et arendajad saavad tehnilisi probleeme märgata varem ja hiljem. Ja see tähendab, et sidusrühmad, projektijuhid või kõik, kellel on link, saavad näha, kuidas kujundus kujuneb ideest lihvitud visuaali, selle asemel, et oodata suurt ilmutust.

Selle asemel, et killustada disainiprotsess mitme faili vahel, on nüüd üks koht, kus saab kogu loo rääkida ja kujundusprotsessi avanedes areneda.

Mulle meeldib, mida OpenText disainer Thomas Lowry kirjutas sellest, kuidas tema kujundusprotsess on Figma abil muutunud:

Kui hakkame massiivsele veebisaidiprojektile sukelduma, saab Figmast kiiresti meie protsessi oluline osa. Valmistame oma traatkarkassi ja vähese täpsusega prototüüpe Figmas kuni visuaalse kujundusfaasini. Selle protsessi käigus alustame komponentide loomisega ja suuname need meeskonna raamatukokku, et neid saaks kasutada paljude failide jaoks. Kui uurime komponente erinevates stsenaariumides ja kujundus areneb, on kõigi failide globaalsete muudatuste tegemine tohutu aja kokkuhoid.

3. Meie üleminek disainilt koodile on tõenäoliselt kiirem ja järjepidevam

Seda seetõttu, et Figma abil on meie disainilahendusi lihtsam struktureerida viisil, mis kajastaks nende kujunduse kodeerimist.

Selle mõistmiseks peate teadma, kuidas raamid töötavad. Figma kasutab raamide asemel raame. Raamid on erinevad, kuna saate raamid raami sisse pesa panna. Kui asetate väiksema raami suurema kaadri kohale, grupeeritakse need kaks kaadrit automaatselt ja väiksemast kaadrist saab suurema vanema raami laps. Lasteraamid on vanemate suhtes paigutatud ja piiratud. See on üks neist asjadest, millega on vaja harjuda, kuid kui te seda teete, imestate, kuidas te kunagi ilma selleta hakkama saite.

Raamide abil saate ekraani jagada sisualadeks ja seejärel pesastada nende sektsioonide komponendid (mis ise on hunnik pesastatud raame). See lähenemisviis koos automaatse rühmitamise, suhtelise positsioneerimise ja piirangutega võimaldab hõlpsalt järjepidevate ja reageerivate kujunduste kiiret koostamist.

Niisuguste raamide kasutamine on arendajatele abiks, kuna Figma raam sarnaneb HTML-i konteineriga. Kui arendajad disainilahendusi kontrollivad, näevad nad vastavatesse konteineritesse pestud kasutajaliidese elemente, mis tähendab, et neil on oma koodi kirjutamisel täpsem kavand, millele viidata.

4. Meie disainisüsteemid on paindlikumad ja hõlpsamini kujundatavad, mis tähendab, et hoiame kokku projektide aega ja saavutame järjepidevuse

Visandil on sümbolid ja Figmal on komponendid. Erinevus seisneb selles, et komponendid on paindlikumad kui sümbolid, mis tähendab, et saame väiksemaga neist rohkem ära teha, mis tähendab, et me tõenäoliselt kasutame neid tegelikult selle asemel, et neid purustada või nullist alustada.

Kuidas on komponendid paindlikumad kui sümbolid?

Visandis saate teksti muutmiseks või pesastatud sümbolite vahetamiseks kasutada sümbolite ületusi. Kuid kui soovite midagi muud muuta, näiteks teksti suurust, äärise kaalu või taustavärvi, peaksite eemaldama sümboli ja looma sama kasutajaliidese elemendi pisut teistsuguse versiooni. Selle lahendamiseks võite pesa kõik variatsioonid ühte sümbolisse paigutada, kuid siis jõuate põrgu alistamise paneelini. Suurte projektide ja keerukate kasutajaliideste korral muutub kõigi permutatsioonide korraldamine ja hooldamine kiiresti talumatuks.

Figma abil saate juurde pääseda ja muuta komponendi mis tahes kihi atribuute ilma, et see oleks masterist lahti ühendatud. Sama asi kehtib ka pesastatud komponentide kohta. Nüüd, kui muudate põhikomponendi kihi omadust, levitatakse neid muudatusi ainult eksemplarides, mille jaoks seda atribuuti pole juba alistatud.

Ma arvan, et need kolm gifit teevad head tööd, et visuaalselt kirjeldada, kuidas see töötab.

1. Looge komponent ja kopeerige see, et luua kaks ülemuse eksemplari.2. Põhikomponendi muudatused levitatakse koheselt kõigile selle esinemisjuhtudele.3. Välja arvatud see, et kõik ülepakutud atribuudid jäävad üle ka siis, kui kaptenit vahetatakse.

Kuidas on komponente lihtsam kujundada kui sümboleid?

Esiteks ei pea komponentide loomisel muretsema nimede ülesehituse (st ikoonide / otsingu) pärast. Saate põhikomponendi hiljem ümber nimetada ja see värskendab kõiki esinemisjuhte - mitte eskiisi juhtumit. Komponentide kategooria loomiseks grupeerige need lihtsalt kaadrisse ja pange sellele raamile nimi, sõltumata kategooriast. See tähendab, et hiljem on lihtne asju ümber korraldada, lihtsalt komponente ringi lohistades. Minu jaoks vähendas see tõepoolest nii komponentide loomise kui ka nendega arvestamise tunnetuslikku üldkulusid.

Teiseks on joonistel Figma komponentidele juurde pääseda palju lihtsam kui Sketchi sümbolitele. Veelkord ei pea sümbolite nimede pesastatud menüüs navigeerimiseks mõtlema nimetamisstruktuurile. Selle asemel võite leida (ja näha!) Komponente pisipiltide loendina. Komponendi lisamiseks ekraanile või eksemplari vahetamiseks lohistage lihtsalt lõuendile. Või võite uue eksemplari loomiseks peakomponendi kopeerida-kleepida - te ei saa seda isegi visandis teha ilma uue sümboli loomist.

Kihtide paneeli vahekaardil komponentide kuvamine ja neile juurdepääs

Teine asi, mis muudab komponentide abil kujundamise lihtsamaks, on see, et Figmas saate põhikomponenti redigeerida suurema vaate kontekstis, selle asemel, et redigeerimiseks eraldi lehele minna. Minu meelest on ülimalt tüütu, kui põgeneme visandil mõnele teisele lehele iga kord, kui tahan sümbolit redigeerida, ja siis tuleb minna tagasi kujundusele, et näha, kas mu muudatused rivistuvad.

Lehelt https://blog.figma.com/components-in-figma-e7e80fcf6fd2

Pakkimine üles

Mida rohkem ma Figmat kasutan, seda rohkem põhjuseid mulle meeldib. Seal on palju detaile, mille lõpuks avastate, kui hakkate sellega töötama. Üldiselt tundub, et liidese kujundamiseks oleks rohkem arenenud ja läbimõeldud tööriist.

Muud ressursid

Toimetaja märkus: avaldati algselt ajalehes blog.prototypr.io 6. aprillil 2018. Figma ei sponsoreerinud selle postituse loomist.