FigJam Widgets development

Updated
Aug 5, 2022 6:28 AM
Created
Jun 5, 2022 6:30 AM
Tags
Attributes

Snippets

const Button = (args: { title: string; onClick: () => void }) => {
  return (
    <AutoLayout
      verticalAlignItems="center"
      height="hug-contents"
      padding={{ left: 24, right: 24, top: 12, bottom: 12 }}
      fill="#E6E6E6"
      cornerRadius={8}
    >
      <Text fill="#3c49d6" onClick={args.onClick}>
        {args.title}
      </Text>
    </AutoLayout>
  );
};

const VStack = (props: AutoLayoutProps) => {
  const composed = props;
  composed.direction = "vertical";
  return <AutoLayout {...composed} />;
};

const HStack = (props: AutoLayoutProps) => {
  const composed = props;
  composed.direction = "horizontal";
  return <AutoLayout {...composed} />;
};

Make url to Node

Add "enablePrivatePluginApi": true in manifest. It makes API returns fileKey figma.fileKey

const makeURLToNode = (node: BaseNode) => {
  return `https://www.figma.com/file/${encodeURIComponent(
    figma.fileKey
  )}?node-id=${encodeURIComponent(node.id)}`;
};

Figma からアイコンの画像を生成して GitHub の PR を作る Widget の作り方 - KAKEHASHI Tech Blog

こんにちは、Pocket Musubi エンジニアの関(@sekikazu01)と申します。 「あ〜アイコン大量に増えた時逐一画像を書き出して Icon コンポーネントに反映させるのめんどくせ〜〜〜」 そんな風に思った事はないでしょうか。私は思いました。 ので Figma のアイコンコンポーネントからコードに反映するまでのパイプラインを作りましたので、そのコードを公開していきます。 この記事はアイコンの生成の話ですが、一回作っておくと他にも画像だったりコンポーネントだったり諸々の生成パイプラインを作る時にも役立つと思います。 また、敬意を表すべくこのパイプラインを作るにあたって参考にさせていただいた先人の記事を紹介しておきます。 やっていることは 9 割方同じなのですが、デザイナーがアップデートした時に Figma から変更通知できるような Widget を作ってみたのが、この記事でオリジナリティがあるところです。 作ったものは大きく分けて次の3つがあります。 Figma API でアイコンの画像データを取得して書き込むスクリプトを作る それを GitHub Actions で実行できるようにする Figma の Widget で Figma のファイルから上記アクションを Webhook で実行できるようにする まずは Figma API でアイコンコンポーネントのデータを取ってきて、 /public/images/icons/ に SVG として書き出す & アイコンの名前の配列を書き出すスクリプトを書きます。 アイコンの書き方だったり、Figma からアイコンコンポーネントを取ってくる際のロジックはご自身のチームの開発スタイルや Figma の命名規則に合わせて適宜書き換えてください。 これを実行するためのコマンドを

Figma からアイコンの画像を生成して GitHub の PR を作る Widget の作り方 - KAKEHASHI Tech Blog