Figma でデザイン、そのままデモ、そのまま実装！

## はじめに

:::note
この記事は社内勉強会用に書いたものです
:::

みなさん、デザインツールの Figma を使っていますか？

https://www.figma.com/ja/

私はまだ「使っている」と言えるほど使えていません

というわけで勉強会を開催して勉強します

## Figma とは

公式の紹介文は以下のとおりです

> デザインの追求からプロトタイプ作成、制作物のコーディングまで、Figmaはチームがコラボレーションして製品開発するためのプラットフォームです

本記事のタイトルと同じように、「デザインからデモ・実装までチームで製品開発できる」旨が書かれています

まさにその通りで、ブラウザ上で UI をデザインし、そのまま動かしてみることができ、最終的にはコードの生成までできてしまうツールです

![Figmaの画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/9c6b0634-192f-7bcd-ca86-bff64a9aeb06.png)

### Figma の人気

2022年に世界中のデザイン関係者を対象としたアンケートでも Figma は圧倒的な人気です
いずれのランキングでも2位の10倍以上の得票数になっています

- [メインで使っている UI デザインツール第1位](https://uxtools.co/survey/2022/ui-design)

- [メインで使っている基礎プロトタイピングツール第1位](https://uxtools.co/survey/2022/basic-prototyping)

- [メインで使っているデザインシステムツール第1位](https://uxtools.co/survey/2022/design-systems)

また、2023年に使ってみたいツールでも2位の3倍以上の人気で、これからもこの状況が続きそうです

https://uxtools.co/survey/2022/what-comes-next

### Figma の料金体系

こちらが料金表です

https://www.figma.com/ja/pricing/

まずは無料で使い始めることができます

無料でも個人用の下書き（Drafts）であればいくつでも作ることが可能です

また、下書きを他の人に閲覧してもらうことも可能です

ただし、下書きを編集できるのは自分だけなので、複数人で編集したい場合、チーム開発の機能を使う必要があります

#### 無料プランと有料プランの違い

無料のスタータープランでは **チーム内にプロジェクト（Figmaファイル）を３つまで、一つのプロジェクト内にページを3つまで** 作成できます

また、スタータープランでは他のユーザーと共有する際、 **リンクのURLだけでアクセス可能になってしまう** ため、秘密情報は扱えません

有料のプロフェッショナルプランでは **チーム内のプロジェクト数、プロジェクト内のページ数が無制限** になります

また、共有の際に **パスワード保護** を掛けることができます

![スクリーンショット 2023-10-16 20.10.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/4b28f119-b3b2-0d5b-463f-73a6082f92c7.png)

更に上位のビジネスプランでは複数チームを作成することができたり、SSOや認可などセキュリティ機能が強化されています

業務で使用する場合は有償プランを使いましょう

#### 課金体系

**編集者一人当たり** で課金されます

したがって、 **閲覧するだけのユーザーであれば課金されません**

特定の人だけが編集するのであれば料金を抑えることができます

## Figma のはじめかた

[Figma のトップページ](https://www.figma.com/ja/)右上の「無料で始める」をクリックします

![スクリーンショット 2023-10-16 20.25.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/0137185b-fb84-ef44-670e-c0f1f45a701b.png)

とりあえず使ってみるだけであれば「Googleで続行」で Google アカウントを使うのが簡単です

社内で使うのであれば社用メールを使ってアカウントを作りましょう

![スクリーンショット 2023-10-16 20.26.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/3c38088e-aa27-87f4-8981-9058e0fb33f5.png)

## Figma の使い方

Figma のデザインは「デザインファイル」の中に作っていきます

### デザインファイルの追加

上部メニューの「+デザインファイル」をクリックします

![スクリーンショット 2023-10-16 23.53.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/6a4ac7e1-0fd5-220d-9139-c0b794fec1f2.png)

以下のように空のデザインファイルが開きます

![スクリーンショット 2023-10-16 23.54.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/5d22ed52-f181-7da6-462b-444fbc408cea.png)

上部中央「無題」と書いてあるところをクリックすると、ファイル名が変更できます

### フレームの追加

左上の＃マークをクリックし、中央の灰色の領域上でドラッグするとフレームが追加できます

フレームは一つの画面（または画面の状態）をデザインする領域です

![frame.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/3e6f97db-0358-f9ea-31e7-d6a2b80cabdc.gif)

### 図形の追加

「＃」の右隣、四角形をクリックしてフレーム内でドラッグすると四角形が追加できます
（他にも直線や矢印、楕円、多角形などの図形が追加できます）

追加した図形は右メニューで色や丸みなどの属性を変更可能です

![rectangle.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/1feff9e0-2164-20bb-b4cc-91077a5ea1c2.gif)

### テキストの追加

上部メニュー「T」をクリックし、フレーム内で再びクリックするとテキストを追加できます

テキストも右メニューから属性を変更可能です

![text.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/3e2b0aa6-7019-eb0e-6ed6-5de9f11f25be.gif)

### コンポーネント化

複数の図形やテキストを選択して右クリック「コンポーネントの作成」でコンポーネント化することができます

コンポーネントをコピーすると、属性情報が共有された状態になります

![component.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/80042afa-362a-b534-9eee-33a8e3307967.gif)

### プロトタイプ（画面遷移デモ）の作成

右メニュー上部で「プロトタイプ」を選択します

その状態で図形の端をクリックすると、矢印が出てきます

矢印の先を別のフレームに接続します

上メニューの再生ボタン（▶️）をクリックすると、ボタンクリックで画面遷移するデモが実行できます

![prototype.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/92fed1ca-7ec8-f2d6-3df4-81f6100a2ec8.gif)

### コードの生成

上メニューの小さい図形が４つ集まっているアイコンをクリックし、プラグインを検索します

code と入力すると「Figma to Code」プラグインが表示されるので選択します

「Figma to Code」のダイアログが開き、その状態でフレームやコンポーネントを選択すると、選択したものが HTML などのコードに変換されます

![to-code.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/2d6b0c98-7e82-0219-70e4-1eae38209da7.gif)

## Figma から生成されるコードを活かす実装例

Tailwind CSS はスタイルを CSS ではなく HTML 内のクラス名で完結させるため、 Figma との相性が良いです

https://tailwindcss.com/

「Figma to Code」のダイアログで「Tailwind」タブを選択しておけば、そのままコードを貼り付けるだけで実装できてしまいます

もちろん、実際にはスタイルや要素の調整が必要にはなりますが、ある程度構造や属性ができた状態になるので効率的です

この辺りは Pines と同じ感覚ですね

https://qiita.com/RyoWakabayashi/items/c2d5db339e3bc4811deb

実際に使用する例として Phoenix と Nuxt の実装を紹介します

### Phoenix LiveView

#### Phoenix の前提条件

Elixir がインストールされていること

https://elixir-lang.jp/

#### Phoenix のインストール

以下のコマンドを実行し、 Phoenix をインストールします

```bash
mix archive.install hex phx_new
```

詳細はこちら

https://hexdocs.pm/phoenix/installation.html

#### Phoenix プロジェクトの作成

Phoenix プロジェクトを新規作成します

今回はとりあえず画面だけを見たいので、 DB は使わないように指定しています

```bash
mix phx.new phoenix_app --no-ecto
```

詳細はこちら

https://hexdocs.pm/phoenix/up_and_running.html

#### Phoenix へのコード反映

Phoenix LiveView は標準で Tailwind CSS に対応しています

テンプレートファイル（.heex）に Figma から出力したコードを貼り付けるだけです

`lib/phoenix_app_web/controllers/page_html/home.html.heex`

```heex
<div class="w-96 h-64 relative bg-white">
  <div class="w-40 h-12 left-[127px] top-[105px] absolute">
    <div class="w-40 h-12 left-0 top-0 absolute bg-fuchsia-600 rounded-3xl"></div>
    <div class="left-[42px] top-[10px] absolute text-white text-2xl font-normal font-['Inter']">ボタン</div>
  </div>
  <div class="w-40 h-12 left-[127px] top-[178px] absolute">
    <div class="w-40 h-12 left-0 top-0 absolute bg-fuchsia-600 rounded-3xl"></div>
    <div class="left-[42px] top-[10px] absolute text-white text-2xl font-normal font-['Inter']">ボタン</div>
  </div>
</div>
```

`http://localhost:4000` にアクセスすると、 Figma でデザインしたのと同じ画面が表示されます

![スクリーンショット 2023-10-17 11.36.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/affc3f91-86b5-2677-9cc1-a31e5ea02717.png)

### Nuxt.js (Vue.js)

#### Nuxt の前提条件

Node.js がインストールされていること

https://nodejs.org/ja

#### Nuxt プロジェクトの作成

Nuxt のプロジェクトを新規作成します

```bash
npx nuxi@latest init nuxt-app
```

色々な質問に適当に答えていくと、 Nuxt の最小限の構成が作成されます

詳細はこちら

https://nuxt.com/docs/getting-started/installation

#### Nuxt への Tailwind CSS 導入

公式サイトの手順に従い、 Nuxt プロジェクトに Tailwind CSS を導入します

https://tailwindcss.com/docs/guides/nuxtjs

以下のコマンドを実行し、依存パッケージのインストール初期化を実行します

```bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
```

`nuxt.config.js` を以下のとおり編集します

```diff_javascript
export default defineNuxtConfig({
- devtools: { enabled: true }
+ devtools: { enabled: true },
+ css: ['~/assets/css/main.css'],
+ postcss: {
+   plugins: {
+     tailwindcss: {},
+     autoprefixer: {},
+   },
+ },
})
```

`tailwind.config.js` を以下のとおり編集します

```diff_javascript
module.exports = {
- content: [],
+ content: [
+   "./components/**/*.{js,vue,ts}",
+   "./layouts/**/*.vue",
+   "./pages/**/*.vue",
+   "./plugins/**/*.{js,ts}",
+   "./app.vue",
+   "./error.vue",
+ ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

`assets/css/main.css` ファイルを以下の内容で作成します

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

#### Nuxt へのコード反映

`app.vue` の `<template></template>` 内に Figma から出力したコードを貼り付けます

```diff_html
<template>
- <div>
-   <NuxtWelcome />
- </div>
+ <div class="w-96 h-64 relative bg-white">
+   <div class="w-40 h-12 left-[127px] top-[105px] absolute">
+     <div class="w-40 h-12 left-0 top-0 absolute bg-fuchsia-600 rounded-3xl"></div>
+     <div class="left-[42px] top-[10px] absolute text-white text-2xl font-normal font-['Inter']">ボタン</div>
+   </div>
+   <div class="w-40 h-12 left-[127px] top-[178px] absolute">
+     <div class="w-40 h-12 left-0 top-0 absolute bg-fuchsia-600 rounded-3xl"></div>
+     <div class="left-[42px] top-[10px] absolute text-white text-2xl font-normal font-['Inter']">ボタン</div>
+   </div>
+ </div>
</template>
```

#### Nuxt 起動

以下のコマンドで Nuxt サーバーを起動します

```bash
npm run dev
```

`http://localhost:3000` にアクセスすると、 Figma でデザインしたのと同じ画面が表示されます

![スクリーンショット 2023-10-17 11.21.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/2bf5bc34-6349-3f22-a755-fd2325a112e1.png)

## その他のプラグイン

Figma には他にも様々なプラグインがあり、他サービスと連携して React や Vue のコードを生成することも可能です

本記事ではサインイン等が不要なものだけ紹介します

### html.to.design

既存の Web サイトを Figma にインポートできます

![スクリーンショット 2023-10-17 11.51.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/df079a6e-ef51-f1b2-6245-4098735ec349.png)

### Mockup

スマホなどの画面上に写っているように見せることができます

![スクリーンショット 2023-10-17 14.07.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/2995208f-b846-d78e-5eb4-451abb022342.png)

エクスポートすれば簡単に広告画像が作成可能

![iPhone 15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/6b561dc6-baab-7f33-e79b-62df82cc3d85.png)

### Split Shape

等間隔に分割できます

![split.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/b2e69255-81b6-ee20-f6fc-ac2dd4697c99.gif)

### Wave & Curve

キレイな波線や曲線を描くことができます

![curve.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/4d639e26-e271-db0c-ec81-b38b01868297.gif)

### Unsplash

フリー素材の画像を検索し、 Figma にインポートできます

![スクリーンショット 2023-10-17 11.58.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/741edb45-7748-7ac5-fb5f-146f84439a7c.png)

### Iconify

無料アイコンを検索し、 Figma にインポートできます

![スクリーンショット 2023-10-17 12.00.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/20d763f1-2f0d-cdfd-767e-153455ae4d9e.png)

## まとめ

Figma を使うことで簡単にデザイン、デモ、実装ができました

ツールを使いこなして効率的に開発しましょう！