Untitled
unknown
plain_text
6 months ago
2.2 kB
2
Indexable
const { widget } = figma; const { useEffect, AutoLayout, Text } = widget; import Button from "./components/Button"; function VenueTypeSelector() { useEffect(() => { const createComponent = async () => { const node = await figma.createNodeFromJSXAsync( <AutoLayout direction="vertical" spacing={16} width={400} > {/* Title */} <Text fontSize={16} fontFamily="Inter" fontWeight="medium" fill="#1E1D2B" > Venue type </Text> {/* Toggle Buttons Group */} <AutoLayout spacing={12} horizontalAlignItems="start" > {/* Everyone Button - Selected */} <Button label="Everyone" style="filled" state="default" size="medium" showText={true} fill="#6C5CE7" // Purple color for selected state cornerRadius={24} padding={{ top: 8, bottom: 8, left: 16, right: 16 }} /> {/* Female only Button */} <Button label="Female only" style="outline" state="default" size="medium" showText={true} stroke="#E1E4EA" fill="#FFFFFF" cornerRadius={24} padding={{ top: 8, bottom: 8, left: 16, right: 16 }} /> {/* Male only Button */} <Button label="Male only" style="outline" state="default" size="medium" showText={true} stroke="#E1E4EA" fill="#FFFFFF" cornerRadius={24} padding={{ top: 8, bottom: 8, left: 16, right: 16 }} /> </AutoLayout> </AutoLayout> ); figma.currentPage.appendChild(node); figma.viewport.scrollAndZoomIntoView([node]); }; createComponent(); }); return <Text>Venue Type Selector</Text>; } widget.register(VenueTypeSelector);
Editor is loading...
Leave a Comment