Untitled
unknown
plain_text
5 months ago
1.9 kB
3
Indexable
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);
Editor is loading...
Leave a Comment