Älykäs suunnittelu tarkoittaa järjestelmällistä suunnittelua: kun asioilla on samat nimet kaikille, tiimi työskentelee sujuvasti ja toimitukset sujuvat ongelmitta. Figmassa tämä tarkoittaa selkeän nimikkeistön käyttöönottoa tasoille, komponenteille, tyyleille, muuttujille ja tiloille, jotta kuka tahansa voi ymmärtää yhdellä silmäyksellä, mitä kukin asia on. Yhdenmukaisten nimeämissääntöjen luominen lisää nopeutta, välttää sekaannusta ja ylläpitää visuaalista yhtenäisyyttä. missä tahansa projektissa, yksinkertaisesta käyttöliittymäpaketista kypsään suunnittelujärjestelmään.
Tässä oppaassa näet, kuinka rakennetaan täydellinen taksonomia, joka kattaa kaiken elementtityypeistä ja niiden ominaisuuksista nimeämisen kielioppiin, rakenteeseen ja järjestykseen. Opit myös hyödyntämään Figma-tekoälyä tasojen nimeämiseen uudelleen joukkona ja muuttujien toteuttamiseen uudelleenkäytettävinä tokenina edistynyttä suunnittelua ja prototyyppien valmistusta varten. Ajatuksena on, että saat yhteisen, toimivan kielen, jota voit skaalata saumattomasti..
Perusteet: miksi nimikkeistöllä on merkitystä suunnittelujärjestelmässä
Ennen yksityiskohtiin menemistä on syytä luoda viitekehys: Figman suunnittelujärjestelmä yhdistää komponentit, tyylit ja säännöt, jotka jäsentävät käyttöliittymää. Nimien johdonmukainen määrittely koko järjestelmässä on olennaista johdonmukaisuuden ja tehokkuuden ylläpitämiseksi.Tällä tavoin kirjastostasi ei tule sekamelska lähes identtisiä painikkeita, joilla on tuhat eri nimeä.
Järjestelmän sisällä ominaisuudet ja niiden arvot ovat avainasemassa: väri, typografia, välistys, koot, tilat, moodit… Mitä johdonmukaisemmin nimeät ominaisuuden ja arvon, sitä helpompi on soveltaa ja ylläpitää kokonaisilmettä. tuotteen kaikissa osissa.
Komponenttien ja tyylien käytännöllinen organisointi
Komponenttien kanssa työskennellessäsi kuvaavien ja ennustettavien nimien käyttäminen säästää aikaa instanssien etsimisessä ja ymmärtämisessä. Esimerkiksi painikkeiden kohdalla erottele tyyppi ja tarkoitus (ensisijainen, toissijainen); ja lisää tila (esim. normaali tai leijuu) tarvittaessa.
Kuvakkeiden kanssa on parasta välttää yleisiä kuvakkeita, kuten "Icon 123". Valitse tunnistettavia nimiä, kuten "posti", "ostoskori" tai "verkostot". Heidän tulisi selittää, mistä on kyse, avaamatta tasoa. Tätä selkeyttä arvostetaan kirjastossa suodattaessa ja kehitystilassa tarkasteltaessa.
Nimeä vuorovaikutteisten komponenttien tilat siten, että ne ovat yksiselitteisesti erotettavissa: esimerkiksi lepotilassa oleva pääpainike ja sen hiiren osoittimella varustettu versio tulisi erottaa selvästi toisistaan. Päätteen tai tilamäärittelijän käyttö toimii (esim. primary/primary-hover).
Jos hallinnoit useampaa kuin yhtä suunnittelujärjestelmää rinnakkain, merkitse niiden hierarkia. "Pääjoukon" ja "toissijaisen" joukon erottaminen estää yhteen kuulumattomien osien sekoittumisen.erityisesti organisaatioissa, joilla on useita brändejä tai toimialoja.
Nimien yhdenmukaistamisen edut suunnittelussa ja kehityksessä
Koko tiimin saman kielen käyttö vähentää kitkaa: kun kehittäjä lukee tason nimen ja se vastaa koodin tokenia tai luokkaa, toteutus on suoraviivaisempaa. Nimikkeistö on liima, joka pitää tieteenalojen välisen yhteistyön koossa. ja lyhentää tarkistussyklejä.
Lisäksi, kun on aika auditoida tai skaalata järjestelmää, elementtien tunnistaminen ja ryhmittely on suoraviivaista, jos nimeämissääntöjä on sovellettu johdonmukaisesti. Nimellinen johdonmukaisuus tarkoittaa ylläpidettävyyttä ja kustannussäästöjä ajan myötä.
Vaiheet suunnittelujärjestelmätiedoston rakentamiseksi Figmassa
Vankan järjestelmän rakentaminen ei ole ajan kysymys, mutta on olemassa selkeä polku, jota voit seurata, jotta et eksy matkan varrella. Aloita olennaisesta ja dokumentoi jokainen päätös, jotta se on jaettava..
- Keskeisten elementtien luettelo: määrittele, mitä aiot standardoida (paletti, fontit, välistysasteikot, kriittiset komponentit, kuten painikkeet, syötteet, kortit…). Selkeä laajuus estää myöhemmän uudelleentyöstön.
- Järjestelmälle omistettu tiedosto: luo tietyn tiedoston, joka toimii totuuden lähteenä. Kirjaston erottaminen projekteista varmistaa, että muutoksia hallitaan ja versioidaan paremmin..
- Komponentoi kriteerien avulla: jäsentää komponentit ja niiden variantit valitun käytäntötavan mukaisesti. Nimen tulisi heijastaa tyyppiä, tarkoitusta ja statusta koskettaessaan.
- Määritä tyylitTekstityylit, värit ja tehosteet on nimetty yhdenmukaisesti, jotta ne löytyvät helposti. Se soveltaa samoja kielioppi- ja sanaliitosmalleja..
- Dokumentoi käyttöLisää muistiinpanoja siitä, milloin kutakin osaa käytetään, rajoituksia ja esimerkkejä. Selkeä ohjeistus helpottaa koko organisaation suunnittelua "samassa lämpötilassa".
Taksonomia: komponentit, objektit, ominaisuudet ja arvot
Jotta sanasto toimisi, sinun on ensin tiedettävä, mistä osista puhut ja miten ne liittyvät toisiinsa. Tämä taksonomia toimii karttana, jotta varmistat, ettet jätä mitään irrallisia päitä..
Komponentit: emäs ja yhdisteet
Figman termein komponentti on käyttöliittymäpaketin sisällä oleva lohko, jolla on oma visuaalinen identiteetti (kuten kortti). Pohjakomponentti on osa, joka on suunniteltu sijoitettavaksi muiden sisään. (Esimerkiksi numeropainike, joka esiintyy vain päivämäärävalitsimessa). Jotkin kirjastot nimeävät ne resursseiksi, katkelmiksi, osina, nimikkeiksi tai alikomponenteiksi: idea on sama.
Objektit: säilöt ja elementit
Objekti on komponentin sisällä oleva osa. On olemassa kaksi pääryhmää: säilöt (laatikot, osiot) ja elementit (sisällöt).Elementtien joukosta löydät tekstiä (tunniste, otsikko, alaotsikko, kuvateksti), muita komponentteja (kuvakkeita, kuvituksia, painikkeita, taulukoita), vektoreita (ympyrä, suorakulmio, monikulmio) ja mediaa (kuva, gif, video).
Ominaisuudet ja arvot
Ominaisuudet ovat muuttuvia osia (koko, olomuoto, väri, tiheys jne.). Jokainen ominaisuus tarjoaa joukon mahdollisia arvojaEsimerkiksi painikkeen "tila"-ominaisuus voi olla normaali, leijuu päällä, painettu, poistettu käytöstä...
Arvoja on kahdenlaisia: variantteja ja totuusarvoja. Yksi variantti tukee useampaa kuin kahta vaihtoehtoa (xs/s/m/l tai info/warn/error), kun taas totuusarvo edustaa tyypillistä kyllä/ei-vaihtoehtoa (Tosi/Epätosi, Päällä/Pois, Näytäkuvake/Piilotakuvake).
Nimeämisrakenne: muokkaajat ja niiden sijainti
Kun olet selvillä siitä, mitä nimeät (komponentti, objekti, ominaisuus vai arvo), sinun on päätettävä, miten merkitset niiden erot. Modifioijat auttavat erottamaan variantit, tilat ja kontekstit.
Modifikaattorien tyypit
Nimen visuaalista muokkaamista voi tehdä monella tapaa. Voit käyttää kuvakkeita, symboleja tai avainsanoja. vahvistaaksesi lukemistasi:
- Kuvake: esimerkiksi edessä oleva symboli, joka osoittaa hyödyllisyyttä tai tilaa (vain jos tietokoneesi tukee ja ymmärtää sitä).
- Välimerkit: etuliitteet tai erottimet, kuten ._Base tai alemman tason merkit.
- Sanat, akronyymit ja lyhenteet: päätteet, kuten Item-List, Cell-Header, ShowIcon, BC_…
Tärkeintä on, että sopimus on selkeä ja dokumentoitu. Jos yhdistät muokkaajatyyppejä, määritä prioriteetit ja käyttötapaukset. kaoottisen sekoittumisen välttämiseksi.
Muokkaajan sijainti
Järjestyksen on oltava yhdenmukainen koko järjestelmässä. Voit sijoittaa muokkaajan ennen (Item-List)- tai (List-Item)-kohdetta.Olennaista on, ettei vuorotella molempien mallien välillä ilman selkeää strategiaa.
Substantiivien kielioppi: tyyppi, numero, nimikirjaimet ja yhdisteet
Kieliopin standardointi tekee nimistä luettavia ja ennustettavia. Päätä kerran ja sovella sitä ainaMuuten vaikeasti muistettavat poikkeustapaukset lisääntyvät.
Termin tyyppi
Valitse, onko nimi verbi, adjektiivi vai substantiivi, ja missä muodossa se taivutetaan. Kelvolliset vaihtoehdot: partisiippi (Collapsed), preesens (Collapse), adjektiivi (Collapseable), substantiivi (Collapsible) tai yhdistelmiä, kuten ”on kokoontaitettava”, ”näytä kokoontaitettava”, ”kuvake ennen”.
Yksikkö tai monikko
Määrittele, käytätkö nimeä yksikössä vai monikossa, ja säilytä kaava. Painikkeiden tai koon/kokojen johdonmukainen käyttö helpottaa hakemista ja lukemista.Voit myös asettaa yleisen ("toiminnot"), jos se ryhmittelee useita elementtejä paremmin.
Nimikirjaimet ja visuaalinen tyyli
Määritä isojen kirjainten käyttötapa: Iso kirjain + Iso kirjain (kuvake ennen), pieni kirjain + pieni kirjain (kuvake ennen), Iso kirjain + pieni kirjain (kuvake ennen) tai pieni kirjain + Iso kirjain (kuvake ennen). Iso alkukirjain on osa järjestelmää, ei mikään pikkujuttu.
Sanaparit
Termien yhdistämistapa määrittää luettavuuden ja sopivuuden koodiin. Yleisiä asetuksia: ei välilyöntiä (iconBefore), välilyönnillä (icon before), pisteellä (icon.Before), yhdysviivalla (icon-before), alaviivalla (icon_before)Vältä lukemista heikentäviä yhdistelmiä, jos ne eivät lisää arvoa.
Kehitteillä on valmiiksi määritettyjä tyylejä (Case Styles), jotka yhdistävät nimikirjaimet ja yhdisteet: camelCase (ei välilyöntejä ja jokainen sana isolla alkukirjaimella ensimmäistä lukuun ottamatta), PascalCase (kaikki isolla alkukirjaimella ja ilman välilyöntejä), kebab-case (yhdysviiva ja pienet kirjaimet) ja snake_case (alaviiva ja pienet kirjaimet)Valitse pinoosi parhaiten sopiva ja ole johdonmukainen.
Lajittelu: aakkosjärjestyksessä, peräkkäin ja hierarkkisesti
Nimen lisäksi myös pitkien listojen järjestystapa on tärkeä asioiden nopean löytämisen kannalta. Kolme lähestymistapaa toimii hyvin kirjastoissa:
- Aakkosjärjestyksessä: a–zoz–a (esim. alhaalla, vasemmalla, oikealla, ylhäällä).
- Peräkkäinen: 0–10 tai 10–0 (esim. oletus-/leijumis-/aktiiviset koot tai tilat).
- Hierarkkinen: suurimmasta pienimpään tai päinvastoin (esim. ensisijainen, toissijainen tai info/varoitus/virhevakavuustasot).
Samojen järjestyskriteerien soveltaminen kaikkiin kokoelmiin estää jokaista tiimiä järjestämästä "omalla tavallaan". Määrittele mieltymyksesi ja dokumentoi esimerkkejä epäselviä tapauksia varten.
Toteutus: auditointi ja sanaston luominen
Kun säännöt on määritelty, on aika laittaa ne käytäntöön. Sinulla on kaksi polkua, jotka voit jopa yhdistää. laskeutumisen varmistamiseksi:
Sisällön tarkastus
Tarkista, mitä on jo rakennettu: inventaarion komponentit, objektit, ominaisuudet ja arvot nykyisillä nimillään. Tavoitteena on päästä yksimielisyyteen yhdestä taksonomisesta järjestelmästä, joka sisältää suunnittelun ja kehityksen. ja suunnittele migraatio rikkomatta prototyyppejä tai tekemättä siirtoja.
Sanaston luominen
Aloitatpa sitten alusta tai olet jo tehnyt auditoinnin, määritä kunkin elementtityypin (komponentti, objekti, ominaisuus ja arvo) rakenne, kielioppi ja järjestys. Sanastosta tulee virallinen nimisanakirjasi ja uusille jäsenille tarkoitetussa resurssissa.
Figma AI tasojen kontekstuaaliseen uudelleennimeämiseen
Satojen tasojen uudelleennimeäminen käsin on työlästä. Tässä Figma AI voi säästää aikaa käyttämällä sisältöä, sijaintia ja tasosuhteita ehdottaakseen kontekstuaalisia nimiä. Työkalu analysoi valintasi ja käyttää yhdenmukaisia nimiä, jos se havaitsee oletuskuvion..
Rajoituksia on tarkoituksella: Figma AI nimeää uudelleen vain kehyksiä, ryhmiä, tekstikerroksia, suorakulmioita (ja pyöristettyjä) kuvatäytteellä ja tiettyjä instansseja, jotka säilyttävät edelleen pääkomponentin oletusnimen (vain säilön, koskematta alikerroksiin). Jos tasolla on jo nimi, se on lukittu tai piilotettu tai se on yksittäinen vektorimuoto (ellipsi, monikulmio, tähti, verkko) ilman kuvaa, sitä ei nimetä uudelleen..
Voit aloittaa uudelleennimeämisen useilla tavoilla: pikavalikosta hiiren kakkospainikkeella, työkalupalkin Toiminnot-kohdasta tai pikatoiminnoilla kirjoittamalla "Nimeä tasot uudelleen". Jos kaikki on jo nimetty oikein, näet viestin "Ei tarvitse nimetä tasoja uudelleen", ja voit halutessasi pakottaa nimenmuutoksen valitsemalla "Nimeä silti uudelleen"..
Hyödyllinen yksityiskohta: jos sinulla on identtisiä nimeämättömiä kerroksia useissa ylimmän tason kehyksissä, Figma AI nimeää vastaavat uudelleen. Tämä auttaa säilyttämään älykkäät animaatiot ja vierityspaikat prototyypeissä ylläpitämällä nimellistä vastaavuutta..
Muuttujat Figmassa: uudelleenkäytettävät tokenit suunnitteluun ja prototyyppien valmistukseen
Muuttujat tallentavat arvoja, joita voit käyttää uudelleen suunnitteluominaisuuksissa ja prototyyppitoiminnoissa, ja ne esiintyvät rinnakkain muiden suunnittelutyökalujen, kuten 3D-suunnitteluohjelmat Macille. Ne ovat luonnollinen silta suunnittelutokenien toteuttamiseen ja interaktiivisen logiikan rakentamiseen ilman frameworkien päällekkäisyyttä..
Joitakin käytännön käyttötarkoituksia: luo ja käytä tokeneita (värejä, fontteja, välilyöntejä), vaihda laitekokojen välillä välittömillä välistyssäädöillä mittakaavan mukaan, esikatsele eri kielillä kirjoitettuja tekstejä kontekstin muuttuessa tai rakenna ostoskori, joka laskee tilausten kokonaissummat. Kaikki tämä ilman turhien variaatioiden moninkertaistamista.
Heillä on kolme pääaluetta, joilla he menestyvät: suunnittelu ja suunnittelujärjestelmät, edistynyt prototyyppien luominen ja API:t. Näiden kolmen hallitseminen antaa sinulle mahdollisuuden yhdistää suunnittelun, vuorovaikutuksen ja automaation. tasaisessa virtauksessa.
Suunnittelun ja järjestelmien muuttujat
Käytä muuttujia ja tiloja edustamaan tokeneita ja vaihtoehtoisia konteksteja (vaalea/tumma, tuotemerkit, alueet). Väri ja lukumäärä ovat palettien, kokojen ja tiheyksien perusta.ja voit yhdistää ne kokoelmiin ja tiloihin vaihtaaksesi niitä yhdellä silmäyksellä.
Tyypillisiä resursseja tällä alueella ovat johdanto-oppaat, kokoelmien ja moodien oppaat sekä muuttujien ja tyylien vertailut, jotka auttavat sinua päättämään, milloin kutakin käytetään. Yhteenvetona: tyylit toimivat visuaalisina esiasetuksina; muuttujat kapseloivat parametroitavia arvoja tiloilla.
Muuttujat edistyneeseen prototyyppien luontiin
Prototyypeissä muuttujat tallentavat tiloja ja ominaisuuksia, jotka muuttuvat vuorovaikutuksen kautta. Voit käyttää toimintoja muokataksesi niiden arvoja ja siten muuttaaksesi ulkoasua, sisältöä tai näkyvyyttä kopioimatta kehyksiä..
Muuttujien yhdistäminen lausekkeisiin ja ehdollisiin lausekkeisiin avaa oven dynaamisille merkkijonoille, matemaattisille operaatioille ja totuusarvojen arvioinneille. Useiden toimintojen ja if/else-logiikan avulla voit pinota monimutkaisia käyttäytymismalleja samaan triggeriin..
Myös muuttuvilla tiloilla on rooli prototyypeissä: ne asettavat arvoja kontekstin (esim. teeman) mukaan ja käyttävät sitä lausekkeissa ulkonäön vaihtamiseen reaaliajassa. Rikastuneiden skenaarioiden vaatimien näyttöjen määrä vähenee huomattavasti..
Muuttujat ja API (REST, laajennukset ja widgetit)
Muuttujat ovat käytettävissä sekä plugin-rajapinnassa että REST-rajapinnassa. Voit tarkastella, luoda, päivittää ja poistaa muuttujia sekä linkittää niitä laajennusten komponentteihin.Tämä mahdollistaa työkalujen, kuten tuojien/viejien tai tyyli-muuttuja-muuntimien, käytön.
Widgetit käyttävät muuttujia plugins-rajapinnan kautta (lukeminen ja luominen), sillä poikkeuksella, että ne eivät voi linkittää widgetin ominaisuuksia suoraan muuttujiin. Synkronointia varten repositorion kanssa on olemassa esimerkki GitHub-toiminnoista, jotka yhdistävät Figma-muuttujat koodikantaasi., riskittömän harjoittelun mahdollistavien yhteisön hiekkalaatikkotiedostojen lisäksi.
Hyvät nimeämiskäytännöt tasoille ja komponenteille
Aseta etuliite tyypille (esim. Btn, Card, Input) ja jälkiliite tilalle (hover, focus, disabled) tai koolle (sm, md, lg). Suositeltu järjestys on yleensä Tyyppi/Käyttötarkoitus/Koko/Kuntoja käytä yhtenäisiä erottimia (kebab-case tai PascalCase, kumpi sopii pinoosi).
Säilytä kerrosten ja instanssien välinen johdonmukaisuus: instanssisäiliön on perittävä pääkomponentin malli. Vältä improvisoituja paikallisia muunnelmia, koska ne häiritsevät etsintää ja korvaamista.Kun on aika tehdä muutoksia, tee se pääversiossa ja julkaise uusi versio.
Totuusarvoisten ominaisuuksien kohdalla nimeä ominaisuus, älä arvoa: "Icon" ja anna sille arvot Päällä/Pois tai Tosi/Epätosi; vältä muotoa "withIcon/withoutIcon", jos järjestelmäsi käyttää totuusarvoisia vaihto-ominaisuuksia. Tämä yhdenmukaistaa kielen prototyypin ja koodin logiikan kanssa..
Jos projektiisi kuuluu useampi kuin yksi toimialue (esim. taustajärjestelmä ja asiakas), lisää kokoelman tai kansion nimeen laajuus. Kontekstin mukainen erottelu vähentää semanttisia törmäyksiä ja edistää asianmukaista uudelleenkäyttöä.
Yleisimmät virheet ja niiden välttäminen
Yksi yleisimmistä virheistä on se, ettei sopimusta dokumentoida ja että jokaisen annetaan nimetä asioita "omalla tavallaan". Ilman ohjausta kirjasto pirstaloituu ja tiimin vauhti hidastuu.Anna selkeitä esimerkkejä ja rajatapauksia epäilysten hälventämiseksi.
Toinen virhe: yhdistämis- ja isojen alkukirjoitustyylien sekoittaminen saman komponenttiperheen sisällä (joissakin kebab, toisissa kameli). Tämä monimutkaistaa suodattimia, kyselyitä ja tasopaneelin lukemista.Määritä oletustyyli ja käytä rajoitettuja ja perusteltuja poikkeuksia.
Vältä merkityksettömiä nimiä (”Kehys 27 Kopio 3”, ”Suorakulmio 12”). Jos Figma AI ei pysty auttamaan, koska nimet on jo määritetty, nimeä ne uudelleen manuaalisesti tai komponenttitasolla. ja käytä tilaisuus hyväksesi valitun yleissopimuksen vahvistamiseksi.
Älä kopioi variantteja, jotka komponentin muuttuja tai totuusarvo jo ratkaisee. Kultainen sääntö: vähemmän näyttöjä, enemmän parametrisointiaSaat lopulta kevyemmän ja helpommin hallittavan kirjaston.
Tiimien käyttöönottosuunnitelma
Aloita pienestä joukolla vaikuttavia komponentteja (painikkeet, syötteet, typografia, paletti). Jaa sopimus, kerää palautetta ja paranna sitä ennen kuin otat sen käyttöön muille.Sieltä siirry moduulien ja versioiden mukaan.
Jos haluat nopeuttaa näiden käytäntöjen hallintaa, harkitse intensiivistä, tuotekeskeistä koulutusta. Aktiivisten ammattilaisten opettamat ohjelmat auttavat soveltamaan teoriaa käytäntöön tosielämän tapauksissa. integroi jo Figman kehitysprosesseihin.
Kaiken edellä mainitun avain on käsitellä nimikkeistöä osana suunnittelua, ei jälkikäteen mietittynä. Selkeän sanaston, kielioppi- ja rakennesääntöjen, Figma-tekoälytuen ja hyvin määriteltyjen muuttujien avulla järjestelmäsi saavuttaa nopeutta, johdonmukaisuutta ja skaalautuvuutta.Ja tiimillesi, laatuaikaa keskittyä käyttäjien ongelmiin eikä nimistä kiistelyyn.
