diff --git a/code.js b/code.js index 46ae19b..56821fe 100644 --- a/code.js +++ b/code.js @@ -45,40 +45,91 @@ figma.ui.onmessage = async (msg) => { }); 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(); + 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); + 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); + } 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 }); } - } - - } catch (error) { - figma.ui.postMessage({ type: 'error', message: error.message }); - } - break; + 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); diff --git a/ui.html b/ui.html index dcaf0d3..f9740a4 100644 --- a/ui.html +++ b/ui.html @@ -20,6 +20,7 @@ +