Slyšeli jste, že kolegové designéři chválí Figmu, ale teď je řada na vás, abyste to vyzkoušeli!
Jako vývojář spolupracující s designéry na vývoji produktu budete čelit různým výzvám, které mohou bránit efektivní týmové práci. Mnoho z těchto problémů vyplývá z omezeného zapojení do procesu navrhování nebo z neúplného návrhu aktiv.
Figma zavedla Figma Dev Mode k řešení těchto problémů s cílem podpořit bezproblémovou spolupráci při návrhu a vývoji.
Jak to ovlivní váš pracovní postup jako vývojáře? Ponořte se do Figma Dev Mode, prozkoumejte jeho funkce a objevte osvědčené postupy pro jeho použití.
Co je Figma Dev Mode?
Figma, populární nástroj pro návrh rozhraní, je oblíbený u týmů vytvářejících prototypy nebo vytváření maket webových stránek. Jeho Dev Mode, který společnost oznámila na Config 2023, si klade za cíl sloužit jako pracovní prostor pro vývojáře poté, co si tvůrci uvědomili, jak obtížné bylo pro ně interagovat s plátnem Figma.
Dev Mode je podobný nástroji pro kontrolu v Chrome, ale vyjadřuje záměr návrháře ve známějším jazyce.
Vývojářský režim Figma nabízí řadu funkcí, včetně kontroly, úryvků kódu, pluginů, návrhových systémů, stavu sekcí a možnosti porovnávat změny. Tyto funkce by měly pomoci zlepšit komunikaci, zefektivnit procesy a udržet konzistentní pracovní postup od návrhu po vývoj.
V současné době je Dev Mode ve verzi beta, takže pro přístup k němu budete potřebovat desktopovou aplikaci Figma beta.
Bezproblémová komunikace s režimem Dev
Když přistoupíte k návrhovým souborům, obsah může vypadat jako mnohostranný panel plný návrhářských terminologií, kterým může být obtížné porozumět, a možná ani nevíte, kde začít. Pouhým přepnutím tlačítka se zhmotníte do prostoru, který je vám povědomější.
Navigační panel je méně stísněný s rozevíracími nabídkami obsahujícími více snímků a vrstev, které se rozbalí a zobrazí různé sekce. Tato nová verze je mnohem organizovanější.
Další skvělou funkcí, které si můžete všimnout, je časové razítko označující poslední úpravu. Podrobnosti úprav můžete zobrazit zaškrtnutím možnosti porovnat změny na panelu Kontrola. Znamená to, že můžete vidět a sledovat provedené změny, podobně jako v historii verzí, což je koncept vhodný pro vaši slovní zásobu.
Panel Kontrola představuje pro vás relevantní informace pomocí jazyka, kterému rozumíte: kódu. Můžete kontrolovat prvky a přidat pluginy, které lépe vyhovují vaší práci. Dev Mode nabízí různé funkce interakce, které vám umožňují sdílet své nápady a návrhy na různých místech. Tyto funkce zahrnují chat kurzoru, blokování komentářů, audio chat a tlačítko pro sdílení.
Tyto funkce umožňují souběžné design-vývojová spolupráce, protože zpětná vazba probíhá v reálném čase ve stejném prostředí. V důsledku toho zvyšuje produktivitu a urychluje váš pracovní postup.
Efektivní těžba aktiv
Není neobvyklé, že návrháři poskytují nekompletní prvky návrhu, což může být frustrující. Vývojáři oceňují zdroje a dostupnost komponent, aby zajistili efektivitu sestavování. S Dev Mode je extrakce aktiv tak snadná jako pár kliknutí.
Kdykoli vyberete snímek, kontrolní panel zobrazí seznam použitých prostředků. Díky tomu jsou také snadno dostupné ke stažení ve čtyřech různých formátech.
Tento nástroj vám umožňuje přístup k aktivům, aniž byste museli chodit tam a zpět s návrhářským týmem. To pomáhá vyhnout se chybám nebo zmatkům, což vám pomáhá ušetřit čas a umožňuje vám soustředit se na jiné úkoly.
Zjednodušené předávací procesy
Dev Mode je nejlepší balíček pro zpracování předávání. Kombinuje vše, co potřebujete, na jednom místě, které si můžete přizpůsobit svému pracovnímu postupu. Dev Mode pomáhá urychlit proces předání tím, že umožňuje:
- Design a vývoj v jednom prostředí
- Spolupráce v reálném čase
- Kontrola a úryvky kódu
- Návrhová systémová integrace
- Štítky stavu sekce (např. „Připraveno pro vývojáře“)
Osvědčené postupy a tipy pro používání režimu pro vývojáře
Figma's Dev Mode můžete použít jako součást svého pracovního postupu, ale jak jej můžete co nejlépe využít? Zkuste tyto návrhy.
- Používejte zdroje a pluginy pro vývojáře k přizpůsobení svých zkušeností; propojte nástroje, které již používáte v režimu Dev Mode, abyste zefektivnili svůj pracovní postup. Od GitHubu po frameworky ve vašem stacku, existují různé druhy, ze kterých si můžete vybrat.
- Pomocí funkcí kontroly a fragmentů kódu získáte přístup k měřením, specifikacím, stylům a datovým zdrojům prvků návrhu. Můžete také generovat kód v různých knihovnách pomocí pluginů.
- Sledujte změny designu, aby vám nic neuniklo. The Porovnejte změny funkce slouží jako nástroj historie verzí – nezapomeňte ji pravidelně kontrolovat.
- Využijte všechny funkce spolupráce pro komunikaci a oslovte designéry pomocí komentářů, chatování s kurzorem a dalších.
- Pomocí nového rozšíření Figma VS Code můžete také kontrolovat prvky ve VS Code. Umožňuje vám také dělat více – včetně navigace v souborech, sledování změn, spolupráce návrhářů a zrychlení implementace návrhu – aniž byste museli opustit VS Code.
- Zůstaňte v obraze o nových funkcích, zjistěte, jak nejlépe vám mohou posloužit, a zdokonalujte se při každé příležitosti.
Využijte vývojářský režim a zefektivněte svůj pracovní postup
Figma Dev Mode by měl váš pracovní postup zefektivnit a umožnit lepší spolupráci návrháře a vývojáře s nezbytnými funkcemi.
Ekosystém Figma má více částí a popularita aplikace znamená, že je to cenný nástroj, který můžete přenášet z práce do práce.