Kas yra komponentų variantai?
Variantai — tai skirtingos komponento versijos, kurios dalijasi viena baze, bet turi skirtingus atributus. Žinote, kaip pradžioje reikėdavo kurti atskirus komponentus kiekvienai mygtuko varacijai? Dabar to nereikia. Vienas mygtukas, daug variantų — visos šios versijos gyvena vienoje komponentų šeimoje.
Tai praktiškai keičia jūsų darbo procesą. Vietoj to, kad turėtumėte 20 skirtingų mygtukai (Primary, Secondary, Disabled, Hover, Loading...), turite vieną Smart Button su keturiais pagrindiniais atributais. Tai išgelbsti laiką ir neleidžia komponentų bibliotekos pasilikti netvarkinga.
Svarbu: Variantai nėra tik vizualinis patogumas. Jie sumažina priežiūros darbą — jei keičiate spalvą Primary mygtuke, ji automatiškai atsinaujina visur, kur naudojamas šis variantas.
Kaip suprasti variantų logiką
Variantai veikia per atributus. Kiekvienas atributas — tai parinktis, kuri keičia komponento išvaizdą. Pavyzdžiui, mygtukas gali turėti atributus:
- Tipo atributas: Primary, Secondary, Tertiary
- Dydžio atributas: Small, Medium, Large
- Būsenos atributas: Default, Hover, Active, Disabled
- Turinio atributas: With Icon, Text Only, Icon Only
Tai reiškia, kad jūsų bibliotekoje nėra 24 skirtingos mygtuko komponento versijos — yra vienas komponentes su atributais, kuris automatiškai generuoja 24 kombinacijas. Dizaineriai tiesiog pasirenka atributus, o mygtukas keičiasi.
Pagrindinė komponentė ir variantai
Kiekviena variantų šeima pradedama nuo pagrindinės komponentes. Tai yra šaltinis — taškas, iš kurio visi kiti variantai šakojasi. Pagrindinė komponentė turi visas sudėtines dalis, kurios gali keistis per atributus.
Paskui jūs kuriate variantus, kurie paveldės visas taisykles iš pagrindinės. Tai reiškia, jei pamainysite šrifto dydį pagrindinėje mygtuko komponentėje, jis pasikeis visame žemiau esančiame medyje. Tai galingas principas, kurį reikia suvokti.
Praktiniai žingsniai variantams kurti
Paruoškite pagrindinę komponentę
Pradėkite nuo komponentes, kurioje visos dalys yra grupuotos logiškai. Mygtukas turėtų turėti teksto sluoksnį, ikoną (jei reikalinga) ir fono sluoksnį. Visa tai turi būti viduje vienos komponentės.
Nustatykite atributus
Atidarykite Atributų skirtuką (Assets panelėje) ir spustelėkite "Create component set". Figma paklaus jūsų atributo pavadinimo — pvz., "Tipo" arba "Dydžio". Tada pridėkite šio atributo reikšmes: "Primary", "Secondary" arba "Small", "Medium", "Large".
Sukurkite kiekvieną variantą
Kiekvienai atributo kombinacijai (pvz., Primary + Large arba Secondary + Disabled) kurkite atskirą kadro variantą. Jūs keičiate spalvas, šriftus, dydžius — bet tai vis dar yra vienos komponentės šeima. Figma laiko šiuos ryšius automatiškai.
Išbandykite naudodami atributus
Grįžkite į dizaino failą ir pasiimkite šią komponentę. Spustelėkite ją ir pamatysite Atributų panelę dešinėje pusėje. Pasirinkite skirtingus atributus ir žiūrėkite, kaip keičiasi jūsų komponentė. Tai veikia!
Organizavimas variantų bibliotekoje
Variantai yra puikūs, bet jei jų nepagerinsite, jūsų Assets panelė greitai pasidarys sraigė. Turite žinoti kelis organizavimo patarimus, kurie padės jums išlaikyti komponentus skaičius ir greitai juos rasti.
Pirmas dalykas — naudokite aiškius atributo pavadinimus. "Tipo" yra geresnis nei "T". "Dydis" yra geresnis nei "D". Antra, atributo reikšmes rūšiuokite nuosekliai — jei jūs turite "Small, Medium, Large", visuomet šitame tvarkoje rašykite juos. Tai padeda vizualiai suprasti komponentų gridas.
Trečia, nenaudokite per daug atributų vienoje komponentėje. Jei jūsų mygtukas turi 5 atributus su 3-4 reikšmėmis kiekviename, tai yra 60+ kombinacijų. Tai per daug. Skaidykite sudėtingus komponentus į mažesnes, specializuotas šeimas.
"Variantai nėra tik patogumas. Jie yra būdas mąstyti apie komponentus sistemiškai. Jei norite, kad jūsų dizaino sistema būtų skalėjo gera ir lengva prižiūrėti, turite suprasti, kaip jie veikia."
Variantų nustatymai ir sukeitimas
Kartais reikia pakeisti variantą tiesiog keičiant atributą. Jei turite 50 mygtukų dizaino failuose, ir nusprendžiate, kad "Secondary" mygtukus norite daryti didesniais, tai nereikalauja rankinės keitimo. Tiesiog atnaujinkite "Secondary + Large" variantą pagrindinėje komponentėje, ir visi 50 atsinaujins automatiškai.
Tai yra pagrindinė variantų superpažiba. Jūsų dizaineriai gali dirbti greičiau, nes jie nesiūlužina su komponentų priežiūra. Jūs, kaip sisteminis savininkas, prižiūrite tik pagrindinės komponentės, ir viskas sekasi.
Tačiau žiūrėkite — ne visi atributai turėtų būti variantai. Kai kurie dalykai, pavyzdžiui, teksto turinys arba linko tikslas, turėtų būti pagrindinės komponentės dalys, o ne variantai. Variantai turėtų keisti vizualinę išvaizdą. Tekstas turėtų likti pagrindinio komponento paskyra.
Apibendrinimas
Variantai yra jūsų svarbiausias įrankis skalabilioje dizaino sistemoje. Jie sumažina komponentų skaičių, priežiūros darbą ir leidžia greitai eksperimentuoti. Jei jūs nesukūrėte variantų savo bibliotekoje, pradėkite dabar — pradėkite nuo paprasčiausios komponentes, pvz., mygtuko, ir žiūrėkite, kaip jūsų komponentų medis augs.
Atminkite: gera variantų struktūra padaro jūsų komponentų biblioteką lengvą naudoti ir priežiūrėti. Bloga — keičia ją bėdišku šiukšlyne. Todėl nuo pat pradžios galvokite apie organizavimą, naudokite aiškius pavadinimus ir neskaidykite per daug atributų į vieną komponentę. Jūsų ateities šioje sistemoje padės padėkos jums.
Atsakomybės panaikinimas: Šis straipsnis yra edukacinė medžiaga, skirta paaiškinti Figma variantų sistemą ir jos naudojimo praktiką. Jis nėra oficialus Figma dokumentas ir gali skirtis nuo Figma nuolatinio atnaujinimų. Jei norite sužinoti tikslias Figma funkcijas, apsilankykite Figma pagalbos centre . Variantų naudojimas ir komponentų kūrimas priklauso nuo jūsų konkrečių projektų reikalavimų ir gali skirtis.
