WEBデザインを下層まで探せるWEBギャラリー・リンク集。
WEBサイト・LPを毎日更新していきます!

動画で基礎を学ぶ!

会員限定 デザインファイルの構成を知る

この学習動画は

会員限定!

月額¥11,000税込/月が
今だけ30日間無料で使い放題!

会員登録はこちら

Figmaのデザインファイルについて説明していきます。

ファイルの構成

Figmaのデザインファイルは、ウェブサイトやアプリのデザインを作成・管理するためのものです。
以下に主な要素を紹介します。

ツールバー

ツールバーは、デザイン作業においてよく使用されるツールが並んでいます。
例えば、選択ツール、ペンツール、テキストツールなどがツールバーに配置され、それらをクリックすることで対応する機能を利用できます。

  1. メインメニュー
    ファイル作成やインポートができます。
  2. 移動ツール
    オブジェクトの移動や拡大縮小ができます。
  3. リージョンツール
    フレームやセクションが作成できます。
  4. シェイプツール
    四角形や丸などの図形を作成できます。
  5. ペンツール
    パスを持った線を描画できます。
  6. テキスト
    テキストを追加・編集できます。
  7. リソース
    作成したコンポーネントやプラグインを確認できます。
  8. 手のひらツール
    キャンバスの上下左右に移動できます。
  9. コメントツール
    コメントの追加ができます。

この学習動画 / コンテンツの続きは

会員限定!

月額¥11,000税込/月が
今だけ30日間無料で使い放題!

会員登録はこちら

Figmaの使い方

全 14 動画

  • Figma(フィグマ)とは

    01:03

  • Figmaのインストールと初期設定

    00:46

  • Figmaのホーム画面の見方

    02:06

  • デザインファイルを作る

    00:50

  • 会員限定デザインファイルの構成を知る

    01:49

  • 会員限定各種ツールの使い方

    04:57

  • 会員限定シェイプの配置とスタイル

    05:03

  • 会員限定テキストの配置とスタイル

    02:45

  • 会員限定ページとフレーム

    04:21

  • 会員限定オートレイアウト

    02:26

  • 会員限定コンポーネント

    02:09

  • 会員限定書き出し

    01:13

  • 会員限定共有

    01:04

  • 会員限定プロトタイプ

    03:58
次のコースへ

Webデザインの作り方