Figma は常に、開発者とデザイナーの間のコラボレーションを奨励してきました。 コミュニティ製のプラグインの無限の宝庫に取り組んでいます。 3D 要素が必要ですか? そのためのプラグインがあります。 抽象的な SVG が必要ですか? そのためのプラグインがあります、あまりにも。
とは言うものの、Figma の設計部分は常に比較的静的であり、定義済みのユーザー インタラクションを通じて相互に接続された移動不可能な四角形を常に操作していました。 しかし、あなたのデザインが突然生き返る可能性がある、つまり、アニメーション化、インタラクティブ化、さらにはステートフルになる可能性があると言ったらどうでしょうか? それでは、概念と実装を分けるものは何でしょうか?
figma 6月に発表 JavaScript を利用したウィジェットをテーブルにもたらしているということです。 設計者は、ロジック駆動型コンポーネントを直接 Figma で参照して実装できるようになりました。
さようなら ウィジェット API! それが何であるか、そしてそれをどのように使用するか知りたいですか？ それがまさに、この投稿で一緒にやろうとしていることです.
Figma ウィジェットは可能性を無限に広げます
大規模なレストラン アプリケーションを設計するために、パートナーと XNUMX 時間体制で作業しているとします。 お二人はすでに同じ Figma ボードで共同作業を行っています。 両方とも、その場で変更が加えられたまったく同じドキュメントを共有しています。
コラボレーションにはデザイン プロセスだけではないことをご存知でしょう。
- プロジェクト管理、
- 投票を集めるための投票を主催し、
- モックデータのインポートと視覚化、
- 何時間も働いた後は、マルチプレイヤー ゲームをプレイしてクールダウンすることもできます。
すべてを管理し、グループの他のメンバーにリンクを送信するのに必要な人は XNUMX 人だけです。 しかし、それはあまり効率的ではありませんね。
そこでウィジェットの出番です。 おそらく、Figma を離れずに、そのすべてを (そう、すべてを) 行うことができます。
Figma でウィジェットを使用する方法のいくつかを次に示します。
リストは行きます 延々と. おわかりのように、ドキュメントで自由に使用できるウィジェットはすでにたくさんあります。 実際、ウィジェットメニューからボードに直接ウィジェットを追加できます (Shift+I).
しかし、ウィジェットの使い方を学ぶためにここにいるわけではありません。それは簡単だからです。 最善を尽くしましょう。独自の Figma ウィジェットを作成します。 これはに触発されます Chris Coyier のデザイン引用 Web サイト. API を取得してウィジェットにフィードし、ランダムなデザインの引用を直接 Figma に表示します。
これが私たちが必要とするものです
悪い知らせを伝えるのは好きではありませんが、ウィジェットを開発するには、Windows または Mac を使用している必要があります。 Linux ユーザーの皆さん、申し訳ありませんが、運が悪いです。 (まだできます VM を使用する フォローしたい方はどうぞ。）
私たちはするつもりです Figma デスクトップをダウンロードする 応用。 開始する最も簡単な方法は、アプリから直接ウィジェット テンプレートを生成することです。
ウィジェットメニューを開いて新しいボードを作成しましょう (Shift+ I)、に切り替える 開発 タブ、および新しいアイテムの作成。
それに続いて、Figma は新しいウィジェットに名前を付けるように促し、よりカスタマイズされているかどうかを決定します。 デザインボードまたはFigJamボード それも。 この記事の目的には、前者のオプションで十分です。
カスタマイズはここで終わりではありません。 Figma では、事前に作成されたカウンター ウィジェットまたは iFrame 対応の代替手段から開始するオプションも提供されます。これにより、Canvas および Fetch API (および他のすべてのブラウザー API) へのアクセスも可能になります。 シンプルな「Empty」オプションを使用しますが、最終的には Fetch API を利用できるように自分で変更します。
次に、新しいウィジェット プロジェクトをシステムの特別なディレクトリに保存するように求められます。 それが完了したら、端末を起動してそのフォルダーに移動します。 コマンドはまだ実行しないでください。後で実行し、Widgets API についてさらに学習することを目的として、意図的にエラーを取得します。
ウィジェットの設計
から直接デザインを引き出しています。 Chris Coyier のデザイン引用 Web サイト. それでは、DevTools を起動して、そこに飛び込んでみましょう。
ここで使用している XNUMX つの主要なショートカットは次のとおりです。 Ctrl+Shift+C （または Cmd+Shift+C) をクリックして「要素を選択」ツールを切り替えます。 Shift+Click 色形式をHEXコードに変更します。 これは、Chris の Web サイトで使用されている色、フォント、フォントの太さ、およびフォント サイズについて学習するために行っています。 この情報はすべて、次のステップである Figma で非常によく似たウィジェットを作成するために重要です。 あなたはできる 設計されたコンポーネントをつかむ 独自のキャンバスで使用します。
この記事の主なトピックは、コードを記述してウィジェットを作成することであるため、ここでは詳しく説明しません。 しかし、私はあなたの世話をすることがどれほど重要であるかを十分に強調することはできません. ウィジェットのスタイル… CSS-Tricks にはすでに大量の デザイン指向の Figma チュートリアル; それらを読書リストに追加したことを後悔することはありません。
ウィジェットのレイアウトを作成する
設計が終わったら、プログラミングの指を離して、ウィジェットのギアの構築を開始します。
Figma が設計のビルディング ブロックを React のようなコンポーネントに変換する方法は非常に興味深いものです。 たとえば、自動レイアウト機能を持つフレーム要素は、次のように表されます。 <AutoLayout /> コード内のコンポーネント。 それに加えて、さらに XNUMX つのコンポーネントを使用します。 <Text /> & <SVG />.
私のFigmaボードを見てください… オブジェクト ツリーに集中してくださいと正確にお願いしています。 これは、ウィジェットのデザインを JSX コードに変換できるようにするために必要なものです。
ご覧のとおり、デザインの見積もりウィジェットでは、XNUMX つのコンポーネントをインポートする必要があります。 それを考えると、それはかなりの数のコンポーネントです。 完全なAPI レイヤーベースのノードが XNUMX つだけ含まれています。 しかし、すぐにわかるように、これらのモジュールはあらゆる種類のレイアウトを作成するのに十分すぎるほどです。
// code.tsx
const { widget } = figma;
const { AutoLayout, Text, SVG } = widget;これで、先に進み、React で行うようにウィジェットのスケルトンを構築するために必要なすべてが揃いました。
function QuotesWidget() {
const quote = `...`;
const author = `...`;
return (
<AutoLayout>
<SVG />
<AutoLayout>
<Text>{quote}</Text>
<Text>— {author}</Text>
</AutoLayout>
<SVG />
</AutoLayout>
);
}
widget.register(QuotesWidget);控えめに言っても、このコードは非常に紛らわしいです。 現時点では、デザイン レイヤーを区別することはできません。 ありがたいことに、この問題は、 name プロパティ。
<AutoLayout name={"Quote"}>
<SVG name={"LeftQuotationMark"} />
<AutoLayout name={"QuoteContent"}>
<Text name={"QuoteText"}>{quote}</Text>
<Text name={"QuoteAuthor"}>— {author}</Text>
</AutoLayout>
<SVG name={"RightQuotationMark"} />
</AutoLayout>;もちろん、引用符の SVG はまだ見えないので、修正に取り掛かりましょう。 の <SVG/> コンポーネントを受け入れる srcSVG 要素のソース コードを取得するプロパティ。 これについては多くを語らないので、単純にしてコードに戻りましょう。
const leftQuotationSvgSrc = `<svg width="117" height="103" viewBox="0 0 117 103" fill="none" xmlns="<http://www.w3.org/2000/svg>">
// shortened for brevity
</svg>`;
const rightQuotationSvgSrc = `<svg width="118" height="103" viewBox="0 0 118 103" fill="none" xmlns="<http://www.w3.org/2000/svg>">
// shortened for brevity
</svg>`;
function QuotesWidget() {
return (
<SVG name={"LeftQuotationMark"} src={leftQuotationSvgSrc} />
<SVG name={"RightQuotationMark"} src={rightQuotationSvgSrc} />
);
}すべてがより明確になったことに、私たちは皆同意できると思います。 物事に名前を付けると、コードの読者にとってその目的が突然明らかになります。
ウィジェットをリアルタイムでプレビューする
Figma は、ウィジェットを作成する際に、開発者に優れたエクスペリエンスを提供します (ただし、これに限定されません)。 ホットリロード. この機能を使用すると、ウィジェットへの変更をリアルタイムでコーディングおよびプレビューできます。
ウィジェット メニュー (Shift+I)、開発タブに切り替えて、新しいウィジェットをクリックまたはボードにドラッグします。 ウィジェットが見つかりませんか? 心配する必要はありません。XNUMX ドット メニューをクリックして、ウィジェットの manifest.json ファイル。 はい、それだけで元に戻ります。
画面の下部にエラー メッセージが表示されましたか?
なら調べてみましょう。 クリック "コンソールを開く」 そして、それが何を言わなければならないかを読んでください。 もし コンソールを開く ボタンがなくなりました。デバッグ コンソールを開く別の方法があります。 Figma ロゴをクリックし、ウィジェット カテゴリにジャンプして、開発メニューを表示します。
このエラーは、TypeScript を JavaScript にまだコンパイルしていないことが原因である可能性があります。 コマンドラインで実行して実行できます npm install & npm run watch. (または yarn & yarn watch ）。 今度はエラーなし！
遭遇する可能性のあるもう XNUMX つの障害は、コードが変更されるたびにウィジェットが再レンダリングに失敗することです。 次のコンテキスト メニュー コマンドを使用して、ウィジェットを簡単に強制的に更新できます。 ウィジェット → 再レンダリング ウィジェット.
ウィジェットのスタイリング
現在のところ、 ルックス のウィジェットはまだ最終目標からかなり離れています。
では、コードから Figma コンポーネントのスタイルを設定するにはどうすればよいでしょうか? React プロジェクトで行うような CSS を使用するのでしょうか? ネガティブ。 Figmaのウィジェットで、 を スタイリングは一連の 十分に文書化された小道具. 幸運なことに、これらのアイテムにはほとんど名前が付けられています 同じように Figmaの対応するものに。
XNUMXつの設定から始めましょう <AutoLayout /> コンポーネント。 上のインフォグラフィックでわかるように、小道具の名前はその目的をよく表しています。 これにより、コードに直接ジャンプして変更を加えることが簡単になります。 コード全体を再度表示することはありませんので、スニペットがどこに属しているかはコンポーネント名を参照してください。
<AutoLayout
name={"Quote"}
direction={"horizontal"}
verticalAlignItems={"start"}
horizontalAlignItems={"center"}
spacing={54}
padding={{
horizontal: 61,
vertical: 47,
}}
>
<AutoLayout
name={"QuoteContent"}
direction={"vertical"}
verticalAlignItems={"end"}
horizontalAlignItems={"start"}
spacing={10}
padding={{
horizontal: 0,
vertical: 0,
}}
></AutoLayout>
</AutoLayout>;私たちは多くの進歩を遂げました！ 保存して Figma に戻り、ウィジェットがどのように見えるかを見てみましょう。 Figma が新しい変更時にウィジェットを自動的にリロードする方法を覚えていますか?
しかし、まだ十分ではありません。 また、ルート コンポーネントに背景色を追加する必要があります。
<AutoLayout name={"Quote"} fill={"#ffffff"}>もう一度、Figma ボードを見て、変更がすぐにウィジェットに反映されることに注目してください。
このガイドに沿って移動し、 <Text> コンポーネント。
見てから ウィジェット API ドキュメント上のインフォグラフィックでわかるように、プロパティ名が Figma アプリの対応するものとほぼ同じであることは明らかです。 また、Chris の Web サイトを調べた最後のセクションの値も使用します。
<Text name={'QuoteText'}
fontFamily={'Lora'}
fontSize={36}
width={700}
fill={'#545454'}
fontWeight={'normal'}
>{quote}</Text>
<Text name={'QuoteAuthor'}
fontFamily={'Raleway'}
fontSize={26}
width={700}
fill={'#16B6DF'}
fontWeight={'bold'}
textCase={'upper'}
>— {author}</Text>ウィジェットに状態を追加する
私たちのウィジェットは現在同じ見積もりを表示していますが、見積もりのプール全体からランダムに取得したいと考えています。 追加する必要があります 状態 これはすべての React 開発者が知っている変数であり、その変更によってコンポーネントの再レンダリングがトリガーされます。
Figmaでは状態は useSyncedState 針; それはかなりです Reactの useState、ただし、プログラマは一意のキーを指定する必要があります。 この要件は、Figma がウィジェットの状態を同期する必要があるという事実に由来します。 を クライアントは同じデザイン ボードを表示している可能性がありますが、異なるコンピューターを介して表示されます。
const { useSyncedState } = widget;
function QuotesWidget() {
const [quote, setQuote] = useSyncedState("quote-text", "");
const [author, setAuthor] = useSyncedState("quote-author", "");
}今のところ必要な変更はこれだけです。 次のセクションでは、インターネットからデータを取得する方法について説明します。 ネタバレ注意: 見た目ほど単純ではありません。
ネットワークからのデータのフェッチ
Figma が iFrame 対応のウィジェットから始めるという選択肢を与えてくれたときのことを思い出してください。 そのオプションは採用しませんでしたが、それでもいくつかの機能を実装する必要があります。 単純に呼び出せない理由を説明しましょう fetch() ウィジェットコード内。
ウィジェットを使用するときは、他の人が作成した JavaScript コードを自分のコンピューターで実行していることになります。 すべてのウィジェットは Figma のスタッフによって徹底的にレビューされていますが、これは依然として巨大なセキュリティ ホールです。 XNUMX行のJavaScriptでもダメージを与えることができる.
その結果、Figma は単純に eval() 匿名のプログラマーによって書かれたウィジェット コード。 簡単に言うと、チームは、厳重に保護されたサンドボックス環境でサードパーティのコードを実行することが最善のソリューションであると判断しました。 ご想像のとおり、このような環境ではブラウザー API を使用できません。
しかし、心配しないでください。この XNUMX 番目の問題に対する Figma の解決策は次のとおりです。 <iframe>秒。 ファイルに書き込む HTML コード。 ui.html、すべてのブラウザ API にアクセスできます。 ウィジェットからこのコードをトリガーする方法を疑問に思われるかもしれませんが、それについては後で調べます。 それでは、コードに戻りましょう。
// manifest.json
{
"ui": "ui.html"
}<!-- ui.html -->
<script>
window.onmessage = async (event) => {
if (event.data.pluginMessage.type === 'networkRequest') {
// TODO: fetch data from the server
window.parent.postMessage({
pluginMessage: {
// TODO: return fetched data
}
}, '*')
}
}
</script>これは、widget-to- の一般的なテンプレートです。iframe コミュニケーション。 これを使用して、サーバーからデータを取得しましょう。
<!-- ui.html -->
<script>
window.onmessage = async (event) => {
if (event.data.pluginMessage.type === 'networkRequest') {
// Get random number from 0 to 100
const randomPage = Math.round(Math.random() * 100)
// Get a random quote from the 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()
// Extract author name and quote content from response
const authorName = data[0].title.rendered
const quoteContent = data[0].yoast_head_json.og_description
window.parent.postMessage({
pluginMessage: {
authorName,
quoteContent
}
}, '*')
}
}
</script>これを単純かつ要点を保つために、エラー処理を省いています。 ウィジェット コードに戻り、で定義された関数にアクセスする方法を見てみましょう。 <iframe>:
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()
}
})
}ご覧のとおり、最初に Figma に隠しファイルへのアクセスを公開するように指示しています。 <iframe> そして、名前でイベントをトリガーします "networkRequest". このイベントは ui.html チェックしてファイルする event.data.pluginMessage.type === 'networkRequest', その後、データをウィジェットにポストします。
しかし、まだ何も起こっていません…まだ電話していません fetchData() 関数。 コンポーネント関数で直接呼び出すと、コンソールで次のエラーが発生します。
Cannot use showUI during widget rendering.figmaは私たちに電話しないように言っています showUI 関数本体に直接...では、どこに配置すればよいでしょうか? その答えは、XNUMX つの新しいフックと XNUMX つの新しい関数です。 useEffect & waitForTask. すでにご存知かもしれませんが、 useEffect React 開発者の場合は、ウィジェット コンポーネントがマウントされたときにサーバーからデータを取得するために使用します。
const { useEffect, waitForTask } = widget;
function QuotesWidget() {
useEffect(() => {
waitForTask(fetchData());
});
}しかし、これはさらに別の「エラー」を引き起こし、ウィジェットが新しい引用符で永久に再レンダリングし続けます。 これは、次の理由で発生します。 useEffect、定義により、ウィジェットの状態が変化するたびに再びトリガーされます。 fetchData。 そして、 テクニックがある 電話するだけ useEffect React に入ると、Figma の実装では機能しません。 Figmaのドキュメントから：
ウィジェットの実行方法により、
useEffect同じ状態で複数回呼び出されることを処理する必要があります。
ありがたいことに、私たちが利用して呼び出すことができる簡単な回避策があります useEffect コンポーネントが最初にマウントされたときに XNUMX 回だけ、状態の値がまだ空であるかどうかを確認します。
function QuotesWidget() {
useEffect(() => {
if (!author.length & !quote.length) {
waitForTask(fetchData());
}
});
}怖い」に遭遇するかもしれません範囲外のメモリアクセス」 エラー。 これは プラグインやウィジェットの開発でよく見られる. Figmaを再起動するだけで、もうそこにはありません。
お気づきかもしれませんが、引用テキストに変な文字が含まれていることがあります。
これらは Unicode文字 コードで適切にフォーマットする必要があります。
<!-- ui.html -->
<script>
window.onmessage = async (event) => {
// ...
const quoteContent = decodeEntities(data[0].yoast_head_json.og_description);
};
// <https://stackoverflow.com/a/9609450>
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(/<script[^>]*>([Ss]*?)</script>/gim, "");
str = str.replace(/</?w(?:[^"'>]|"[^"]*"|'[^']*')*>/gim, "");
element.innerHTML = str;
str = element.textContent;
element.textContent = "";
}
return str;
}
return decodeHTMLEntities;
})();
</script>ほら、私たちのウィジェットは、デザイン ボードに追加されるたびに新しいデザインの見積もりを取得します。
ウィジェットにプロパティ メニューを追加する
ウィジェットはインスタンス化時に新しい見積もりをフェッチしますが、このプロセスを削除せずにもう一度実行できれば、はるかに実用的です。 解決策は非常に注目に値するため、このセクションは短くなります。 と プロパティ メニューを XNUMX 回呼び出すだけで、ウィジェットに対話機能を追加できます。 usePropertyMenu フック。
const { usePropertyMenu } = widget;
function QuotesWidget() {
usePropertyMenu(
[
{
itemType: "action",
propertyName: "generate",
tooltip: "Generate",
icon: `<svg width="22" height="15" viewBox="0 0 22 15" fill="none" xmlns="<http://www.w3.org/2000/svg>">
<!-- Shortened for brevity -->
</svg>`,
},
],
() => fetchData()
);
}XNUMX つの単純なフックを使用して、ウィジェットが選択されたときにウィジェットの近くに表示されるボタンを作成できます。 これが、このプロジェクトを完了するために追加する必要があった最後の要素です。
ウィジェットを公開する
ウィジェットを作成してもあまり意味がありません。 使用されます それ。 そしてその間 Figma は組織にローンチのオプションを付与します プライベート ウィジェット 内部使用のために、これらの小さなプログラムを世界にリリースする方がはるかに一般的です。
Figma のウィジェットのレビュー プロセスはデリケートで、5 ～ 10 営業日かかる場合があります。 私たちが一緒に作ったデザイン引用符ウィジェットは 既にウィジェット ライブラリにある、それがどのようにそこに到達したかをまだ示します。 このウィジェットを再度公開しようとしないでください。削除されるだけです。. ただし、大幅な変更を加えた場合は、独自のウィジェットをコミュニティと共有してください!
ウィジェット メニュー (Shift+I) に切り替え、 開発 タブでウィジェットを表示します。 XNUMXドットメニューをクリックして押します パブリッシュ.
Figma は、タイトル、説明、いくつかのタグなど、ウィジェットに関する詳細を入力するように求めます。 また、128×128 のアイコン画像と 1920×960 のバナー画像も必要です。
これらのアセットをすべてインポートした後も、ウィジェットのスクリーンショットが必要です。 パブリッシング モーダルを閉じ (データが失われることはありませんのでご安心ください)、ウィジェットを右クリックすると、興味深いコンテキスト メニューが表示されます。 を見つける としてコピー/貼り付けカテゴリと選択 PNGとしてコピー.
それが完了したら、公開モーダルに戻り、ウィジェットのスクリーンショットを貼り付けましょう。
下にスクロールして、最後にモーダルを公開します。 祝う！ 🎉
figma は、モーダルのレビューのステータスについて数日以内に連絡します。 拒否された場合は、 変更を加えて再提出する機会.
まとめ
Figma ウィジェットをゼロから作成しました。 など、ここで取り上げられていないことがたくさんあります。 イベントをクリックします, 入力フォーム, 一層. ウィジェットの完全なソース コードは、 このGitHubリポジトリ.
Figma のスキルをより高いレベルに引き上げたいと考えている人には、ウィジェット コミュニティを探索し、目を引くものをインスピレーションとして使用することをお勧めします。 より多くのウィジェットを作成し続け、React のスキルを磨き続けてください。気がつかないうちに、これらすべてを行う方法を教えてくれます。
その他のリソース
このウィジェットを作成している間、多くのドキュメントを参照する必要がありました。 最も役立つとわかったものを共有すると思いました。
