👁️‍🗨️

ニッチ（そうだけど便利）な Figma Plugin たち

2022/12/18に公開1件

Figma

デザイン

plugin

tech

概要

すでに便利な Figma Plugin をまとめてくれている記事は世の中にたくさんあります。

しかし、そのような記事をいくつか見てきた方たちにとっては、目新しい Figma Plugin たちをまとめてくれている記事は少ないように思います。

そこで、この記事ではタイトルにあるように

「ニッチ（そうだけど便利）な Figma Plugin たち」

をご紹介します。

対象読者

この記事は、

「もっと色んな便利な Figma Plugin が知りたい！」

というような Figma 初学者以上(?)の方に向けた記事です。

もしかしたら掘り出し物が見つかるかもしれません。

アニメーション

Parallax

このプラグインは、あなたの Figma デザインに美しいパララックス効果をもたらします。レイヤーを自動的に 3D パースペクティブで配置し、マウスやスクロール、ズーム・スクロールの動きを簡単にパララックス・アニメーションに変換することができます!さらに、このアニメーションを HTML、SVG、GIF、Webm の各フォーマットで書き出すことができるのも魅力です。そして、これはほんの始まりに過ぎません。私たちは、次のアップデートで利用できるようになる "Rotation Parallax"に取り組んでいます。ご期待ください。🤘

Physics animation

Figma 上の通常のレイヤーが、リアルな物理現象を伴うアニメーションになったらどうでしょう？Physics animation plugin はまさにそれを実現します。そうです、冗談抜きで！？特別なスキルは必要ありません。webm、GIF、SVG の各フォーマットで書き出しが可能です。

プラグインで使用するテンプレートのライブラリはこちらです。プラグインがどのように機能するかを理解するのに役立ちます。

SVG motion

商品の魅力的なアニメーションを作成するための Figma 用プラグインです。

プラグインのライブラリにアクセスし、あらかじめ設定された設定を利用することができます。

アバター

Avatars generator

アバタージェネレーターは、AIが生成する架空の人物のユニークな写真を作成します。

使用方法

任意の図形（枠、矩形、楕円、多角形、星、ベクトル、テキスト、線、矢印）を選択する
プラグインを実行し、"Insert photos" を押す - それはランダムな写真で形状を埋めるでしょう。

⚠️プラグインは一度に 30 枚までの複数枚選択に対応しています。

Person Generator

thispersondoesnotexist.com から取得した AI で生成された顔を生成して挿入します。

1024 x 1024 の画像は AI で生成されているため著作権フリーですので、ご自由に作品にお使いください。

User Profile

デザインプロトタイプの中に、美しく生成されたアバター📸を表示することができます。

こんにちは👋🤓 ユーザープロファイルのプラグインが Figma でも使えるようになったのでお知らせします。シンプルで使い勝手の良いものとして、一足早く扱ってください。リーチするのは👉 www.janisrozenfelds.com/user-profile-plugin

👉 プラグインを使用する方法

1.任意の図形を選択

2.プラグインを実行すると、ランダムな写真で埋め尽くされる 📸。

画像（生成、編集）

A Ando - Al Copilot for Designers

Ando AI は、プロンプト、図形、画像から何百万ものデザインアイデアを生成することができます。

注：バグの報告については、antonio@ando.studio までご連絡ください。

Filter / effects

ワークフローに強力なフィルターが割り込んでくる!

現在、50 種類以上のカスタマイズ可能なエフェクトが用意されています。

使い方は

画像またはノードを1つ選択します（Select fill-image only の設定に依存します）。
エフェクトを適用します。
画像を保存する
このプラグインは、適用された効果を編集することができます。これを行うには、元の塗りつぶし画像またはノードに適用する必要があります。
このプラグインでは、ノード（スライスを含む）の画像を操作することができます。これを行うには、Select fill-image only パラメータを無効にします。

Ghost Artist (AI Drawing Assistant)

あなたが描きたいものを書いて、Ghost Artist が描いてくれます。

Ghost Artist で何ができるのですか？

🎨 欲しいアートを記述して、Figma のファイルにすぐに取り込むことができます。

猫が人間のような服を着て、魚市場で買い物をしている" と入力したら、実際に見ることができます。
Figma ファイルに 30 秒で描かれた絵を見ることができます。

💡 ラフなアイデアをマスターピースに変換する。

棒人間を描くと、それが魔法のように素晴らしい作品に変わるのを見ることができます。
異なるアートスタイルをあなたの絵に適用する

🔗 (近日公開) 描いた画像を簡単にシェアできる

リンクを共有することで、あなたの素晴らしい AI ドローイングを他の人に見せることができます。
ユーザープロフィールですべての作品を見ることができます。

ご質問はありますか？

サポートチームにメールを送ってください。

Magestic - AI Generated Icon Sets

AI を駆使したテキストから画像への変換と、あらかじめキュレーションされた高品質でユニークなアイコンセット。あなたのグラフィックやアイコンを、Figma で直接、存在するように話すことができます。

マジェスティックの使い方やサンプルを見るには、こちらへどうぞ -->。

https://bit.ly/magestic-how-to-use

作成したすべてのアイコン、グラフィック、画像はお客様の所有物です。マジェスティックチームによって作成、キュレートされたアイコンセットは、個人的な使用や商業的な使用に使用可能です。

近日公開予定

アイコンセットの追加 - アイコンセットのリクエストは、app.magestic.xyz のダッシュボードから無料で行うことができます。
カラーとスタイルのサポート - デザインスタイルに合わせたカラーアイコンの作成に対応し、より強力なスタイルライブラリが追加されました。
バリエーション - 以前に作成したものやアップロードした画像からバリエーションを作成できます。
アイコンの拡張、ダウンロード、コンピュータへの保存
アイコンのフレーム内レンダリング
独自のアイコンセットを作成し、ロイヤリティを得ることができます（ご興味のある方は、team@magestic.xyz までご連絡ください）。

PicsAI

PicsAI は、あなたのデザインアイデアを声にします。テキストや画像を入力するだけで、数秒後には、PicsAI があなたのデザインの様々なサイズのマルチバージョンを作成します。

何か問題や必要な機能がありましたら、お知らせください。以下のコメントを投稿するか、rikenshah.02@gmail.com までご連絡ください。

近日公開予定

インラインペインティング
歴史
カスタムフィルター
画像サイズ

Picon

Figma で生産性と創造性を 10 倍高める

Picon は、見たいものを書き込むだけで、高品質な画像を生成することができます。Figma のクイックアクションから直接使用することも、モディファイアの設定に深く入り込んでカスタマイズすることも可能です。

🦾 見たいものを書くだけで画像を生成する

🎨 モディファイアを使って画像のスタイルと雰囲気を編集する

⚡ 生成時間約 10 秒で高速に反復する

新機能

イラスト
カスタムモディファイア
アカウントとメールアドレスの確認だけで、画像を生成することができます。
Lexica の検索は、アカウントなしでも誰でも無料で利用できます。

🚀これからの機能

画像＋テキストで新しい画像を生成

まだ初期段階であり、バグが発生する可能性があります。アップデートされたバージョンは迅速に出荷されますので、support@picon.im から 12 時間以内に応答があることを期待します。

注意：このプラグインは picon のアカウントが必要です。

SplashAI

SplashAI は、デザインのあり方を変える、デザインアシスタントツールです。シンプルな UX で、2 つの主な機能をご紹介します。

SplashAI の使い方

1）検索

無制限の画像検索 - 各画像のプロンプトで検索ごとに 25 の画像アイデアを得ることができます。

それは結果を得るために 1 秒だけかかります。

2）AI による独自の画像生成

検索結果のプロンプトアイデアを使って、画像AIジェネレーターで独自の画像を作成することができます。また、自分でプロンプトを入力することも可能です。

Stable Pixel AI

テキストプロンプトを使用して、デザインプロジェクト用の画像アセットを生成できます。すべて Figma から離れることなく。

欲しいイメージを記述すれば、Stable Pixel がそれを作成してくれます。

デモビデオを見る
https://youtu.be/01ylcptoyfI

使用方法

どのような画像を生成したいかを説明するテキストプロンプトを入力します。できるだけ詳しく書いてください。
結果を閲覧して、Figma ボードにお好みの画像を追加します。
これで完了です。

Summon.Al

すごい画像をお探しですか？召喚してみてはいかがでしょうか？

DALL-E-2 が提供するフリー＆オープンソースのデザインツール Summon.AI で画像の生成、編集、バリアント作成ができます。

他のユーザーが作成した作品を発見したり、新しい画像保存機能で作成した作品を世界と共有することができます。

コピーライティング

GRAMMAR

スペルミスや文法ミスをワンクリックで修正。

もう、こんな小さなミスでデザインが台無しになる心配はありません。簡単で、スマートで、効率的です。

ご質問やご提案がありましたら、nowork.app@gmail.com までご連絡ください。

Typeout

Typeout は、あなたのデザインをより会話的で意味のあるものにするために、豊富で適切かつ風変わりな UX コピーのライブラリを提供します。

作成者:

Srikant Shetty, Vivek Kaarthek

UI copy

Lorem ipsum の時代は終わりつつあります。クライアントも、そしてあなた自身も、もっと良いコンテンツに出会うべきでしょう。

UI copy は、あなたがアプリやウェブサイトをデザインしている場合でも、レイアウトコンテンツのためのより良いコピーを考え出すお手伝いをします。

このプラグインは、AI を使ったものではありません。私たちは言葉作りの知能を使って、何千ものコンバージョン志向のウェブサイトを分析し、あなたのマーケティングコピーに適用できる単語やフレーズのリポジトリを構築しました。どの AI ツールもそれを行うことはできません。

🤙 UI copy は、2 つの重要な機能を重視しています。

声とトーン。 カジュアルで気の利いた声か、魂の抜けた企業スーツのような声か、どちらかに聞こえるようにします。ご想像通り、私たちは前者を好みますが、それでも客観的に見て、リポジトリはそれぞれ50/50でバランスをとっています。

スマートな変数。 私たちは、英語の構文構造を利用して、文中の安定した部分を予測し、変数を散りばめて、特定のニーズに合ったフレーズを組み立てています。

🤘 試してみてください。フィードバックの交換で割引を希望される場合は、購入前に弊社にお書きください。

👉 公式サイト：uicopy.io

Writer for Figma

Writer は、チームのための AI ライティングアシスタントです。Writer + Figma プラグインを使用して、すべてのコンテンツが明確で一貫性があり、間違いがないことを確認します。

このプラグインは、あなたのコンテンツをチェックします。

✅ スペルチェック
✅ 文法
✅ 読みやすさ / 学年レベル
✅ 句読点の誤り
✅ 統計情報。読書時間、単語数、文の長さ

このプラグインにサインインするには、Writer のサブスクリプションが必要です。無料プランでは基本的なスペルや文法の提案を、プロプラン（年額 $99）では高度な文章の提案や文体のカスタマイズを行うことができます。

コンポーネント集

Bibbble

Bibbble は、真実の UX/UI スクリーンショットライブラリーの単一ソースです。

最も人気のあるウェブサイトから厳選されたソリューションです。

新しい! "Header builde" を搭載し、ワークフローをスピードアップ。

Bibbble はあなたをサポートします。

プロジェクトに適したレイアウト / UI & UX ソリューションの検索
業界のリーダーからインスピレーションを得る
高品質のスクリーンショットを数秒でインポート
特定のキーワードでデザインを検索
実際のウェブサイトからのリアルなソリューション

インスピレーションと個人的な使用のためにのみ使用します。すべての資産は、元の所有者に属している＆商業的に使用することはできません。

Button Buddy

たった 2 クリックで、必要なボタン部品をすべて作成できます。

buttonbuddy.app

色を設定し、ボタンのスタイルを選択するだけで、Button Buddy がきれいに構成されたボタンコンポーネントを提供してくれます。

より多くのスタイルが将来のアップデートで追加される予定です。

使用方法:

色を設定する
スタイルの選択
ボタンパーツを入手する

5 つのボタン状態:

アイドル
ホバー
アクティブ
フォーカス
無効

3 ボタンサイズ:

スモール(高さ 32 pt)
中(高さ 48 pt)
大 (高さ 64 pt)

Dating

Dating は、Figma で日付を扱うための 2 つの便利なコマンドを提供します。

最初のコマンド Dating > Create Calendar は、選択した月と年のカレンダーを素早く生成することができます。このコマンドは、現在のページに対する最初の実行でコンポーネントのセットを生成し、2 つ目のカレンダーを生成するときに、それらのコンポーネントを再利用します。日付ピッカーや日付範囲ピッカーのモックアップに最適です。

2 つ目のコマンド Dating > Relative Dates では、一般的な相対時間枠をクリップボードに素早くコピーすることができます。すべての相対的な日付は、現在の日から生成されます。これは、日付入力のモックアップや、一般的な日付範囲のセットを表示したいときに最適です。

Flowbase Component Library

世界最大の Figma コンポーネント・ライブラリの発見

ボタンをクリックするだけで、1,000 を超える即時 ✂️ コピーと✃️ ペーストのコンポーネント、レイアウト、ワイヤーフレーム、テンプレートにアクセスできます。

Figma の中で直接、無限のインスピレーションにアクセスし、どんなプロジェクトにも合うようにコンポーネントをカスタマイズできます。

コンポーネント
ナビゲーション、ヘッダー、フッター、コンテンツ、フィーチャー、ダッシュボードなど、さまざまなカテゴリーに属する 1,000 以上のコンポーネントをご覧ください。文字通り、あらゆる製品デザインのニーズに対応するコンポーネントです。

FlowUI
世界で最もパワフルなユーティリティとワイヤーフレーム・ライブラリで、Figma の上級ユーザーをもサポートするエレメントを閲覧することができます。ボタン、アバター、フィールド、アラート、モーダル、ワイヤーフレームなど、すべて Figma の最新機能を使って作成されています。

テンプレート
ページ全体をコピーし、構成要素を組み合わせて、あなたのアイデアを実現することができます。

もっと詳しく知りたい方はこちら
www.flowbase.co をご覧ください。

Forms

Forms は、あなたのフォームデザインをより良いものにするためのプラグインです。あなたのデザインライブラリと統合されたカスタムフォームをお楽しみください。フォントスタイル、スペーシング、カラーはお好みで。すべてのフォーム要素は、エラー、無効、フォーカス、ホバー状態のためのバリアントを自動的に生成するので、あなたがする必要はありません！ 😉 🎉。

主な機能:

カスタムフォーム
すべての要素は、要素の主状態で生成されます
ライブラリのスタイルを適用、または新しいスタイルを選択
ワークスペースが散らからないように、異なるコンポーネントページを用意しました。
入力、テキストエリア、チェックボックス、ボタン、その他を使用できます。
無料トライアル

カスタマーサポート:
URLが不正ですsupport@oneblinq.com

ライセンスを購入する:
https://gumroad.com/l/obforms

❤️Handy Components

どんなファイルにも持っていけるスマートな UI キット

Handy Components は、Figma と Figjam の両方で利用でき、以下の機能があります:

UI の外観を魔法のようにマッチングさせることができます。 プラグインは、タイポグラフィー、色、境界線の半径など、特定のファイルでコンポーネントがどのように見えるべきかを推測します。
自動レイアウトと制約を考慮。このプラグインで作成されたすべてのコンポーネントは、サイズを変更することができ、壊れることはありません。このため、デザインに簡単に組み込むことができます。
コンポーネントの検索
64 個のコンポーネントから選択可能 (常に新しいものが追加されます!)
コンポーネントとして作成するか、プレーンレイヤーとして作成するかをコントロール

どんな部品が入っているのですか？

Typography grid
Typography grid as styles
Calendar
Button
Button set
Input
Input set
Dashboard card
Tooltip
Segment control
Tooltip set
Tab bar (3 items)
Tab bar (4 items)
Tab bar (5 items)
Payment form
Checkbox group
Checkbox set
Product card
Radio button group
Radio button set
Table
Feature card
List item
Slider
Progress bar
Dialog/modal
Pagination
Tabs
Success toast
Chips
Chip set
Warning toast
Attention toast
Toast set

❤️html.to.designer

どんなウェブサイトでも、完全に編集可能な Figma デザインに変換できます。既存のウェブサイトを活用し、その html を Figma にインポートすることで、各要素をゼロから構築することなく、独自のデザインを開始することができます。

story.to.design のテクノロジーを採用 🚀。

その仕組み:

html.to.design というプラグインをインストールします。
空の Figma ファイルで、プラグインから "html.to.design" を検索するか、cmd + / で検索します。
ブラウザで、変換したい Web サイトを開き、URL をコピーします。
プラグインに URL を貼り付け、デバイスと寸法を選択し、「インポート」をクリックすると、html が Figma のデザインに変換されます。
非公開のウェブサイトをインポートするには、Chrome 拡張機能をダウンロードしてください。

なぜ html.to.design を使用するのですか？

ゼロからすべてを構築することなく、独自のデザインのインスピレーションとして他のウェブサイトを使用します。
古いウェブサイトをリデザインする
開発済みのサイトとオリジナルのデザインを比較できます。
Figma でサイトのビジュアルアクセシビリティをチェックできます。
既存のプロジェクトに参加して、不足しているデザインを簡単にインポートできます。

Ready Components

このプラグインは、一般的な UI デザインに使用できる既成のコンポーネントを提供します。これらのコンポーネントは、デザイナーの好みやニーズに合わせてカスタマイズすることができます。

もっと知りたい方はこちら

自動化

Automater

Automater は、基本的なユーティリティと高度なユーティリティのコレクションで、継続的に成長しています。拡張性に優れ、使い慣れたアクションに素早くアクセスできることに重点を置いています。

以下の方法でサポートできます

いいね！ 🥰する
💬コメント
🎉 シェア
☕️ コーヒーをおごることを検討する

MacOS のおすすめショートカット

Command Control Option C - 選択範囲をコピーする
Command Control Option S - コピーされたインスタンスを入れ替える
Control . - 次の兄弟を選択
Control , - 前の兄弟を選択

既知の問題
前回のチェックで見逃していた、いくつかの厄介なバグがあることに最近気づきました。

[修正可能] インタラクティブコンポーネントの接続を貼り付けると、エラーが発生する。
[不明】グループ内のインスタンスをフラット化する際に、非常にエッジケースなシナリオでもエラーが発生する。
[修正済み] 次の兄弟、前の兄弟を選択すると、期待通りに動作しないことがある（グループ内の選択の最初の子ではなく、グループからの最初の子を選択してしまう）

❤️Automator

スーパーチャージ Figma

ドラッグ＆ドロップのカスタム・オートメーションにより、Figma の時間的制約のあるタスクをワンクリックで実行できます。

パワフルなアクション

Figma プラグイン API のパワーを指先で操作できる 100 以上のアクションから選択できます。

❤️Component Page

コンポーネント(Sketch で作成するようなもの)を作成し、専用の "Components" ページに配置します。

その仕組み:

1.選択する
2.プラグインの "Make Component" 関数を実行する
3. インスタンスを残して、コンポーネントページに新しいマスターコンポーネントが作成されます。

このオプションを有効にすると、選択範囲から複数のコンポーネントを一度に作成することもできます。

また、このプラグインには "Collect stray components" という 2 次的な機能があります。この機能は、専用のコンポーネントページの外にあるすべてのマスターコンポーネントを見つけ出し、インスタンスを残してそのページに移動させるものです。

Component Cloner

コンポーネントで作られたアイデアを、既存のものをいじらずに反復し、そのインスタンス間でバリエーションをコピーしたいと思ったことはありませんか？

コンポーネントクローナーを使えば、コピーしたいコンポーネントのインスタンスを選択すれば、元のマスターコンポーネントの新しいコピーに割り当てられます。

また、コンポーネントのクローンを作成することもできます。

これで、テキストや画像などのバリエーションを、繰り返すことなくインスタンスに残すことができます。

❤️Figma Autoname

ワンクリックですべてのレイヤーの名前を変更。AI に感謝。

フリー＆オープンソース。

❤️Lui for Figma

Figma のコマンドライン。新しいオブジェクトをわかりやすく作成します。"make a new iPhone 12 frame with a red border"(赤い縁取りのある iPhone 12 のフレームを新しく作ってください)と言えば、Lui が作ってくれますよ。

Page Automator

"Figma で新しいプロジェクトを始めるとき、新しいページをひとつひとつ手作業で追加するのは面倒？"

Page Automator は、1 クリックで複数のページを自動作成することで、この問題を解決します。

あなただけのページオートメーターを作りましょう。

ページのリストを指定して、自分だけのページオートメーターを作ることができます。作成したオートメーターは、あなたのパソコンにも保存されます。

たくさんのサンプル付き

このプラグインがどのように動作するかを始めるために、組み込みのページオートメーターをブラウズします。

PDF to Figma

ドラッグ＆ドロップで PDF ファイルを Figma に取り込めます

このプラグインは、PDF ファイルを画像として挿入します。最大 4080 x 4080 px、1 ページにつき1枚の画像を挿入します。

今後の作業＆サポート

レイヤーや SVG などを保持したまま、PDF を挿入する機能を開発中です。大きな課題ですが、近日公開予定です。
もし、PDF の挿入に失敗する場合は、Twitter の @GuamHat に DM を送るか、詳細をコメントに残してください。

Photo Copier

モバイルから Figma へ、シームレスに写真をコピー。アプリのスクリーンショット、メモの写真、フィールド・スタディでのスナップなど、Photo Copier プラグインを使えば、Figma に写真をすばやく転送することができます。

ドキュメントはこちら

もし、このプラグインに何か問題があれば、001sanketkulkarni@gmail.com までご連絡ください。

今後のリリースですぐに来る:

複数の画像をアップロードする機能
認証コードの廃止

❤️Scripter

スクリプトを使って、ワークフローをスピードアップしたり、Figma API を使って実験してみましょう。Microsoft VS Code で使用されているのと同じエディタ・インフラストラクチャに支えられた Scripter は、実際のプラグインを書くことなく Figma Plugin API で遊ぶための楽しくて安全な環境を提供します。ただタイプして実行するだけです。

-> スクリプトは自動的にコンピュータに保存されます。
-> スクリプトを Figma ファイルに保存、読み込み、共有することができます。
-> コード補完機能により、API をナビゲートすることができます。
-> 出力とエラーの即時フィードバック
-> 例題と Figma Plugin API 定義のコピーが付属しています。
-> await/async をトップレベルで実現。
-> timer() による非同期タイマ。
-> animate() によるアニメーション。
-> ノードタイプガードのような多くの便利な関数が組み込まれています。

注意：現在、Safariでは動作しません。

整理

FigDone

不必要なコンポーネントやステッカーでキャンバスを汚すことなく、デザインのステータスを可視化するためのクリーンな方法です。

3 つのステップでスタート

プラグインを起動する
キャンバス上、またはプラグイン内でフレームを選択します。
ステータスを変更する

主な機能

⭐️ NEW: 美しいダークモードは Figma のインターフェイスにマッチする
⭐️ NEW: セクション内のフレームを検出する
プラグイン内のフレーム名をクリックすることで、キャンバス上のフレームを見つけることができます。
上部の "All" ドロップダウンをクリックすると、ステータスをフィルタリングして概要を見ることができます。
FigDone は、キャンバス上のフレームを常に最新に保ちます。

FigDone は、フレーム名に絵文字を追加して、そのステータスを表示します。軽量なシステムなので、フレームのステータスがわからなくなることはもうありません。

チームメイトを誘って、FigDone を一緒に盛り上げましょう🤝!

❤️Frame Tags

Frame Tags は、フレームやコンポーネントの上部にタグを追加することで、デザインの段階を簡単に表示することができます。これにより、注意が必要な箇所を簡単に共同作業者に伝えることができます。

現在、以下のタグの一覧から選択することができます。

下書き
承認済み
完了
作業中
必要なコンテンツ
要調査
要承認
改訂版
保留
レビュー準備中
開発準備中

使用方法:

タグを追加したいフレームやコンポーネントを選択します。
Frame Tags プラグインを実行します。
プリセットタグを使用する場合、これで完了です。
Frame Tags UI を使用する場合、タグ、サイズ、色を選択します。
タグの作成'をクリックします

ロードマップ:

既存のフレームに新しいタグを追加する場合、上に別のタグを追加するのではなく、古いタグを置き換えます。
独自のタグを追加する機能
スウォッチにカスタムカラーを保存する機能

❤️Interactive Page Index

ページからクリック可能な目次を生成し、デザインファイルを中央のインデックスからナビゲートすることで、より分かりやすくなります。

Propstar

バリアントとコンポーネントのプロパティのあらゆる組み合わせを含む、コンポーネントのすべての可能なインスタンスを生成し、すべて整然としたラベル付きテーブルに表示します。

テーブルの作成

1 つまたは複数のコンポーネントまたはコンポーネントセットを選択します。
Propstar を実行します。
これで完了です。インスタンスの表はコンポーネントの後ろに生成され、可能なすべてのインスタンスと一緒にメインコンポーネントを表示します。

順番の変更
テーブル上のインスタンスの順序を変更するには、右側のサイドバーにあるコントロールを使って、Figma 上でプロパティと値を直接並べ替えます。

デフォルトのバリアントのプロパティ値は、主要なコンポーネントが左側に留まり、生成されたインスタンスがテーブルの残りの部分に広がるように優先順位が付けられます。

Figma は現在、バリアントとコンポーネントのプロパティの順序を入れ替えることはサポートしていません。

コンポーネントプロパティの使用方法
新しいコンポーネントプロパティの使い方と、維持する必要のあるバリアントの量を減らすための詳細については、Create and use component properties のヘルプ記事を確認してください。

❤️Quantizer

選択したレイヤーを列方向に素早く整列・再配置するためのプラグインです。

使用方法

2 枚以上のレイヤーを選択します。また、グループまたはフレームを 1 つだけ選択した場合、プラグインはその子画面をすべて選択したのと同じように動作するので、手動で行う必要はありません（ただし、2 つ以上の子画像がある必要があります）。
列の数と行と列の間のギャップを選択します。ギャップ量も次回使用時に保存される。

3.3. "Change" をクリックするか、Enter キーを押します。完了です。

プロのヒント

プラグインはレイヤーの初期位置（上から下、左から右）を認識しているので、もう1つブロックを入れて残りを押し下げる必要がある場合は、その左上隅を正しい位置に置いてからプラグインを再実行します。
プラグインは、選択したレイヤーの合計を列の数として提案するので、すべてを1列に配置するのは特に簡単です。プラグインを呼び出してEnterキーを押すだけです。

❤️Spaciiing

2 つの要素間の固定間隔をワンクリックで簡単に設定できます。

カスタムスペーシング値対応

水平・垂直モード対応
2 つの要素が選択されている場合、下／右の要素の位置を調整するプラグインです。

もし何かサポート、バグレポート、機能要求が必要なら、 johnny.hsieh.12@gmail.com までご連絡ください。

❤️Swap

任意のオブジェクトを入れ替え。フレーム、グループ、レイヤー、何でも
オブジェクトのサイズと位置は元のままです。
ネストされたオブジェクトの処理

使用方法:

1.2つのオブジェクトを選択する
2.プラグインを使用する

shevenionov@gmail.com、お気軽に機能をご提案ください。ピース!

デザイン学習

Befront

Befront は、ステップバイステップのチュートリアルとインタラクティブなレッスンで、デザインとプロトタイプのスキルをゼロから進めることができる教育アプリケーションです。私たちの革新的なプラグインを使えば、Figma ですぐにデザインを学ぶことができます。非現実的でしょう？

有料コースでは、理論的なレッスンと実践的なレッスンの両方を Figma で行うことができ、Figma と Befront を常に切り替えて使う必要はありません。実践的なレッスンには必ず課題があり、その課題が正しいかどうかがシステムによって即座に自動チェックされます。また、エラーが表示されるため、変更すべき箇所をすぐに確認することができます。

常に最新の情報を提供します。機能、技術、トレンドを学び、求められるプロフェッショナルを目指しましょう。

ラーニングデザインは、こんなに簡単で便利なものではなかったのです。

Befrontについて詳しくはこちら https://befront.io

フィードバックや投稿はこちらで受け付けています:
URLが不正ですinfo@befront.io

Figma Tips

Figma Tips は、Figma でのデザインに関する短いチュートリアル・ビデオを見ることで、Figma でのデザイン・ゲームを向上させるためのプラグインです。

できること

Figma でチュートリアル・ビデオを見ながらデザインできる
ヒントをファイルに保存して、他の人とヒントを共有できます。
Twitter でヒントを共有
お気に入りのヒントをプラグイン内の保存リストに保存する

誰がTipsを作成しているのですか？

Figma Tip ビデオは、Figma のデザイナー・アドボケートが作成し、定期的に追加しています。もし、あなたのニーズに合ったビデオが見つからない場合は、毎週複数のヒントを追加しています。

アイデアをお持ちの方、バグが発生している方

あなたは私たちが今後のヒントビデオのためにカバーしたいトピックをお持ちの場合は、電子メール@ rogie@figma.com を私に送ってください。あなたがバグを見つけたり、このプラグインを改善するためのアイデアを持っている場合、私はすべての耳を持っている!

プラグイン制作の燃料はコーヒー - 私に一杯を購入する。

デザインシステム

Appearance

このプラグインは、選択したテーマからダーク/ライトのテーマを生成します。

外部ライブラリスタイルとローカルスタイルで動作します。

スタイル名の識別は設定から選択できます。デフォルトでは、明るいテーマには[day]、暗いテーマには[night]が使用されます。

🤓 どのように動作するのか:

スタイル名に[昼]と[夜]を使用します。例スタイル名[昼]/スタイル名[夜].
カラースタイルを適用します。
3.3. 任意のオブジェクトを選択し、「外観」→「ダークモード」または「外観」→「ライトモード」を選択します。

📔 外部ライブラリスタイルとの連携方法:

外部ライブラリファイルを開き、カラースタイル名に「昼」「夜」を使用する。例スタイル名[day]/スタイル名[night].
変更を公開する。
外観 → スタイルの保存を選択し、外部のカラースタイルをプラグインに保存します。
ライブラリーにリンクしている任意のファイルを開く。
カラースタイルを適用する。
任意のオブジェクトを選択し、「外観」→「ダークモード」または「外観」→「ライトモード」を選択します。

Color Designer

選択したレイヤーやローカルスタイルに基づき、シェード、ティント、カラーハーモニーを生成するプラグインです。また、2 色の間に段差のあるグラデーションを作成することもできます。

主な特徴:

色合い、シェード、カラーハーモニーの生成

プラグインは、ユーザー選択とローカルスタイルが統合されています

グラデーションジェネレーター

使い勝手の良さ

このプラグインは、ソリッドフィルのみに対応しています。

Color Kit

特定の色の濃淡の生成を支援するプラグインです。

カラースケールの作成に利用できる。

Layer Styles

ストローク、フィル、コーナーラジアス、エフェクト、パディング、レイアウトグリッド、レイヤーオペシティ、ブレンドモードなどのスタイルプリセットを保存して適用することができます。

レイヤースタイルの作成

Plugins > Layer Styles > Show Layer Styles
スタイルが既に適用されているフレームまたはシェイプを選択します。
プラグインウィンドウの右下にある＋をクリックします。

レイヤースタイルを適用する

レイヤースタイルを適用したいレイヤーを選択します。
リスト内のレイヤースタイルをクリックすると、そのスタイルが適用されます。

レイヤースタイルを更新する

レイヤースタイルを変更した後、そのレイヤースタイルが適用されているレイヤーを更新することができます。

プラグインを開く
レイヤースタイルを右クリック
更新]をクリックします。

レイヤースタイルをレイヤーから削除する

レイヤーをレイヤースタイルと関連付けない場合、レイヤースタイルを切り離すことができます。

レイヤースタイルを解除したいレイヤーを選択します。
プロパティパネルのプラグインで、"レイヤースタイルを解除" をクリックします。

注意: マイナスボタンをクリックすると、プラグインコマンドが削除されてしまうので注意してください。誤ってこの操作を行った場合、スタイルを再適用すると、レイヤースタイルを解除するオプションが再び表示されます。

Libriwi

独自の Figma コンポーネント・ライブラリを作成・共有する

Libriwi は、Figma のグループ、レイアウト、コンポーネントをワンクリックで簡単に作成・共有できる Figma 用プラグインです。あなたのデザインを、あなた自身、チーム、クライアント、または世界と簡単に共有することができます。

✅ 任意のコンポーネント、グループ、レイヤーをアップロードする

すべてのデザイン要素を1つの場所で整理することで、Figma ライブラリにある何百ものファイルを何時間もかけて探す必要がなくなります。

✅ 独自のコンポーネント・ライブラリーを作成できます

コンポーネント、グループ、レイヤーのプライベートまたはパブリックライブラリをゼロから作成したり、既存のものをインポートして、その上に構築することができます。

✅ 同僚、クライアント、または世界と共有する

自分自身、チームメンバー、クライアントなど、誰とでもデザインを共有できます。エクスポートの手順やメールでファイルを送信する必要はありません。あなたは、画面上のボタンをクリックするだけです。

✨ 何千もの高品質なデザインコンポーネントのライブラリが内蔵されています

Libriwi の内蔵ライブラリには、世界最高のデザイナーやクリエイターによる数千点を超えるアイテムがあり、Figma での次のプロジェクトに役立てることができます。

Register Text Styles Super Duper Fast !!!

こちらのファイルは、プラグインを利用してテキストステイルを簡単に素早く登録する方法について説明してあります。サンプルのテキストスタイルを用意しているので、そちらを複製してカスタマイズすることができます。

やり方

必要なプラグインをインストール
登録したいテキストスタイルを複製
プラグインを利用してテキストスタイルをまとめて登録
プラグインを利用してテキストスタイルのフォントを一括で変更
自分でスタイル名やフォントをカスタマイズしてつかってみてね✌️

story.to.design

Storybook または Backlight から完全な Figma ライブラリを生成し、同期することができます。

story.to.design は、Storybook から Figma にコンポーネントをインポートします。Storybook でコードが変更されると通知が届き、ワンクリックで Figma のコンポーネントを更新できます。面倒な作業を減らし、より多くの設計時間を確保できます。

その仕組み:

このプラグイン、story.to.design をインストールします。
空の Figma ファイルで、プラグインから "story.to.design" を検索するか、cmd + / で検索します。
ブラウザで、ストーリーブックを開き、URL をコピーします。
URLをプラグインに貼り付け、必要なコンポーネントとバリアントを選択し、'Import'をクリックします。
story.to.design は、コード化されたコンポーネントを Figma のネイティブ・コンポーネントに自動変換します。

なぜ story.to.design を使うのですか？

Figma で 100 以上のコンポーネントを手作業で作成する必要がありますか？コードを Figma コンポーネントに自動的に変換し、デザインで使用できるようにします。
開発者とのハンドオフを改善したいですか？ story.to.design は、Storybook から Figma へのすべてのコード更新をワンクリックで同期し、コードとデザインの間の不一致を少なくします。
デザインの質を高めたいですか？製品版とまったく同じ外観のコンポーネントを使用してデザインできます。
市場投入までの時間が短縮されます。UI ライブラリのすべてを 2 時間以内に準備できることを想像してみてください。

主な機能:

Storybook のストーリーが変わると、コンポーネントが同期されます
あらゆるストーリーフレームワークと連動
サブコンポーネントのインポート
状態をシミュレート
コンポーネントのプロパティとバリアントをサポート
プライベートストーリーブックもサポート

Theme Switcher

Figma Theme Switcher は、選択されたレイヤーに適用される 2 つのカラースタイルを簡単に切り替えることができます。

機能概要

Figma Theme Switcher は、ユーザーからの入力に基づき、マッチするカラースタイルを見つけ、それらを「切り替える」ものです。

例えば、テーマを「ライト」から「ダーク」に切り替えたい場合、現在の入力に「ライト」、ターゲットの入力に「ダーク」と入力し、「切り替え」をクリックします。選択されたレイヤーがすべて「ダーク」テーマに切り替わります。

キーワードは Light/Dark に限らず、カラースタイル名内の任意の場所に設定できます。

Light/Text/Primary => Dark/Text/Primary
Text/Primary (Light) => Text/Primary (Dark)
V1/Text/Primary => V2/Text/Primary

Figma Theme Switcher は、外部カラースタイルをプラグインストレージに保存することで、外部カラースタイルを使用することもできます。

基本的な使い方 (ローカルカラースタイル)

カラースタイルが現在のファイル内にある場合は、以下の手順で使用します。

Figma Theme Switcher を起動します。
レイヤーを選択します。
現在のテーマとターゲットフィールドに、一連のテーマを表すカラースタイル名の一部を入力します (例: 明るい/暗い)
スイッチ "をクリックします。

高度な使用法（外部カラースタイル）

カラースタイルが別のファイル（またはライブラリ）にある場合は、以下の手順で操作してください。

ターゲット・カラー・スタイルが定義されている Figma ファイルを開きます。
Figma Theme Switcher を実行します。
"Library Color Styles" タブに切り替えます。
"Save Color Styles from current file" をクリックします。
レイヤーを選択します。
現在のテーマとターゲットのフィールドに、一連のテーマを表すカラースタイル名の一部を入力します (例: ライト/ダーク)。
"Switch" をクリックします。

Tints and Shades

どんな色でも、明るい色と暗い色のバリエーションを生成できます。states に、あるいはあなたのデザインシステムに追加するために最適です。

❤️Typestyles

フォントサイズ、フォントファミリーなどを使って、テキストスタイルを瞬時に生成します。

このプラグインで何ができるのですか？

基本的には Textstyles を一括で生成します。

テキストスタイルを生成したい書体を選択します。

2.修飾子を選んで、テキストスタイルを分岐させます。

🌈 ヒント：font-family、size、weight のデフォルトラベルをカスタムラベルに置き換えることも可能です。

3.生成する!

でも、なんで？🤷♂️

さて......テキストスタイルを時々生成しなければならない場合、デザインツールではそれほど楽しいものではありません。すでに存在する、あるいはフォントのプロパティにバインドされているプロパティをクリックしたり、入力したりするのが本当に大変なんです。

デザインチェック

❤️Adee Comprehensive Accessibility Tool

無料
Adeeは、包括的で強力なアクセシビリティテストツールです。色のコントラストのテストと変更の適用、8つの色覚異常のシミュレーションとその生成、タッチターゲットの大きさをテストして様々なデバイスの標準を満たしていることを確認、テスト結果をチームで共有することができます!...などなど!

★特徴

Alt テキストジェネレータ
✓ Svg、Png、Jpg 画像の Alt テキストを生成します。
✓ 自動画像フォーマット検出。
✓ Alt Text を生成するために以下の情報を追加します。
◦ 画像がInformativeかDecorativeか
◦ 画像のタイトル
◦ 画像の説明
◦ コード/タグの推奨事項
✓ 一括追加、削除、並び替え、更新
✓ 生成してチームと共有
タッチターゲットサイズ基準チェッカー
✓ タッチターゲットのサイズが正しいか、以下の基準でチェックします。
アップルのタッチデバイス
Android タッチデバイス
ニールセン
WCAG
★★★ そして、基準と要件を満たすためのスマートな提案！あなたのデザインがタッチデバイス上でアクセス可能であることを確認するために。

どのように機能するのか:

タッチターゲットサイズタブ（手のアイコン）を選択
最初のドロップダウンメニューから、タッチターゲットサイズをテストするデバイスを選択します。
2番目のドロップダウンメニューから > タッチターゲットを選択します（ボタン、リンク、その他のハイパーリンクの種類など）。
テスト結果と、タッチデバイスでアクセス可能なデザインの推奨標準サイズが表で示されます。

Adee のタッチターゲット詳細説明書をチェック

色覚異常シミュレーター
✓ 8 種類の色覚異常をシミュレート
✓ 色覚異常
✓ モードとビューの比較
✓ 色覚異常ジェネレーター
✓ 白黒シミュレーション
✓ テスト結果をチーム内で共有

Adee Colorblind シミュレーターの詳しい使い方はこちら!

総合的なコントラストチェッカー
✓ WCAG ガイドラインに準拠しています。
できます。
✓ カラーコントラストを簡単に調整できます。
✓ レイヤーや色のスワイプ
✓ ライブプレビュー
✓ 元の色に簡単に元に戻す
✓ デザインに変更を適用
✓ 保存されたカラーとグローバルカラーへのアクセス
✓ テスト結果をチーム内で共有

Adee コントラストチェッカー詳細説明書をチェック!

フォント

❤️Font Fascia

文書内で使用されているすべてのフォントファミリーとスタイルをリストアップします。また、どのテキストレイヤーで使用されているか。

使用されているすべてのフォントが一目でわかるので、見落としを発見したり、フォントコレクションの整理整頓に便利です。

❤️Font Replacer

数回のクリックで、すべてのフォントスタイルを置き換えることができます。
テキストレイヤーを選択し、プラグインを実行します。

使用方法は？

テキストレイヤーを選択します。例えば、ページ内のすべてを選択（⌘ + A または Ctrl + A）するか、フォント置換を行いたいテキストレイヤーを含む特定のフレームを選択します。
Font Replacer Plugin を起動します。
既存のフォントファミリーとフォントスタイルから、新しいフォントに置き換えたいものを選択します。

特徴:

クイック検索
欠落しているフォントの置き換え
近日中に：テキストスタイルの置き換え
クイックバーによる使用

このプラグインは、使用中のフォントファミリーとスタイルの概要を表示します。それから、既存のデザインで新しいフォントを簡単に試すことができます。これは、あなたが大規模なリデザインを行っているときに便利です、あなたのフォントの追跡を失うしたくないし、この素晴らしい新しいフォントがあなたのデザインをスパイスかもしれない方法を参照してください。

ワイヤーフレーム

❤️Ink Wireframe

Ink Wireframe プラグインは、ローファイなワイヤーフレームを作成することができます。

Ink Wireframe を使えば、コンポーネントを素早くドラッグ＆ドロップし、デザインのアイデアを思いつくことができます。Ink Wireframe プラグインは、ラピッドプロトタイピングのために 700 以上のユニークなバリエーションを備えています。

Ink Wireframe は、デザイナーとプロジェクトマネージャの両方にとって、学習曲線ゼロの直感的なプラグインです。Ink Wireframe は、ユーザーフローのプロトタイプ作成と迅速なイテレーションに役立ちます。

Ink Wireframe は、設計と反復のプロセスをスピードアップします。Ink Wireframe は、大規模なプロジェクトを迅速に出荷するのに適しています。このプラグインを使えば、デザイナーは早い段階でアイデアをテストすることができ、ミスの範囲を減らすことができます。

アイデア出しに集中し、本当に重要なことは何か、あとは Ink Wireframe が処理します。

その他

❤️Bunch description change

複数のコンポーネント/スタイルの記述を一度に変更することがそれが可能になりました。簡単なのに効果絶大ドキュメントリンクにも対応

Figma のリネームツール(CMD + R) をベースにした、パワフルでシンプルなプラグインです。いくつかのコンポーネントを選択し、プラグインを開くだけです。

検索と置換（必要であれば正規表現も使用可能）、またはすべての記述を変更することができます。また、増分（または減分）の数字、現在の説明、レイヤー名を使用して、最近使用した値のインポートをサポートしています。

コンポーネントの場合
ドキュメントワイドモードに切り替えて、ドキュメント全体のすべてのコンポーネントを変更することもできます。しかし、それは非常に強力なので、注意してください😄

スタイルについて
テキスト、カラー、エフェクト、グリッドスタイルなどの記述も変更できるようになりました。スタイル」タブに切り替えてください。

説明文がどのように表示されるかを確認するための素敵なプレビューを備えています。

Colors to Variables

やあ！これが僕の最初のfigmaプラグインだよ。このプラグインを使うと、ローカルなFigmaのスタイルを全てcss/scss変数として取得することができます。

このプラグインを作ったのは、私のフルタイムの仕事（Basework）で、たくさんの UI 開発を手がけているからです。そして、ほとんどすべてのデザインにFigmaが付属しています。そして、Scssに新しい変数を追加するのは本当に退屈なんです。

使い方は？

プロジェクトのローカルスタイルを作成する
エクステンションを開く
CSSまたはSCSSボタンを押す
そして、あなたの色をコピーします。

以上です。

Custom Frame Presets

カスタム寸法やその他の設定で、再利用可能な独自のフレームプリセットセットを作成できます。Figma にあらかじめ定義されているフレームサイズのデフォルトセットにこだわる必要はもうありません。

Figma でカスタムフレームのプリセットを追加するには？

上部のプラス（＋）アイコンをクリックして、プリセットの新しいコレクションを作成します（キーフィールドは空欄のまま）。次にグループ上の鉛筆（編集）アイコンをクリックして、独自のプリセットを追加したり、名前を編集します。コレクションを編集し終わったら、グループ名の近くにあるチェックマークアイコンをクリックします。

希望するプリセットをクリックすると、選択したすべてのフレームに適用されます。フレームが1つも選択されていない場合は、新しいフレームが作成されます。

このプラグインは、寸法だけでなく、色、効果、グリッド、エクスポート設定など、他のフレームのプロパティも保存します。また、作成したテンプレートはチームメイトやFigmaコミュニティと共有することができます。共有されたテンプレートをインポートするには、キーを入力し、プラスアイコンを押してください。

プラグインウインドウのサイズ変更

プラグインウィンドウにフォーカスがあるときに Cmd/Ctrl + 矢印キーを押すと、プラグインウィンドウのサイズを変更できます（サイズ変更がうまくいかない場合はウィンドウ内の任意の場所をクリックしてください） - Figma でオブジェクトのサイズを変更する方法と似ています。

既知の問題点

現在、すべてのテンプレートは、Figmaアプリまたはブラウザにローカルに保存されています。ブラウザのキャッシュを削除したり、アプリを再インストールしたり、Figmaからログアウトしたりすると、テンプレートが失われることがあります。
グループやテンプレートのリオーダーはまだできません。今後、要望が多ければこの機能を追加する予定です。

Detach Component

インスタンスをデタッチするように、コンポーネントやバリアントをデタッチできるシンプルなプラグインです。

コンポーネントやバリアントを一度作ると、もう元には戻れないという事実に悩まされたことはありませんか？メインコンポーネントやバリアントセットを選択し、このシンプルなプラグインを実行すると、インスタンスに対して行う "Detach Instance" と同じように、それらをフレームに戻すことができます。

複数のコンポーネントやバリアントセットをデタッチできますか？

もちろん可能です。好きなだけ選択して、プラグインを実行してください。

コンポーネントにインスタンスがある場合は？

インスタンスはそのまま残ります。また、インスタンスを右クリックし、"Main Component" —> "Restore Main Component" で復元することができます。

Emoji Reactions

Emoji ♡ Reactions を使えば、Figma ドキュメントに直接、絵文字や付箋、様々な反応をリアルタイムで残すことができます。チームメイトの仕事を褒め称えましょうまた、華麗に荒らすこともできます。

Emoji ♡ Reactions には、絵文字ステッカー、ライブ絵文字リアクション、付箋、チャットバブルが含まれています。

お楽しみに

Figma デスクトップ・アプリケーションのキーボード・ショートカットを追加することで、作業効率を上げることができます。

Mac の場合、Open System Preferences ▸ Keyboard ▸ Shortcuts ▸ App Shortcuts(システム環境設定 ▸ キーボード ▸ ショートカット ▸ アプリのショートカット)を開きます。
絵文字の反応」を追加し（Figma用／すべてのアプリ用）、「Cmd-Opt-M」に設定します（推奨）。
思い切ってエモーション

Gist

ドキュメントの作成、編集、リンク、公開

コンポーネントにドキュメントをアタッチします。Markdown エディタを使って美しいドキュメントを作成し、公開できます。コンポーネントを外部ドキュメントにリンク。作業ファイルを離れることなく、添付されたドキュメントを見ることができます。

ライティング
フレームまたはコンポーネントを選択し、ドキュメントを作成するためのエディタを開きます。Markdown を使用して、ヘッダー、リスト、画像などを追加し、ドキュメントをスタイリングします。

リンク
コンポーネントを外部の iframe、JSONBin、Github ファイル、Notion のページにリンクします。

公開
Github や JSONBin にリンクしたドキュメントを編集し、公開することができます。

閲覧
保存されたドキュメントを選択して、ドキュメントを閲覧することができます。

ドキュメント: https://docs.gist-plugin.com/

ロードマップ / フィードバック: https://gist.canny.io/

Guide Mate

Guide Mate は、あなたのデザインに複雑なガイドを簡単に追加できる Figma プラグインです。グリッドベースのデザインシステムとの相性は抜群です。

使用方法:

フレーム、グループ、またはシェイプを選択します。
プラグインメニューからガイドメイトを開く。
上部のショートカットパネルのアイコンをクリックして、左、右、上、下、中点のガイドを追加します。
フォームに詳細を入力し、「ガイドを追加」をクリックすると、カスタムガイドが生成されます。

詳細については、https://github.com/praneshr/guidemate をご覧ください。

制限事項:

少なくとも1つのフレーム、グループ、シェイプが選択されている必要があります。
複数選択はサポートされていません。代わりに、アイテムをグループ化してプラグインを使用することができます。
選択されたアイテムは、フレームの中に入っている必要があります。ページレベルガイドは未対応です。

バグがあった場合は、提供されたサポート URL で報告してください。

❤️Instance Utils

ネストされたインスタンスをデタッチすることなく移動させることができ、よりコントロールしやすくなりました。

Video Tutorial

Permute

コンポーネントやカラーパレットを使って、カスタマイズされた複数のバリエーションを作成できます。ワンクリックで簡単

簡単なデザイン
Permute は、インスタンスを使って、カスタマイズされた UI モックアップや可能なすべての状態を簡単に生成します。開発者のハンドオフやデザイン検討の時間を短縮します。

新しいパターンの高速テスト
デザインシステムで作業する際、パターンやコンポーネントを異なる UI フロー、モジュール性、バリアントプロパティなどでテストします。

ワークフローを強化
ユニークなビジュアルスタイル、イラスト、または 1,000 の NFT を数秒で作成できます。

100％無料
このプラグインは、完全に無料で使用することができます。登録も必要ありません。

Pixel Perfect

Snap to Pixel Grid をオンに戻すのを忘れましたか？問題ありません。ピクセルグリッドにスナップバックしたいレイヤーを選択すると、その位置とサイズが素敵な丸い数字に丸め直されます。

その仕組み:

Pixel Perfect を適用したいレイヤーを選択します。
Pixel Perfect は、選択されたフレームまたはグループのすべての子フレームに対して実行されるので、単純にトップレベルのフレームを選択すればよい。
プラグインを実行する
Pixel Perfect は、各レイヤーの X/Y 位置と幅と高さがフルピクセルになるように、位置とサイズを変更します: 200.45 ではなく、200
Pixel Perfect はデフォルトではシェイプのアンカーポイントに影響を与えませんが、この機能をオンにすると、Pixel Perfect は選択されたシェイプパスのアンカーポイントも移動させます。

❤️Selection Variants

選択中のすべてのネストされたバリアントとコンポーネントのプロパティを確認し、コントロールすることができます。ネストされたすべてのバリアントを探すためにクリックすることなく、バリアント間を切り替えることができます。ネストされたバリアントを作成することで、デザインシステムの複雑さを軽減することができます。また、リストやテーブルを扱うときに便利な、複数のオブジェクトを選択して一括でバリアントを切り替えることもできます。

オープンデザインファイル: https://figma.fun/uxf00U - 自由にコメントを追加してください!もし、このファイルを編集してあなたのアイデアを追加したい場合は、Figmaの電子メールアドレスを送っていただければ、編集用に招待します。

https://supa-snapshot.paperform.co