Kako Kiwi.com obrađuje strukturu, inačice i komponente projekta na Figma

Bivši skeptik iz Figme mijenja svoju melodiju

Slika koju je za Figmu stvorio Peter Barnaba

Bilješka urednika Figme: ovom pričom reprintiramo izvrstan rad dizajnera Kiwi.com Denisa Rojcyka, koji se izvorno pojavio na njegovoj osobnoj web stranici. Napravili smo nekoliko poteškoća za gramatiku, oblikovanje i razumijevanje, ali nismo sponzorirali ovaj post. Zanima vas pisanje o dizajnu ili vašem Figma procesu za naš blog? Sadržaj poruke@figma.com.

Mobilni tim dizajnera na web lokaciji za rezervaciju putovanja Kiwi.com je maleni, nas je samo dvoje. No, dvadesetak ljudi na neki način doprinosi našim nacrtima, bilo da komentiraju naše najnovije iteracije, popravljaju kopiju ili dizajniraju značajke platformi. Trenutno je naš prednji kraj dizajniran u Sketch-u, kao i Orbit, naš dizajnerski sustav. No kako je mobilni dio Orbita vizualno drugačiji, odlučili smo ga pokušati dizajnirati na Figmi i vidjeti kako to djeluje na nas.

Ovaj post pokriva:

1. Zašto smo na Figmi izgradili svoj sustav mobilnog dizajna
2. Kako je najnovije ažuriranje promijenilo način rada
3. Kako smo organizirali naš sustav dizajna (s primjerima)

Preskočite naprijed u 3. odjeljak ("Načela komponenti naše biblioteke dizajna") ako ste već pretvornik Figma i samo želite inspiraciju za organiziranje komponenti, rukovanje poviješću verzija i drugim poslovima.

Skočite na "Načela komponenata" ako ste već figma za konverziju i jednostavno želite ideje / strukturiranje datoteka

Zašto Figma?

Radni tijek usmjeren prema skici oslanja se na alate poput Zeplina za rukovanje predajama, Sažetak za kontrolu verzija verzija i Marvel za dizajn statičkih prototipa. No, s vremena na vrijeme stvari postaju izvan sinkronizacije. Prototipovi se zaglave na najnovijim testiranim iteracijama, ljudi zaboravljaju pritisnuti obveze na Sažetak, možda Zeplin nije ažuriran s najnovijim odobrenim vizualnim prikazima ili su PNG-ovi ugrađeni u Dropbox Paper star 3 tjedna. Ovi se alati, prema dizajnu, moraju izvući iz sinkronizacije .

Prije nego što sam se pridružio Kiwi.com, igrao sam se s idejom da isprobam Figmu, ali bilo mi je teško doći do nje. Nisam vidio veliku vrijednost u njegovom korištenju i nisam trebao sve svoje alate sinkronizirati.

Također me odgurnuo pristup pretraživača / oblaka. Svidjelo mi se što sam mogao paliti Sketch kad god poželim, a to je izvorna Mac aplikacija. A onda me je udario, nema šanse za to - ili imate sve u oblaku i to je sinkronizirano 100% vremena ili imate izvanmrežne stvari u desinhroniziranim tijekovima rada. Dakle, pokušao sam raditi s Figmom, samo malo u početku, i to mi se jako svidjelo.

Tada sam se pridružio Kiwi.com u studenom prošle godine. Vojta je u to vrijeme bio jedini koji je tamo radio na mobitelu. Sam je pokrivao sve platforme i sve uređaje. Iako je radio sjajan posao, njegovom je radu nedostajao dosljedan sustav koji stoji iza njega.

Htjeli smo to pokušati, ali klađenje na Figmu bez cijelog tima i dizajniranje Orbita u njemu činilo se kao loš poziv. Nije bilo baš jasno u kojem će se smjeru Figma krenuti i na što će se oni fokusirati. Uz to, neke značajke jednostavno nisu bile spremne. Pa ipak, odlučili smo to pokušati svejedno, ali samo s mobilnim uređajem. Naš prednji kraj i Orbit i dalje su osmišljeni i održavani u Sketch-u.

Tada me pogodilo: ili sve imate sinkronizaciju 100% u oblaku, ili imate izvanmrežne stvari u desinhroniziranim tijekovima rada.

Figma 3.0

Donedavno je upravljanje komponentama predstavljalo bol. Figma je nedostajala značajke kako bi sustav dizajniranja bio skalabilan. Ako želite učinkovito raditi s DS-om, bili ste ograničeni na jednu datoteku.

Srećom, Figma je predstavila ogromno 3.0 ažuriranje. Ovdje neću ulaziti u pojedinosti (samo slijedi vezu), ali u osnovi ažuriranje:

1. Jednostavno omogućavanje, onemogućavanje i upravljanje ažuriranjima jednostavno
2. Omogućio korisnicima dijeljenje komponenti s poništavanjima unutar datoteka
3. Omogućio korisnicima dijeljenje različitih stilova za slojeve (što ga čini atomskim više nego Sketch, jer vam omogućuje kombiniranje stilova teksta s bojama i efektima)

Načela komponenata naše biblioteke dizajna

Kad god dizajniramo novu knjižničnu komponentu ili bilo koji drugi dodatak dizajnerskom sustavu, pokušavamo slijediti nekoliko UX principa kako bismo osigurali da knjižnica ostane dosljedna, učinkovita i jednostavna za rad.

Maksimalno gnijezđenje komponenata na dvije razine

Rad s komponentama i njihovo gniježđenje u početku se osjećaju prilično moćno. Izgradnjom komponenti na atomskoj razini (poput ikona) i njihovim sastavljanjem u veće komponente (poput traka statusa) dajete sebi fleksibilnost za promjenu jednog malog dijela vašeg sustava i promatranje kako se to odražava u svakom dijelu vašeg dizajna. Za one koji nisu upoznati sa praksom, evo posta na blogu i videozapisa s vodičima koji će se detaljnije pozabaviti.

Prolazak na dvije razine duboko u komponentama gniježđenja pruža najbolju ravnotežu upotrebljivosti i mogućnosti.

Ali čim prijeđete više od nekoliko slojeva dubine - na primjer, recimo da gnijezdi komponentu ikona unutar komponente statusne trake, koja je sama ugniježđena unutar komponente početnog zaslona - vaš proces može postati zbunjujući. S velikom snagom dolazi do velike odgovornosti i otkrio sam da prolazak do dvije razine duboko u gniježđenju komponenata pruža najbolju ravnotežu upotrebljivosti i mogućnosti. To je ključna smjernica koja održava naš sustav dizajna upravljivim.

Gnijezdane komponente na djelu

Olakšajte odabir slojeva (posebno teksta)

Da biste brzo dizajnirali, potrebne su vam tehnike za upravljanje slojevima i komponentama. Oni često imaju nevidljive ograničavajuće kutije oko sebe koje mogu biti sitne na noktima (slično kao ciljevi "hit boxa" u FPS igrama). Na primjer, recimo da stvarate standardnu ​​komponentu, u kojoj je samo tekstualna oznaka. Kada na Figmi stvorite sloj teksta, ručke (isprekidane linije) koje ga okružuju su male, obavijajući tekst gotovo 1: 1.

Na Kiwi.com smo navikli automatski istezati ručke do granica sastavnog dijela. Zatim možemo dvostruko kliknuti bilo gdje u komponenti za uređivanje naljepnice.

Morate uzeti malo drugačiji takt kada imate dvije oznake u komponenti. Ako obje ove naljepnice protežete na rubovima, one će se preklapati (a zgodna tehnika "rastezanja za klik" više ne funkcionira). U tom slučaju napravite jednu od naljepnica malo manju (obično je pola upola manje) i gurnite je na vrh popisa slojeva na lijevoj ploči. Zatim imate pogodan način da dvaput kliknete i uredite oba sloja, bilo klikom na veliki na samom platnu, bilo klikom na manji na ploči slojeva.

(Vrh)

Logika prevladavanja logike

Prijedlozi za nadmetanje komponenata temelje se na veličini komponenata. Dakle, kada želite zamijeniti komponentu s nečim drugim, a želite je odabrati u prozoru s prijedlozima, ona mora biti iste veličine.

GroupIt ProTip ™

Sve naše komponente zamotavamo u grupe. Na taj se način ne prekrivaju bočne trake u biblioteci komponenata datoteka. To olakšava rad sa stranicama s puno komponenti. Nešto mi nedostaje u Sketch-u.

Optimizirajte snimke bitnih slika

Kada radimo s fotografijama ili bilo kojim drugim bitmapsima u našem dizajnu, s njima radimo onako kako bi bili web web imovina.

  • Slike optimiziramo: alatima poput ImageOptim, Optimage, tinyPNG i sličnim. Nisam siguran radi li Figma optimizaciju, ali svejedno to radimo.
  • Optimiziramo format datoteke: PNG za jednostavne ilustracije i JPEG za fotografije.
  • Promijenimo veličinu imovine: općenito ne trebamo fotografije veličine panoa u našim modelima.

Slijedeći ovu praksu poboljšava vrijeme preuzimanja naših datoteka i komponenti knjižnice. Također čini ponovno otvaranje datoteka manje gnjavaže.

Komponente i struktura projekta

Uz naše smjernice o sastavljanju komponenti, stvorili smo i organizacijsku strukturu za projekte, verzije i datoteke. Ponovno sam stvorio sljedeće primjere kako biste ih lako mogli koristiti sami. Samo ih kopirajte i slobodno ih prilagodite svom tijeku rada.

Pokrivanje projekta

Možda se čini kao mala stvar, ali navigacija kroz Figmu može predstavljati bol kada imate puno datoteka i projekata. Naslovi datoteka djeluju, ali teško ih je brzo skenirati. Zato koristimo slike s naslovnica.

Struktura datoteke projekta

Držimo se jedne datoteke po projektu ili tijeku (imamo datoteke za stvari poput birača mjesta, odabira datuma, pretraživanja i slično). Ovo smo rješenje odabrali jer smo otkrili da mnogo korisničkih protoka u jednoj datoteci omogućuje učitavanje sporo.

Jedan nedostatak - Ne možete povezati dvije datoteke i stvoriti prototip od njih na Figma. Dakle, s protocima razdvojenim između datoteka, ne možemo testirati određeno ponašanje korisnika (poput prelaska iz toka rezervacije do podataka o njihovom profilu).

Verzija projekta

Stranice koristimo kao različite verzije projekta sa standardnom XY konvencijom o imenovanju. X predstavlja ogromna ažuriranja verzije, a Y manje iteracije s najnovijom iteracijom. Stranica komponenti sadrži kandidate komponenti za koje smatramo da se kreću u glavnu knjižnicu korisničkog sučelja.

Biblioteka pomagača

https://www.figma.com/embed?embed_host=share&url=https://www.figma.com/file/Mutou0a3WLf4bZrApWVRU9Kz/Helpers?node-id=0%3A1

Uz redovne datoteke projekta i token datoteke, stvorili smo zasebnu datoteku pod nazivom Helpers. Sadrži elemente koje koristimo za organiziranje ostalih dizajnerskih datoteka, poput sustava označavanja. Nalijepimo pojmove poput „stranica“ i „kategorija“ pored okvira dizajna, kako bismo te komponente vizualno razlikovali i dali platnu osjećaj strukture.

Potom svatko tko promatra tu dizajnersku datoteku može brzo analizirati podatke i razumjeti što gleda. Na primjer, datoteka Helpers sadrži ljepljivu bilješku za komentare, a mi tu komponentu povlačimo u bilo koje nove dizajnerske datoteke kako bi ljudi mogli ostavljati bilješke. Iako Figma ima svoje komentare, ova funkcija nije uvijek očita osobama bez dizajna.

žetoni

Ova se datoteka rijetko dodiruje. Sadrži najviše atomske komponente cijelog dizajnerskog sustava. Datoteka ima tri stranice: boje, tipografiju i sjene. U osnovi sve što možete definirati u Figma knjižnicama, osim komponenata.

Tokeni - boje

Oznake - tipografija

Tipografija je ista kao i boje. Već smo definirali sve što nam je potrebno u našem dizajnerskom sustavu (nedostaju neke definicije stila fontova FE) i zbog toga se rijetko dodiruje. Prethodno definirana tipografija izgleda prilično jednostavno, ali u kombinaciji s drugim zajedničkim stilovima to je sve što nam treba za mobilne uređaje.

Tokeni - Sjene

Sjene su nešto s čime još uvijek eksperimentiramo, no do sada smo definirali 4 razine nadmorske visine i čini se da to dobro djeluje na nas.

ikone

Ikone imaju svoju stranicu, sve su podijeljene u različite odjeljke i smještene su u okvire 24x24. Gotovo sve ikone su standardni Materijalni ikoni.

Ilustracije

Ilustracije su vrlo slične ikonama. To je samo ogromno platno puno naših ilustracija proizvoda. Svi imaju istu veličinu. Ali zbog nekih ograničenja uvoza SVG-a na Figmu, za sada moramo raditi s bitmapama.

Orbit Mobile

U početku smo imali dvije različite mobilne knjižnice za iOS i Android. No kako se oni dosta preklapaju, odlučili smo ih kombinirati. Lakše nam je tako održavati. Ali razlike u prezentaciji nekih UI elemenata i dalje postoje, na primjer, sklopke i slično. To je još uvijek u tijeku, a Android ćemo morati malo nadoknaditi .

Najsayer jede njegove riječi

Figma je nedostajala značajke prije izdanja 3.0, ali sada su dodali većinu mojih must-ova i postala je ozbiljna konkurencija ostalim alatima. Izgradnja dizajnerskog sustava s njim pokazala se relativno lakom. Zapravo, osjećam da je upravljanje Figgom daleko lakše nego u drugim alatima. Nipošto nije savršena, ali najviše odgovara mom ukusu.

Način na koji strukturiramo datoteke i dijelimo logiku sustava dizajna stalno se razvija sa svakim ažuriranjem, ali stvari koje su spomenute u ovom postu ostale su kod nas najduže i dokazano učinkovite.

U budućim bih porukama želio opisati kako zapravo izgraditi sistem dizajna na Figmi, neke probleme iza rada s ugniježđenim komponentama i neke druge savjete. Ako je to nešto na vašoj uličici, najsigurniji način da saznate o tome jednom kad izađe jest da me pratite na Twitteru .