Hallott már a tervező kollégáktól a Figmáról, de most rajtad a sor, hogy kipróbáld!

Tervezőkkel a termékfejlesztésben együttműködő fejlesztőként különféle kihívásokkal kell szembenéznie, amelyek akadályozhatják a hatékony csapatmunkát. E problémák közül sok a tervezési folyamatban való korlátozott részvételből vagy a tervezési eszközök hiányából fakad.

A Figma ezen problémák megoldására vezette be a Figma Dev Mode-ot, a zökkenőmentes tervezési-fejlesztési együttműködés támogatása érdekében.

Hogyan érinti ez a munkafolyamatot fejlesztőként? Merüljön el a Figma Dev módban, fedezze fel annak funkcióit, és fedezze fel a használatának legjobb gyakorlatait.

Mi az a Figma Dev mód?

Figma, a népszerű felülettervező eszköz, népszerű a prototípusokat építő csapatok vagy a weboldal makettjeit készítő csapatok körében. A fejlesztői mód, amelyet a vállalat a 2023-as Config alkalmával jelentett be, fejlesztői munkaterületként kíván szolgálni, miután az alkotók rájöttek, milyen nehéz kölcsönhatásba lépniük a Figma vászonnal.

instagram viewer

A Fejlesztői mód hasonló a Chrome ellenőrző eszközéhez, de a tervezői szándékot egy ismerősebb nyelven közvetíti.

A Figma fejlesztői módja funkciók széles skáláját kínálja, beleértve az ellenőrzést, a kódrészleteket, a bővítményeket, a tervezési rendszereket, a szakasz állapotát és a változások összehasonlításának lehetőségét. Ezek a funkciók elősegítik a kommunikáció javítását, a folyamatok egyszerűsítését és a tervezéstől a fejlesztésig tartó következetes munkafolyamat fenntartását.

Jelenleg a Fejlesztői mód bétaverzióban van, ezért a Figma béta asztali alkalmazásra lesz szüksége a hozzáféréshez.

Zökkenőmentes kommunikáció fejlesztői móddal

Amikor hozzáfér a tervfájlokhoz, a tartalom panelek sokféleségének tűnhet, tele olyan tervezési terminológiákkal, amelyeket nehéz megérteni, és előfordulhat, hogy azt sem tudja, hol kezdje. Csak egy gomb megnyomásával egy olyan térré materializálódik, amely ismerősebbnek érzi magát.

Kép jóváírása: Figma

A navigációs panel kevésbé szűk a több keretet és réteget tartalmazó legördülő menükkel, amelyek kibővülve mutatják be a különböző szakaszokat. Ez az új verzió sokkal szervezettebb.

Egy másik nagyszerű funkció, amelyet észrevehet, az utolsó szerkesztést jelző időbélyeg. A szerkesztés részleteit a Vizsgálat panelen található változtatások összehasonlítása opcióval tekintheti meg. Ez azt jelenti, hogy megtekintheti és nyomon követheti az elvégzett változtatásokat, hasonlóan a verzióelőzményekhez, amely az Ön szókincsének megfelelő fogalom.

Az Ellenőrzés panel az Ön számára releváns információkat az Ön által értett nyelven: kódon jeleníti meg. Megvizsgálhatja az elemeket és adjon hozzá a munkájához jobban illeszkedő beépülő modulokat. A Dev Mode különféle interakciós funkciókat kínál, amelyek lehetővé teszik, hogy különböző pontokon ossza meg ötleteit és javaslatait. Ezek a funkciók közé tartozik a kurzorcsevegés, a megjegyzésblokk, az audiocsevegés és a megosztás gomb.

Ezek a funkciók lehetővé teszik a párhuzamos működést tervezési-fejlesztési együttműködés, mivel a visszacsatolás valós időben történik ugyanabban a környezetben. Ennek eredményeként javítja a termelékenységet és felgyorsítja a munkafolyamatot.

Hatékony eszközkinyerés

Nem ritka, hogy a tervezők hiányos tervezési eszközöket biztosítanak, ami frusztráló lehet. A fejlesztők nagyra értékelik az erőforrásokat és az összetevők rendelkezésre állását, hogy biztosítsák a hatékonyságot. A Fejlesztői móddal az eszközök kinyerése néhány kattintással egyszerű.

Amikor kiválaszt egy keretet, az ellenőrző panel megjeleníti a használt eszközök listáját. Ezenkívül négy különböző formátumban is könnyen letölthetővé teszi őket.

Ez az eszköz lehetővé teszi az eszközök elérését anélkül, hogy a tervezőcsapattal oda-vissza kellene mennie. Ez segít elkerülni a hibákat és a zavart, időt takarít meg, és lehetővé teszi, hogy más feladatokra összpontosítson.

Egyszerűsített átadási folyamatok

A Dev Mode a legjobb csomag az átadások kezelésére. Egy helyen egyesíti mindazt, amire szüksége van, amit a munkafolyamatához igazíthat. A Fejlesztői mód segít felgyorsítani az átadási folyamatot azáltal, hogy engedélyezi:

  • Tervezés és fejlesztés egy környezetben
  • Valós idejű együttműködés
  • Ellenőrzés és kódrészletek
  • Tervezési rendszerintegráció
  • Szakaszállapot-címkék (pl. „Fejlesztőre kész”)

Bevált gyakorlatok és tippek a fejlesztői mód használatához

Használhatja a Figma Dev Mode-ját a munkafolyamat részeként, de hogyan hozhatja ki a legtöbbet belőle? Próbálja ki ezeket a javaslatokat.

  • Használja a fejlesztői erőforrásokat és beépülő modulokat a tapasztalatok testreszabásához; kapcsolja össze a Fejlesztői módban már használt eszközöket a munkafolyamat egyszerűsítéséhez. A GitHubtól a veremben lévő keretrendszerekig számos változat közül választhat.
  • Használja az Inspect és a kódrészleteket a tervezési elemek méreteinek, specifikációinak, stílusainak és eszközeinek eléréséhez. Beépülő modulok használatával kódot is generálhat különböző könyvtárakban.
  • Kövesse nyomon a tervezési változásokat, hogy ne maradjon le semmiről. A Hasonlítsa össze a változásokat funkció verzióelőzmény-eszközként szolgál – mindenképpen ellenőrizze rendszeresen.
  • Használja ki az összes együttműködési funkciót a kommunikációhoz, és forduljon a tervezőkhöz megjegyzésekkel, kurzoros csevegésekkel és egyebekkel.
  • Az új Figma VS Code kiterjesztéssel a VS Code elemeit is ellenőrizheti. Többet is lehetővé tesz – beleértve a fájlnavigációt, a változáskövetést, a tervezői együttműködést és a tervezési megvalósítás gyorsítását – a VS Code elhagyása nélkül.
  • Legyen naprakész az újabb funkciókkal kapcsolatban, nézze meg, hogyan szolgálhatnak a legjobban, és minden adandó alkalommal fejlessze a készségeket.

A munkafolyamat egyszerűsítéséhez használja a fejlesztői módot

A Figma Dev Mode hatékonyabbá teszi a munkafolyamatot, lehetővé téve a jobb tervező-fejlesztő együttműködést a szükséges funkciókkal.

A Figma ökoszisztémának több része is van, és az alkalmazás népszerűsége azt jelenti, hogy értékes eszköz, amelyet munkáról munkára hozhat.