FigmaでのWebデザイン
美しくレスポンシブなWebデザインを作成
Figmaは、世界最高のWebサイトを共同でデザインする無料オンラインプラットフォームです。Figmaは、ワイヤーフレームからデザイン、プロトタイプ、開発まで、シームレスなWebデザインプロセスを実現します。

FigJamをご利用いただいているブランド
あらゆるデバイスに対応するレスポンシブWebデザイン
アイデアから実装までにかかる時間を短縮し、あらゆる場所で適切に機能するデザインを実現します。

適切なツールでデザインをスピードアップ
プロジェクトをすぐに開始して、オートレイアウト、コンポーネント、スタイルなどのツールを使用して、規模に応じた一貫したデザインを行いましょう。
開発前に命を吹き込む
ノーコードのインタラクティブなプロトタイプであなたのビジョンを披露しましょう。わずか数クリックで実環境のWebエクスペリエンスを再現できます。
デザインからライブサイトまでの時間を短縮する
開発モードは、ハンドオフを構造化し、開発者が必要なものを簡単に見つけられるようにします。
Webデザインの機能の詳細
最初から最後まで共同でビルドできる機能で、優れたWebエクスペリエンスをすばやくデザインできます。

UIキットとテンプレートを使ってみる
Figmaコミュニティが作成した無料のコンポーネントベースのワイヤーフレームキットで、Webサイトのデザインワークフローをスピードアップします

コラボレーターを招待する
部門をまたがるパートナーやステークホルダーを招待して、Webデザインにコンテキストに応じたコメントを追加して、すぐにフィードバックを得られるようにします。

デザインシステムをコードに整合させる
コンポーネントとスタイルを簡単に作成、維持、共有し、トークンを使用して、デザインファイルやコード全体で同じ言語を使用できます。

開発モードでビルド
Webデザインを明確にし、開発者がそれをコードに変換するために必要なツールを提供します。
職能にかかわらず、全員が1つの集約された場所で表示し、理解し、その対象に自分の成果を盛り込むことができます。
Lauren LoPrete氏、Dropbox社デザインシステム リード
Web開発者向けその他のリソース

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

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

Figmaのプロトタイピングガイド
Figmaのプロトタイピング機能の使い方を説明します。