Dizajn tokeni i teme za više brendova · Izrada
Novi brend ili tamna tema znači novi skup vrijednosti tokena
Komponente sve boje i veličine uzimaju iz tokena, pa im kod ostaje isti za svaki brend. Biblioteka od stotinjak komponenti pokriva više od 30 brendova.
AngažmanPo satu · remote
Radno vrijeme9–18 CET · 4 h preklapanja
StackDizajn tokeni · Figma · JSON
Dokaz2 projekta
Usluga u 4 dijela
01 · Za koga je
Proizvod prodajete pod brendovima drugih firmi ili vam trebaju svijetla i tamna tema bez održavanja dvije verzije svega.
02 · Šta smo napravili
- White-label proizvod za građevinske firme, koji se prodaje pod više od trideset brendova, svaki sa svojim bojama, logotipima i fotografijama. Stotinjak komponenti sve to uzima iz tokena, koji su izvezeni iz Figme u JSON i generisani u SCSS. Biblioteku je za dva mjeseca napravio jedan developer.Projekat 02 →
- U našem cross-platform dizajn sistemu token teme na webu postaje CSS varijabla, a na telefonu vrijednost koju upisuje native resolver. Svaka boja definisana je jednom, za sve platforme.Projekat 01 →
- Na jednoj stranici, napravljenoj na tri načina radi poređenja, promjena boje brenda tražila je izmjenu na 58 mjesta u čistom HTML-u, a u verziji s dizajn sistemom jedan token, koji je promjenu primijenio na sve tri platforme.Tekst →
03 · Kako radimo
01 · IMENA TOKENA U KOMPONENTAMANijedna komponenta nema svoju boju ni veličinu. Svaka traži token po imenu, a vrijednosti iza tih imena određuje brend.
02 · I RAZMACI I VELIČINERazmake i veličine stavljamo u tokene zajedno s bojama. Pogrešna boja se primijeti istog dana, a neujednačeni razmaci mogu mjesecima proći neprimijećeno. U verziji iste stranice ručno pisanoj u styled-components boje su bile u varijablama, ali je 196 vrijednosti u pikselima bilo upisano ručno.
03 · JEDAN VERZIONISAN PAKETTokene i komponente izdajemo kao jedan verzionisan, dokumentovan paket koji instalira svaki proizvod, pa se brend mijenja na jednom mjestu. Biblioteka s trideset brendova imala je dokumentaciju napravljenu po mjeri, koja je postala još jedna stvar za održavanje. Danas bismo uzeli standardni alat.
04 · Stack
Dizajn tokeniFigmaJSONSCSSCSS varijableTypeScriptnpm paketi
Dokaz
Gdje smo ovo već radili
Projekat 02 · Platforme~100 / 30+White-label proizvod za građevinske firme, koji se prodaje pod više od trideset brendova, svaki sa svojim bojama, logotipima i fotografijama. Stotinjak komponenti sve to uzima iz tokena, koji su izvezeni iz Figme u JSON i generisani u SCSS. Biblioteku je za dva mjeseca napravio jedan developer.Pročitajte više o projektu →Projekat 01 · Platforme74 / 678U našem cross-platform dizajn sistemu token teme na webu postaje CSS varijabla, a na telefonu vrijednost koju upisuje native resolver. Svaka boja definisana je jednom, za sve platforme.Pročitajte više o projektu →BlogStranica s napola izgrađenim dizajn sistemom bila je veća od čistog HTML-aNa jednoj stranici, napravljenoj na tri načina radi poređenja, promjena boje brenda tražila je izmjenu na 58 mjesta u čistom HTML-u, a u verziji s dizajn sistemom jedan token, koji je promjenu primijenio na sve tri platforme.Pročitajte tekst →
Česta pitanja
Pitanja o ovoj usluzi
Novi brend je novi skup vrijednosti tokena za njegove boje, tipografiju i slike, a kod komponenti se ne mijenja. Zato je jednu biblioteku bilo moguće održavati i s više od trideset brendova.
Ne mora. Biblioteku s trideset brendova napravili smo tako da ne zavisi ni od jednog frameworka, jer su je koristila dva različita proizvoda. Da smo je vezali za jedan framework, isti dizajn bi za drugi proizvod trebalo implementirati još jednom.
Možete, ako nijedna boja nije upisana direktno u komponente. Naša marketing stranica, prepravljena na semantičke tokene, radila je u svijetloj i tamnoj temi bez dodatnog posla, a originalna verzija imala je boje upisane u kod i postojala je samo u tamnoj.
Mogu. Tokeni biblioteke s trideset brendova 2022. godine izvozili su se iz Figme u JSON, a u našem sadašnjem sistemu stižu automatski, preko MCP servera. Više o tome piše na stranici „Figma u kod“.
Sljedeći korak
Opišite problem i javit ćemo vam se s tri opcije.
Prvi poziv traje 30 minuta i ni na šta vas ne obavezuje.