Luonnosohjelma

Suunnittelujärjestelmän luominen luonnosksi (osa neljä)

Näytän sinulle kuinka yhdistää erilaisia ​​symboleja muokataksesi paremmin komponentteja

Haluatko parantaa dramaattisesti työnkulkuasi Sketch-premium-suunnittelujärjestelmälläni? Voit noutaa kopion Cabanasta täältä.

Käytä tarjouskoodia MEDIUM25 saadaksesi 25% POIS.

Komponenttien rakentaminen

Edellisissä artikkeleissa osoitin sinulle, kuinka luodaan perustat siitä, mistä tulee suunnittelujärjestelmäsi luonnoksessa, mukaan lukien luominen peruselementtejä, kuten väri ja typografia, ja sitten kansiosymboleille, kuten kuvakkeet ja teksti, jotka voidaan sitten toteuttaa lukemattomiksi muut symbolit, kun siirryt eteenpäin.

Neljännessä osassa haluan näyttää, kuinka yhdistää nämä pienemmät symbolit, kuten väri, teksti, kuvakkeet, painikkeet ja tilat aloittaaksesi pienten komponenttien rakentamisen suunnittelujärjestelmällesi, ja Sketchin koonmuutosrajoitteiden lisäbonuksella, jotta ne olisivat mukautettavissa näytön eri kokoihin.

Huomaa: Kuten mainitsin aiemmissa artikkeleissa, en aio näyttää sinulle kuinka rakentaa satoja symboleja tai komponentteja. Annan sinulle vain lyhyen katsauksen joihinkin keskeisiin osatekijöihin täällä.

Sukellaan sisään ...

Nappikomponenteille valitsin 3 kokoa (pieni, keskikokoinen ja suuri) antaakseni itselleni jonkin verran mukautettavuutta luotaessa taidetta eri näytön kokoisille.

Toin myös tässä ensimmäisessä osassa mainitsemani 8pt-ruudukkojärjestelmän, joka säilyttää yhdenmukaisuuden elementin kaikkialla.

Alkaen isoista painikkeista, päätin luoda 4 komponenttivarianttia -

  • Oletus (ei kuvaketta)
  • Kuvake (ei tekstiä)
  • Vasen kuvake (tekstin kanssa)
  • Oikea kuvake (tekstin kanssa)

Tarpeeksi suunnittelumuodossa jaa 99,9% myöhemmässä vaiheessa luomistasi projekteista.

Joten aloittaen suuresta / oletuspainikkeesta, pudotin ensin aiemmin luomani Shape / Fill / Säde - 4px. Nyt voit valita 0px- tai 100px-säteellä olevan symbolin oletusasetuksesi, joka on täysin sinun tehtäväsi.

Sitten nimitin kerroksen uudelleen yksinkertaisesti painikkeeksi ja totesi, että vain tämän kerroksen ollessa käytössäni oli myös Symbolin ohitus (painikkeen tila ja väri) eteenpäin. Erittäin kätevä todellakin!

Aloin aikaisemmin luomiesi tekstisymbolien joukosta Teksti / Painike / Suuri / Keskimmäinen / Valkoinen -symboli, ja yksinkertaisesti nimetin tason tekstiksi.

Nyt haluavan liittyä 8pt-ruudukkojärjestelmään ja pienellä laskelmalla säädin painikkeen leveyttä ja korkeutta, joten juuri lisäämäni tekstikerros oli kohdistettu 8pt: n painikkeen ylä- ja alaosaan ja 32pt: n tasoon. vasen ja oikea reuna.

Kun painikekerroksen kokoa muutettiin vastaavasti ja tekstikerros kohdistettiin oikein, valitsin molemmat kerrokset ja muutin symboliksi, joka nimitti sen sellaiseksi - painike / suuri / oletus.

Nyt työskennellessäni juuri luodun nappisymbolin kanssa valitsin sen sisällä olevan tekstisymbolin…

… Ja tarkistuspaneelin koonmuutosrajoituksista kiinnitti se vasempaan ja oikeaan reunaan ja kiinnitti korkeuden. Nyt kun muutan kokoa tämän nappisymbolin suhteen projekteihini, tiedän, että sen sisällä oleva teksti tulee linjaamaan täydellisesti.

Kun nyt lisäsimme tämän symbolin projektiin, minulla on käytettävissään lukuisia vaihtoehtoja (ohittaa), jotta voin säätää tämän komponentin pienellä vaivalla. Huzzah ja sprinkles päällä!

Päälle kuvakepainike. Asetin jälleen kerran yksinkertaisesti aiemmin luomani Muoto / Täytä / Säde - 4px-symbolin, nimein sen uudelleen ja säädin sen sitten enemmän neliön muotoiseksi.

Sitten symbolit, jotka pudotettiin johonkin aiemmin luomistani kuvakkeista, nimettiin uudelleen tasoksi (kuvake), muutti värin ohituksen valkoiseksi…

… Ja suurensi sitten koon Scale-työkalulla 32 x 32 kuvapisteeseen.

Tämän jälkeen säädin muotokerroksen mittoja, joten Icon Symbol kohdistui 8pt kaikista reunoista.

Nappikerroksen ja tekstikerroksen ollessa kohdistettu oikein, valitsin molemmat tasot ja muutin symboliksi, joka nimitti sen sellaiseksi - Button / Large / Icon.

Nyt työskennellessäni juuri luodun nappisymbolin kanssa valitsin sen sisällä olevan kuvakkeen symbolin ja koonmuutosrajoitteiden avulla korjattiin leveys ja korkeus. Tämä välttää vain kuvakkeen vääristymisen, kun symbolin kokoa muutetaan projektien sisällä.

Siirryn painike / iso / vasen -kuvakesymboliin noudattaen samanlaisia ​​vaiheita kuin aiemmat luomani painikkeet, lisäsin muoto / täyttö / säde - 4px -symbolin ja säädin sen mittoja hieman (180 pikseliä x 47 pikseliä, jos haluat tietää tarkat mitat)…

Sitten lisäsin ikonisymbolin, nimeksi sen uudelleen, skaalain sen arvoon 32 x 32 kuvapistettä ja muutin värin Ohita-tilaksi Valkoinen.

Ja pudotin aiemmin luomistani tekstisymboleista Teksti / Painike / Suuri / Vasen / Valkoinen -symbolin ja nimeksi Taso tekstiksi.

Ja vielä kerran kiinni 8pt-ruudukkojärjestelmään, kohdistin Icon-symbolin, joten se oli 8pt: n ylä-, ala- ja vasemmasta reunasta.

Ja tekstisymbolin kohdalla se oli 16 pt kuvakkeen oikealla puolella, 8 pt painonumeron ylä- ja alaosasta, ja säädä sitä koon muuttavien kahvojen avulla siten, että sen reunuslaatikko oli 16 pt painikkeen symbolin oikeasta reunasta. .

Nyt, kun kaikki kolme kerrosta on valittu (teksti, kuvake ja painike), muutin symboliksi ja nimitin sen painike / iso / vasen kuvake.

Äskettäin luodusta painonumerosymbolista valitsin ensin kuvakkeen ja kiinnitin sen vasempaan reunaan ja kiinnitin sen jälkeen leveyden ja korkeuden.

Sitten kun tekstimerkki oli valittu, kiinnitin sen vasemmalle ja oikealle reunalle ja kiinnitin korkeuden.

Lopuksi, painike / iso / oikea kuvake -symbolin kohdalla seurain samanlaista prosessia kuin edellisissä painikkeissa.

  • Muodon täyttömerkin asettaminen ja sen mittojen säätäminen
  • Kuvakkeen symbolin lisääminen, sen skaalaaminen ja sen värin ohittaminen
  • Tekstisymbolin lisääminen (taas käyttämällä vasenta linjaa)

Sitten kohdistamalla ja koon mukaan muuttamalla (rajaava ruutu) tekstisymbolia niin, että se oli 16pt vasemmasta reunasta, 8pt painikkeen ylä- ja alareunasta ja 16pt ikkunan vasemmasta reunasta.

Ja ikonisymbolille, joten se oli 8pt painikkeen oikeasta, ylä- ja alareunasta.

Sitten valitsin kaikki 3 kerrosta (teksti, kuvake ja painike) ja muutin jälleen symbolipainikkeeksi / suureksi / oikeaksi kuvakkeeksi.

Ja lopuksi, koonmuutosrajoituksilla, kiinnitin tekstikerroksen vasempaan ja oikeaan reunaan ja kiinnitti sen korkeuden.

Kiinnitä kuvake oikealle reunaan ja kiinnitti sen leveys ja korkeus.

Saatuaan isojen painikkeiden symbolit näyttöön, menin sitten keskisuurten ja pienten varianttien läpi seuraavan hyvin samanlaista prosessia kuin mitä olen sinulle osoittanut, mutta tällä kertaa lisäämällä esimerkiksi Teksti / Painike / Keskipitkä / Keski / Valkoinen Symboli ja kuvasymbolin skaalaaminen vastaavasti, mutta pysyy silti 8pt-ruudukkojärjestelmässä koko ajan.

Kunnes minulla oli nyt 12 melko hienoa komponenttia. Oooh, minä teen siitä!

Sitten olen luonut komponentteja, kuten lomakeelementit, valikot ja pudotusvalikot, navigointi, sivutus ja muut. Avaintekijät jokaiselle parhaillaan työskentelevälle projektille, mutta se muodossa, jota oli nyt helppo muokata ja jonka avulla sain pysyä pisteessä projektin läpi työskennellessäsi.

Se avasi silmäni siitä, kuinka vain luomalla pienempiä peruselementtejä, kuten teksti-, väri- ja kuvakemerkkejä, voit sitten rakentaa helposti suuremmiksi komponenteiksi ja kuinka nuo pienet rakennuspalikat ovat avain kaikenlaiseen suunnittelujärjestelmään, joka toivot rakentaa.

Liity minuun osaan 5 (jonka voit tarkistaa täältä)

Etkö halua itse rakentaa suunnittelujärjestelmää? Voit noutaa kopion Cabanasta täältä.

Käytä tarjouskoodia MEDIUM25 saadaksesi 25% POIS.

Kiitos artikkelin lukemisesta

Marc

Suunnittelija, kirjailija, isä ja raastuja (tai siruja, jos olet lampin toisella puolella)