Materiaalisuunnittelu + Figma-tyylit =

Tein käyttöliittymäpaketin päästäksesi alkuun

Peter Barnaban kuvio Figmalle

Usein ajatellessamme suunnittelujärjestelmiä ajattelemme tiukasti valvottua komponenttien, kuvioiden ja ohjeiden kokoelmaa varmistaaksemme johdonmukaisuuden tuotteessa. Yhden tuotteen tai tuotemerkin yhteydessä tällä on paljon järkeä, mutta entä suunnittelujärjestelmä platformalle, jonka ottavat käyttöön monet eri merkit / tuotteet?

Lataa tämä materiaalisuunnittelun käyttöliittymä Figmaan täältä.

Googlen materiaalijärjestelmä on joutunut vastaamaan tähän haasteeseen alusta alkaen. Sen käyttöönotto on taannut paljon johdonmukaisemmat kokemukset sekä Google- että muissa kuin Androidin alkuperäisissä Android-sovelluksissa. Tästä huolimatta, vaikka kokemukset ovatkin erinomaisia ​​käytettävyydessä, he eivät ole niin onnistuneita tulemaan mieleenpainuviksi tuotemerkin jatkeiksi. Haittapuolia on, kun kaikki käyttävät samoja komponentteja.

Materiaalisuunnittelun mahdollisuudet. Lähde: Material.io

Syötä seuraava Materiaalin kehitys - järjestelmä, joka perustuu kaikkeen, mikä oli upeaa sen ensimmäisessä iteraatiossa, mutta lisää tuotemerkkien kykyyn teemapuolistaa järjestelmänsä tavalla, jonka avulla Materiaalisovellukset voivat tuntea olevansa vähemmän kuin alkuperäisen käyttöliittymäkokemuksen kaltaiset ja enemmän vaikuttavia tuotemerkkikokemuksia.

Rajoittamattomalla määrällä mahdollisuuksia ja niin suurella komponenttikirjastolla se on suunnittelijoille mielenkiintoinen haaste koko teeman käyttöliittymäpaketin helposti muokkaamiseksi ja mukauttamiseksi. Päätin ottaa haasteen vastaan ​​yhteistyösuunnittelutyökalun Figma sivuprojektina nähdäksemme, kuinka voimme työskennellä yhdessä materiaalisarjan valmistamiseksi, joka voi hyödyntää pian julkaistavia Figman ominaisuuksia ...

Anna Figma-tyylit

Figma ilmoitti äskettäin modulaarisesta Tyylien käyttöönotosta, jonka avulla voit määritellä nopeasti globaalit teksti-, täyttö-, lyönti-, tehoste- ja ruudukkotyylit. Tyylin muuttaminen heti tekee globalisoidun muutoksen koko asiakirjaasi. Lisäksi tyylit voidaan työntää myös jaettuun ryhmäkirjastoon, jotta niitä voidaan käyttää kaikissa ryhmäsi projekteissa samalla tavalla kuin jaat komponentin.

Konfiguraatiosivu materiaaliteeman mukauttamiseen.

Tässä on kurkistus siihen, mikä on mahdollista

Minulla oli onni päästä varhaisessa vaiheessa Figma Stylesiin ja innostuin mahdollisuuksista käyttää niitä materiaalisuunnitteluun. Joten loin Material UI -paketin käyttämällä tyylejä materiaalisovellusten rakentamisen helpottamiseksi. Vaikka tämä ei ole virallista pakkausta tai kumppanuutta, mielestäni se osoittaa kuinka hyvin nämä asiat toimivat yhdessä.

Materiaalivärit - Käytin täyttötapaa kaikissa sovelluksen pää- ja toissijaisissa väreissä, kaikilla painotustasoilla typografialla ja useilla värimallilla pintaväreille. Teeman mukauttaminen tuotemerkin väreihin on yhtä helppoa kuin uusien värien valitseminen. Lisäsin asiakirjaan myös sivun materiaalipaletin käyttämiseksi. Voit vaihtoehtoisesti käyttää myös Googlen uutta värityökalua lähtökohtana.

Globaalien värimuutosten tekeminen vaikuttamaan useisiin komponentteihin kerralla.

Materiaalin tyyppi - olen luonut tekstityylit kaikille materiaalisuunnittelussa määritetyille tyyleille. Oletusarvoisesti nämä asetetaan Robotoon, mutta ne voidaan määritellä helposti uudelleen käyttämään tuotemerkkisi kirjasintyyppiä. Tyylin vaihtaminen toiseen fonttiin levittää muutokset heti koko järjestelmälle. Muista, että joudut ehkä tekemään joitain muutoksia tyypin kokoon ja etäisyyteen, jotta kokoa voidaan hienosäätää koko järjestelmässä. Paketin kehittyessä aion sisällyttää joitain ennalta määritettyjä kokosuosituksia, jotka toimivat joillekin suosituimmista Google-fontteista.

Jotkut pakkauksessa määritellyistä tyyleistä.

Materiaalin korkeus - olen luonut kirjaston esiasennettujen varjojen tyylit kaikille korkeuksille. Elementin korkeuden muuttaminen on yhtä helppoa kuin sopivan korkeuden valitseminen - tämä yksinkertaistaa huomattavasti materiaalivarjojen, jotka ovat joskus jopa kolmen erilaisen varjon monimutkaisia ​​yhdistelmiä, levittämistä.

Material Grid - Materiaali perustuu 4 dp: n perustasoon, joten olen luonut tyylin myös sille. Voit soveltaa tätä mihin tahansa kehykseen tai komponenttiin, ja tietysti voit lisätä omat ruudukot työpöydälle, mobiililaitteille ja tablet-laitteille ja soveltaa niitä tarvittaessa.

Tyylien yhdistäminen komponentteihin

Materiaalisuunnittelu kannustaa suunnittelijoita hallitsemaan käyttöliittymäkomponenttien muotoja vastaamaan paremmin brändin persoonallisuutta. Ne antavat käyttäjille mahdollisuuden mukauttaa pintakulmat terävistä suorakaidekulmista 45 asteen leikkauksiin vaihteleviin pyöristysasteisiin.

Sisäkkäisten komponenttien käyttäminen globalisoituneiden muutosten tekemiseen kortti- ja painikkeiden muotoihin.

Tämän saavuttamiseksi olen luonut joitain perusmuotokomponentteja painikkeille, kelluville toimintopainikkeille ja korteille. Tämä antaa käyttäjille mahdollisuuden säätää leikkausten kokoa tai kulman säteen astetta mille tahansa valitulle muodolle. Sitten sisäkkäin ne komponentit toiseen pääkomponenttiin, josta tuli pohja järjestelmän vastaaville komponenteille. Jos päätät haluavasi leikkauskulmat, se on yhtä helppoa kuin oikean sisäkkäisen osan näkyvyyden vaihtaminen.

Muutos heijastuu sitten koko järjestelmään (huom. Joissakin tapauksissa tämä vie muutaman sekunnin, ennen kuin muutos etenee satojen komponenttien läpi). Koska voit käyttää sisäkkäisiä kerroksia jokaisessa komponentti-ilmentymässä, jos tietyissä paikoissa haluat muuttaa tyyliä, voit tehdä muutoksen ohituksena missä tahansa esimerkissä.

Materiaalisuunnittelu antaa sinulle myös mahdollisuuden vaihtaa viiden eri kuvaketyylin välillä. Pidämme sarjan painon alhaisena luomalla viisi erillistä tarra-arkkidokumenttia jokaiselle kuvakkeistyyliä varten, joka sisältää komponentit jokaiselle kuvakkeelle. Voit kopioida halutut kuvakkeet kyseisistä tiedostoista tai, vielä parempaa, julkaista ne jaettuna kirjastona joukkueellesi ja vetää ne projektiisi.

Oletko kiinnostunut kokeilemaan Figma-tyylejä?

Jos haluat kokeilla Figma Styles-beetaa, kirjaudu täällä (MUOKKAA: Figma Styles on nyt kaikkien käytettävissä. Kirjaudu vain Figmaan). Beeta-käyttäjät saavat pääsyn Material UI -pakettiin ja siihen liittyviin kuvakekirjastoihin.

Jos joudut edelleen tukemaan aiempaa materiaalisuunnittelun toistoa, olemme saaneet sinut peittämään toisen täysin huuhdeltu käyttöliittymäpaketin, joka on rakennettu hyödyntämään tyylien voimaa. Beeta-käyttäjillä on myös pääsy tähän pakkaukseen.

Etkö ole yrittänyt Figmaa aikaisemmin? Tarkista se.