Widget Code Generator by Figma

Introduction · Figma Widgets

https://github.com/figma/widget-samples

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)}`;
};

—