Untitled
unknown
plain_text
6 months ago
2.0 kB
2
Indexable
const { widget } = figma; const { useEffect, AutoLayout, Text } = widget; // Import required components import ProgressStep from "./components/ProgressStep"; function OnboardingProgressWidget() { useEffect(() => { const createComponent = async () => { const node = await figma.createNodeFromJSXAsync( <AutoLayout direction="vertical" spacing={8} padding={16} width={400} fill="#FFFFFF" cornerRadius={12} > {/* Header Section */} <AutoLayout direction="horizontal" spacing={16} verticalAlignItems="center" width="fill-parent" > <Text fontSize={18} fontFamily="Inter" fontWeight="semibold" fill="#1E1D2B" > Complete your onboarding </Text> {/* Progress Percentage */} <Text fontSize={24} fontFamily="Inter" fontWeight="bold" fill="#7857EE" > 14% </Text> </AutoLayout> {/* Progress Bar */} <AutoLayout width="fill-parent" height={4} fill="#F2F4F7" cornerRadius={2} > <AutoLayout width={56} // 14% of 400px height="fill-parent" fill="#7857EE" cornerRadius={2} /> </AutoLayout> {/* "COMPLETED" Label */} <Text fontSize={12} fontFamily="Inter" fontWeight="medium" fill="#71767F" > COMPLETED </Text> </AutoLayout> ); figma.currentPage.appendChild(node); figma.viewport.scrollAndZoomIntoView([node]); }; createComponent(); }, []); return <Text>Onboarding Progress Widget</Text>; } widget.register(OnboardingProgressWidget);
Editor is loading...
Leave a Comment