Prompt - V1
unknown
plain_text
6 months ago
1.4 kB
3
Indexable
Task: Create Figma widget components by importing and utilizing existing components Given: 1. Collection of pre-built TypeScript components 2. Sample code.tsx structure showing Figma widget implementation 3. Natural language query for desired functionality Steps to Process: 1. COMPONENT UNDERSTANDING - Analyze provided components: * Props and interfaces * Available styles and variants * Component functionality * Default behaviors 2. QUERY ANALYSIS - Break down the natural language query - Identify which components are needed - Determine component relationships and hierarchy - Plan layout and interactions 3. IMPLEMENTATION STRUCTURE Base structure to follow: ```typescript const { widget } = figma; const { useEffect, AutoLayout, Text } = widget; // Import only required components import ComponentA from "./components/ComponentA"; import ComponentB from "./components/ComponentB"; function WidgetName() { useEffect(() => { figma.ui.onmessage = (msg) => { // Handle messages }; }); useEffect(() => { const createComponent = async () => { const node = await figma.createNodeFromJSXAsync( // Compose components here ); figma.currentPage.appendChild(node); figma.viewport.scrollAndZoomIntoView([node]); }; createComponent(); }); return <Text>Widget Name</Text>; } widget.register(WidgetName);
Editor is loading...
Leave a Comment