Untitled
unknown
plain_text
6 months ago
4.4 kB
3
Indexable
const { widget } = figma; const { useEffect, AutoLayout, Text, Frame, SVG } = widget; // Import components import Avatar from "./components/Avatar"; import Status from "./components/Status"; function ProfileWidget() { useEffect(() => { const createComponent = async () => { const node = await figma.createNodeFromJSXAsync( <AutoLayout direction="vertical" padding={24} width={400} spacing={16} fill="#1E1E1E" cornerRadius={16} > {/* Header Section */} <AutoLayout width="fill-parent" verticalAlignItems="center" spacing={16} > <Avatar size="l" style="full-image" /> <AutoLayout direction="vertical" spacing={4} width="fill-parent" > <Text fill="#FFFFFF" fontSize={24} fontWeight={600} > Damilare </Text> <Text fill="#94A3B8" fontSize={16} > @damilareoo </Text> </AutoLayout> {/* Message Icon */} <Frame width={40} height={40} fill="#FFFFFF" cornerRadius={12} > <SVG src={`<svg width="24" height="24" viewBox="0 0 24 24" fill="none"> <path d="M20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6C22 4.9 21.1 4 20 4ZM20 8L12 13L4 8V6L12 11L20 6V8Z" fill="#1E1E1E"/> </svg>`} width={24} height={24} x={8} y={8} /> </Frame> </AutoLayout> {/* Title */} <Text fill="#FFFFFF" fontSize={32} fontWeight={600} width="fill-parent" > Finances / Dark Mode </Text> {/* Tags */} <AutoLayout spacing={8} width="fill-parent" wrap={true} > {['minimal', 'ui', 'dashboard', 'saas', 'more...'].map((tag) => ( <AutoLayout padding={{vertical: 8, horizontal: 16}} cornerRadius={100} fill={{type: 'solid', color: {r: 1, g: 1, b: 1, a: 0.1}}} > <Text fontSize={16} fill="#FFFFFF" > {tag === 'more...' ? tag : `# ${tag}`} </Text> </AutoLayout> ))} </AutoLayout> {/* Action Buttons */} <AutoLayout width="fill-parent" spacing={24} verticalAlignItems="center" > {/* Like Button */} <SVG src={`<svg width="24" height="24" viewBox="0 0 24 24" fill="none"> <path d="M12 21.35L10.55 20.03C5.4 15.36 2 12.28 2 8.5C2 5.42 4.42 3 7.5 3C9.24 3 10.91 3.81 12 5.09C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.42 22 8.5C22 12.28 18.6 15.36 13.45 20.04L12 21.35Z" fill="#FFFFFF"/> </svg>`} width={24} height={24} /> {/* Back Button */} <SVG src={`<svg width="24" height="24" viewBox="0 0 24 24" fill="none"> <path d="M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z" fill="#FFFFFF"/> </svg>`} width={24} height={24} /> {/* Download Button */} <SVG src={`<svg width="24" height="24" viewBox="0 0 24 24" fill="none"> <path d="M19 9H15V3H9V9H5L12 16L19 9ZM5 18V20H19V18H5Z" fill="#FFFFFF"/> </svg>`} width={24} height={24} /> </AutoLayout> </AutoLayout> ); // Add the node to the current page figma.currentPage.appendChild(node); figma.viewport.scrollAndZoomIntoView([node]); }; createComponent(); }); // Base render return <Text>Profile Widget</Text>; } widget.register(ProfileWidget);
Editor is loading...
Leave a Comment