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

動画で基礎を学ぶ!

Figma(フィグマ)とは

  • Figmaで出来ること
  • FigmaでWebデザインを始めよう

Figmaは、無料で使えるWebデザインツールです。
Webサイトの設計図である、デザインカンプの作成や、擬似的にWebサイトの動きを再現するプロトタイプなどを作成することができます。

Figmaで出来ること

  1. デザインカンプの作成

    デザインカンプは、Webサイトやアプリケーションの最終的な外観やインターフェースを具体的に示すために作成される静的な画像です。
  2. プロトタイプの作成

    プロトタイプは、デザインをただの画像ではなく、実際に動かせるようにする機能です。
    これを使うと、アプリやウェブサイトの実際の動きを擬似的に再現することができます。
  3. デザイン・プロトタイプの共有
    Figmaでは、デザインやプロトタイプを簡単に他の人と共有することができます。
    共有機能を使うと、チームメンバーやクライアントとリアルタイムでコラボレーションしたり、フィードバックをもらったりすることができます。

FigmaでWebデザインを始めよう

デザデジでは、Figmaを使ったWebデザイン制作を学習できます。

次のステップで、 Figmaを使う環境を整えてから、早速デザイン製作に取り掛かりましょう。

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デザインの作り方