Figma: Suunnittelu, prototyyppi ja yhteistyö koko yrityksessä

Figma

Viime kuukausien aikana olen auttanut kehittämään ja integroimaan asiakaskohtaisesti räätälöityjä WordPress-ilmentymiä. Se on melko tasapaino tyylillä, WordPressin laajentaminen mukautettujen kenttien, mukautettujen postityyppien, suunnittelukehyksen, aliteeman ja mukautettujen laajennusten kautta.

Vaikea osa on, että teen sen yksinkertaisista mallista omistetulta prototyyppialustalta. Vaikka se on vankka alusta visualisointille ja suunnittelulle, se ei helposti käänny HTML5: ksi ja CSS3: ksi. Lisää kaikki muut iteraatiot, ja päivät saavat minut turhauttavaksi edistymisen ollessa erittäin hidasta.

Yksi palapelin osa on, että suunnittelutoimisto yksinkertaisesti luovutti prototyypit toimittamatta minkään tyyppistä päätyylitaulukkoa ... joten pyrimme saavuttamaan sen viemällä prototyypit ilmalaivaja sitten kääntämällä CSS WordPressiksi. Tarvittavien vaiheiden määrä ja alustojen väliset aukot tekevät siitä vaikean prosessin. Puhumattakaan nopeuden ja skaalautuvuuden monimutkaisuuden yksinkertaistamisesta

Figma

Figma keskittää suuren osan tästä työstä alustalla, joka mahdollistaa suunnittelun, palautteen ja yhteistyön koko tiimisi jokaiselle jäsenelle, mukaan lukien:

  • Suunnittelijat - Tee yhteistyötä kontekstissa ja reaaliajassa. Älä koskaan huoli siitä, että tiedostosi ovat vanhentuneita tai korvaavat toistensa työn.
  • Sidosryhmät - Lähetä linkki palautteen keräämiseksi, muutospyyntöjen saamiseksi ja anna sidosryhmien tehdä kopio päivityksiä suunnittelustasi.
  • Kehittäjät - Insinööreillä on aina pääsy nykyiseen totuuden lähteeseen ja he voivat tarkastaa elementtejä, viedä omaisuutta ja kopioida koodin.

Figmalla on joitain ainutlaatuisia ominaisuuksia:

  • Boolen operaatiot - Neljä kaavaa: yhdistäminen, vähennys, leikkaus ja poissulkeminen, voit yhdistää minkä tahansa muotokerroksen tarkkuudella.
  • komponentit - Rakenna nopeammin ja johdonmukaisemmin tiedostojen uudelleenkäytettävillä ja skaalautuvilla elementeillä. Käytä kunkin esiintymän tasoja, jotta voit muokata ja ohittaa tekstiä ja kuvia intuitiivisesti.
  • rajoitteet - Skaalaa suunnittelusi sopivaksi mihin tahansa näyttökokoon kiinnittämällä objektit vanhempaan kehykseen, napsauttamalla objekti ruudukkoon tai jopa luomalla skaalattavia komponentteja.
  • Laitteen kehykset - Esittele mallisi oikeissa ympäristöissä. Voit jopa valita pysty- ja vaakatilan.
  • Vuorovaikutus - Herätä prototyyppisi eloon määrittelemällä vuorovaikutukset napsautuksella, samalla kun leijutat, painat ja paljon muuta.
  • Päällekkäiskuvat - Suhteellisen ja manuaalisen paikannuksen avulla voit hallita täysin, missä ja miten peitteet näkyvät.
  • Pikselien täydellisyys - Interaktiivinen 60 kuvaa sekunnissa muokkaus tuo erittäin terävät, pikseleitä täydelliset esikatselut ja viennin.
  • Prototyypit - Rakenna virtauksia nopeasti yhdistämällä näyttöjä ja lisäämällä elementtejä, kuten vuorovaikutus, siirtymät, peittokuvat ja paljon muuta. Muiden työkalujen kanssa synkronoinnin sijasta jaa vain URL-osoite palautteen saamiseksi.
  • Responsive Suunnittelu - Venytä asetteluasi ja katso, miten ne reagoivat näytön koon muutoksiin.

Reagoiva prototyyppi

  • Vieritys - Ota vaakasuora, pystysuora tai mikä tahansa suuntainen vieritys yksittäisten muotojen tai koko pääkehyksen sisällä.
  • Tyylit - Synkronoi värit, teksti, ruudukot ja tehosteet kaikissa projekteissasi. Säilytä vähemmän tekstityylejä ja kohdista mallit eri laitteilla Figman ainutlaatuisten ruudukkotyylien kanssa.
  • Tiimikirjastot - Jaa komponentit ja tyylit Figmassa - ei tarvita jaettuja asemia tai muita työkaluja. Sinä ja tiimisi hallitset, miten ja milloin muutokset otetaan käyttöön yksinkertaisilla julkaisutyönkulkuilla.
  • Vector Networks - Figma loi kynätyökalun intuitiivisemmaksi, mikä mahdollistaa suoran manipuloinnin säilyttäen taaksepäin yhteensopivuuden polkujen kanssa.

varten yritys Asiakkaat, Figma voi lisätä yhtenäisyyttä, tehokkuutta ja turvallisuutta mittakaavassa. Alustan avulla yritysasiakkaat voivat hallita suunnittelujärjestelmiä helposti tiimikirjastojen avulla ja kyvyn ladata ja jakaa mukautettuja fontteja organisaatiossasi. Kertakirjautuminen, käyttöoikeudet ja toimintalokit sisältyvät.

Aloita Figman käyttö

Figmalla on laaja valikoima opetusohjelmia, joita he ylläpitävät Youtube-kanava, tässä on Aloitusvideo:

Figma antaa kehittäjille mahdollisuuden tarkastaa, kopioida, viedä resursseja ja kopioida CSS suoraan suunnittelutiedostosta. Voit myös ottaa käyttöön nykyiset työnkulut integraatioilla, mukaan lukien ilmalaiva, Avokoodi, JIRA, dropbox, ProtoPieja Periaate Macille. Heillä on myös vankka API.

Kokeile Figmaa ilmaiseksi

Mitä mieltä olet?

Tämä sivusto käyttää Akismetiä roskapostin vähentämiseksi. Lue, miten kommenttitietosi käsitellään.