Figma一直鼓勵(lì)開發(fā)者和設(shè)計(jì)師之間的協(xié)作，並憑藉其豐富的社區(qū)插件庫而蓬勃發(fā)展。需要3D元素？有插件！需要抽象的SVG？也有插件！

然而，F(xiàn)igma的設(shè)計(jì)部分一直相對(duì)靜態(tài)——始終使用不可移動(dòng)的矩形，通過預(yù)定義的用戶交互連接在一起。但如果我說你的設(shè)計(jì)可以突然栩栩如生——可以動(dòng)畫化、交互式，甚至是有狀態(tài)的，你會(huì)怎麼想？那麼，概念與實(shí)現(xiàn)之間還有什麼區(qū)別呢？

Figma在6月份宣布將推出基於JavaScript的小部件。現(xiàn)在，設(shè)計(jì)師可以直接在Figma中瀏覽和實(shí)現(xiàn)邏輯驅(qū)動(dòng)的組件！

讓我們一起了解一下Widgets API！想知道它是什麼以及如何使用它嗎？這正是我們將在本文中一起探討的內(nèi)容。

Figma小部件開啟無限可能

想像一下，你和你的合作夥伴日夜合作設(shè)計(jì)一個(gè)大型餐廳應(yīng)用程序。你們都在同一個(gè)Figma畫板上協(xié)作；你們共享完全相同的文檔，更改實(shí)時(shí)發(fā)生。

當(dāng)然，你已經(jīng)知道協(xié)作不僅僅包括設(shè)計(jì)過程：

• 項(xiàng)目管理，
• 舉辦投票，
• 導(dǎo)入和可視化模擬數(shù)據(jù)，
• 也許甚至玩一個(gè)多人遊戲來放鬆一下長(zhǎng)時(shí)間的工作。

只需要一個(gè)人管理所有內(nèi)容並向小組的其他成員發(fā)送鏈接。但是，這效率不高，對(duì)吧？

這就是小部件發(fā)揮作用的地方。我們可以想像做到所有這些——是的，所有這些——無需離開Figma。

以下是一些你可能希望在Figma中使用小部件的方式：

• 為Jira和Asana創(chuàng)建任務(wù)
• 在GitHub中創(chuàng)建問題
• 顯示動(dòng)態(tài)數(shù)據(jù)
• 錄製語音備忘錄
• 創(chuàng)建任務(wù)列表
• 浪費(fèi)時(shí)間玩井字遊戲
• 追蹤活動(dòng)
• 創(chuàng)建計(jì)時(shí)器

等等等等。正如你所看到的，已經(jīng)有大量的小部件可以自由地用於你的文檔中。事實(shí)上，你可以直接從“小部件”菜單（Shift I）將小部件添加到你的畫板中。

但我們不是來學(xué)習(xí)如何使用小部件的，因?yàn)檫@很容易。讓我們做我們最擅長(zhǎng)的事情：我們將創(chuàng)建我們自己的Figma小部件！這個(gè)小部件將以Chris Coyier的設(shè)計(jì)報(bào)價(jià)網(wǎng)站為靈感。我們將獲取API，將其饋送到小部件，然後直接在Figma中顯示隨機(jī)的設(shè)計(jì)報(bào)價(jià)。

我們需要什麼

我不喜歡當(dāng)壞消息的傳播者，但是為了開發(fā)小部件，你必須在Windows或Mac上。 Linux用戶，對(duì)不起，你運(yùn)氣不好。 （如果你想繼續(xù)學(xué)習(xí)，你仍然可以使用虛擬機(jī)。）

我們將下載Figma桌面應(yīng)用程序。最簡(jiǎn)單的入門方法是從應(yīng)用程序中直接生成小部件模板。

讓我們通過打開小部件菜單（Shift I）、切換到開發(fā)選項(xiàng)卡並創(chuàng)建一個(gè)新項(xiàng)目來創(chuàng)建一個(gè)新的畫板。

之後，F(xiàn)igma會(huì)提示你命名新的小部件，並決定它是否更適合設(shè)計(jì)畫板或FigJam畫板。對(duì)於本文的目的，前一個(gè)選項(xiàng)就足夠了。

定制並沒有就此結(jié)束；Figma還會(huì)讓你選擇從預(yù)製計(jì)數(shù)器小部件或啟用iFrame的替代方案開始，該方案還允許你訪問Canvas和Fetch API（以及所有其他瀏覽器API）。我們將選擇簡(jiǎn)單的“空”選項(xiàng)，但我們最終會(huì)自己修改它以使用Fetch API。

然後，系統(tǒng)會(huì)提示你將新的Widget項(xiàng)目保存到系統(tǒng)中的特殊目錄。完成後，啟動(dòng)你的終端並將其定向到該文件夾?，F(xiàn)在還不要運(yùn)行任何命令——我們稍後會(huì)這樣做，並故意出現(xiàn)錯(cuò)誤，目的是學(xué)習(xí)更多關(guān)於Widgets API的知識(shí)。

設(shè)計(jì)小部件

我們直接從Chris Coyier的設(shè)計(jì)報(bào)價(jià)網(wǎng)站獲取設(shè)計(jì)。所以，讓我們?nèi)ツ茄e，通過啟動(dòng)DevTools來深入研究。

我在這裡使用的兩個(gè)關(guān)鍵快捷鍵是Ctrl Shift C（或Cmd Shift C）來切換“拾取元素”工具，以及Shift 單擊來將顏色格式更改為HEX代碼。我們這樣做是為了了解Chris網(wǎng)站中使用的顏色、字體、字體粗細(xì)和字體大小。所有這些信息對(duì)於在Figma中構(gòu)建一個(gè)非常相似的Widget至關(guān)重要，這將是我們的下一步！你可以抓取設(shè)計(jì)好的組件並將其用於你自己的畫布。

我在這裡不會(huì)詳細(xì)介紹，因?yàn)楸疚牡闹黝}是通過編寫代碼來構(gòu)建小部件。但我必須強(qiáng)調(diào)，精心設(shè)計(jì)小部件的樣式非常重要……CSS-Tricks已經(jīng)有大量面向設(shè)計(jì)的Figma教程；你不會(huì)後悔將它們添加到你的閱讀列表中。

為我們的Widget創(chuàng)建佈局

設(shè)計(jì)完成後，是時(shí)候拿出我們的編程手指，開始構(gòu)建我們小部件的齒輪了。

Figma如何將其設(shè)計(jì)構(gòu)建塊轉(zhuǎn)換為類似React的組件非常有趣。例如，具有自動(dòng)佈局功能的框架元素在代碼中表示為<autolayout></autolayout>組件。除此之外，我們還將使用另外兩個(gè)組件：<text></text>和<svg></svg>。

看看我的Figma畫板……我正是要求你關(guān)注對(duì)象樹。這是我們需要能夠?qū)⑽覀兊腤idget設(shè)計(jì)轉(zhuǎn)換為JSX代碼的關(guān)鍵。

如你所見，我們的設(shè)計(jì)報(bào)價(jià)小部件需要導(dǎo)入三個(gè)組件。考慮到完整的API只包含八個(gè)基於圖層的節(jié)點(diǎn)，這是一個(gè)相當(dāng)數(shù)量的組件。但正如你很快就會(huì)看到的，這些模塊足以製作各種佈局。

 <code>// code.tsx const { widget } = figma; const { AutoLayout, Text, SVG } = widget;</code>

有了這個(gè)，我們就可以像在React中一樣構(gòu)建我們小部件的骨架了：

 <code>function QuotesWidget() { const quote = `...`; const author = `...`; return (<autolayout></autolayout></code><svg></svg><autolayout><text> {quote}</text><text> — {author}</text></autolayout><svg></svg>
  );
}

widget.register(QuotesWidget);

這段代碼至少可以說是非常混亂的?，F(xiàn)在，我們無法區(qū)分設(shè)計(jì)圖層。幸運(yùn)的是，我們可以通過使用name屬性輕鬆解決這個(gè)問題。

<code><autolayout name="{" quote></autolayout></code> <svg name="{" leftquotationmark></svg><autolayout name="{" quotecontent><text name="{" quotetext> {quote}</text><text name="{" quoteauthor> — {author}</text></autolayout><svg name="{" rightquotationmark></svg> ;

當(dāng)然，我們?nèi)匀豢床坏轿覀兊囊?hào)SVG，所以讓我們著手解決這個(gè)問題。<svg></svg>組件接受一個(gè)src屬性，該屬性採(cǎi)用SVG元素的源代碼。對(duì)此沒有太多可說的，所以讓我們保持簡(jiǎn)單，直接跳回代碼：

 <code>const leftQuotationSvgSrc = `</code>
  // 為簡(jiǎn)潔起見，已縮短`;
const rightQuotationSvgSrc = ` <svg fill="none" height="103" viewbox="0 0 118 103" width="118" xmlns="<http://www.w3.org/2000/svg>">
// 為簡(jiǎn)潔起見，已縮短</svg>`;

function QuotesWidget() {
  return (
    <svg name="{" leftquotationmark src="%7BleftQuotationSvgSrc%7D"></svg><svg name="{" rightquotationmark src="%7BrightQuotationSvgSrc%7D"></svg>
  );
}

我認(rèn)為我們都可以同意現(xiàn)在一切都清楚多了！當(dāng)我們命名事物時(shí)，它們的目的突然變得對(duì)我們代碼的讀者更加明顯。

實(shí)時(shí)預(yù)覽我們的Widget

Figma在構(gòu)建小部件時(shí)提供了良好的開發(fā)體驗(yàn)，包括（但不限於）熱重載。使用此功能，我們可以實(shí)時(shí)編碼和預(yù)覽對(duì)小部件的更改。

首先打開小部件菜單（Shift I），切換到開發(fā)選項(xiàng)卡，然後單擊或拖動(dòng)你的新小部件到畫板。找不到你的小部件？別擔(dān)心，只需單擊三點(diǎn)菜單並導(dǎo)入你的小部件的manifest.json文件即可。是的，這就是讓它恢復(fù)存在的全部步驟！

等等，你的屏幕底部是否出現(xiàn)錯(cuò)誤消息？

如果是這樣，讓我們調(diào)查一下。單擊“打開控制臺(tái)”並閱讀它的內(nèi)容。如果“打開控制臺(tái)”按鈕消失了，則有一種替代方法可以打開調(diào)試控制臺(tái)。單擊Figma徽標(biāo)，跳轉(zhuǎn)到“小部件”類別並顯示開髮菜單。

該錯(cuò)誤可能是因?yàn)槲覀兩形磳ypeScript編譯為JavaScript。我們可以通過運(yùn)行npm install和npm run watch （或yarn和yarn watch ）在命令行中執(zhí)行此操作。這次沒有錯(cuò)誤！

你可能會(huì)遇到的另一個(gè)障礙是，每次代碼更改時(shí)，小部件都無法重新渲染。我們可以使用以下上下文菜單命令輕鬆強(qiáng)制小部件更新：小部件→重新渲染小部件。

樣式設(shè)置小部件

就目前而言，我們小部件的外觀仍然與我們的最終目標(biāo)相差甚遠(yuǎn)。

那麼我們?nèi)绾螐拇a中設(shè)置Figma組件的樣式呢？也許像在React項(xiàng)目中那樣使用CSS？錯(cuò)誤。對(duì)於Figma小部件，所有樣式都是通過一套完善的屬性來實(shí)現(xiàn)的。幸運(yùn)的是，這些項(xiàng)目的名稱與Figma中的對(duì)應(yīng)項(xiàng)目幾乎完全相同。

我們將首先配置我們的兩個(gè)<autolayout></autolayout>組件。如上圖所示，屬性名稱對(duì)它們的目的進(jìn)行了非常清晰的描述。這使我們能夠直接跳轉(zhuǎn)到代碼並開始進(jìn)行一些更改。我不會(huì)再次顯示整個(gè)代碼，所以請(qǐng)依靠組件名稱來指導(dǎo)你代碼片段的位置。

 <code><autolayout direction="{" horizontal horizontal:="" horizontalalignitems="{" center name="{" quote padding="{{" spacing="{54}" vertical:="" verticalalignitems="{" start> <autolayout direction="{" vertical horizontal:="" horizontalalignitems="{" start name="{" quotecontent padding="{{" spacing="{10}" vertical:="" verticalalignitems="{" end></autolayout></autolayout> ;</code>

我們?nèi)〉昧撕艽蟮倪M(jìn)展！讓我們保存並跳回到Figma以查看我們的Widget的外觀。還記得新更改後Figma如何自動(dòng)重新加載Widget嗎？

但它還不夠。我們還必須向根組件添加背景顏色：

<code><autolayout fill="{" name="{" quote></autolayout></code>

同樣，查看你的Figma畫板，注意更改如何幾乎立即反映到Widget中。

讓我們繼續(xù)本指南並設(shè)置<text></text>組件的樣式。

查看Widgets API文檔後，再次清楚地看到屬性名稱與其在Figma應(yīng)用程序中的對(duì)應(yīng)項(xiàng)幾乎相同，如上圖所示。我們還將使用上一節(jié)中檢查Chris網(wǎng)站的值。

 <code><text fill="{'#545454'}" fontfamily="{'Lora'}" fontsize="{36}" fontweight="{'normal'}" name="{'QuoteText'}" width="{700}"> {quote}</text> <text fill="{'#16B6DF'}" fontfamily="{'Raleway'}" fontsize="{26}" fontweight="{'bold'}" name="{'QuoteAuthor'}" textcase="{'upper'}" width="{700}"> — {author}</text></code>

向Widget添加狀態(tài)

我們的小部件目前顯示相同的報(bào)價(jià)，但我們希望隨機(jī)從整個(gè)報(bào)價(jià)池中提取。我們必須向我們的Widget添加狀態(tài)，所有React開發(fā)人員都知道這是一個(gè)變量，它的更改會(huì)觸發(fā)我們組件的重新渲染。

在Figma中，狀態(tài)是使用useSyncedState鉤子創(chuàng)建的；它幾乎就是React的useState ，但它要求程序員指定一個(gè)唯一的key 。此要求源於這樣一個(gè)事實(shí)，即Figma必須同步我們Widget的狀態(tài)，這些狀態(tài)跨越可能正在查看同一設(shè)計(jì)畫板的所有客戶端，但通過不同的計(jì)算機(jī)。

 <code>const { useSyncedState } = widget; function QuotesWidget() { const [quote, setQuote] = useSyncedState("quote-text", ""); const [author, setAuthor] = useSyncedState("quote-author", ""); }</code>

目前，這就是我們需要做的全部更改。在下一節(jié)中，我們將弄清楚如何從互聯(lián)網(wǎng)獲取數(shù)據(jù)。劇透警告：這並不像看起來那麼簡(jiǎn)單。

從網(wǎng)絡(luò)獲取數(shù)據(jù)

回想一下Figma讓我們選擇從啟用iFrame的小部件開始。雖然我們沒有選擇該選項(xiàng)，但我們?nèi)匀槐仨殞?shí)現(xiàn)其一些功能。讓我解釋一下為什麼我們不能簡(jiǎn)單地在小部件代碼中調(diào)用fetch() 。

當(dāng)你使用小部件時(shí)，你正在你的計(jì)算機(jī)上運(yùn)行由其他人編寫的JavaScript代碼。雖然所有小部件都經(jīng)過Figma員工的徹底審查，但這仍然是一個(gè)巨大的安全漏洞，因?yàn)槲覀兌贾兰词故且恍蠮avaScript也會(huì)造成多大的損害。

因此，F(xiàn)igma不能簡(jiǎn)單地eval()匿名程序員編寫的任何小部件代碼。長(zhǎng)話短說，團(tuán)隊(duì)決定最佳解決方案是在嚴(yán)密保護(hù)的沙箱環(huán)境中運(yùn)行第三方代碼。正如你可能猜到的那樣，瀏覽器API在這種環(huán)境中是不可用的。

但不要擔(dān)心，F(xiàn)igma對(duì)此第二個(gè)問題的解決方案是<iframe></iframe>。我們?cè)谖募芯帉懙娜魏蜨TML代碼（最好稱為ui.html ）都可以訪問所有瀏覽器API。你可能想知道我們?nèi)绾螐腤idget觸發(fā)此代碼，但我們稍後會(huì)研究這個(gè)問題?，F(xiàn)在，讓我們回到代碼中：

 <code>// manifest.json { "ui": "ui.html" }</code>

 <code>window.onmessage = async (event) => { if (event.data.pluginMessage.type === 'networkRequest') { // TODO: 從服務(wù)器獲取數(shù)據(jù)window.parent.postMessage({ pluginMessage: { // TODO: 返回獲取的數(shù)據(jù)} }, '*') } }</code>

這是Widget到iFrame通信的通用模板。讓我們用它從服務(wù)器獲取數(shù)據(jù)：

 <code>window.onmessage = async (event) => { if (event.data.pluginMessage.type === 'networkRequest') { // 獲取從0到100的隨機(jī)數(shù)const randomPage = Math.round(Math.random() * 100) // 從Design Quotes API獲取隨機(jī)報(bào)價(jià)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() // 從響應(yīng)中提取作者姓名和報(bào)價(jià)內(nèi)容const authorName = data[0].title.rendered const quoteContent = data[0].yoast_head_json.og_description window.parent.postMessage({ pluginMessage: { authorName, quoteContent } }, '*') } }</code>

為了保持簡(jiǎn)單明了，我們省略了錯(cuò)誤處理。讓我們回到小部件代碼中，看看我們?nèi)绾卧L問<iframe></iframe>中定義的函數(shù)：

 <code>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() } }) }</void></code>

如你所見，我們首先告訴Figma公開訪問我們隱藏的<iframe></iframe>並觸發(fā)名為“networkRequest”的事件。我們通過檢查event.data.pluginMessage.type === 'networkRequest'來處理ui.html文件中的此事件，然後將數(shù)據(jù)發(fā)布回小部件。

但是現(xiàn)在還沒有發(fā)生任何事情……我們?nèi)匀粵]有調(diào)用fetchData()函數(shù)。如果我們直接在組件函數(shù)中調(diào)用它，則控制臺(tái)中會(huì)出現(xiàn)以下錯(cuò)誤：

<code>在小部件渲染期間無法使用showUI。</code>

Figma告訴我們不要直接在函數(shù)體中調(diào)用showUI ……那麼我們應(yīng)該把它放在哪裡呢？答案是一個(gè)新的鉤子和一個(gè)新的函數(shù)： useEffect和waitForTask 。如果你是一位React開發(fā)人員，你可能已經(jīng)熟悉useEffect了，但我們將在這裡使用它來在小部件組件掛載時(shí)從服務(wù)器獲取數(shù)據(jù)。

 <code>const { useEffect, waitForTask } = widget; function QuotesWidget() { useEffect(() => { waitForTask(fetchData()); }); }</code>

但這會(huì)導(dǎo)致另一個(gè)“錯(cuò)誤”，我們的Widget將永遠(yuǎn)使用新的報(bào)價(jià)不斷重新渲染。發(fā)生這種情況是因?yàn)?code>useEffect根據(jù)定義，每當(dāng)Widget的狀態(tài)發(fā)生更改時(shí)，或者當(dāng)我們調(diào)用fetchData時(shí)，它都會(huì)再次觸發(fā)。雖然有一種技術(shù)可以在React中只調(diào)用一次useEffect ，但它不適用於Figma的實(shí)現(xiàn)。來自Figma文檔：

由於小部件的運(yùn)行方式，useEffect應(yīng)該處理使用相同狀態(tài)多次被調(diào)用。

幸運(yùn)的是，我們可以利用一個(gè)簡(jiǎn)單的解決方法，只在組件第一次掛載時(shí)調(diào)用一次useEffect ，方法是檢查狀態(tài)的值是否仍然為空：

 <code>function QuotesWidget() { useEffect(() => { if (!author.length & !quote.length) { waitForTask(fetchData()); } }); }</code>

你可能會(huì)遇到一個(gè)可怕的“內(nèi)存訪問越界”錯(cuò)誤。這在插件和小部件開發(fā)中非常常見。只需重新啟動(dòng)Figma，它就不會(huì)再出現(xiàn)了。

你可能已經(jīng)註意到，有時(shí)報(bào)價(jià)文本包含奇怪的字符。

這些是Unicode字符，我們必須在代碼中正確格式化它們：

 <code>window.onmessage = async (event) => { // ... const quoteContent = decodeEntities(data[0].yoast_head_json.og_description); }; //<https:> 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(/]*>([\\\\S\\\\s]*?)/gim, ""); str = str.replace(/]|"[^"]*"|'[^']*')*>/gim, ""); element.innerHTML = str; str = element.textContent; element.textContent = ""; } return str; } return decodeHTMLEntities; })();</https:></code>

瞧，我們的Widget每次添加到設(shè)計(jì)畫板時(shí)都會(huì)獲取一個(gè)全新的設(shè)計(jì)報(bào)價(jià)。

向我們的Widget添加屬性菜單

雖然我們的Widget在實(shí)例化時(shí)會(huì)獲取新的報(bào)價(jià)，但如果我們能夠再次執(zhí)行此過程而無需刪除它，則會(huì)更實(shí)用。本節(jié)將簡(jiǎn)短介紹，因?yàn)榻鉀Q方案非常出色。使用屬性菜單，我們可以通過一次調(diào)用usePropertyMenu鉤子來向我們的Widget添加交互性。

 <code>const { usePropertyMenu } = widget; function QuotesWidget() { usePropertyMenu( [ { itemType: "action", propertyName: "generate", tooltip: "Generate", icon: ` <svg fill="none" height="15" viewbox="0 0 22 15" width="22" xmlns="<http://www.w3.org/2000/svg>"></svg></code> `,
      },
    ],
    () => fetchData()
  );
}

使用一個(gè)簡(jiǎn)單的鉤子，我們就可以創(chuàng)建一個(gè)按鈕，當(dāng)選中我們的Widget時(shí)，該按鈕會(huì)出現(xiàn)在我們的Widget附近。這是我們需要添加的最後一個(gè)部分才能完成這個(gè)項(xiàng)目。

將我們的Widget發(fā)佈到公共

如果沒有人使用它，那麼構(gòu)建Widget就沒有多大用處。雖然Figma允許組織啟動(dòng)用於內(nèi)部使用的私有Widget，但將這些小程序發(fā)佈到世界各地更為常見。

Figma有一個(gè)細(xì)緻的小部件審查流程，可能需要5到10個(gè)工作日。雖然我們一起構(gòu)建的設(shè)計(jì)報(bào)價(jià)小部件已經(jīng)位於小部件庫中，但我仍然會(huì)演示它是如何到達(dá)那裡的。請(qǐng)不要嘗試再次發(fā)布此小部件，因?yàn)檫@只會(huì)導(dǎo)致刪除。但是，如果你對(duì)其進(jìn)行了一些重大更改，請(qǐng)繼續(xù)與社區(qū)分享你自己的小部件！

首先單擊小部件菜單（Shift I），然後切換到開發(fā)選項(xiàng)卡以查看我們的Widget。單擊三點(diǎn)菜單並按發(fā)布。

Figma會(huì)提示你輸入有關(guān)你的Widget的一些詳細(xì)信息，例如標(biāo)題、描述和一些標(biāo)籤。我們還需要一個(gè)128×128的圖標(biāo)圖像和一個(gè)1920×960的橫幅圖像。

導(dǎo)入所有這些資源後，我們?nèi)匀恍枰猈idget的屏幕截圖。關(guān)閉發(fā)布模式（別擔(dān)心，你不會(huì)丟失數(shù)據(jù)），然後右鍵單擊Widget以顯示一個(gè)有趣的上下文菜單。找到複製/粘貼為類別並選擇複製為PNG 。

完成此操作後，讓我們回到發(fā)布模式並將Widget的屏幕截圖粘貼進(jìn)去：

向下滾動(dòng)並最終發(fā)布你的模式。慶祝！ ?

Figma會(huì)在幾天后與你聯(lián)繫，告知你的模式審查狀態(tài)。如果被拒絕，你將有機(jī)會(huì)進(jìn)行更改並再次提交。

結(jié)論

我們剛剛從頭開始構(gòu)建了一個(gè)Figma小部件！這裡有很多內(nèi)容沒有涵蓋，例如單擊事件、輸入表單等等。你可以在這個(gè)GitHub存儲(chǔ)庫中深入了解Widget的完整源代碼。

對(duì)於那些渴望將他們的Figma技能提升到更高水平的人，我建議探索Widgets社區(qū)，並使用你感興趣的內(nèi)容作為靈感。繼續(xù)構(gòu)建更多的小部件，繼續(xù)磨練你的React技能，在你意識(shí)到之前，你將教我如何做到這一切。

更多資源

在製作這個(gè)Widget時(shí)，我不得不參考大量的文檔。我認(rèn)為我會(huì)分享我發(fā)現(xiàn)最有幫助的內(nèi)容。

構(gòu)建更多小部件：

• 構(gòu)建小部件的最佳實(shí)踐
• 官方Figma小部件示例，包含代碼

更深入地學(xué)習(xí)小部件：

• 所有小部件鉤子
• 所有小部件組件
• 小部件在幕後如何運(yùn)行

小部件與插件

• 小部件與插件
• Figma插件簡(jiǎn)介
• 插件在幕後如何運(yùn)行

以上是構(gòu)建互動(dòng)無花果小部件的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！