A Figma mindig is ösztönözte a fejlesztők és a tervezők közötti együttműködést. A közösség által készített beépülő modulok végtelen tárházára törekszik. 3D elemekre van szüksége? Ehhez van egy plugin. Absztrakt SVG-re van szüksége? Ehhez van egy pluginIs.
Ennek ellenére a Figma tervezési része mindig is viszonylag statikus volt – mindig olyan mozgathatatlan téglalapokkal dolgozott, amelyek előre meghatározott felhasználói interakciókon keresztül kapcsolódnak egymáshoz. De mi lenne, ha azt mondanám neked, hogy a terveid hirtelen életre kelhetnek – lehetnek animáltak, interaktívak, sőt állapotokat is kifejezőek? Akkor mi választaná el a koncepciót a megvalósítástól?
figma bejelentette júniusban hogy JavaScript-alapú widgeteket hoz a táblázatba. A tervezők most már közvetlenül a Figmában böngészhetnek és implementálhatnak logikai vezérelt komponenseket!
Köszönj a a Widgets API! Szeretné tudni, hogy mi ez és hogyan kell használni? Ebben a bejegyzésben pontosan ezt fogjuk csinálni együtt.
A Figma widgetek rengeteg lehetőséget nyitnak meg
Képzelje el, hogy éjjel-nappal dolgozik partnerével egy nagy éttermi alkalmazás tervezésén. Már mindketten ugyanazon a Figma táblán dolgoznak együtt; mindketten pontosan ugyanazt a dokumentumot osztják meg, a változások menet közben.
Bizonyára Ön is tudja, hogy az együttműködés a tervezési folyamaton túl többet foglal magában:
- projektmenedzsment,
- szavazások szervezése a szavazatok összegyűjtésére,
- hamis adatok importálása és megjelenítése,
- és talán még egy többszereplős játékot is játszhat, hogy lehűtse magát a sok órás munka után.
Csak egy személyre van szükségünk, aki mindent kezel, és linkeket küldhet a csoport többi tagjának. De ó, ez nem túl hatékony, igaz?
Nos, itt jönnek képbe a widgetek. Elképzelhető, hogy mindezt – igen, mindent – anélkül, hogy elhagynánk a Figmát.
Íme néhány módja annak, hogyan használhatja a widgeteket a Figmában:
A lista megy mi és mi. Mint láthatja, már most is rengeteg widget létezik, amelyeket szabadon használhat a dokumentumaiban. Valójában a Widgets menüből közvetlenül is hozzáadhat widgeteket a táblához (Shift+I).
De nem azért vagyunk itt, hogy megtanuljuk a widgetek használatát, mert az egyszerű. Tegyük azt, amit a legjobban tudunk: létrehozzuk saját Figma widgetünket! Ez ihletet fog kapni Chris Coyier terve idézi a weboldalt. Fogjuk az API-t, betápláljuk a widgetbe, majd véletlenszerű tervezési idézeteket jelenítünk meg közvetlenül a Figmában.
Íme, mire van szükségünk
Nem szeretek rossz híreket hozni, de a widgetek fejlesztéséhez Windows vagy Mac rendszeren kell lennie. Linux felhasználók, sajnálom, de nincs szerencsétek. (Még lehet használjon virtuális gépet ha követni akarod.)
Megyünk töltse le a Figma Desktopot Alkalmazás. Az első lépések legegyszerűbb módja egy widget-sablon létrehozása, közvetlenül az alkalmazásból.
Hozzunk létre egy új táblát a widgetek menü megnyitásával (Shift+ I), átvált a Fejlesztés lapon, és hozzon létre egy új elemet.
Ezt követően a Figma felkéri, hogy nevezze el az új widgetet, és döntse el, hogy jobban megfelel-e design táblák vagy FigJam táblák is. E cikk céljaira az előbbi lehetőség elegendő.
És a testreszabás itt még nem ér véget; A Figma lehetőséget ad arra is, hogy egy előre elkészített számláló widgettel vagy egy iFrame-kompatibilis alternatívával kezdjen, amely hozzáférést biztosít a Canvas és Fetch API-khoz (valamint az összes többi böngésző API-hoz). Az egyszerű „Üres” opciót választjuk, de végül magunk módosítjuk a Fetch API használatához.
Ezután a rendszer felkéri, hogy mentse az új widget projektet a rendszer egy speciális könyvtárába. Ha ez megtörtént, indítsa el a terminált, és irányítsa abba a mappába. Még ne futtasson parancsokat – ezt később megtesszük, és szándékosan hibaüzenetet kapunk azzal a céllal, hogy többet megtudjunk a Widgets API-ról.
A widget tervezése
A dizájnt egyenesen innen merítjük Chris Coyier terve idézi a weboldalt. Tehát menjünk oda, és merüljünk el a DevTools elindításával.
Az itt használt két gyorsbillentyű a következő Ctrl+Shift+C (Vagy Cmd+Shift+C) az „Elem kiválasztása” eszköz váltásához, és Shift+Click a színformátum módosításához HEX kódra. Ezt azért tesszük, hogy megismerjük a Chris webhelyén használt színeket, betűtípusokat, betűsúlyokat és betűméreteket. Mindezek az információk elengedhetetlenek ahhoz, hogy a Figmában egy nagyon hasonló widgetet építsünk, ami a következő lépésünk lesz! tudsz fogja meg a tervezett alkatrészt és használja a saját vásznán.
Nem részletezem itt, mivel a cikk fő témája a widgetek készítése kódírással. De nem tudom elégszer hangsúlyozni, mennyire fontos, hogy jól vigyázz magadra widgetek stílusa… A CSS-Tricks-nek már rengeteg van tervezés-orientált Figma oktatóanyagok; nem fogja megbánni, ha felveszi őket az olvasólistájára.
A widgetünk elrendezésének elkészítése
Mivel a tervezés már nincs útban, ideje kivenni a programozó ujjainkat, és elkezdeni építeni a widgetünk fogaskerekeit.
Nagyon érdekes, hogy a Figma hogyan fordítja le a tervezési építőelemeit React-szerű alkatrészekké. Az automatikus elrendezés funkcióval rendelkező keretelemek például a <AutoLayout /> komponens a kódban. Ezen kívül még két összetevőt fogunk használni: <Text /> és a <SVG />.
Vessen egy pillantást a Figma táblámra… Pontosan arra kérem, hogy összpontosítson az objektumfára. Ez az, amire szükségünk van ahhoz, hogy a widget-tervünket JSX kódra tudjuk fordítani.
Amint látja, a tervezési idézetek widgetünk három összetevőt igényel importálásra. Ez tisztességes számú összetevő, tekintve, hogy a teljes API csak nyolc réteg alapú csomópontot tartalmaz. De amint hamarosan látni fogja, ezek a modulok több mint elegendőek mindenféle elrendezés elkészítéséhez.
// code.tsx
const { widget } = figma;
const { AutoLayout, Text, SVG } = widget;Ezzel pedig mindenünk megvan ahhoz, hogy előre menjünk, és megépítsük a widgetünk vázát, mint a React esetében:
function QuotesWidget() {
const quote = `...`;
const author = `...`;
return (
<AutoLayout>
<SVG />
<AutoLayout>
<Text>{quote}</Text>
<Text>— {author}</Text>
</AutoLayout>
<SVG />
</AutoLayout>
);
}
widget.register(QuotesWidget);Ez a kód enyhén szólva nagyon zavaró. Jelenleg nem tudjuk megkülönböztetni a tervezési rétegeket. Szerencsére könnyen meg tudjuk oldani ezt a problémát a name ingatlan.
<AutoLayout name={"Quote"}>
<SVG name={"LeftQuotationMark"} />
<AutoLayout name={"QuoteContent"}>
<Text name={"QuoteText"}>{quote}</Text>
<Text name={"QuoteAuthor"}>— {author}</Text>
</AutoLayout>
<SVG name={"RightQuotationMark"} />
</AutoLayout>;És természetesen továbbra sem látjuk az idézőjeles SVG-ket, úgyhogy dolgozzunk a javításon. Az <SVG/> komponens elfogad a srctulajdonság, amely átveszi egy SVG-elem forráskódját. Erről nincs sok mondanivaló, úgyhogy maradjunk egyszerűek, és ugorjunk vissza a kódhoz:
const leftQuotationSvgSrc = `<svg width="117" height="103" viewBox="0 0 117 103" fill="none" xmlns="<http://www.w3.org/2000/svg>">
// shortened for brevity
</svg>`;
const rightQuotationSvgSrc = `<svg width="118" height="103" viewBox="0 0 118 103" fill="none" xmlns="<http://www.w3.org/2000/svg>">
// shortened for brevity
</svg>`;
function QuotesWidget() {
return (
<SVG name={"LeftQuotationMark"} src={leftQuotationSvgSrc} />
<SVG name={"RightQuotationMark"} src={rightQuotationSvgSrc} />
);
}Azt hiszem, mindannyian egyetértünk abban, hogy most már minden sokkal világosabb! Amikor megnevezzük a dolgokat, a céljuk hirtelen sokkal nyilvánvalóbbá válik kódunk olvasói számára.
A widgetünk előnézete valós időben
A Figma nagyszerű fejlesztői élményt kínál widgetek készítésekor, beleértve (de nem kizárólagosan) meleg-újratöltés. Ezzel a funkcióval valós időben kódolhatjuk és megtekinthetjük a widgetünk módosításait.
Kezdje a widgetek menü megnyitásával (Shift+I), váltson a fejlesztési lapra, és kattintson vagy húzza az új widgetet a táblára. Nem találja a widgetet? Ne aggódjon, csak kattintson a hárompontos menüre, és importálja a widgetet manifest.json fájlt. Igen, csak ennyi kell ahhoz, hogy visszahozzuk a létezésbe!
Várjon, hibaüzenetet kapott a képernyő alján?
Ha igen, vizsgáljuk meg. Kattintson "Nyissa meg a konzolt” és olvassa el a mondanivalóját. Ha a Nyissa meg a konzolt gomb eltűnt, van egy másik lehetőség a hibakereső konzol megnyitására. Kattintson a Figma logóra, ugorjon a widgetek kategóriába, és nyissa meg a fejlesztési menüt.
Ez a hiba valószínűleg annak a ténynek köszönhető, hogy még nem fordítottuk le a TypeScriptünket JavaScriptre. Ezt a parancssorban futtatva tehetjük meg npm install és a npm run watch. (vagy yarn és a yarn watch ). Ezúttal nincs hiba!
Egy további akadály, amellyel szembesülhet, az, hogy a widget nem jelenik meg újra a kód megváltoztatásakor. Könnyedén kényszeríthetjük a widget frissítésére a következő helyi menü paranccsal: widgetek → A widget újramegjelenítése.
A widget stílusának kialakítása
Jelenlegi állapotában a úgy néz ki, kütyüink még mindig elég messze vannak végső célunktól.
Tehát hogyan formázzuk a Figma komponenseket kódból? Talán a CSS-szel, mint egy React projektben? Negatív. A Figma widgetekkel, minden a stílus egy halmazon keresztül történik jól dokumentált kellékek. Szerencsére ezeknek a tárgyaknak szinte el vannak nevezve azonosan a Figma-beli társaiknak.
Kezdjük a kettőnk konfigurálásával <AutoLayout /> alkatrészek. Amint a fenti infografikán is látható, a kelléknevek jól leírják a céljukat. Ez megkönnyíti számunkra, hogy közvetlenül beleugorjunk a kódba, és elkezdhessünk néhány változtatást. Nem fogom újra megjeleníteni a teljes kódot, ezért kérjük, hagyatkozzon az összetevők nevére, hogy eligazítsa, hová tartoznak a kódrészletek.
<AutoLayout
name={"Quote"}
direction={"horizontal"}
verticalAlignItems={"start"}
horizontalAlignItems={"center"}
spacing={54}
padding={{
horizontal: 61,
vertical: 47,
}}
>
<AutoLayout
name={"QuoteContent"}
direction={"vertical"}
verticalAlignItems={"end"}
horizontalAlignItems={"start"}
spacing={10}
padding={{
horizontal: 0,
vertical: 0,
}}
></AutoLayout>
</AutoLayout>;Nagyon sokat fejlődtünk! Mentsük el, és ugorjunk vissza a Figmához, hogy megnézzük, hogyan néz ki a widgetünk. Emlékszel, hogyan tölti be a Figma automatikusan újra a widgeteket új módosítások esetén?
De még nincs egészen ott. A gyökérkomponenshez háttérszínt is kell adnunk:
<AutoLayout name={"Quote"} fill={"#ffffff"}>Ismét vessen egy pillantást a Figma táblára, és figyelje meg, hogy a változások szinte azonnal tükröződhetnek a widgetben.
Haladjunk végig ezen az útmutatón, és alakítsuk ki a stílust <Text> alkatrészek.
Miután megnézte a Widgets API dokumentáció, ismét egyértelmű, hogy a tulajdonságnevek szinte megegyeznek a Figma alkalmazásban szereplő megfelelőikkel, amint az a fenti infografikán is látható. Az utolsó szakasz értékeit is használjuk majd, ahol Chris webhelyét ellenőriztük.
<Text name={'QuoteText'}
fontFamily={'Lora'}
fontSize={36}
width={700}
fill={'#545454'}
fontWeight={'normal'}
>{quote}</Text>
<Text name={'QuoteAuthor'}
fontFamily={'Raleway'}
fontSize={26}
width={700}
fill={'#16B6DF'}
fontWeight={'bold'}
textCase={'upper'}
>— {author}</Text>Állapot hozzáadása a widgethez
A widgetünk jelenleg ugyanazt az idézetet jeleníti meg, de véletlenszerűen szeretnénk lehívni a teljes idézetkészletet. Hozzá kell tennünk voltak a widgetünkhöz, amelyről minden React fejlesztő tudja, hogy egy olyan változó, amelynek változása kiváltja a komponensünk újramegjelenítését.
A Figma segítségével állapot jön létre a useSyncedState horog; ez eléggé Reagálj useState, de ehhez a programozóknak egyedi kulcsot kell megadniuk. Ez a követelmény abból a tényből fakad, hogy a Figmának szinkronizálnia kell a widgetünk állapotát minden kliensek, amelyek esetleg ugyanazt a tervezőlapot nézik, de különböző számítógépeken keresztül.
const { useSyncedState } = widget;
function QuotesWidget() {
const [quote, setQuote] = useSyncedState("quote-text", "");
const [author, setAuthor] = useSyncedState("quote-author", "");
}Ez minden változás, amire most szükségünk van. A következő részben azt fogjuk kitalálni, hogyan lehet adatokat lekérni az internetről. Spoiler figyelmeztetés: ez nem olyan egyszerű, mint amilyennek látszik.
Adatok lekérése a hálózatról
Emlékezzünk vissza, amikor a Figma lehetőséget adott nekünk, hogy egy iFrame-kompatibilis widgettel kezdjük. Bár mi nem ezt a lehetőséget választottuk, néhány funkcióját mégis meg kell valósítanunk. Hadd magyarázzam el, miért nem hívhatjuk egyszerűen fetch() a widget kódunkon belül.
Widget használatakor JavaScript-kódot futtat a saját számítógépén, amelyet valaki más írt. Bár a Figma munkatársai minden kütyüt alaposan átnéznek, ez még mindig hatalmas biztonsági rést jelent, mivel mindannyian tudjuk, károkat okozhat akár egy sor JavaScript is.
Ennek eredményeként a Figma nem tud egyszerűen eval() minden névtelen programozó által írt widget kód. Röviden, a csapat úgy döntött, hogy a legjobb megoldás a harmadik féltől származó kódok szigorúan őrzött sandbox környezetben való futtatása. És ahogy azt sejteni lehetett, a böngésző API-k nem érhetők el ilyen környezetben.
De ne aggódj, a Figma megoldása erre a második problémára az <iframe>s. Bármilyen HTML-kód, amelyet egy fájlba írunk, lehetőleg hívva ui.html, hozzá fog férni az összes böngésző API-hoz. Kíváncsi lehet, hogyan indíthatjuk el ezt a kódot a widgetből, de ezt később megvizsgáljuk. Most ugorjunk vissza a kódhoz:
// manifest.json
{
"ui": "ui.html"
}<!-- ui.html -->
<script>
window.onmessage = async (event) => {
if (event.data.pluginMessage.type === 'networkRequest') {
// TODO: fetch data from the server
window.parent.postMessage({
pluginMessage: {
// TODO: return fetched data
}
}, '*')
}
}
</script>Ez az általános sablon a widgetheziframe kommunikáció. Használjuk az adatok lekérésére a szerverről:
<!-- ui.html -->
<script>
window.onmessage = async (event) => {
if (event.data.pluginMessage.type === 'networkRequest') {
// Get random number from 0 to 100
const randomPage = Math.round(Math.random() * 100)
// Get a random quote from the Design Quotes API
const res = await fetch(`https://quotesondesign.com/wp-json/wp/v2/posts/?orderby=rand&per_page=1&page=${randomPage}&_fields=title,yoast_head_json`)
const data = await res.json()
// Extract author name and quote content from response
const authorName = data[0].title.rendered
const quoteContent = data[0].yoast_head_json.og_description
window.parent.postMessage({
pluginMessage: {
authorName,
quoteContent
}
}, '*')
}
}
</script>A hibakezelést elhagyjuk, hogy ez az egyszerű és lényegre törő legyen. Ugorjunk vissza a widget kódjába, és nézzük meg, hogyan érjük el a ben meghatározott függvényeket <iframe>:
function fetchData() {
return new Promise<void>(resolve => {
figma.showUI(__html__, {visible: false})
figma.ui.postMessage({type: 'networkRequest'})
figma.ui.onmessage = async ({authorName, quoteContent}) => {
setAuthor(authorName)
setQuote(quoteContent)
resolve()
}
})
}Amint látja, először azt mondjuk a Figmának, hogy tegye elérhetővé a rejtett dolgainkat <iframe> és eseményt indítani a névvel "networkRequest". Ezt az eseményt a ui.html fájl ellenőrzésével event.data.pluginMessage.type === 'networkRequest', majd visszaküldi az adatokat a widgetbe.
De még nem történik semmi… Még mindig nem hívtuk fel fetchData() funkció. Ha közvetlenül a komponens függvényben hívjuk meg, akkor a következő hiba lép fel a konzolban:
Cannot use showUI during widget rendering.A Figma azt mondja, hogy ne telefonáljunk showUI közvetlenül a függvénytörzsben… Szóval hova tegyük? A válasz erre egy új horog és egy új funkció: useEffect és a waitForTask. Lehet, hogy már ismeri useEffect ha Ön React fejlesztő, de itt fogjuk használni, hogy adatokat gyűjtsünk a szerverről, amikor a widget komponens felcsatolódik.
const { useEffect, waitForTask } = widget;
function QuotesWidget() {
useEffect(() => {
waitForTask(fetchData());
});
}Ez azonban egy újabb „hibát” fog eredményezni, ahol a widgetünk örökre újra megjelenik egy új idézettel. Ez azért történik, mert useEffectdefiníció szerint újra aktiválódik, amikor a widget állapota megváltozik, nem, amikor hívunk fetchData. És miközben van egy technika csak hívni useEffect Ha egyszer a Reactban van, akkor nem működik a Figma implementációján. A Figma dokumentumaiból:
A widgetek működése miatt,
useEffectkezelnie kell a többszöri hívást ugyanazzal az állapottal.
Szerencsére van egy egyszerű megoldás, amelyet kihasználhatunk és felhívhatunk useEffect csak egyszer, amikor az összetevő először felcsatolódik, és ez annak ellenőrzésével történik, hogy az állapot értékei továbbra is üresek-e:
function QuotesWidget() {
useEffect(() => {
if (!author.length & !quote.length) {
waitForTask(fetchData());
}
});
}Lehet, hogy belefutsz egy ijesztő "memória hozzáférés határokon kívül” hiba. ez van elég gyakori a beépülő modulok és a widgetek fejlesztése során. Csak indítsa újra a Figmát, és többé nem lesz ott.
Talán észrevette, hogy az idézet szövege néha furcsa karaktereket tartalmaz.
Ezek Unicode karakterek és megfelelően formáznunk kell őket kódban:
<!-- ui.html -->
<script>
window.onmessage = async (event) => {
// ...
const quoteContent = decodeEntities(data[0].yoast_head_json.og_description);
};
// <https://stackoverflow.com/a/9609450>
var decodeEntities = (function () {
// this prevents any overhead from creating the object each time
var element = document.createElement("div");
function decodeHTMLEntities(str) {
if (str && typeof str === "string") {
// strip script/html tags
str = str.replace(/<script[^>]*>([Ss]*?)</script>/gim, "");
str = str.replace(/</?w(?:[^"'>]|"[^"]*"|'[^']*')*>/gim, "");
element.innerHTML = str;
str = element.textContent;
element.textContent = "";
}
return str;
}
return decodeHTMLEntities;
})();
</script>És voilà, widgetünk egy vadonatúj tervezési árajánlatot kapott minden egyes alkalommal, amikor felkerül a tervezőtáblára.
Tulajdonság menü hozzáadása a widgetünkhöz
Míg a widgetünk egy új idézetet kér a példányosításkor, sokkal praktikusabb lenne, ha ezt a folyamatot újra meg tudnánk csinálni, de anélkül, hogy törölnénk. Ez a rész rövid lesz, mivel a megoldás egészen figyelemre méltó. Val vel tulajdonság menük, interaktivitást adhatunk widgetünkhöz egyetlen hívással a usePropertyMenu horog.
const { usePropertyMenu } = widget;
function QuotesWidget() {
usePropertyMenu(
[
{
itemType: "action",
propertyName: "generate",
tooltip: "Generate",
icon: `<svg width="22" height="15" viewBox="0 0 22 15" fill="none" xmlns="<http://www.w3.org/2000/svg>">
<!-- Shortened for brevity -->
</svg>`,
},
],
() => fetchData()
);
}Egy egyszerű akasztóval létrehozhatunk egy gombot, amely megjelenik a widgetünk mellett, ha kiválasztjuk. Ez volt az utolsó darab, amit hozzá kellett adnunk a projekt befejezéséhez.
Widgetünket közzétesszük a nyilvánosság számára
Nem sok haszna van egy widget készítésének, ha senki sem használ azt. És közben A Figma az indulási lehetőséget biztosít a szervezeteknek magán widgetek belső használatra sokkal gyakoribb, hogy ezeket a kis programokat a világnak kiadják.
A Figma egy kényes modul-ellenőrzési folyamattal rendelkezik, amely 5–10 munkanapot is igénybe vehet. És bár a tervezési idézetek widget, amit közösen építettünk már a widget könyvtárban van, akkor is bemutatom, hogyan került oda. Kérjük, ne próbálja meg újra közzétenni ezt a modult, mert az csak eltávolítást von maga után. De ha jelentős változtatásokat eszközölt, ossza meg saját widgetjét a közösséggel!
Kezdje a widgetek menüre kattintva (Shift+I) és átvált a Fejlesztés lapon a widgetünk megtekintéséhez. Kattintson a hárompontos menüre, és nyomja meg a gombot Közzétesz.
A Figma felkéri, hogy adjon meg néhány adatot a widgetről, például címet, leírást és néhány címkét. Szükségünk lesz egy 128×128-as ikonképre és egy 1920×960-as szalaghirdetés-képre is.
Mindezen eszközök importálása után továbbra is szükségünk van egy képernyőképre a widgetünkről. Zárja be a közzétételi módot (ne aggódjon, nem veszíti el adatait), és kattintson a jobb gombbal a widgetre, hogy felfedjen egy érdekes helyi menüt. Találd meg Másolás/beillesztés máskéntkategóriát, és válassza ki Másolás PNG-ként.
Ha ez megtörtént, térjünk vissza a közzétételi módhoz, és illesszük be a widget képernyőképét:
Görgessen le, és végül tegye közzé a modált. Ünnepel! 🎉
A Figma néhány napon belül felveszi Önnel a kapcsolatot a modális felülvizsgálatának állapotával kapcsolatban. Elutasítás esetén megkapja a lehetőséget a változtatások végrehajtására és újbóli benyújtására.
Következtetés
Most építettünk egy Figma widgetet a semmiből! Sok olyan dolog van, amiről itt nem térünk ki, mint pl kattintson az eseményekre, beviteli űrlapokés sokkal több. Beleáshat a widget teljes forráskódjába ezt a GitHub repót.
Azoknak, akik szeretnének Figma-készségeiket magasabb szintre emelni, javaslom, hogy fedezzék fel a Widgets közösséget, és használják inspirációként azt, ami megragadja a szemet. Építs még több widgetet, éleszd tovább React képességeidet, és mielőtt észrevennéd, megtanítasz, hogyan kell mindezt csinálni.
További források
A widget elkészítése során rengeteg dokumentációra kellett hivatkoznom. Gondoltam megosztom, miben találtam a legtöbbet.
