Figmaを触ってみる

## はじめに

figmaのデザインファイルについて、基本的な使い方を学んだので備忘録として投稿します。

figmaバージョン：116.18.6
動作環境：macOS用デスクトップアプリ

#### 参考

https://web-design.school/tutorials/figma/getting-started



## アカウントの利用プランについて

当たり前ですがプランによって利用できる機能は異なります。
詳しくは[Figmaのプランと特徴](https://help.figma.com/hc/ja/articles/360040328273-Figmaのプランと特徴)をご覧ください。




## Team、Project、File について

チームでfigmaを利用する際は、Team、Project、Fileの構成に沿って作業を進めるのですが、デザイン作成する際はFileの中にPageを作り、その中で作業を行います。

figmaでは一つのTeamの中に複数のProjectを持つことができ、また一つのProjectの中に複数のFileを持てるようになっています。

ただし利用プランによってTeam、Project、Fileの持てる数が異なり、無料プランは一つのアカウントに対して一つのTeam、一つのProject、三つのFileしか持てないよう制限されています。

個人でfigmaを利用する場合はDraftで作業すればよく、その場合は1アカウントに無制限のFileを持つことが可能です。



## figmaの構成について

figmaのデザインファイルには、ツールバー、キャンバス、レイヤーパネル、プロパティパネルの４つがあります。

![スクリーンショット 2024-04-30 10.35.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581713/f0cb9a34-2638-f737-a6e7-afe2470283ac.png)

#### ツールバー

様々なデザイン要素をツールバーからキャンバスに呼び出します。
全てはここから始まります。

#### キャンバス

デザインはキャンバス上で作成します。
ドラッグ＆ドロップで直感的にデザインを組み立てることができます。

#### レイヤーパネル

キャンバスにデザインされたオブジェクトのレイヤーを可視化します。
同階層にあるオブジェクト同士は、より上のオブジェクトが優先してキャンバスに表示されます。


#### プロパティパネル

キャンバス上にあるオブジェクトの詳細設定をプロパティパネルから行います。
キャンバスのオブジェクトをクリックすることで、自動的にプロパティパネルが切り替わります。



## ツールバー

ツールバーの各機能について触れていきます。


### figmaアイコン

下キャプチャのfigmaアイコンを押下するとメニューが開きます。

ここからいろいろと設定が可能ですが、大体のことはツールバーの他機能やプロパティパネルから設定することが多いので、figmaアイコンから操作することはほぼないです。

![スクリーンショット 2024-04-30 11.15.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581713/0984a8f8-bf4e-5d49-bbc0-30232ecb42f4.png)


### 移動ツール

オブジェクトの移動や拡大、縮小を行います。

![スクリーンショット 2024-01-21 16.11.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581713/2135c749-ab5c-85de-ef89-5b1871816ef8.png)


#### 1. 移動

オブジェクトやフレームの移動ができます。

下キャプチャの移動、もしくはショートカットキー「 V 」を押下します。

![スクリーンショット 2024-01-21 16.12.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581713/f658923a-5c0f-8398-1adf-e405e830a25a.png)


#### 2. 拡大縮小

オブジェクトの拡大縮小ができます。

移動選択中でもオブジェクトの角をドラック＆ドロップすることでサイズ調整が可能ですが、図形とテキストを一括で調整するときはこの機能を利用する必要があります。

下キャプチャの拡大縮小、もしくはショートカットキー「 K 」を押下します。

![スクリーンショット 2024-01-21 16.22.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581713/fc53f1ae-9bb5-1972-8674-a29a5247bf6c.png)


### リージョンツール

デザイン上のグルーピングを行います。

![スクリーンショット 2024-01-21 16.42.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581713/6e63771c-b8ca-4197-9949-b758d7c7c632.png)


#### 1. フレーム

UI単位（iPhone 15、PCサイズなど）でオブジェクトをグルーピングする機能です。

オートレイアウトや制約を使って、Frame内にあるオブジェクトに対してレイアウトの調整を行うことができます。

下キャプチャのフレーム、もしくはショートカットキー「 F 」を押下します。

![スクリーンショット 2024-01-21 17.00.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581713/698c4866-767f-d465-e390-7f12b93f5fa2.png)


#### 2. セクション

デザインのグルーピングを行うことができる機能です。

セクションの目的は、figma上のデザインを整理し、編集者や閲覧者がデザインを確認しやすくすることになります。

下キャプチャのセクション、もしくはショートカットキー「 Shift + S 」を押下します。

![スクリーンショット 2024-01-21 17.05.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581713/d2a071a4-9db1-3a7e-51c7-4b75d4640d3d.png)

#### 3. スライス

スライスで範囲を選択すると、その範囲内でエクスポートをすることができます。

下キャプチャのスライス、もしくはショートカットキー「 S 」を押下します。

![スクリーンショット 2024-01-21 17.12.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581713/bd54bb41-98c7-c558-ea2f-d28bb4eda022.png)


### シェイプツール

図形を挿入します。

下キャプチャの通り、長方形・直線・矢印・楕円・多角形・星・画像/動画 が挿入可能です。

プロパティパネルのデザインタブから、細かいデザイン調整できます。

![スクリーンショット 2024-04-27 22.19.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581713/2a4303bf-2610-90a6-a1de-265506d87fb3.png)


### 作成ツール

自由に線を引いたり、図形を作成します。

![スクリーンショット 2024-04-27 22.27.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581713/deef3b92-2249-90b1-1148-7f37897d77d2.png)

#### 1. ペン

ノードと呼ばれる点と、ノード間に引かれたパスを用いて自由に図形を作成することができます。

直線的な図形だけではなく、ベジェ曲線を利用することで滑らかなカーブを描く図形を作成することも可能です。

下キャプチャのペン、もしくはショートカットキー「 P 」を押下します。

![スクリーンショット 2024-04-27 22.28.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581713/f4ab3c4f-4fca-f62c-f576-b0f65c9ce60c.png)

#### 2. 鉛筆

自由に線を引くことが可能です。

下キャプチャの鉛筆、もしくはショートカットキー「 Shift + P 」を押下します。

![スクリーンショット 2024-04-27 23.09.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581713/12aad73e-5394-9cc6-9afd-3b2b9d2f8fd9.png)


### テキスト

テキストの挿入を行います。

下キャプチャの T アイコン、もしくはショートカットキー「 T 」を押下します。

![スクリーンショット 2024-04-27 23.15.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581713/5d5643bd-e11f-9027-8c3a-d58cc0edc8ab.png)


### リソース

作成したコンポーネントのインスタンスを引き出したり、figmaの拡張機能を取り込むことができます。

![スクリーンショット 2024-04-30 9.02.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581713/fb4d2f77-4266-1ed6-0062-47f818098081.png)


#### 1. コンポーネントタブ

作成したコンポーネントのインスタンスを引き出します。

下キャプチャのように作成したコンポーネントが表示されますので、クリックしてインスタンスを引き出します。

![スクリーンショット 2024-04-30 9.06.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581713/fe1daa73-b686-6673-2275-0c6c287cd0d9.png)

#### 2. プラグインタブ

figmaの拡張機能をインストールすることができます。

フリー画像を取得できる「Unsplash」や、モックアップを手軽に作成する「Mockup」など、便利な機能がたくさんあります。

いろいろインストールして試してみてください。
[【2023年度版】Figmaのおすすめプラグイン20選！プラグインのインストール方法から使い方まで解説](https://noroshi.design/blog/figma-plugin)

![スクリーンショット 2024-04-30 9.19.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581713/5ff07a5c-65c1-64c8-4131-64f6704c1a98.png)

#### 3. ウィジェットタブ

キャンバス上にウィジェットを配置することができます。

付箋ツールやタスク管理ツールなどあるので、こちらもまずは自分で試してみてお気に入りのウィジェットを見つけましょう。

![スクリーンショット 2024-04-30 9.37.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581713/4df342b4-cb02-5a3e-df0f-15c992a227e6.png)


### 手のひらツール

キャンバスを移動する際に利用します。

ショートカットキーは「 H 」ですが、マウスパッドで2本指スライドによって移動できたり、スペースキー押下中は手のひらモードに切り替わるので、わざわざツールバーから切り替えることはないと思います。

![スクリーンショット 2024-04-30 9.46.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581713/40acf04a-19bf-6735-c7f1-332ab8bc5204.png)


### コメントの追加

キャンバス上にコメントを残します。

チームで作業する時はコメントによってコミュニケーションをとることができます。

また、「解決済みにする」のチェックアイコンを押下することで、キャンバス上のコメントを非表示にすることもできます。（解決済みのコメントを未解決に戻すことも可）

ショートカットキーは「 C 」です。

![スクリーンショット 2024-04-30 10.22.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581713/ce4a6fea-816e-7893-54c2-87881b042849.png)


### ツールバーの中央部

オブジェクトが選択されている場合はその要素が追加設定できる機能のアイコンが表示され、なにも選択されていない場合はデザインシステムのタイトルが表示されます。

コンポーネント化やオブジェクトの結合などはこちらから行うことができます。

#### オブジェクト選択時

![スクリーンショット 2024-04-30 11.31.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581713/cd1a64ea-b24e-8e92-51b0-5361e345652f.png)


#### オブジェクト未選択時

![スクリーンショット 2024-04-30 11.31.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581713/08cb6c1e-19a7-2484-9d62-36042b89db11.png)


### マルチプレイヤーツール

figmaを利用しているユーザをマルチプレイヤーツールで確認することができます。

![スクリーンショット 2024-04-30 11.41.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581713/06408394-875c-3f71-c231-9b48a2aa23c9.png)


### 共有ボタン

共有ボタンから、figma上にデザインされたものをURL形式で共有することができます。

編集権限や参照権限も変更可能なので、適切に外部への共有が可能です。

![スクリーンショット 2024-04-30 11.46.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581713/dd7b7ce7-f112-035a-079e-0e6358c6f450.png)



### 開発モード

有料になりますが、開発モードに切り替えることで様々な追加機能が利用可能になります。

[figma公式](https://www.figma.com/ja/dev-mode/)が「Figmaの開発モードは、開発者とデザイナーのコラボレーションを簡素化し、両者間の摩擦を軽減します。」と謳っているように、開発モードにすることで開発者がデザインを参照しやすいように工夫されたUIに切り替わります。

![スクリーンショット 2024-04-30 11.46.03のコピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581713/82b6b854-7338-303a-fe44-46123eb48f2e.png)


### プロトタイプビュー

作成したデザインのプロトタイプを起動します。

画面遷移やアニメーション等も表現可能なので、よりリアリティのあるデザイン確認が可能です。

![スクリーンショット 2024-04-30 11.46.03のコピー2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581713/021b428d-9f8a-3b57-2fb7-cb2b6992dc00.png)


### ズーム/表示オプション

表示倍率やピクセルグリッド等の設定が可能です。

![スクリーンショット 2024-04-30 11.46.03のコピー3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581713/7c02301e-af0a-90b2-a1ff-acb04881da9f.png)



## レイヤーパネル

レイヤーパネルの各機能について触れていきます。


### 検索

虫眼鏡アイコンから、オブジェクトの検索や置換が可能です。

![スクリーンショット 2024-04-30 12.23.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581713/584c0dd8-41a6-8323-fc0c-c0a43006bac4.png)


### レイヤー

キャンパスにデザインされた各オブジェクトのレイヤー確認ができます。

![スクリーンショット 2024-04-30 12.23.08のコピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581713/4970d967-7dc9-d4d0-6116-ea8ae358e6ee.png)


### アセット

作成したコンポーネントをアセットから呼び出すことができます。

![スクリーンショット 2024-04-30 12.23.08のコピー2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581713/5c994821-6cdc-9911-7988-6798564aaf31.png)


### ページ切り替え

一つのファイルに対して複数のページを作成することが可能ですが、ページの切り替えはこちらから行うことができます。

![スクリーンショット 2024-04-30 12.23.08のコピー3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581713/30733a35-24a5-721a-378c-848a6b77df51.png)



## プロパティパネル

プロパティパネルの各機能について触れていきます。


### デザイン

選択したオブジェクトの細かい設定をデザインから行います。

オブジェクトによってプロパティは異なりますが、たとえばサイズやカラー、配置の調整などが設定可能です。

![スクリーンショット 2024-04-30 12.48.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581713/68078947-2d92-5376-ed36-c2897f8c3452.png)


### プロトタイプ

オブジェクトをタップした際やマウスオーバーした際に、どのような挙動を行うかを設定することができます。

設定した内容を確認するときは、ツールバーのプロトタイプビューから行います。

![スクリーンショット 2024-04-30 12.48.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581713/9713b884-0405-65c6-6304-ac095d735b9e.png)



## おわりに

今回はデザインファイルについての全体像をざっくりと書きました。

オートレイアウトとか画像編集とかアイコン作成とかとか、身につけたいことが多すぎるのでまた別の機会にfigmaについて記事にしたいと思います。