// Zeige das UI-Fenster
figma.showUI(__html__, { width: 300, height: 400 });
// Nachrichten vom UI empfangen
figma.ui.onmessage = async (msg) => {
switch (msg.type) {
case 'create-rectangle':
const rect = figma.createRectangle();
rect.x = msg.x || 0;
rect.y = msg.y || 0;
rect.resize(msg.width || 100, msg.height || 100);
rect.fills = [{
type: 'SOLID',
color: { r: (msg.color && msg.color.r) || 0.2, g: (msg.color && msg.color.g) || 0.5, b: (msg.color && msg.color.b) || 1 }
}];
figma.currentPage.appendChild(rect);
figma.viewport.scrollAndZoomIntoView([rect]);
break;
case 'create-text':
const text = figma.createText();
await figma.loadFontAsync({ family: "Inter", style: "Regular" });
text.characters = msg.text || "Hello from AI!";
text.x = msg.x || 0;
text.y = msg.y || 0;
text.fontSize = msg.fontSize || 24;
figma.currentPage.appendChild(text);
figma.viewport.scrollAndZoomIntoView([text]);
break;
case 'get-selection':
const selection = figma.currentPage.selection;
figma.ui.postMessage({
type: 'selection-data',
data: selection.map(node => ({
id: node.id,
name: node.name,
type: node.type,
x: node.x,
y: node.y,
width: node.width,
height: node.height
}))
});
break;
case 'ai-generate':
try {
const response = await fetch('http://localhost:3001/api/generate-design', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ prompt: msg.prompt })
});
const result = await response.json();
for (const element of result.elements) {
if (element.type === 'rectangle') {
const rect = figma.createRectangle();
rect.x = element.x;
rect.y = element.y;
rect.resize(element.width, element.height);
rect.fills = [{ type: 'SOLID', color: element.color }];
figma.currentPage.appendChild(rect);
} else if (element.type === 'text') {
const textNode = figma.createText();
await figma.loadFontAsync({ family: "Inter", style: "Regular" });
textNode.characters = element.text;
textNode.fontSize = element.fontSize || 20;
textNode.x = element.x;
textNode.y = element.y;
figma.currentPage.appendChild(textNode);
}
}
} catch (error) {
figma.ui.postMessage({ type: 'error', message: error.message });
}
break;
default:
console.log("Unknown message:", msg);
}
};