メインコンテンツまでスキップ

Figmaでのプロトタイピング

リアルな体験をスピーディーに作成

Figmaのプロトタイピングツールを使用すると、忠実度が高く、コード不要のインタラクティブなプロトタイプを簡単にビルドして共有できます。デザインとプロトタイプのすべてをFigmaで行うことができます。

プロトタイプとして接続されたFigmaバウンディングボックス内の4つのシェイププロトタイプとして接続されたFigmaバウンディングボックス内の4つのシェイプ

FigJamをご利用いただいているブランド

Puma社ロゴSpotify社ロゴPatagonia社ロゴStripe社ロゴNew York Times社ロゴNetflix社ロゴ

開発前にデザインに命を吹き込む

コード不要のプロトタイプで完全なビジョンを表現し、開発者がエクスペリエンスのルックアンドフィールを推測で作業することがなくなります。

デザインとプロトタイプを1箇所で

コンテキストの中ですべてを編集します。すぐにキャンバス上でプロトタイプを再生、プレビューし、スピーディーにフィードバックを繰り返し、素早く発散します。

リッチでアニメーション化されたプロトタイプを数回のクリックで作成

インタラクティブコンポーネントでバリエーションを自動的に切り換え可能。アニメーションをより簡単に作成できます。

ボタンが選択され、高度なプロトタイプ作成機能のウィンドウが右側に開いているボタンが選択され、高度なプロトタイプ作成機能のウィンドウが右側に開いている

複雑なインタラクションをリアルに

バリアブル、条件付きロジック、数式を使用して、より少ないフレームで詳細なエクスペリエンスを作成します。

スピーディーでリッチなプロトタイプのためにビルドされた機能の詳細

事前構築済みのインタラクションを追加する

クリック時、ホバー中、スクロール中など、フレーム間のさまざまなインタラクションを定義できます。

例を見る

美しいトランジションの作成

スマートアニメートを使えば、似たオブジェクトを自動で動かして、パララックススクロールやタッチジェスチャなどの細かい動きをつけられます。

スマートアニメートの詳細

あらゆるスクリーンサイズのプロトタイプ

レスポンシブにサイズが変化する新しいプロトタイプビューアで、どのスクリーンサイズでもデザインを確認できます。

リッチメディアの追加

動画GIFや動画を含めると、Webサイトやアプリでリッチメディアを使った場合のユーザーエクスペリエンスを作成できます。

開発者が見れば、それは本物だとわかります。開発者は開発を始める方法をよく知っています。このプロトタイピングツールは、まさにエリートです。

Andrew Matthews氏、YETI社デザインディレクター

Yeti社ロゴ
動画を見る

プロトタイピングのベストプラクティスの詳細情報

Figmaのプロトタイピングガイド

Figmaでプロトタイピングを始める方法などを説明します。

ガイドを入手する

プロトタイピング文化が重要な理由

プロトタイピング文化を早期に製品開発プロセスに組み込むと、イノベーションが促進されます。

記事を読む

緑色の数字の5と、黒のストローク、青の矢印、紫色のカーソル。緑色の数字の5と、黒のストローク、青の矢印、紫色のカーソル。

プロトタイピングのワークフローを改善する5つの方法

プロトタイプをすばやく簡単に作成するためのお勧めのヒントを紹介します。

ヒントとテクニックを見る

FAQ