インタラクティブなFigmaウィジェットの構築-CSSチュートリアル-php.cn

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

必要なもの

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

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

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

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

カスタマイズは、それで終了しません。Figmaは、プレハブカウンターウィジェットまたはIFRAMEを有効にする代替案から始めるオプションも提供します。単純な「空」オプションを選択しますが、最終的にはフェッチ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 { widget } = figma; const { AutoLayout, Text, SVG } = widget;</code>

ログイン後にコピー

これにより、Reactのようにウィジェットのスケルトンを構築できます。

 <code>function QuotesWidget() { const quote = `...`; const author = `...`; return (<autolayout></autolayout></code><svg></svg><autolayout><text> {引用}</text><text> - {著者}</text></autolayout><svg></svg>
  ）;
}

widget.register（quoteswidget）;

ログイン後にコピー

このコードは、控えめに言っても非常に混乱しています。これで、設計レイヤーを区別することはできません。幸いなことに、 name属性を使用してこの問題を簡単に解決できます。

<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>
  //簡単にするために、短縮されています`;
const rightquotationsvgsrc = ` <svg fill="none" height="103" viewbox="0 0 118 103" width="118" xmlns="<http://www.w3.org/2000/svg>">
//簡単にするために、短縮されています</svg>`;

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

ログイン後にコピー

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

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

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

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

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

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

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

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

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

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

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

最初に2つを構成します<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>

ログイン後にコピー

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

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

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

ログイン後にコピー

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

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

ウィジェットAPIドキュメントをチェックした後、上の図に示すように、プロパティ名がFigMAアプリケーションの対応物とほぼ同じであることが明らかになりました。また、前のセクションで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>

ログイン後にコピー

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

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

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

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

ログイン後にコピー

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

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

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

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

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

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

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

ログイン後にコピー

 <code>window.onmessage = async (event) => { if (event.data.pluginMessage.type === 'networkRequest') { // TODO: 从服务器获取数据window.parent.postMessage({ pluginMessage: { // TODO: 返回获取的数据} }, '*') } }</code>

ログイン後にコピー

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

 <code>window.onmessage = async (event) => { if (event.data.pluginMessage.type === 'networkRequest') { // 获取从0到100的随机数const randomPage = Math.round(Math.random() * 100) // 从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() // 从响应中提取作者姓名和报价内容const authorName = data[0].title.rendered const quoteContent = data[0].yoast_head_json.og_description window.parent.postMessage({ pluginMessage: { authorName, quoteContent } }, '*') } }</code>

ログイン後にコピー

シンプルで明確に保つために、エラー処理を省略します。ウィジェットコードに戻って、どのようにアクセスするかを見てみましょう<iframe></iframe>で定義された関数：

 <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()関数を呼び出していません。コンポーネント関数で直接呼び出すと、次のエラーがコンソールに表示されます。

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

ログイン後にコピー

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

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

ログイン後にコピー

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

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

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

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

ログイン後にコピー

ひどい「境界外のメモリアクセス」エラーに遭遇する可能性があります。これは、プラグインとウィジェットの開発で非常に一般的です。 figmaを再起動するだけで、再び表示されません。

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

これらは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>

ログイン後にコピー

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

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

私たちのウィジェットは、インスタンス化されたときに新しい引用を取得しますが、このプロセスを削除せずに再度実行できれば、より実用的になります。このセクションは、ソリューションが優れているため、簡単に紹介します。プロパティメニューを使用して、 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（）
  ）;
}

ログイン後にコピー

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

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

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

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

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

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

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

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

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

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