丰满少妇人妻无码,冲田杏梨av一区二区三区

Figma小部件開啟無限可能

我們需要什么

設(shè)計小部件

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

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

樣式設(shè)置小部件

向Widget添加狀態(tài)

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

向我們的Widget添加屬性菜單

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

結(jié)論

更多資源

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

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

小部件與插件

首頁

web前端

css教程

構(gòu)建互動無花果小部件

William Shakespeare

Mar 11, 2025 am 09:37 AM

Building Interactive Figma Widgets

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

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

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

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

Figma小部件開啟無限可能

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

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

項目管理，
舉辦投票，
導(dǎo)入和可視化模擬數(shù)據(jù)，
也許甚至玩一個多人游戲來放松一下長時間的工作。

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

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

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

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

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

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

我們需要什么

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

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

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

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

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

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

設(shè)計小部件

我們直接從Chris Coyier的設(shè)計報價網(wǎng)站獲取設(shè)計。所以，讓我們?nèi)ツ抢铮ㄟ^啟動DevTools來深入研究。

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

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

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

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

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

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

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

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

<code>function QuotesWidget() {
  const quote = `...`;
  const author = `...`;

  return (
    <autolayout><svg></svg><autolayout><text>{quote}</text><text>— {author}</text></autolayout><svg></svg></autolayout>
  );
}

widget.register(QuotesWidget);</code>

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

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

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

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

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

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

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

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

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

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

該錯誤可能是因為我們尚未將TypeScript編譯為JavaScript。我們可以通過運(yùn)行npm install和npm run watch（或yarn和yarn watch）在命令行中執(zhí)行此操作。這次沒有錯誤！

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

樣式設(shè)置小部件

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

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

我們將首先配置我們的兩個<autolayout></autolayout>組件。如上圖所示，屬性名稱對它們的目的進(jìn)行了非常清晰的描述。這使我們能夠直接跳轉(zhuǎn)到代碼并開始進(jìn)行一些更改。我不會再次顯示整個代碼，所以請依靠組件名稱來指導(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如何自動重新加載Widget嗎？

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

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

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

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

查看Widgets API文檔后，再次清楚地看到屬性名稱與其在Figma應(yīng)用程序中的對應(yī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>

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

在Figma中，狀態(tài)是使用useSyncedState鉤子創(chuàng)建的；它幾乎就是React的useState，但它要求程序員指定一個唯一的key。此要求源于這樣一個事實，即Figma必須同步我們Widget的狀態(tài)，這些狀態(tài)跨越可能正在查看同一設(shè)計畫板的所有客戶端，但通過不同的計算機(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ù)。劇透警告：這并不像看起來那么簡單。

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

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

當(dāng)你使用小部件時，你正在你的計算機(jī)上運(yùn)行由其他人編寫的JavaScript代碼。雖然所有小部件都經(jīng)過Figma員工的徹底審查，但這仍然是一個巨大的安全漏洞，因為我們都知道即使是一行JavaScript也會造成多大的損害。

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

但不要擔(dān)心，F(xiàn)igma對此第二個問題的解決方案是<iframe></iframe>。我們在文件中編寫的任何HTML代碼（最好稱為ui.html）都可以訪問所有瀏覽器API。你可能想知道我們?nèi)绾螐腤idget觸發(fā)此代碼，但我們稍后會研究這個問題?，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ī)報價
    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)中提取作者姓名和報價內(nèi)容
    const authorName = data[0].title.rendered
    const quoteContent = data[0].yoast_head_json.og_description

    window.parent.postMessage({
      pluginMessage: {
        authorName,
        quoteContent
      }
    }, '*')
  }
}
</code>

為了保持簡單明了，我們省略了錯誤處理。讓我們回到小部件代碼中，看看我們?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)用它，則控制臺中會出現(xiàn)以下錯誤：

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

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

<code>const { useEffect, waitForTask } = widget;

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

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

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

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

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

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

你可能已經(jīng)注意到，有時報價文本包含奇怪的字符。

這些是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è)計畫板時都會獲取一個全新的設(shè)計報價。

雖然我們的Widget在實例化時會獲取新的報價，但如果我們能夠再次執(zhí)行此過程而無需刪除它，則會更實用。本節(jié)將簡短介紹，因為解決方案非常出色。使用屬性菜單，我們可以通過一次調(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>`,
      },
    ],
    () => fetchData()
  );
}</code>

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

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

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

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

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

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

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

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

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