Figma Learn
はじめに
enterto select ↑↓to navigate escto close

Figma Design

Design and prototype in one place

Dev Mode

Translate designs into code

FigJam

Collaborate with a digital whiteboard

Figma Slides

Co-create presentations

Figma Draw

New

Illustrate with advanced vector tools

Figma Buzz

Beta

Produce on-brand assets at scale

Figma Sites

Beta

Publish fully responsive websites

Figma Make

Beta

Prompt to code anything you can imagine

AI

Explore all Figma AI features

Work across Figma

Learn how Figma tools work together

Developer docs

Work with APIs, embeds, and more

すべてのユーザー向け

アカウント
  • 設定の管理
  • 基本設定の変更
ファイルとプロジェクト
  • ファイルブラウザの使用
  • ファイルとプロジェクトの管理
  • 共有と権限

管理者向け

請求
  • 概要
  • シートの管理
  • プランの管理
  • Figmaの支払い
チーム
  • チームの管理
組織
  • 概要
  • ログインと認証
  • Figmaの導入
  • メンバーとゲスト
  • チーム
  • ライブラリとリソース
エンタープライズ
  • 請求グループ
  • ワークスペース
  • セキュリティ機能

詳細を見る

コース

新規

包括的なスキルアップコースでFigmaのスキルをさらに磨きましょう。

プロジェクト

実用的な小型プロジェクトでFigmaの実践的な経験を積みましょう。

チュートリアル

エキスパートが指導する動画チュートリアルを見て、それに従うことで、ツールや機能を調べましょう。

解決策を得る

トラブルシューティング

一般的な問題の解決方法を調べたり、予期しない動作のトラブルシューティングを行います。

サポート依頼

バグレポートを送信し、ログファイルを収集するヘルプを得て、システム情報を見つけます。

よくある質問

よくある質問への答えを確認します。

Figmaコミュニティフォーラム

コミュニティに質問し、アイデアを共有し、他のFigmaユーザーとつながります。

はじめに
製品 Figma Design Dev Mode FigJam Figma Slides

Figma Draw

New

Figma Sites

Beta

Figma Make

Beta

Figma Buzz

Beta
機能 AI Work across Figma Developer docs
すべてのユーザー向け アカウント ファイルとプロジェクト
管理者向け 請求 チーム 組織 エンタープライズ
詳細を見る コース プロジェクト チュートリアル
解決策を得る トラブルシューティング サポート依頼 よくある質問 Figmaコミュニティフォーラム

Figmaデザインの基礎知識

  • インターフェースツアー
  • デザインの作成
  • デザインシステムを構築する
  • 開発モード
  • プロトタイプ作成
  • インポートとエクスポート
  • ファイルでの共同作業
  • インターフェースツアー

    探す

    • FigmaデザインでのAIツールの使用
    • デザインファイルの詳細
    • Figmaの新UI: UI3のナビゲート
    • 右サイドバーで、デザイン、プロトタイプの作成、レイヤープロパティの確認を行う

    ファイルユーティリティ

    • Figmaデザインでのアクションメニューの使用
    • Figmaのキーボードショートカット
  • デザインの作成

    レイヤーの作成と編集

    • Figmaデザインのフレーム
    • シェイプツール
    • マスク

    レイヤーの操作

    • キャンバス上のオブジェクトの一括編集
    • 一致するオブジェクトの特定
    • 親、子、兄弟の関係
    • レイヤーとオブジェクトの選択
    • 配置、回転、位置の調整
    • 10件の記事をすべて表示

    テキストとフォント

    • すべてのテキストプロパティの設定
    • Figmaデザインへのフォントの追加
    • フォントの検索と適用
    • テキストへのリンクの追加
    • 箇条書きリストと番号付きリストの作成
    • 6件の記事をすべて表示

    色、グラデーション、画像

    • Figmaデザインでのカラーモデル
    • デザインファイルへの画像と動画の追加
    • 色選択機能でのペイントの適用
    • 画像と動画の一括追加
    • ブレンドモードを使用したユニークなエフェクトの作成
    • 6件の記事をすべて表示

    追加のプロパティ

    • シャドウまたはぼかし範囲エフェクトの適用
    • 角の半径とスムージングの調整

    オートレイアウトの使用

    • オートレイアウトのプロパティを調べる
    • デザインへのオートレイアウトの追加
  • デザインシステムを構築する

    スタイル

    • 色、テキスト、エフェクト、レイアウトグリッドのスタイルの作成
    • スタイルの管理と共有

    コンポーネント

    • デザインで再利用するためのコンポーネントの作成
    • バリアントの作成と使用
    • バリアント付きのインタラクティブコンポーネントを作成
    • コンポーネントのプロパティを調べる
    • コンポーネントプロパティの作成と管理

    バリアブル

    • バリアブルとスタイルの違い
    • Figmaでのバリアブルに関するガイド
    • バリアブル、コレクション、モードの概要
    • バリアブルの作成と管理
    • バリアブルモード
    • 6件の記事をすべて表示

    ライブラリの作成と共有

    • Figmaのライブラリに関するガイド
    • ライブラリの公開
    • 公開済みコンポーネントの移動

    ライブラリの使用

    • スタイルとコンポーネントライブラリの入れ替え
    • コンポーネントインスタンスの作成と挿入
  • 開発モード

    インターフェースツアー

    • Dev Modeのガイド
    • Dev Modeでのデザインのナビゲーション
    • 管理者向けDev Mode

    デザインのインスペクト

    • インスペクトガイド
    • Dev Modeでの変更内容の比較
    • 開発モードでの測定値の追加とデザインへのアノテーション付け
    • Dev Modeのバリアブル

    デザインからコードへ

    • Code Connect
    • Dev Modeでのコードスニペットの利用
    • Dev Modeでレイヤーに開発リソースをリンクする
    • VS Code連携

    組織全体の開発モード

    • Dev Mode のステータスと通知
    • 開発モードのフォーカスビュー
    • Dev Modeの開発準備完了ビュー
    • 組織のDev Mode設定の管理
  • プロトタイプ作成

    ガイド

    • Figmaのプロトタイピングのガイド
    • プロトタイプの状態管理
    • プロトタイプでアニメーションGIFを使用する
    • プロトタイプでの動画の使用
    • プロトタイプのトリガー
    • 7件の記事をすべて表示

    プロトタイプ作成

    • プロトタイプ作成時のセクションの使用
    • インタラクションの作成
    • プロトタイプフローの作成と管理
    • プロトタイプでオーバーレイを作成する
    • プロトタイプのスクロールおよびオーバーフロー挙動

    高度なプロトタイピング

    • フレーム間のスマートアニメートレイヤー
    • プロトタイプのバリアブルモード
    • 複数のアクションおよび条件付きアクション
    • プロトタイプで式を使用する
    • プロトタイプでバリアブルを使用する

    プロトタイプの表示

    • プロトタイプデバイスと背景の設定を指定する
    • プロトタイプを再生
    • モバイルデバイスでのプロトタイプの表示
  • インポートとエクスポート

    • Figmaデザインでのインポートに関するガイド
    • ファイルブラウザへのファイルのインポート
    • Sketchファイルをインポート
    • Figmaからのエクスポート
    • エクスポート形式および設定
  • ファイルでの共同作業

    コメント

    • Figmaでのコメントに関するガイド
    • ファイルへのコメントの追加
    • コメントの閲覧と管理
    • コメントの移動または編集
    • プロトタイプのコメント
    • 6件の記事をすべて表示

    マルチプレイヤーツール

    • ファイルの閲覧者履歴を確認
    • スポットライトを使用した、コラボレーターに対するプレゼンテーション

    分岐と結合

    • 分岐ガイド
    • ブランチを共有
    • ブランチの変更をレビューする
    • メインファイルにブランチをマージ
    • 未完了のマージまたはアップデート
ユースケース
  • UIデザイン
  • UXデザイン
  • プロトタイプ作成
  • グラフィックデザイン
  • ワイヤーフレーム作成
  • ブレインストーミング
  • テンプレート
  • リモートデザイン
詳細
  • デザイン機能
  • プロトタイプ作成機能
  • デザインシステム機能
  • コラボレーション機能
  • FigJam
  • 価格
  • エンタープライズ
  • 学生および教育関係者
  • 顧客
  • セキュリティ
  • 統合
  • お問い合わせ
リソース
  • ブログ
  • ベストプラクティス
  • サポート
  • 開発者
  • デザインを学ぶ
  • ダウンロード
  • 最新情報
  • リリース
  • 採用情報
  • Figmaについて
  • エージェンシーパートナー
  • 個人情報保護
  • ステータス
比較
  • Sketch
  • Adobe XD
  • Invision Studio
  • Framer
  • Windowsでのデザイン
  • Miro