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

FIGMAでのWeb開発

アイデアをWebサイトにすばやく移行

Figmaは、Web開発チームが協力してブレインストーミング、デザイン、ビルドをスピードアップするのに役立ちます。

開発モードの切り替え、CSSボックスモデル、プロトタイピングヌードルのグラフィック表現。スマイルフェイスも。開発モードの切り替え、CSSボックスモデル、プロトタイピングヌードルのグラフィック表現。スマイルフェイスも。

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

Netflix社ロゴPatagonia社ロゴStripe社ロゴSpotify社ロゴVercel社ロゴVercel社ロゴGithub社ロゴLinear社ロゴLinear社ロゴ

優れたWebエクスペリエンスを作るのは大変ですが、Figmaなら簡単になります。

Figmaを使用すれば、Webデザインチームと開発チームが1つのプラットフォームで協力できます。

思い描いたサイトを提供する

プロトタイピングにより、デザイナーはアニメーションやインタラクションを含むデザイン全体のビジョンを開発パートナーに伝えることができるため、やり取りや誤解を減らすことができます。

eコマースサイトのモバイル画面のアイコン、カラースタイル、書体、レイアウトスタイルを概説するパネル。eコマースサイトのモバイル画面のアイコン、カラースタイル、書体、レイアウトスタイルを概説するパネル。

デザインとコードの整合

コードに沿ったコンポーネントとスタイルを備えた共有デザインシステムを使用して、不整合を減らし、開発をスピードアップします。

エクスポートするアプリ製品の写真のライトモードとダークモードのビューエクスポートするアプリ製品の写真のライトモードとダークモードのビュー

ハンドオフを効率化

開発モードを使用すると、開発者はFigma内の専用スペースを利用でき、ビルドの準備ができているの要素を確認し、バージョン間の変更を比較し、デザイナーからのアノテーションを確認できます。

Web開発機能の詳細

「買い物かごに追加」ボタンコンポーネントのブーリアン型のプロパティのパネルビュー。「買い物かごに追加」ボタンコンポーネントのブーリアン型のプロパティのパネルビュー。

コンポーネントを コードに接続する

コンポーネントプロパティを使用して 、コンポーネントをカスタマイズしやすくし、Reactプロパティにマッピングします。

詳細情報

紫色の背景にFigJamのAsanaウィジェットを表現。紫色の背景にFigJamのAsanaウィジェットを表現。

技術スタックとの統合

FigmaファイルをAsana、Microsoft Teamsなどのツールに接続。便利な連携機能で作業が整理され効率よく進みます。

すべてのインテグレーションを見る

開発モード紫色のFigJamアイコン、青色のFigmaアイコン、緑色の開発モードトグルアイコンをつなぐ図。開発モード紫色のFigJamアイコン、青色のFigmaアイコン、緑色の開発モードトグルアイコンをつなぐ図。

カスタムワークフローの作成

タスクの自動化、デザインへのデータ取り込み、コラボレーション促進に役立つ、さまざまなプラグインとウィジェット。コミュニティによる、コミュニティのためのツールです。

プラグインを見る

職能にかかわらず、全員が1つの集約された場所で表示し、理解し、その対象に自分の成果を盛り込むことができます。

Levon Sharrow氏、Patagonia社のエクスペリエンスデザインディレクター

Patagonia社ロゴ
詳しい内容を読む

Web開発のベストプラクティスの詳細情報

マルチカラーの背景にFigmaのロゴ、黄色のカーソルチャットには「Sweeeeet!」と書かれているマルチカラーの背景にFigmaのロゴ、黄色のカーソルチャットには「Sweeeeet!」と書かれている

Figmaによる弊社Webサイトデザインシステムの構築

Figma社マーケティングチームによるfigma.com向けのデザインシステムの構築の事例をご紹介します。

記事を読む

Figmaのコミュニティで「web」を検索した結果。Figmaのコミュニティで「web」を検索した結果。

Web開発リソース

Figmaコミュニティが作成し、提供しているWeb開発のためのインスピレーション、ツール、テンプレートをご覧ください。

リソースを見る

開発者カーソルが緑色の円を選択し、デザインシステムライブラリ内のブランドカラーの16進コードを表示。開発者カーソルが緑色の円を選択し、デザインシステムライブラリ内のブランドカラーの16進コードを表示。

開発者のハンドオフを改善するためのガイド

専門家によるベストプラクティス集をご確認ください。

ガイドを入手する

FAQ