138 lines
4.6 KiB
JavaScript
138 lines
4.6 KiB
JavaScript
// 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;
|
|
|
|
case 'create-wireframe':
|
|
// Header
|
|
const header = figma.createRectangle();
|
|
header.resize(800, 80);
|
|
header.x = 100;
|
|
header.y = 100;
|
|
header.fills = [{ type: 'SOLID', color: { r: 0.9, g: 0.9, b: 0.9 } }];
|
|
header.name = 'Header';
|
|
figma.currentPage.appendChild(header);
|
|
// Header Text
|
|
const headerText = figma.createText();
|
|
await figma.loadFontAsync({ family: "Inter", style: "Regular" });
|
|
headerText.characters = "Header";
|
|
headerText.x = 120;
|
|
headerText.y = 130;
|
|
headerText.fontSize = 32;
|
|
figma.currentPage.appendChild(headerText);
|
|
// Content
|
|
const content = figma.createRectangle();
|
|
content.resize(800, 400);
|
|
content.x = 100;
|
|
content.y = 200;
|
|
content.fills = [{ type: 'SOLID', color: { r: 0.95, g: 0.95, b: 0.95 } }];
|
|
content.name = 'Content';
|
|
figma.currentPage.appendChild(content);
|
|
// Content Text
|
|
const contentText = figma.createText();
|
|
await figma.loadFontAsync({ family: "Inter", style: "Regular" });
|
|
contentText.characters = "Content";
|
|
contentText.x = 120;
|
|
contentText.y = 220;
|
|
contentText.fontSize = 24;
|
|
figma.currentPage.appendChild(contentText);
|
|
// Footer
|
|
const footer = figma.createRectangle();
|
|
footer.resize(800, 60);
|
|
footer.x = 100;
|
|
footer.y = 620;
|
|
footer.fills = [{ type: 'SOLID', color: { r: 0.85, g: 0.85, b: 0.85 } }];
|
|
footer.name = 'Footer';
|
|
figma.currentPage.appendChild(footer);
|
|
// Footer Text
|
|
const footerText = figma.createText();
|
|
await figma.loadFontAsync({ family: "Inter", style: "Regular" });
|
|
footerText.characters = "Footer";
|
|
footerText.x = 120;
|
|
footerText.y = 640;
|
|
footerText.fontSize = 20;
|
|
figma.currentPage.appendChild(footerText);
|
|
figma.viewport.scrollAndZoomIntoView([header, content, footer]);
|
|
break;
|
|
|
|
default:
|
|
console.log("Unknown message:", msg);
|
|
}
|
|
};
|