4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Last updated at Posted at 2024-11-28

はじめに

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

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

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

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

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

Livebook とは

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

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

スクリーンショット 2023-07-26 9.59.45.png

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

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

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

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

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

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

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

スクリーンショット 2023-07-26 9.13.35.png

インストールページに遷移します

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

スクリーンショット 2023-07-26 9.14.35.png

macOS の場合

インストールページの "Mac (Universal)" をクリックします

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

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

スクリーンショット 2023-07-26 9.18.17.png

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

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

スクリーンショット 2023-07-26 9.20.20.png

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

スクリーンショット 2023-07-26 9.20.32.png

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

スクリーンショット 2023-07-26 9.24.05.png

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

Windows の場合

インストールページの "Windows" をクリックします

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

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

スクリーンショット 2023-07-27 110139.png

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

スクリーンショット 2023-07-27 110156.png

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

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

スクリーンショット 2023-07-27 110227.png

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

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

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

スクリーンショット 2023-07-27 110839.png

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

スクリーンショット 2023-07-27 111428.png

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

スクリーンショット 2023-07-27 111253.png

KinoFigma の実行

セットアップ

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

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

スクリーンショット 2023-07-26 13.43.10.png

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

スクリーンショット 2023-07-26 13.49.22.png

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

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

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

kino_figma_setup.gif

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

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

デザインファイルの表示

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

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

スクリーンショット 2024-11-28 11.14.44.png

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

KinoFigma.design("Qb8fTiCItLCttOzhCE4VlF")

実行結果

スクリーンショット 2024-11-28 11.19.16.png

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

プロトタイプ

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

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

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

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

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

実行結果

kino_figma_proto.gif

Jam ボード

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

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

実行結果

スクリーンショット 2024-11-28 11.26.33.png

スライド

スライドは KinoFigma.slides です

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

スクリーンショット 2024-11-28 11.28.47.png

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

kino_figma_deck.gif

仕組み

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

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

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 上に表示しました

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

4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?