KinoFigma を使って Figma のデザインやプロトタイプ、Jamボード、スライドを Livebook に表示する

## はじめに

この記事は Figma Advent Calendar 2024 の 8 日目の記事です

https://qiita.com/advent-calendar/2024/figma-design

以前 Figma の記事を書いていたためか、 Figma の Advent Calendar に招待していただきました

https://qiita.com/RyoWakabayashi/items/7abf561dcd49d0884c86

せっかく招待していただいたので、 Elixir Livebook 用の Figma モジュールを作ってみました

実装したモジュールはこちら

https://github.com/RyoWakabayashi/kino_figma/tree/main

KinoFigma を使ったノートブックの実装例はこちら

https://github.com/RyoWakabayashi/elixir-learning/blob/main/livebooks/kino/kino_figma.livemd

## Livebook とは

Livebook はブラウザ上で Elixir や Erlang のコードを実行し、結果を視覚化できるツールです

https://livebook.dev/

例えば以下の画像のように、黒い枠（セル）の中にコードを書いて実行すると、そのすぐ下に結果が表示されます

![スクリーンショット 2023-07-26 9.59.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/61922a62-b29c-feac-a6f1-02058bcd359b.png)

実行した一連のコードは「ノートブック」という形式で保存され、他の人と共有することができます

Python の [Jupyter](https://jupyter.org/) のようなツールですが、より簡単に高度な UI/UX が実装できるようになっており、更に書いたコードをそのまま Web アプリとしてリリースすることまでできます

https://qiita.com/RyoWakabayashi/items/9cd0032d1bd4ddad5d6c

動画や 3D コンテンツを表示したり、 AI 機能も超簡単に組み込むことが可能です

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

https://qiita.com/RyoWakabayashi/items/8dc0a8a4e5473d3fb6f1

https://qiita.com/Alicesky2127/items/ca1471a593e6c10f1809

## デスクトップアプリのインストール方法

環境構築初心者の方はデスクトップアプリがオススメです

Windows や macOS であればインストーラーから簡単にインストールできます

Livebook 公式のトップページ "Install Livebook" ボタンから簡単にインストール可能です

https://livebook.dev/

![スクリーンショット 2023-07-26 9.13.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/8bd50b2a-0b44-d664-9072-dcae2e41a661.png)

[インストールページ](https://livebook.dev/#install)に遷移します

Mac か Windows か、自分のローカルマシンに合ったものをクリックします

![スクリーンショット 2023-07-26 9.14.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/ccfc5c6c-4e94-1344-58f7-788cfd24e73c.png)

### macOS の場合

[インストールページ](https://livebook.dev/#install)の "Mac (Universal)" をクリックします

"LivebookInstall-latest-macos-universal.dmg" というファイルがダウンロードされます

ファイルをダブルクリックすると、以下のように Finder が表示されます

![スクリーンショット 2023-07-26 9.18.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/98962adb-6fc2-9363-6496-f554d9063624.png)

"Livebook.app" を "Applications" にドラッグ&ドロップします

macOS の画面最下部にあるバー（Dock）の Lanchpad をクリックします

![スクリーンショット 2023-07-26 9.20.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/5073e755-4e93-2031-9e14-6815d68bbdb1.png)

表示されるアプリのアイコンから、 Livebook のアイコンをクリックします

![スクリーンショット 2023-07-26 9.20.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/78a19f52-ab8e-1a6d-622f-f241120dd715.png)

デフォルトのブラウザ（Chrome や Safari）で Livebook が開きます

![スクリーンショット 2023-07-26 9.24.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/3c720096-c19c-19ae-3ce8-e8530006b4e9.png)

インストール後、 "LivebookInstall-latest-macos-universal.dmg" は不要なので削除しましょう

### Windows の場合

[インストールページ](https://livebook.dev/#install)の "Windows" をクリックします

"LivebookInstall-latest-windows-x86_64.exe" というファイルがダウンロードされます

ファイルをダブルクリックすると、警告メッセージが表示されます

![スクリーンショット 2023-07-27 110139.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/727ba1a7-29d4-4633-e0c8-21830cfc4901.png)

「詳細情報」をクリックすると、実行できるようになります

![スクリーンショット 2023-07-27 110156.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/b72b0a07-7d05-a3ec-d619-44c26d270d86.png)

その後、再び警告メッセージが表示されることがありますが、そのまま実行します

以下のようにインストーラーが表示されたら "Install" をクリックします

![スクリーンショット 2023-07-27 110227.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/bf31486a-f565-46f4-8543-812ba95f588a.png)

インストール時、ネットワークに関する警告がでることがありますが、「許可する」をクリックしてください

インストールが完了したらインストーラーを閉じてください

デスクトップに Livebook のショートカット（アイコン）が作成されています

![スクリーンショット 2023-07-27 110839.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/3373ec0b-f227-7c8d-8831-cc4265ba87c7.png)

また、 Windows のメニューバーからも検索できるようになっています

![スクリーンショット 2023-07-27 111428.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/ccee7a23-6f23-5dbc-4c55-7976ed880e81.png)

Livebook のアイコンをクリックすると、ブラウザで Livebook　のホーム画面が開きます

![スクリーンショット 2023-07-27 111253.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/3cf2b6d1-06c5-b75d-7324-bfb603c28aed.png)

## KinoFigma の実行

### セットアップ

Livebook でコードを実行するため、新しいノートブックを作成します

ホーム画面右上の "+ New notebook" をクリックします

![スクリーンショット 2023-07-26 13.43.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/097060ca-3509-bcd6-b642-15439571dae6.png)

以下のような画面が開きます

![スクリーンショット 2023-07-26 13.49.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/5a1f8a8f-c25c-201c-527d-1f20e4aa30be.png)

"Notebook dependencies and setup" と書かれた枠の中をクリックすると、パッケージ追加のためのモーダルが開きます

"kino_figma" で検索して、 "+ Add" ボタンを押すと、インストール用のコードが生成されます

セルの左上 "Reconnect and setup" のボタンを押してコードを実行すると、 KinoFigma がインストールされます

![kino_figma_setup.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/79f180ff-9f08-81b5-927b-bf423518529d.gif)

モーダルを使わず、以下のコードを直接セルに貼り付けて実行しても OK です

```elixir
Mix.install([
  {:kino_figma, "~> 0.1.0"}
])
```

### デザインファイルの表示

TailwindCSS の公式 Figma を KinoFigma で開いてみます

https://www.figma.com/community/file/958383439532195363

デザインファイルをブラウザで開いたとき、 URL の赤枠部分がファイルの ID になっています

![スクリーンショット 2024-11-28 11.14.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/334033e9-f34a-faba-c17c-3c233c43a642.png)

`KinoFigma.design` にこの ID を指定します

```elixir
KinoFigma.design("Qb8fTiCItLCttOzhCE4VlF")
```

実行結果

![スクリーンショット 2024-11-28 11.19.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/a05d29f1-0906-9cc8-53c6-f4cb744c085b.png)

Livebook 上に Figma のデザインファイルが表示できました

### プロトタイプ

同じようにプロトタイプも表示、操作できます

Figma のサンプルプロトタイプを動かしてみましょう

`KinoFigma.proto` に表示したいプロトタイプの ID を指定します

モバイルのプロトタイプなので、高さを 800 に指定しました

```elixir
KinoFigma.proto("RxXox8sDzJlWSkNnXeg6DL", height: 800)
```

実行結果

![kino_figma_proto.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/cd16eb8c-2072-a154-8e2c-e67f6477977e.gif)

### Jam ボード

Jam ボードの場合は `KinoFigma.board` を使います

```elixir
KinoFigma.board("1aqYFaDXk0v0NoUZ2xFK8n", height: 600)
```

実行結果

![スクリーンショット 2024-11-28 11.26.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/84806b6f-e1ed-ef51-765b-117a63178799.png)

### スライド

スライドは `KinoFigma.slides` です

```elixir
KinoFigma.slides("mP1Htie9FKfb8RfEYs9KlK", height: 600)
```

![スクリーンショット 2024-11-28 11.28.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/77fe5174-b94f-417e-6bb4-b96dab68bc95.png)

プレゼンテーションモードで表示したい場合、 `KinoFigma.deck` を使います

![kino_figma_deck.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/28d80c94-749b-75e9-4427-51360d0d2af5.gif)

## 仕組み

Figma の埋め込み iframe を利用しているだけです

https://www.figma.com/developers/embed

実装は超シンプルになっています

https://github.com/RyoWakabayashi/kino_figma/blob/main/lib/kino_figma.ex

```elixir
defmodule KinoFigma do
  @moduledoc """
  A simple Kino for display Figma files on Livebook.
  """
  use Kino.JS

  def new(type, file_id, opts \\ []) do
    width = opts[:width] || "100%"
    height = opts[:height] || "450"

    iframe = """
    <iframe
      style="border: 1px solid rgba(0, 0, 0, 0.1);"
      width="#{width}"
      height="#{height}"
      src="https://embed.figma.com/#{type}/#{file_id}?embed-host=share"
      allowfullscreen
    ></iframe>
    """

    Kino.JS.new(__MODULE__, iframe)
  end

  def design(file_id, opts \\ []) do
    new("design", file_id, opts)
  end

  def board(file_id, opts \\ []) do
    new("board", file_id, opts)
  end

  def slides(file_id, opts \\ []) do
    new("slides", file_id, opts)
  end

  def deck(file_id, opts \\ []) do
    new("deck", file_id, opts)
  end

  def proto(file_id, opts \\ []) do
    new("proto", file_id, opts)
  end

  asset "main.js" do
    """
    export function init(ctx, iframe) {
      ctx.root.innerHTML = iframe;
    }
    """
  end
end
```

## まとめ

KinoFigma を実装して、 Figma ファイルを Livebook 上に表示しました

プレゼンテーションや情報共有に活用できそうです