Untitled

const { widget } = figma;
const { useEffect, AutoLayout, Text, Rectangle } = widget;

function ImageGalleryWidget() {
  useEffect(() => {
    const createComponent = async () => {
      const node = await figma.createNodeFromJSXAsync(
        <AutoLayout
          direction="vertical"
          padding={16}
          spacing={16}
          width={800}
          cornerRadius={16}
          fill="#000000"
          overflow="hidden"
        >
          {/* Top row */}
          <AutoLayout 
            width="fill-parent"
            spacing={8}
          >
            <Rectangle
              width={384}
              height={300}
              cornerRadius={8}
              fill="#D3D3D3"
            />
            <Rectangle
              width={384}
              height={300}
              cornerRadius={8}
              fill="#D3D3D3"
            />
          </AutoLayout>

          {/* Bottom row */}
          <AutoLayout 
            width="fill-parent"
            spacing={8}
          >
            <Rectangle
              width={384}
              height={300}
              cornerRadius={8}
              fill="#D3D3D3"
            />
            <Rectangle
              width={384}
              height={300}
              cornerRadius={8}
              fill="#D3D3D3"
            />
          </AutoLayout>

          {/* Caption */}
          <Text
            fill="#FFFFFF"
            opacity={0.8}
            fontSize={18}
            fontFamily="Inter"
            width="fill-parent"
          >
            Highlights the subject's surroundings, showing the full context and giving a sense of scale or isolation
          </Text>
        </AutoLayout>
      );

      figma.currentPage.appendChild(node);
      figma.viewport.scrollAndZoomIntoView([node]);
    };

    createComponent();
  });

  return <Text>Image Gallery Widget</Text>;
}

widget.register(ImageGalleryWidget);