Webサイト、プロダクトデザインに使える無料デザインツール
发布时间:2026-11-04 | 浏览:1
全体像のために。 すべてのピクセルまで完璧に。
自分のやり方で自由に作業できます。デザインシステムの構築、AIによる編集、細部の微調整など、どのスタイルにも対応します。
マルチプレイヤー対応のファイルで一緒に作業し、コメントでフィードバックを共有し、同じ共有スペース上でカーソルチャットを使ってチームメイトとやり取りできます。
クラス最高のレイアウトツールやタイポグラフィツールなどにより、デザインのあらゆる要素を自在にコントロールできます。
無限の表現を可能にする、無限のキャンバス。
描いて、アニメーション化して、思い描いた通りに形にできます。
モーションを追加 精密なアニメーションを作成し、再利用可能なモーションシステムを構築し、開発ですぐに使えるアニメーションをリリースできます。 Figma Motionについて詳しく見る
精密なアニメーションを作成し、再利用可能なモーションシステムを構築し、開発ですぐに使えるアニメーションをリリースできます。
豊かなイラストを描く ベクター編集でピクセルパーフェクトなデザインを作成できます。ベクターブラシ、詳細な線設定、塗りなどを活用できます。 Figma Drawについて詳しく見る
ベクター編集でピクセルパーフェクトなデザインを作成できます。ベクターブラシ、詳細な線設定、塗りなどを活用できます。
Figmaと対話する FigmaのAIエージェントに、新しいデザインの方向性の生成、テキストや画像の一括編集、デザインシステムの適用を指示できます。すべてキャンバス上で完結します。 AIワークフローについて詳しく見る
FigmaのAIエージェントに、新しいデザインの方向性の生成、テキストや画像の一括編集、デザインシステムの適用を指示できます。すべてキャンバス上で完結します。
構築前に、ユーザー体験を把握できます。
デザインにプロンプトを与え、形にします。そしてコードに裏付けられたプロトタイプとして、チームが見て、触れて、反応できる状態まで仕上げます。
プロンプト、デザイン、コードで編集 Figma Makeで高精度なプロトタイプをプロンプトで生成し、その後はデザイン、コード、プロンプトなど、好みの方法で細部を仕上げられます。 Figma Makeについて詳しく見る
プロンプト、デザイン、コードで編集
Figma Makeで高精度なプロトタイプをプロンプトで生成し、その後はデザイン、コード、プロンプトなど、好みの方法で細部を仕上げられます。
キャンバスでコードを使って検討する コードレイヤーを使用すると、キャンバス上でインタラクティブなプロトタイプを構築、洗練できます。方向性を検討し、ビジュアルを操作し、カスタムインタラクションをプロンプトできます。
キャンバスでコードを使って検討する
コードレイヤーを使用すると、キャンバス上でインタラクティブなプロトタイプを構築、洗練できます。方向性を検討し、ビジュアルを操作し、カスタムインタラクションをプロンプトできます。
あなたが愛用しているプロダクトは、Figmaでデザインされています
私たちは複数のツールではなく、すべてを1つの場所で作業しています。これはコンテキストの切り替えやコストの削減に役立ちますが、主に重視しているのはスピードと使いやすさです。Figmaには、私たちが必要とするものが揃っています。
The Economist、プロダクトデザイン責任者
95% 95 % フォーチュン500企業の95%がFigmaを使用しています
フォーチュン500企業の95%がFigmaを使用しています
2025年3月時点のデータに基づく。
業界最高のデザインシステムを構築しましょう。
組織全体が一貫して高品質なプロダクトを構築できる、唯一の信頼できる基盤を作れます。
意図を持ったデザインを標準に スタイル、コンポーネント、バリアブル、モードを標準化し、色から余白、モーションまで、あらゆる要素をプロダクトやブランド全体でシームレスにスケールできます。
スタイル、コンポーネント、バリアブル、モードを標準化し、色から余白、モーションまで、あらゆる要素をプロダクトやブランド全体でシームレスにスケールできます。
チーム全員が使えるシステム ライブラリ、コンポーネント、フォントなどを組織全体で共有し、単一ブランドでも複数ブランドでも、全員が同じ基盤から構築できるようにします。
ライブラリ、コンポーネント、フォントなどを組織全体で共有し、単一ブランドでも複数ブランドでも、全員が同じ基盤から構築できるようにします。
コードとデザインが連携して機能します。
すべてのデザインは、実際の本番環境で使えるコードと連携しています。意図したものをリリースすることができます。
デザインからコードへ、そしてまたデザインへ FigmaのMCPサーバーは、バリアブルやコンポーネントといったデザインコンテキストをエージェント型コーディングツールに提供するので、プロンプト、コーディング、直接のデザイン操作など、さまざまな方法で作成できます。 Figma MCPドキュメントを見る
デザインからコードへ、そしてまたデザインへ
FigmaのMCPサーバーは、バリアブルやコンポーネントといったデザインコンテキストをエージェント型コーディングツールに提供するので、プロンプト、コーディング、直接のデザイン操作など、さまざまな方法で作成できます。
細部まで、開発者の視点を Code Connectを使えば、デザインシステムをコードベースに直接接続でき、開発者は実際に動作するコードを取得できます。 Dev Modeについて詳しく見る
Code Connectを使えば、デザインシステムをコードベースに直接接続でき、開発者は実際に動作するコードを取得できます。
デザイナーに人気の強力な機能を多数搭載
Figma Motion 新規 タイムラインコントロールまたはエージェント支援でアニメーションを作成し、デザインシステムをモーション領域まで拡張し、開発対応のエクスポートとしてそのままリリースできます。 Figma Motionについて詳しく見る ガイドを見る
タイムラインコントロールまたはエージェント支援でアニメーションを作成し、デザインシステムをモーション領域まで拡張し、開発対応のエクスポートとしてそのままリリースできます。
Figma Weaveツール 新規 Figma内で、画像やベクターを直接生成するための事前構築済みAIワークフローを一覧から選択できます。 詳細はこちら
Figma内で、画像やベクターを直接生成するための事前構築済みAIワークフローを一覧から選択できます。
生成プラグイン 新規 Figmaエージェントを使って、キャンバス上で再利用可能な独自のプラグインをプロンプトから作成できます。作成したプラグインは組織全体で共有できます。 詳細はこちら
Figmaエージェントを使って、キャンバス上で再利用可能な独自のプラグインをプロンプトから作成できます。作成したプラグインは組織全体で共有できます。
シェーダー(ベータ) 新規 カスタムシェーダーのエフェクトやフィルを作成するプロンプトを入力し、Figma Makeやその他のプラットフォームへFigma MCP経由でエクスポートできます。 詳細はこちら
カスタムシェーダーのエフェクトやフィルを作成するプロンプトを入力し、Figma Makeやその他のプラットフォームへFigma MCP経由でエクスポートできます。
Figmaエージェント エージェントと連携して、デザインの生成やリミックス、煩雑な作業の自動化、デザインフィードバックの取得ができます。 AIワークフローについて詳しく見る ガイドを入手する
エージェントと連携して、デザインの生成やリミックス、煩雑な作業の自動化、デザインフィードバックの取得ができます。
MCPサーバー Figmaを外部ツールと連携させることで、AIエージェントがデザインを読み取り・参照し、ワークフローの一部として操作やアクションを実行できるようになります。 ドキュメントを入手する
Figmaを外部ツールと連携させることで、AIエージェントがデザインを読み取り・参照し、ワークフローの一部として操作やアクションを実行できるようになります。
ブラシ ブラシツールを使ってデザインファイル上に直接描画し、手描きのディテールや有機的で質感のある線を加えることができます。 詳細はこちら
ブラシツールを使ってデザインファイル上に直接描画し、手描きのディテールや有機的で質感のある線を加えることができます。
テクスチャー シャドウ、ぼかし、ノイズ、テクスチャ、ガラスなどのエフェクトを使って、あらゆるデザインに奥行きとディテールを加えられます。 詳細はこちら
シャドウ、ぼかし、ノイズ、テクスチャ、ガラスなどのエフェクトを使って、あらゆるデザインに奥行きとディテールを加えられます。
ベクターツール ベクター描画・編集ツール一式を使って、カスタムアイコンやイラスト、図形を作成できます。 詳細はこちら
ベクター描画・編集ツール一式を使って、カスタムアイコンやイラスト、図形を作成できます。
ベクター化 フラットで静的な画像を、数秒で編集可能かつスケーラブルなベクターに変換できます。 詳細はこちら
フラットで静的な画像を、数秒で編集可能かつスケーラブルなベクターに変換できます。
コンポーネント 再利用可能なUI要素を一度作成すれば、ファイル全体で使い回すことができ、デザインの一貫性を保ちながら簡単に更新できます。 ガイドを入手する
再利用可能なUI要素を一度作成すれば、ファイル全体で使い回すことができ、デザインの一貫性を保ちながら簡単に更新できます。
バリアブル 色、間隔、テキストなどの再利用可能な値を適用することで、変更内容がすべてのデザインに大規模に反映されます。 ガイドを入手する
色、間隔、テキストなどの再利用可能な値を適用することで、変更内容がすべてのデザインに大規模に反映されます。
スロット コンポーネントをデタッチすることなく、メニューのドロップダウンやモーダル、カードなどをカスタマイズでき、構造を維持したままコンテンツを柔軟に調整できます。 ガイドを見る プレイグラウンドファイル
コンポーネントをデタッチすることなく、メニューのドロップダウンやモーダル、カードなどをカスタマイズでき、構造を維持したままコンテンツを柔軟に調整できます。
デザインを確認する 新規 デザインシステムと照らし合わせて差分を確認し、ワンクリックで適切な修正を適用できます。 詳細はこちら
デザインシステムと照らし合わせて差分を確認し、ワンクリックで適切な修正を適用できます。
オートレイアウト コンテンツの変化に応じてフレームが自動的にリサイズ・再配置され、手動調整なしでデザインが適応されます。 ガイドを入手する プレイグラウンドファイル
コンテンツの変化に応じてフレームが自動的にリサイズ・再配置され、手動調整なしでデザインが適応されます。
グリッド Bento、カード、ギャラリーなどの柔軟なレイアウトを、間隔・サイズ・構造を細かく制御しながら構築できます。 ガイドを入手する プレイグラウンドファイル
Bento、カード、ギャラリーなどの柔軟なレイアウトを、間隔・サイズ・構造を細かく制御しながら構築できます。
マルチ編集 フレームやコンポーネントセットをまたいで複数のオブジェクトを選択し、まとめて編集できます。 詳細はこちら プレイグラウンドファイル
フレームやコンポーネントセットをまたいで複数のオブジェクトを選択し、まとめて編集できます。
分岐とマージ デザイン変更を独立したブランチで作業し、準備が整ったらメインファイルに統合することで、メインのファイルを妨げずに進められます。 ガイドを入手する
デザイン変更を独立したブランチで作業し、準備が整ったらメインファイルに統合することで、メインのファイルを妨げずに進められます。