Figma(フィグマ)とは

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

Figmaの会員登録と初期設定

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

Figmaのホーム画面の見方

今回は、Figmaのホーム画面の見方、その他の設定について説明します。 言語を日本語に変更する ホーム画面の説明の前にFigmaではデフォルトの言語が英語となっているので、必要に応じて言語を変更します。以下で日本語に変更する手順を説明し...

デザインファイルを作る

今回は、デザインファイルの作成について説明します。 デザインファイルの作成 ホーム画面で新しいデザインファイルを作成する手順は以下の通りです。 クイックアクションを使うホーム画面の右上にある「デザインファイル」ボタンを...

デザインファイルの構成を知る

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

各種ツールの使い方

今回は、Figmaのさまざまなツールの使い方について説明していきます。 ツールバーについて ツールバーは、デザイン作業においてよく使用されるツールが並んでいます。例えば、選択ツール、ペンツール、テキストツールなどがツールバーに配置...

シェイプの配置とスタイル

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

テキストの配置とスタイル

今回は、テキストレイヤーの作成方法、そのコンテンツの変更、そしてテキストレイヤーのサイズ調整について説明していきます。 テキストの作成 テキストレイヤーを新たに作成する場合、2つの方法があります。どちらの方法で作成するかによっ...

ページとフレーム

今回は、デザインファイルの構造を整理し、効率的に進めるための基盤となるページとフレームについて説明していきます。 ページの概要 ページをは複数作成し、異なるページごとに整理できます。例えば、ウェブサイトにはホームページ、アバウ...

オートレイアウト

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

コンポーネント

Figmaのコンポーネント機能は、デザインパーツを効率的に管理・更新できる便利な機能です。ボタンやカードなどのパーツをコンポーネントとして作成しておけば、色やサイズを変更したり、新しいバリエーションを作成したりといった操作を、一括で簡単に行う...

書き出し

Figmaでは、作成したデザインを様々な形式で書き出すことができます。書き出し形式としては、PNG、JPEG、SVG、PDFなどが一般的です。 書き出し方法は、以下の手順で行います。 デザインを書き出す 書き出したい要素を選択するまず、...

共有

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

プロトタイプ

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