Kaip suorganizuoti komponentus pagal hierarchiją
Praktinis vadovas, kaip sugrupuoti komponentus taip, kad juos būtų lengva rasti ir naudoti visame projekte.
Dizaino sistemos pagrindai
Spalvų žymės ir tipografija dizaino sistemoje
Kaip nustatyti nuoseklias spalvas ir šriftus, kurie automatiškai atsinaujina visame projekte. Išvenk nesuderintos vizualinės identiteto.
14 min skaitymui
Pradedantysis
Liepa 2026
Spalvų žymės ir tipografija yra dizaino sistemos širdis. Jie sudaro vizualinę identitetą ir užtikrina, kad visas jūsų projektas atrodo vienodai — nesvarbu, ar tai pristatymas, interneto svetainė ar mobilioji programa.
Kai naudojate Figma, galite nustatyti šias reikšmes kaip kintamuosius. Tai reiškia, jei jums reikia pakeisti pagrindinę spalvą, ji atsinaujina automatiškai visur. Nereikia ieškoti ir keisti šimtų komponentų vienas po kito — keitimas vyksta iš karto. Tai sutaupo laiką ir sumažina klaidų riziką.
Spalvų sistemos pagrindai
Pradėkite nuo to, ką jau turite. Dauguma projektų turi bent keturias pagrindinės spalvos: pagrindinę, antrinę, sėkmę ir įspėjimą. Figmoje jūs nustatysite šias spalvas kaip žymės — jie vadinami „Color Styles" arba tiesiog „žymėmis".
Žymės ne tik pasiūlo spalvą. Jie fiksuoja spalvą tame žymės failų sistemoje. Jei šaltiniame keičiate spalvą, visos jos kopijos visame projekte atsinaujina automatiškai. Tai galioja ir komponentams, ir pagrindiniams elementams.
Praktinis patarimas: Pradėkite su bent aštuoniomis spalvomis: trys neutralios (balta, šviesi pilka, tamsi pilka), trys pagrindinės (mėlyna, žalia, raudona) ir dvi papildomos (geltona ir violetinė). Tai pakanka daugumai projektų.
Tipografijos žymės ir šriftų stiliai
Tipografija veikia panašiai. Jūs naudojate „Typography Styles" arba „Text Styles" norėdami apibrėžti šrifto šeimą, dydį, svorį ir eilutės aukštį. Paprasta pavyzdžiui: H1 gali būti 32px Inter tamsiais šriftais su 1.2 eilutės aukščiu. H2 yra 24px tame pačiame šrifte su 1.3 eilutės aukščiu.
Šios žymės daro dvi svarbias dalykus. Pirma, jie standartizuoja jūsų tipografiją visame projekte. Antra, jie palengvina pokyčius. Jei jūs norite padidinti visus antraščius vienu procentu, tiesiog atnaujinkite H2 žymę. Jokios rankinės paieškos ir keitimo nereikia.
Praktiškai tai reiškia: dauguma projektų naudoja tris šrifto šeimas. Viena antraščiams (paprastai be serifų), viena pagrindiniam tekstui (lengva skaityti) ir kartais viena monospace kodui. Jei jūs dirbate mažiame komandinėje, gali būti tik vienas šriftas.
Kaip sukurti nuoseklią žymių sistemą
Pradėkite mažai. Kurkite spalvų žymę pagrindiniam tekstui — sakykime, pilkai spalvai, kuri skaitoma lengvai. Tada sukurkite antrinę spalvą mažiesiems tekstams. Tada pagrindinę akcentinę spalvą mygtukams. Keturios spalvos. Tai gerai.
Jei jūs turite daugiau nei 15 spalvų žymių, tikriausiai per daug komplikuojate. Žymės turėtų būti lengvai suprasti ir greitai rasti. Grupavimas padeda — jūs galite organizuoti jas pagal kategoriją (Neutral, Primary, Secondary) arba pagal panaudojimą (Text, Backgrounds, Accents).
Žingsniai kurti žymių sistemą:
1
Pasirinkite savo spalvų paletę (3-8 pagrindinės spalvos)
2
Kurkite spalvų žymės kiekvienai spalvai Figmoje
3
Pasirinkite šriftą antraščiams ir tekstui
4
Kurkite tipografijos žymės kiekvienai H1, H2, H3 ir paragrafo dydžiui
5
Taikykite žymės savo komponentams
Žymės taikymas komponentams
Kai žymės yra paruoštos, taikykite jas savo komponentams. Mygtukas naudoja pagrindinę spalvą kaip foną ir antrinę spalvą tekstui. Kortelės naudoja neutralią spalvą kaip foną ir pagrindinę spalvą antraštei. Kiekvienas komponentas rodo žymės nuorodą, ne tiesiogiai įterptą spalvą.
Tai yra svarbiausias žingsnis. Jei jūs kopijuojate ir liepsite spalvas į komponentus be žymių, jūs neturite jokios sistemos. Keičiant spalvą, jūs turėsite rankiniu būdu keisti kiekvieną vietą. Žymės automatizuoja tai.
Jei komponentas naudoja žymę, jūs matote žymės pavadinimą spalvų panelėje. Tai yra jūsų patikrinimas, kad viskas yra sujungta teisingai. Nesvarbu, ar jūs peržiūrite komponentą komponentų bibliotekoje ar naudojate jį dizaine, spalva visada ateina iš žymės.
Kai žymės yra nustatytos teisingai, visos reikšmės atsinaujina iš vieno taško. Tai reiškia, kad jūs galite pakeisti visą projektą spalvą per dešimt sekundžių.
— Dizaino sistemos gera praktika
Santrauka
Spalvų žymės ir tipografijos žymės yra dizaino sistemos pagrindas. Jie užtikrina nuoseklumą, sutaupo laiką ir palengvina pokyčius. Pradėkite nuo nedidelio skaičiaus spalvų ir šriftų. Sukurkite žymės Figmoje. Taikykite jas savo komponentams. Tada jūs turėsite tikrą sistemą — ne tik spalvų sąrašą.
Gera dizaino sistema augus su jūsų projektu. Pradžioje gali būti keturios spalvos. Per mėnesį jums gali reikėti šešių. Tai yra gerai. Žymės palengvina šiuos pokyčius be baisaus refaktoravimo.
DesignVault Redakcinė komanda
Redakcinė komanda
Parengta DesignVault redakcinės komandos, orientuotos į praktiškus, lengvai suprantamus vadovus apie Figma komponentų bibliotekas ir dizaino sistemas.
Svarbi pastaba
Šis straipsnis pateikia edukacinę informaciją apie dizaino sistemų kūrimą Figmoje. Tai gera praktika ir bendri principai, ne galutinis vadovas. Jūsų specifiniai projektai gali reikalauti skirtingų sprendimų priklausomai nuo jūsų komandos dydžio, projekto sudėtingumo ir organizacinių poreikių. Laikaite šias rekomendacijas kaip pradžią, o ne taisykles, kurias reikia sekti griežtai.
