Čuli ste kolege dizajnere kako hvale Figmu, ali sada je vaš red da je isprobate!

Kao programer koji surađuje s dizajnerima na razvoju proizvoda, suočit ćete se s raznim izazovima koji mogu omesti učinkovit timski rad. Mnogi od ovih problema proizlaze iz ograničene uključenosti u proces dizajna ili nepotpunih sredstava dizajna.

Figma je uvela Figma Dev Mode kako bi riješila te probleme, s ciljem da podrži besprijekornu suradnju dizajna i razvoja.

Kako će to utjecati na vaš tijek rada kao programera? Zaronite u Figma Dev Mode, istražite njegove značajke i otkrijte najbolje prakse za njegovu upotrebu.

Što je Figma Dev Mode?

Figma, popularni alat za dizajn sučelja, popularan je među timovima koji izrađuju prototipove ili makete web stranica. Njegov Dev Mode, koji je tvrtka najavila na Config 2023, ima za cilj poslužiti kao radni prostor za programere nakon što su kreatori shvatili koliko im je teško komunicirati s Figma platnom.

Dev Mode sličan je alatu za pregled u Chromeu, ali prenosi namjeru dizajnera na poznatijem jeziku.

instagram viewer

Figmin Dev Mode nudi niz značajki, uključujući pregled, isječke koda, dodatke, sustave dizajna, status odjeljka i mogućnost usporedbe promjena. Ove bi značajke trebale pomoći u poboljšanju komunikacije, pojednostavljenju procesa i održavanju dosljednog tijeka rada od dizajna do razvoja.

Trenutačno je Dev Mode u beta verziji, pa će vam za pristup trebati Figma beta desktop aplikacija.

Besprijekorna komunikacija s razvojnim načinom rada

Kada pristupite datotekama dizajna, sadržaj može izgledati kao mnoštvo panela, ispunjenih terminologijama dizajna koje je teško razumjeti, a možda čak i ne znate odakle početi. Samo pritiskom na gumb materijalizirate se u prostor koji vam se čini poznatijim.

Kredit za sliku: Figma

Navigacijska ploča manje je skučena s padajućim izbornicima koji sadrže više okvira i slojeva koji se proširuju kako bi prikazali različite odjeljke. Ova nova verzija puno je organiziranija.

Još jedna sjajna značajka koju možete primijetiti je vremenska oznaka koja označava posljednje uređivanje. Pojedinosti o uređivanju možete vidjeti tako da označite opciju usporedbe izmjena na ploči Pregledaj. To znači da možete vidjeti i pratiti učinjene promjene, slično povijesti verzija, koncept koji odgovara vašem rječniku.

Ploča Inspect predstavlja informacije relevantne za vas koristeći jezik koji razumijete: kod. Možete pregledati elemente i dodajte dodatke koji bolje odgovaraju vašem poslu. Dev Mode nudi različite značajke interakcije, omogućujući vam da podijelite svoje ideje i prijedloge u različitim točkama. Ove značajke uključuju chat pokazivača, blok komentara, audio chat i gumb za dijeljenje.

Ove značajke omogućuju istovremeno suradnja dizajna i razvoja, budući da se povratna informacija odvija u stvarnom vremenu unutar istog okruženja. Kao rezultat toga, poboljšava produktivnost i ubrzava tijek rada.

Učinkovito izvlačenje imovine

Nije neuobičajeno da dizajneri daju nepotpune elemente dizajna, što može biti frustrirajuće. Programeri cijene resurse i dostupnost komponenti kako bi osigurali učinkovitost izrade. Uz Dev Mode, ekstrakcija imovine je jednostavna kao nekoliko klikova.

Kad god odaberete okvir, ploča za pregled prikazuje popis korištenih sredstava. Također ih čini dostupnima za preuzimanje u četiri različita formata.

Ovaj vam alat omogućuje pristup imovini bez potrebe da idete naprijed-natrag s dizajnerskim timom. To pomaže u izbjegavanju pogrešaka ili zabune, pomaže vam uštedjeti vrijeme i omogućuje vam da se usredotočite na druge zadatke.

Pojednostavljeni Handoff procesi

Dev Mode je najbolji paket za rukovanje primopredajama. Kombinira sve što vam je potrebno na jednom mjestu koje možete prilagoditi svom tijeku rada. Dev Mode pomaže ubrzati proces primopredaje omogućavanjem:

  • Dizajn i razvoj u jednom okruženju
  • Suradnja u stvarnom vremenu
  • Inspekcija i isječci koda
  • Projektiranje integracije sustava
  • Oznake statusa odjeljka (npr. "Spremno za razvojne programere")

Najbolji postupci i savjeti za korištenje Dev Mode

Možete koristiti Figmin Dev Mode kao dio svog tijeka rada, ali kako ga možete najbolje iskoristiti? Isprobajte ove prijedloge.

  • Koristite razvojne resurse i dodatke da prilagodite svoje iskustvo; povežite alate koje već koristite unutar Dev Mode kako biste pojednostavili svoj tijek rada. Od GitHuba do okvira u vašem stogu, postoje različite vrste za odabir.
  • Koristite značajke pregleda i isječaka koda za pristup mjerama, specifikacijama, stilovima i imovini elemenata dizajna. Također možete generirati kod u različitim bibliotekama pomoću dodataka.
  • Pratite promjene dizajna kako ne biste ništa propustili. The Usporedite promjene značajka služi kao alat za povijest verzija—provjeravajte je redovito.
  • Iskoristite sve značajke suradnje za komunikaciju i kontaktirajte dizajnere koristeći komentare, razgovore pokazivača i više.
  • Također možete pregledati elemente u VS Codeu s novim proširenjem Figma VS Code. Također vam omogućuje više — uključujući navigaciju datotekama, praćenje promjena, suradnju dizajnera i ubrzanje implementacije dizajna — bez napuštanja VS Codea.
  • Budite u tijeku s novijim značajkama, pogledajte kako vam najbolje mogu poslužiti i nadogradite se u svakoj prilici.

Prihvatite način rada za razvojne programere kako biste pojednostavili svoj tijek rada

Figma Dev Mode trebao bi vaš tijek rada učiniti učinkovitijim, omogućujući bolju suradnju dizajnera i programera s potrebnim značajkama.

Postoji više dijelova ekosustava Figma, a popularnost aplikacije znači da je to vrijedan alat koji možete donositi s posla na posao.