インタラクティブなFigmaウィジェットの構築

ただし、Figmaの設計部分は常に比較的静的でした。常に、事前に定義されたユーザーインタラクションを介して接続されている、動機づけのない長方形を使用しています。しかし、あなたのデザインが突然生き返ることができると言ったらどう思いますか？では、概念と実装の違いは何ですか？

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

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

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

あなたとあなたのパートナーは昼夜を問わず、大規模なレストランアプリケーションを設計するために仕事をしていると想像してください。あなたはすべて同じfigmaアートボードでコラボレーションします。

もちろん、コラボレーションには設計プロセスだけ以上のものが含まれることをすでに知っています：

• プロジェクト管理、
• 投票を行う、
• シミュレートされたデータをインポートおよび視覚化します。

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

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

figmaでウィジェットを使用したい方法は次のとおりです/li>

タイマーの作成

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

しかし、私たちは簡単だからウィジェットの使用方法を学ぶためにここにいるわけではありません。私たちが最善を尽くすことをしましょう：私たちは独自のFigmaウィジェットを作成します！このウィジェットは、Chris CoyierのDesign引用Webサイトに触発されます。 APIを取得し、ウィジェットに送信してから、Figmaにランダムデザインの引用符を直接表示します。

何が必要ですか

悪いニュースのスプレッダーであることは好きではありませんが、ウィジェットを開発するには、WindowsまたはMacにいる必要があります。 Linuxユーザー、申し訳ありませんが、あなたは幸運ではありません。 （学習を継続する場合は、仮想マシンを使用できます。）

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

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

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

カスタマイズは、プレハブカウンターウィジェットまたはIFRAMEを有効にする代替案で開始するオプションを提供します。これにより、CanvasにアクセスしてAPIをフェッチできます。単純な「空」オプションを選択しますが、最終的にはフェッチAPIを使用するように自分で変更します。

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

デザインウィジェット

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

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

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

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

デザインが終了したら、プログラミングの指を取り出してウィジェットのギアの構築を開始します。

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

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

ご覧のとおり、デザインの引用ウィジェットでは、3つのコンポーネントをインポートする必要があります。完全なAPIには8つのレイヤーベースのノードのみが含まれていることを考慮すると、これはかなりの数のコンポーネントです。しかし、すぐにわかるように、これらのモジュールはあらゆる種類のレイアウトを作成するのに十分です。

 <code> // code.tsx const} const {autolayout、svg} = widget; ayout> <svg> </svg> <autolayout> <text> {quote} </text> <text>  - {著者} </text> </autolayout> <svg> </svg> ）;これで、設計レイヤーを区別することはできません。幸いなことに、<code> name </code>属性を使用して、この問題を簡単に解決できます。  <pre class="brush:php;toolbar:false"> <code> <autolayout name="{" quote> <svg name="{" leftquotationmark> </svg> <autolayout name="{" quotecontent> <text name="{" quotetext>  </text></autolayout>; </autolayout></code> 

もちろん、引用svgはまだ表示されないので、この問題の解決を始めましょう。 <svg> </svg> コンポーネントは、SVG要素のソースコードを使用する src 属性を受け入れます。これについて多くのことはありませんので、シンプルにして、直接コードに戻りましょう：

 <code> const leftquotationsvgsrc = `<svg fill=" none " height=" 103 " viewbox=" 0 0 117 103 " width=" 117 " xmlns=" /svg> `; xmlns = "> //単純さのために短縮</svg>`; "src =" {rightquotationsvgsrc} "> ）;} </code> 

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

ウィジェットのプレビュー

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

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

待ってください、画面の下部にエラーメッセージはありますか？

もしそうなら、調査しましょう。 「 Open Console 」をクリックして、その内容を読みます。 Open Console ボタンが消えた場合、デバッグコンソールを開く別の方法があります。 Figmaロゴをクリックし、ウィジェットカテゴリにジャンプして、開発メニューを表示します。

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

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

スタイル設定ウィジェット

今のところ、ウィジェットの外観はまだ究極の目標とはほど遠いものです。

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

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

 <code> <autolayout direction="{" horizo center name="{" quote ontal start quotecontent padding="{{" spacing="{10}" vertical verticalalignitems="{" end> </autolayout> ; </code> 

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

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

このガイドを続けて、 <text> </text>コンポーネントをスタイリングしましょう。

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

 <code> <text fill="{'＃545454'}" fontfamily="{'lora'}" fontsize="{36}" fontweight="{'normal'}" name="{'quoteText'}" width="{"> {著者} </text> </code> 

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

私たちのウィジェットは現在同じ見積もりを表示していますが、引用プール全体からランダムに抽出したいと思います。私たちはウィジェットに状態を追加する必要があります。これは、すべてのReact開発者が変数であり、その変更によりコンポーネントの再レンダーがトリガーされることがわかります。

figmaでは、状態は usesyncedstate hookを使用して作成されます。この要件は、Figmaが同じデザインアートボードを見ている可能性のあるすべてのクライアントに及ぶウィジェットの状態を、異なるコンピューターを介して同期する必要があるという事実に由来しています。

 <code> const {const、setquote] = usesyncedstate（ "quote-text"、 ""）= usesyncedstate（ "）次のセクションでは、インターネットからデータを取得する方法を把握します。ネタバレ警告：これは見た目ほど単純ではありません。  <h3>ネットワークからデータを取得</h3> <p> recall figmaは、iframeを有効にするウィジェットで開始することを選択できます。そのオプションを選択しませんでしたが、その機能のいくつかを実装する必要がありました。ウィジェットコードで<code> fetch（）</code>を単に呼び出すことができない理由を説明します。 </p> <p>ウィジェットを使用する場合、コンピューター上の他の誰かが書いたJavaScriptコードを実行しています。すべてのウィジェットはFigmaのスタッフによって徹底的に精査されていますが、これは依然として大きなセキュリティの脆弱性です。なぜなら、私たち全員がJavaScriptのラインでさえどれほどの損害を引き起こすかを知っているからです。 </p> <p> figmaは、プログラマーによって書かれたウィジェットコードを匿名で単純に<code> </code> aNOMPINGLEANLY aNOMPINGLAY CODE </p></code> aNOMPINGで簡単にできません。長い話を簡単に言えば、チームは最良の解決策は、厳密に保護されたサンドボックス環境でサードパーティのコードを実行することであると判断しました。ご想像のとおり、ブラウザAPIはこの環境では利用できません。  <p>しかし、心配しないでください、この2番目の問題に対するFigmaの解決策は<code> <iframe> </iframe></code>です。ファイル（できれば<code> ui.html </code>と呼ばれることが望ましい）で記述されるHTMLコードは、すべてのブラウザAPIにアクセスできます。このコードをウィジェットからどのようにトリガーできるのか疑問に思うかもしれませんが、後でこれを調べます。さて、コードに戻りましょう： </p> <pre class="brush:php;toolbar:false"> <code> // manifest.json {"ui.html"} </code> 

 <code>サーバーwindow.parent.postmessage（{plaginmessage：{// todo：取得したデータを返します}}、 '*'）}} </code> 

これは、ウィジェットのコミュニケーションの一般的なテンプレートです。サーバーからデータを取得するために使用しましょう：

 <code> window.onmessage = async（event）=＆gt;フェッチ（ `https://quotesondesign.com/wp-json/wp/v2/posts/?orderby=rand＆amp; per_page=1& page=$ {randompage}＆amp;レンダリングされたconst quotecontent = data [0] .yoast_head_json.og_description window.parent.postmessage（{plaginmessage：{authorname、 QuoteContent}}、 '*'）}} </code> 

シンプルで明確に保つために、エラー処理を省略します。ウィジェットコードに戻り、 <iframe> </iframe>：

function fetchdata（）で定義されている関数を確認しましょう。 }）figma.ui.onmessage = async（{authorname、quotecontent}）=＆gt; }

ご覧のとおり、最初にFigmaに隠された <iframe> </iframe>に公開し、「networkRequest」と呼ばれるイベントをトリガーするように伝えます。 ui.html ファイルでこのイベントを処理します event.data.pluginmessage.type === 'networkRequest' をチェックし、データをウィジェットに公開します。

しかし、まだ何も起こっていません...まだ fetchdata（）関数を呼び出していません。コンポーネント関数で直接呼び出すと、コンソールに次のエラーが表示されます。

 <code> showuiは、ウィジェットレンダリング中に使用できません。 </code> 

figmaは、関数本文に showui を直接呼び出さないように言っています...それで、どこに置くべきですか？答えは、新しいフックと新しい関数です： useefect および waitfortask 。あなたがReact開発者である場合、 useefect にすでに精通している可能性がありますが、ここでは、ウィジェットコンポーネントがマウントされたときにサーバーからデータを取得するために使用します。

 <code> const {effect、waitfortask} = widget quoteswidget（（）=＆gt; {fetchdata（）;}} </code> 

これは、 effect を定義上、ウィジェットの状態が変更されるたびに、または fetchdata を呼び出すと再び発生するためです。 effect を1回だけ呼び出すことができる手法がありますが、Figmaの実装では機能しません。 Figmaのドキュメントから：

ウィジェットの実行方法により、Effectは同じ状態を使用して複数回呼び出すことを処理する必要があります。

幸いなことに、状態の値がまだ空であるかどうかをチェックすることにより、 useefect のみを呼び出す単純な回避策を利用できます。 ;これは、プラグインとウィジェットの開発で非常に一般的です。 figmaを再起動するだけで、再び表示されません。

見積テキストには奇妙な文字が含まれていることがあることに気付いたかもしれません。

これらは、コードで正しくフォーマットする必要がありますodeentities =（function（）{//これにより、var element.createelement（ "div"）; functionのたびに、オーバーヘッドがオブジェクトを作成することを防ぎます。 decodehtmlentities（str）{if（str＆amp;＆amp; typeof str === "string"）{// strip script/htmlタグ= str.replace（[\\\\ s \\\\ s]*？）＆lt; \\/？\\\\\ w（？：[^"'＆gt;] |"]*"|' [^']*＆gt;/gim、" "）; element.textcontent = "";

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

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

 <code> const {usepropertymenu} = widget quoteswidget（）{{itemtytype： "action"、 "generate"、tooltip： "geneate"、icon： `<svg fill=" none " www.w3.org> "> </svg>`、}、]、（）=＆gt; fetchdata（））;} </code> 

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

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

がを使用しない場合、ウィジェットの構築はほとんど役に立ちません。 Figmaは、組織が内部使用のためにプライベートウィジェットを立ち上げることを許可していますが、これらのアプレットを世界中に公開する方が一般的です。

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

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

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

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

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

下にスクロールして、最後にモードを公開します。祝う！ ？

figmaは、数日後に連絡して、モデルレビューのステータスをお知らせします。拒否された場合、変更を加えて再度提出する機会があります。

結論

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

figmaスキルを次のレベルに引き上げたい人のために、ウィジェットコミュニティを探索し、インスピレーションとして興味を持っていることをお勧めします。より多くのウィジェットを構築し続け、Reactのスキルを磨き続けてください。

その他のリソース

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

より多くのウィジェット：

• ビルディングウィジェットのベストプラクティス
• コードを使用した公式のフィグマウィジェットの例

もっと深く知る：

• ウィジェットとプラグイン
  • ウィジェットとプラグイン
  • figmaプラグインの紹介
  • プラグインが舞台裏で実行する

以上がインタラクティブなFigmaウィジェットの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。