動画で基礎を学ぶ!
  • Figmaの使い方

    全 14 動画

  • Figma(フィグマ)とは

    01:03

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

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

    01:49

    Figmaのデザインファイルについて説明していきます。 ファイルの構成 Figmaのデザインファイルは、ウェブサイトやアプリのデザインを作成・管理す...

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

    02:26

    今回は、ボタンやカードなどの要素を規則的に並べるレイアウトを簡単に作成できる機能のオートレイアウトについて説明します。 要素をオートレイアウト化する ...

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

    00:46

    Figmaを始めるためには会員登録と初期設定が必要になります。以下の手順でFigmaの利用準備を進めていきましょう。 Figma用アカウントを作成しよう ...

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

    04:57

    今回は、Figmaのさまざまなツールの使い方について説明していきます。 ツールバーについて ツールバーは、デザイン作業においてよく使用されるツールが...

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

    05:03

    今回は、シェイプツールの使い方とスタイルの変更について説明していきます。 シェイプの作成 シェイプツールを選択長方形の横のドロップダウンをクリック...

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

    02:45

    今回は、テキストレイヤーの作成方法、そのコンテンツの変更、そしてテキストレイヤーのサイズ調整について説明していきます。 テキストの作成 テキストレイ...

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

    04:21

    今回は、デザインファイルの構造を整理し、効率的に進めるための基盤となるページとフレームについて説明していきます。 ページの概要 ページをは複数作成し...

  • Figmaのホーム画面の見方

    02:06

    今回は、Figmaのホーム画面の見方、その他の設定について説明します。 言語を日本語に変更する ホーム画面の説明の前にFigmaではデフォルトの言語...

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

    00:50

    今回は、デザインファイルの作成について説明します。 デザインファイルの作成 ホーム画面で新しいデザインファイルを作成する手順は以下の通りです。 ...

  • 会員限定書き出し

    01:13

    Figmaでは、作成したデザインを様々な形式で書き出すことができます。書き出し形式としては、PNG、JPEG、SVG、PDFなどが一般的です。 書き出し方...

  • 会員限定共有

    01:04

    Figmaは、複数のユーザーが同時に同じデザインファイルを編集できるリアルタイムコラボレーション機能を提供します。これにより、デザイナー、開発者、クライアントな...

  • 会員限定プロトタイプ

    03:58

    Figmaのプロトタイプ機能を使って、実際の動きに近いデザインをシミュレートすることができます。ここでは、フレーム間の遷移とボタンのホバーアニメーションの作り方...

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

    02:09

    Figmaのコンポーネント機能は、デザインパーツを効率的に管理・更新できる便利な機能です。ボタンやカードなどのパーツをコンポーネントとして作成しておけば、色やサ...