プログラミングでFigmaを操作しよう！ —デザインにまつわる仕事を自動化する方法

デザインに貢献できる開発者になろう！ Figmaを通じたデザインの始め方　第4回

ウィジェットについて

　ウィジェットでできることはほぼプラグインと同じなので、違う部分だけをさらっと紹介して終わりにしたいと思います。

　ウィジェットの特徴は、なんと言ってもデザインファイル上にそのまま設置でき、それが他の人にも使えることです。

ウィジェットの特徴

　ウィジェットもプラグインと同様に、UIスレッドとサンドボックススレッドに分けて書くのですが、少し違うのはウィジェット自体もデザインファイル上に表示するためのUIを持っている点です。このUIのためのコードをサンドボックススレッド（と呼ぶのが正確なのかもはや分かりませんが）にも書いていきます。

　それをどう書くのか、という話ですが、面白いのがほとんどReactのような形で書くことです。下記のようにwidgetというグローバルなオブジェクトの中にAutoLayout、 Textなどの描画用コンポーネントがあるので、それをJSXと同じ形で書くことによってウィジェットのUIが表示できます。

const { widget } = figma
const { AutoLayout, Text } = widget

function AverageWidget() {

  return (
    <AutoLayout
      onClick={() => {
        // 何かする      
      }}
    >
      <Text>Hello</Text>
    </AutoLayout>
  )
}

　状態もReactとは微妙に違うのですがuseSyncedStateという関数を使って更新することができます。

const { widget } = figma
const { useSyncedState, AutoLayout, Input } = widget

function InputWidget() {
  const [text, setText] = useSyncedState("text", "")

  return (
    <Input
      value={text}
      placeholder="Type name"
      onTextEditEnd={(e) => {
        setText(e.characters);
      }}
      fontSize={64}
      fill="#7f1d1d"
      width={500}
      inputBehavior="wrap"
    />
  )
}

　書き方がReactっぽいだけで中身は違うので、ReactのUIライブラリは使えないのが、スタイリングする時の辛いポイントではありますが、書き慣れているフォーマットで書けるのはありがたいですね。

おわりに

　ここまでお読みいただきありがとうございました！

　Figmaをプログラマブルに操作する方法をいくつか紹介してまいりましたが、冒頭に述べた通りこういったことができるとエンジニアの生産性アップにもさまざまな場面で役に立ちますし、デザイナーの仕事の手助けになります。

　世の中には素敵な人たちがさまざまなプラグインを公開してくれてはいますが、自分たちの組織の個別要求に応えるためには自分たちでコードを書かなければいけないシーンは存外存在するものです。

　また、仕事だけでなく、Communityにも向けてプラグイン/ウィジェットを公開するのも楽しいのでぜひトライしてみてください。

　以上、これまで連載にお付き合いいただきありがとうございました！

　よきFigmaライフを送ってデザインにも興味を持ってみてください👋