Kaip suorganizuoti komponentus pagal hierarchiją
Praktinis vadovas, kaip sugrupuoti komponentus taip, kad juos būtų lengva rasti ir naudoti visam projektų komandai.
Komponentų biblioteka be tvarkos — tai kaip parduotuvė, kurioje visos prekės sumaišytos. Dizaineriai sugaišta valandas ieškodami to, ko jiems reikia. Teisingai organizuota hierarchija sprendžia šią problemą.
Šiame vadove pamatysite, kaip kurti komponentų struktūrą, kuri dirba visam. Ne tik jums. Ne tik šiandien. Kalbame apie sistemą, kuri auga kartu su projektu ir niekada nepasidaro netvarkinga. Pradėkime nuo to, kodėl tai iš viso svarbu.
Kodėl hierarchija svarbi
Jei jūsų komponentų bibliotekoje yra 150 komponentų ir jie naudoja pavadinimus kaip „Button 1", „Button 2", „Button large", „Button blue large" — jūs jau žinote, kas nutiks. Žmonės pradės kurti savus komponentus. Dublikatai pradės augti. Stilius pradės skirtis.
Teisingai sugrupuoti komponentai padeda komandai greitai rasti, ką jie ieško. Ne tik jie greičiau dirba. Jie dar ir mažiau klysta. Naudoja sistemą, o ne kuria savo versijas. Tai yra skirtumas tarp dizaino sistemos, kuri iš tikrųjų veikia, ir bibliotekos, kuri tiesiog guli šaligatvyje.
Greitai: Komanda randa komponentą per 3 sekundes, ne per 3 minutes. Produktyvumas didėja apie 25-30 procentais, kai komponentai yra gerai organizuoti.
Keturlygė struktūra
Geriausia komponentų hierarchija turi keturis lygius. Kiekvienas lygis turi savo tikslą. Šita struktūra galiausiai padaro jūsų sistemą skalabilią.
Kategorija
Didžiausi grupės: „Mygtukai", „Formos", „Korteles", „Navigacija". Šie yra jūsų pagrindinės skiltys. Jei komponentas neatitinka jokios kategorijos, galbūt jis nereikalingas.
Tipo grupė
Vidinis skirstymas. Kategorija „Mygtukai" turi „Pirminiai", „Antriniai", „Pavojingi". Kategorija „Formos" turi „Įvesties laukai", „Laiškai", „Slankikliai".
Variantas
Dydis, būsena arba kitokia modifikacija. „Mažas pirminis", „Didelis pirminis", „Pirminis :(". Figma variantai yra idealūs čia — jie paliepia komponentus tvarkingai.
Komponentas
Faktinis komponentas, kurį naudoja dizaineris. Tai tas, ką tu vilkini į savo darbą. Jei 3 pirmieji lygiai yra gerai nustatyti, komponentas randamas per akimirksnį.
Praktinis vardavimo pavyzdys
Pavadinimas yra viskas. Blogas pavadinimas — ir komanda nesupranta, koks komponentas koks. Geras pavadinimas — ir dizaineris žino iš karto. Naudokite slaš (/), kad skirtumete lygius.
Geras vardavimas:
Mygtukai / Pirminiai / Vidutinis
Formos / Įvestis / Teksto laukas
Korteles / Produkto / Su paveikslu
Navigacija / Viršutinė juosta / Paieška
Matote skirtumą? Kiekvienas komponentas iš karto pasakoja, kur jis priklauso. Jūs nežiūrite į 200 komponentų sąrašą. Jūs tiesiog plečiate kategorijas ir rasite ką reikia. Komanda gali dirbti be pastebėjimų. Jie žino kur eiti.
Kaip pradėti iš nulio
Jei turite senę, chaotišką komponentų bibliotekę, nepanikinkit. Galite ją perkūrinti žingsnis po žingsnio. Nereikia visuose keisti vienu metu.
- Sudėliokite komponentus pagal kategoriją. Išvardykite visus esamus komponentus. Kur jie turėtų būti? Mygtukai kartu, formos kartu, korteles kartu.
- Iš kiekvienos kategorijos, kurkite tipo grupes. Ar turite skirtingų mygtukų tipus? Skirkite juos. Tai padeda komandai greičiau suprasti.
- Naudokite Figma variantus variantams. Figma 2023 metų atnaujinimas padarė variantus nuostabiaisiais. Mažas/vidutinis/didelis — tai vario variantai, ne atskirti komponentai.
- Praneškite komandai. Parašykite trumpą dokumentą. Parodykite, kaip vardinti naujus komponentus. Vienas mėnuo — ir jie jau naudos jūsų sistemą automatiškai.
Patarimas: Pradėkite nuo 3-4 pagrindinių kategorijų. Jei turėsite daugiau nei 8 kategorijas, jūs tikriausiai pervardavote. Kas svarbu, kas tikrai svarbu? Likite su tuo.
Išvados
Komponentų hierarchija nėra nuobodu administracinė dalis. Tai yra pagrindas, kuriuo komanda gali judėti greičiau ir saugumo jausmu. Teisingai organizuota sistema — tai sistema, kuri kuri dirba. Žmonės naudoja ją, nes ji naudinga. Jie nesukuria alternatyvų. Jie nesubankrotiną jūsų tikslų.
Keturlygė struktūra (kategorija tipo grupė variantas komponentas) yra paprasta, bet galinga. Tai skalias iš 50 komponentų iki 500. Jūsų komanda augantis, bet jūsų sistema lieka tvarkinga. Tai yra svarbu.
Pradėkite šiandien. Pažvelkite į savo komponentų bibliotekoje. Ar ji turi hierarchiją? Jei ne — kurkite. Jei taip — ar ji gerai veikia? Jei ne — peradaptuokite. Jūs visada galite gerinti. Ir turėtumėte.
DesignVault Redakcinė komanda
Redakcinė komanda
Parengta DesignVault redakcinės komandos, orientuotos į praktiškus, lengvai suprantamus vadovus apie Figma komponentų bibliotekas ir dizaino sistemas.
Susiję straipsniai
Spalvų žymės ir tipografija dizaino sistemoje
Kaip nustatyti nuoseklias spalvas ir šriftus, kurie automatiškai atsinaujina vis...
Komponentų variantai ir jų tvarkymas
Naujas Figma variantų sistema leidžia kurti lanksčius komponentus su keliomis bū...
Dizaino sistemos priežiūra ir bendradarbiavimas
Kaip keisti dizaino sistemą, kai dirba keletas dizainerių? Praktinės taisyklės...
Pastaba apie turinį
Šis straipsnis skirtas švietimo ir informaciniams tikslams. Jis rodo bendrąsias praktikas ir rekomendacijas komponentų organizavimui. Jūsų specifinės projektų poreikiai gali skirtis, priklausomai nuo komandos dydžio, projekto sudėtingumo ir naudojamų įrankių. Visada pritaikykite šias gaires prie savo konkrečių aplinkybių ir komandos poreikių.