Figmaは、開発者とデザイナーの間のコラボレーションを奨勵(lì)しており、コミュニティプラグインの豊富なライブラリで繁栄しています。 3D要素が必要ですか？プラグインがあります！抽象SVGが必要ですか？プラグインもあります！

ただし、Figmaの設(shè)計(jì)部分は常に比較的靜的であり、常に不動(dòng)の長(zhǎng)方形を使用して、事前に定義されたユーザーインタラクションを通じて接続されています。しかし、あなたのデザインが突然生き返ることができると言ったらどう思いますか？では、概念と実裝の違いは何ですか？

Figmaは6月にJavaScriptベースのウィジェットを起動(dòng)すると発表しました。これで、デザイナーは、Figmaでロジック駆動(dòng)型コンポーネントを直接閲覧および実裝できます！

ウィジェットAPIを一緒に見てみましょう！それが何であり、それをどのように使用するか知りたいですか？これはまさにこの記事で一緒に探求するものです。

Figmaウィジェットは、無限の可能性を有効にします

あなたとあなたのパートナーが晝夜を問わず、大規(guī)模なレストランアプリケーションを設(shè)計(jì)することを想像してください。あなたはすべて同じfigmaアートボードでコラボレーションします。

もちろん、コラボレーションには設(shè)計(jì)プロセスが含まれているだけではありません。

• プロジェクト管理、
• 投票をする、
• シミュレートされたデータをインポートおよび視覚化し、
• 多分マルチプレイヤーゲームをプレイして、長(zhǎng)い間リラックスしてください。

すべてを管理し、グループの殘りの部分にリンクを送信する必要があるのは1人だけです。しかし、これは効率的ではありませんよね？

これは、ウィジェットが出てくる場(chǎng)所です。私たちは、フィグマを去ることなく、このすべて - はい、これらすべてを行うことを想像できます。

Figmaでウィジェットを使用したい方法は次のとおりです。

• JiraとAsanaのタスクを作成します
• Githubで問題を作成します
• 動(dòng)的データを表示します
• 音聲メモを記録します
• タスクリストを作成します
• Tic Toeゲームをプレイする時(shí)間を無駄にします
• 追跡アクティビティ
• タイマーを作成します

待って待ってください。ご覧のとおり、ドキュメントで使用できる多くのウィジェットがすでにあります。実際、ウィジェットメニュー（Shift I）から直接アートボードにウィジェットを追加できます。

しかし、私たちはウィジェットの使用方法を?qū)Wぶためにここにいません。なぜなら、それは簡(jiǎn)単だからです。私たちが最善を盡くすことをしましょう：私たちは獨(dú)自のFigmaウィジェットを作成します！このウィジェットは、Chris CoyierのDesign引用Webサイトに觸発されます。 APIを取得し、ウィジェットに送信してから、Figmaにランダムデザインの引用符を直接表示します。

必要なもの

私は悪いニューススプレッダーであることは好きではありませんが、ウィジェットを開発するには、WindowsまたはMacにいる必要があります。 Linuxユーザー、申し訳ありませんが、あなたは幸運(yùn)ではありません。 （學(xué)習(xí)を続けたい場(chǎng)合でも、仮想マシンを使用できます。）

Figmaデスクトップアプリケーションをダウンロードします。開始する最も簡(jiǎn)単な方法は、アプリケーションから直接ウィジェットテンプレートを生成することです。

ウィジェットメニュー（シフトI）を開き、 [開発]タブに切り替え、新しいプロジェクトを作成して、新しいアートボードを作成します。

その後、Figmaは新しいウィジェットに名前を付けて、アートボードやFigjamのアートボードを設(shè)計(jì)するのに適しているかどうかを決定するように求められます。この記事の目的のために、前のオプションで十分です。

カスタマイズは、それで終了しません。Figmaは、プレハブカウンターウィジェットまたはIFRAMEを有効にする代替案から始めるオプションも提供します。単純な「空」オプションを選択しますが、最終的にはフェッチAPIを使用するように自分で変更します。

次に、新しいウィジェットプロジェクトをシステム內(nèi)の特別なディレクトリに保存するように求められます。完了したら、端末を起動(dòng)して、フォルダーに向けます。今はコマンドを?qū)g行しないでください - 私たちは後でそれを行い、ウィジェットAPIについてもっと學(xué)ぶことを目的として意図的にエラーを犯します。

デザインウィジェット

Chris Coyierのデザイン見積もりWebサイトから直接デザインを入手しています。それでは、DevToolsを立ち上げて、そこに行き、より深く掘り下げましょう。

ここで使用している2つのキーショートカットは、Ctrl Shift C（またはCMD Shift C）にピック要素ツールを切り替え、クリックをシフトしてColor形式をHEXコードに変更します。これを行い、ChrisのWebサイトで使用されている色、フォント、フォントの厚さ、フォントサイズを理解します。この情報(bào)はすべて、Figmaに非常によく似たウィジェットを構(gòu)築するために重要であり、これが次のステップになります！設(shè)計(jì)されたコンポーネントをつかみ、獨(dú)自のキャンバスで使用できます。

この記事のトピックは、コードを書くことでウィジェットを作成することであるため、ここでは詳しく説明しません。しかし、私はあなたのウィジェットを慎重にスタイリングすることが非常に重要であることを強(qiáng)調(diào)する必要があります... CSS-Tricksにはすでに多くのデザイン指向のFigmaチュートリアルがあります。

ウィジェットのレイアウトを作成します

デザインが完了したら、プログラミングの指を引き出してウィジェットのギアの構(gòu)築を開始します。

Figmaが設(shè)計(jì)ビルディングブロックを反応様コンポーネントに変換する方法は非常に興味深いものです。たとえば、自動(dòng)レイアウト関數(shù)を備えたフレームワーク要素は、コードで表されます。<autolayout></autolayout>コンポーネント。さらに、他の2つのコンポーネントを使用します。<text></text>そして<svg></svg>。

私のfigmaアートボードをチェックしてください...私はあなたにオブジェクトツリーに注意を払うように頼んでいます。これは、ウィジェット設(shè)計(jì)をJSXコードに変換できる必要があるための鍵です。

ご覧のとおり、私たちの設(shè)計(jì)見積りウィジェットでは、3つのコンポーネントをインポートする必要があります。完全なAPIには8つのレイヤーベースのノードのみが含まれていることを考慮すると、これはかなりの數(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></autolayout></code><svg></svg><autolayout><text> {引用}</text><text> - {著者}</text></autolayout><svg></svg>
  ）;
}

widget.register（quoteswidget）;

このコードは、控えめに言っても非常に混亂しています。これで、設(shè)計(jì)レイヤーを區(qū)別することはできません。幸いなことに、 name屬性を使用してこの問題を簡(jiǎn)単に解決できます。

<code><autolayout name="{" quote></autolayout></code> <svg name="{" leftquotationmark></svg><autolayout name="{" quotecontent><text name="{" quotetext> {引用}</text><text name="{" quoteauthor> - {著者}</text></autolayout><svg name="{" rightquotationmark></svg> ;

もちろん、引用SVGをまだ見ることができないので、この問題を始めましょう。<svg></svg>コンポーネントは、SVG要素のソースコードを取得するsrc屬性を受け入れます。これについて言うことはあまりないので、それをシンプルに保ち、コードに戻りましょう。

 <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>`;

関數(shù)quoteswidget（）{
  戻る （
    <svg name="{" leftquotationmark src="%7BleftQuotationSvgSrc%7D"></svg><svg name="{" rightquotationmark src="%7BrightQuotationSvgSrc%7D"></svg>
  ）;
}

私たちは皆、すべてがより明確になっていることに同意できると思います！私たちが物事に名前を付けると、彼らの目的は突然、私たちのコードの読者にとってより明白になります。

ウィジェットをリアルタイムでプレビューします

Figmaは、ホットリロードを含む（ただしこれらに限定されない）ウィジェットを構(gòu)築するときに、優(yōu)れた開発體験を提供します。この機(jī)能を使用すると、リアルタイムでウィジェットに変更をエンコードしてプレビューできます。

最初にウィジェットメニュー（シフトI）を開き、[開発]タブに切り替え、新しいウィジェットをアートボードにクリックまたはドラッグします。あなたのウィジェットが見つかりませんか？心配しないでください。3つのドットメニューをクリックして、ウィジェットのmanifest.jsonファイルをインポートしてください。はい、それはそれを存在に戻すためのすべてのステップです！

待って、畫面の下部にエラーメッセージがありますか？

もしそうなら、調(diào)査しましょう。 [コンソールを開く]をクリックして、その內(nèi)容を読み取ります。開いたコンソールボタンが消えた場(chǎng)合、デバッグコンソールを開く別の方法があります。 Figmaロゴをクリックし、ウィジェットカテゴリにジャンプして、開発メニューを表示します。

このエラーは、TypeScriptをJavaScriptにまだコンパイルしていないためかもしれません。 npm installとnpm run watch （またはyarn and yarn watch ）を?qū)g行することで、コマンドラインでこれを行うことができます。今回はエラーはありません！

遭遇する可能性のあるもう1つのハードルは、コードが変更されるたびにウィジェットを再レンダリングできないことです。次のコンテキストメニューコマンドを使用して、ウィジェットの更新を簡(jiǎn)単に強(qiáng)制できます：ウィジェット→再レンダーウィジェット。

スタイル設(shè)定ウィジェット

今のところ、私たちのウィジェットの外観は、私たちが最終的にすることを目指しているものとはほど遠(yuǎn)いものです。

では、CodeのFigmaコンポーネントをどのようにスタイリングしますか？ ReactプロジェクトであなたのようにCSSを使用しているのでしょうか？間違い。 Figmaウィジェットの場(chǎng)合、すべてのスタイルは完全なプロパティセットを通じて実裝されます。幸いなことに、これらのプロジェクトは、Figmaの対応するプロジェクトとほぼまったく同じ名前です。

最初に2つを構(gòu)成します<autolayout></autolayout>コンポーネント。上の図に示すように、屬性名はその目的を非常に明確に説明しています。これにより、コードにまっすぐジャンプして、いくつかの変更を開始できます。コード全體を再び表示することはないので、コンポーネント名に頼ってコードスニペットがどこにあるかをガイドします。

 <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>

私たちは大きな進(jìn)歩を遂げました！ Figmaに戻ってジャンプして、ウィジェットの外観を確認(rèn)しましょう。 Figmaが新しい変更後にウィジェットを自動(dòng)的にリロードする方法を覚えていますか？

しかし、それで十分ではありません。また、ルートコンポーネントに背景色を追加する必要があります。

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

繰り返しますが、Figmaのアートボードを見て、変更がほぼすぐにウィジェットにどのように反映されるかに注目してください。

このガイドを続けてセットアップしましょう<text></text>コンポーネントのスタイル。

ウィジェットAPIドキュメントをチェックした後、上の図に示すように、プロパティ名がF(xiàn)igMAアプリケーションの対応物とほぼ同じであることが明らかになりました。また、前のセクションでChris Webサイトの値を使用します。

 <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>

ウィジェットにステータスを追加します

現(xiàn)在、ウィジェットは同じ見積もりを示していますが、引用プール全體からランダムに抽出したいと考えています。すべてのReact開発者が変數(shù)であることがわかっているウィジェットに狀態(tài)を追加する必要があり、その変更はコンポーネントの再レンダリングをトリガーします。

Figmaでは、狀態(tài)はuseSyncedStateフックを使用して作成されますが、ほとんどReactのuseStateが必要ですが、プログラマーは一意のkeyを指定する必要があります。この要件は、Figmaが同じデザインアートボードを見ている可能性のあるすべてのクライアントに及ぶウィジェットの狀態(tài)を、異なるコンピューターを介して同期する必要があるという事実に由來しています。

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

今のところ、それは私たちが行う必要があるすべての変更です。次のセクションでは、インターネットからデータを取得する方法を把握します。ネタバレ警告：これは見た目ほど単純ではありません。

ネットワークからデータを取得します

Figmaを思い出すと、iframeを有効にするウィジェットから始めることを選択できます。そのオプションを選択しませんでしたが、その機(jī)能のいくつかを?qū)g裝する必要がありました。ウィジェットコードでfetch()単に呼び出すことができない理由を説明しましょう。

ウィジェットを使用すると、コンピューターで他の誰かが書いたJavaScriptコードを?qū)g行しています。すべてのウィジェットはFigmaのスタッフによって徹底的に精査されていますが、これは依然として大きなセキュリティの脆弱性です。なぜなら、私たち全員がJavaScriptのラインでさえどれほどの損害を引き起こすかを知っているからです。

したがって、Figmaは、匿名のプログラマーによって書かれたウィジェットコードを単純にeval()ことはできません。長(zhǎng)い話を簡(jiǎn)単に言えば、チームは最良の解決策は、厳密に保護(hù)されたサンドボックス環(huán)境でサードパーティのコードを?qū)g行することであると判斷しました。ご想像のとおり、ブラウザAPIはこの環(huán)境では利用できません。

しかし、心配しないでください、この2番目の問題に対するFigmaの解決策は<iframe></iframe>。ファイル（できればui.htmlと呼ばれることが好ましい）で記述されるHTMLコードは、すべてのブラウザーAPIにアクセスできます。このコードをウィジェットからどのようにトリガーできるのか疑問に思うかもしれませんが、後でこれを調(diào)べます。それでは、コードに戻りましょう。

 <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>

これは、ウィジェットからIFrame通信の一般的なテンプレートです。サーバーからデータを取得するために使用しましょう。

 <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>

シンプルで明確に保つために、エラー処理を省略します。ウィジェットコードに戻って、どのようにアクセスするかを見てみましょう<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>「NetworkRequest」という名前のイベントをトリガーします。このイベントはevent.data.pluginMessage.type === 'networkRequest'をチェックして、 ui.htmlファイルで処理し、データをウィジェットに公開します。

しかし、まだ何も起こっていません...私たちはまだfetchData()関數(shù)を呼び出していません。コンポーネント関數(shù)で直接呼び出すと、次のエラーがコンソールに表示されます。

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

Figmaは、機(jī)能本體に直接showUIを呼び出さないように言っています...それで、どこに置くべきですか？答えは、新しいフックと新しい機(jī)能です：EffectとwaitForTask useEffect 。あなたがReact開発者である場(chǎng)合、あなたはすでにuseEffectに精通しているかもしれませんが、ここでそれを使用して、ウィジェットコンポーネントがマウントされたときにサーバーからデータを取得します。

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

しかし、これにより、ウィジェットが常に新しい引用で再レンダリングされるという別の「エラー」が発生します。これは、定義上、 useEffectウィジェットの狀態(tài)が変更されるたびに、またはfetchData呼び出すときに再び発射されるために発生します。 Reactで1回のみuseEffectを呼び出すことができる手法がありますが、Figmaの実裝では機(jī)能しません。 Figmaのドキュメントから：

ウィジェットの実行方法により、Effectは同じ狀態(tài)を使用して複數(shù)回呼び出されることを処理する必要があります。

幸いなことに、狀態(tài)の値がまだ空であるかどうかを確認(rèn)することにより、コンポーネントが最初にマウントされた場(chǎng)合にのみuseEffect呼び出す単純な回避策を利用できます。

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

ひどい「境界外のメモリアクセス」エラーに遭遇する可能性があります。これは、プラグインとウィジェットの開発で非常に一般的です。 figmaを再起動(dò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>

見て、私たちのウィジェットは、デザインアートボードに追加されるたびに、新しいデザインの引用を取得します。

ウィジェットにプロパティメニューを追加します

私たちのウィジェットは、インスタンス化されたときに新しい引用を取得しますが、このプロセスを削除せずに再度実行できれば、より実用的になります。このセクションは、ソリューションが優(yōu)れているため、簡(jiǎn)単に紹介します。プロパティメニューを使用して、 usePropertyMenuフックを一度に呼び出すことで、ウィジェットにインタラクティブ性を追加できます。

 <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（）
  ）;
}

シンプルなフックを使用すると、ウィジェットが選択されたときにウィジェットの近くに表示されるボタンを作成できます。これは、このプロジェクトを完了するために追加する必要がある最後の部分です。

ウィジェットを一般に公開します

誰もそれを使用しない場(chǎng)合、ウィジェットを構(gòu)築することはほとんど役に立ちません。 Figmaは、組織が內(nèi)部使用のためにプライベートウィジェットを起動(dòng)することを許可していますが、これらのアプレットを世界中に公開する方が一般的です。

Figmaには、5?10営業(yè)日かかる可能性のある細(xì)心のウィジェットレビュープロセスがあります。私たちが一緒に構(gòu)築したデザインの引用ウィジェットはすでにウィジェットライブラリにありますが、私はまだそれがどのように到達(dá)するかを示します。このウィジェットを再度公開しようとしないでください。ただし、いくつかの大きな変更を加える場(chǎng)合は、コミュニティと獨(dú)自のウィジェットを共有し続けてください。

最初にウィジェットメニュー（シフトI）をクリックし、 [開発]タブに切り替えてウィジェットを表示します。 3つのドットメニューをクリックして、公開を押します。

Figmaは、タイトル、説明、いくつかのタグなど、ウィジェットの詳細(xì)を入力するように求めます。また、128×128のアイコン畫像と1920×960のバナー畫像も必要です。

これらすべてのリソースをインポートした後、ウィジェットのスクリーンショットが必要です。パブリッシュモードをオフにし（心配しないでください、データを紛失しないでください）、ウィジェットを右クリックして興味深いコンテキストメニューを表示します。コピー/貼り付けをカテゴリとして見つけ、 PNGとしてコピーを選択します。

これが完了したら、公開モードに戻り、ウィジェットのスクリーンショットを次のように貼り付けましょう。

下にスクロールして、最後にパターンをリリースします。祝う！ ？

Figmaは、數(shù)日後にあなたに連絡(luò)して、モデルレビューのステータスをお知らせします。拒否された場(chǎng)合、変更を加えて再度提出する機(jī)會(huì)があります。

結(jié)論は

Figmaウィジェットをゼロから作成しました！クリックイベント、入力フォームなど、ここではカバーされていないことがたくさんあります。このgithubリポジトリで、ウィジェットの完全なコードを掘り下げることができます。

Figmaのスキルを次のレベルに引き上げたい人のために、ウィジェットコミュニティを探索し、インスピレーションとして興味を持っているものを使用することをお?jiǎng)幛幛筏蓼?。より多くのウィジェットを?gòu)築し続け、Reactのスキルを磨き続けてください。

より多くのリソース

このウィジェットを作成する際には、多くのドキュメントを參照する必要がありました。私が最も役立つと思ったものを共有すると思います。

より多くのウィジェットを構(gòu)築する：

• ビルディングウィジェットのベストプラクティス
• コードを含む公式のFigmaウィジェットの例

詳細(xì)を?qū)Wぶウィジェット：

• すべてのウィジェットフック
• すべてのウィジェットコンポーネント
• ウィジェットが舞臺(tái)裏でどのように機(jī)能するか

ウィジェットとプラグイン

• ウィジェットとプラグイン
• Figmaプラグインの紹介
• 舞臺(tái)裏でプラグインを?qū)g行する方法

以上がインタラクティブなFigmaウィジェットの構(gòu)築の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。