尝试ai生成figma设计

当听到用ai 自动生成figma设计时，不免好奇这个是如何实现的。在查阅了不少资料后，有了一些想法。参考了：在figma上使用脚本自动生成色谱
这篇文章提供的主要思路是：可以通过脚本的方式构建figma设计。如果我们使用ai 生成figma脚本。然后放到figma 中执行是不是就有可能生成设计图那？

使用ai生成脚本

使用如下提示词：
利用figma 控制台脚本能力，实现登录界面

生成的代码（改代码有一个错误，把错误交给chatgpt后，chatgpt修改代码后解决）：

// 首先，确保你已加载了正确的字体（如果没有加载，Figma API 会报错）
async function loadFont(fontName) {await figma.loadFontAsync({ family: fontName, style: "Regular" });
}// 创建一个简单的登录页面
async function createLoginPage() {// 加载必要的字体await loadFont("Roboto");// 创建框架const loginFrame = figma.createFrame();loginFrame.resize(320, 480); // 设置框架大小loginFrame.name = "Login Page";loginFrame.layoutMode = "VERTICAL"; // 垂直排列loginFrame.primaryAxisAlignItems = "CENTER"; // 垂直居中loginFrame.counterAxisAlignItems = "CENTER"; // 水平居中loginFrame.paddingTop = 40;loginFrame.paddingBottom = 40;loginFrame.paddingLeft = 20;loginFrame.paddingRight = 20;loginFrame.fills = [{type: "SOLID",color: { r: 0.9, g: 0.9, b: 0.9 }, // 设置背景颜色}];// 添加标题const title = figma.createText();title.characters = "Login";title.fontName = { family: "Roboto", style: "Bold" };title.fontSize = 32;title.textAlignHorizontal = "CENTER"; // 文本居中loginFrame.appendChild(title);// 创建用户名标签const usernameLabel = figma.createText();usernameLabel.characters = "Username";usernameLabel.fontSize = 16;usernameLabel.textAlignHorizontal = "LEFT"; // 左对齐usernameLabel.y = 80; // 设置位置loginFrame.appendChild(usernameLabel);// 创建用户名输入框（矩形）const usernameBox = figma.createRectangle();usernameBox.resize(280, 40); // 设置宽高usernameBox.fills = [{type: "SOLID",color: { r: 0.9, g: 0.9, b: 0.9 }, // 输入框颜色}];loginFrame.appendChild(usernameBox);// 创建密码标签const passwordLabel = figma.createText();passwordLabel.characters = "Password";passwordLabel.fontSize = 16;passwordLabel.textAlignHorizontal = "LEFT";passwordLabel.y = 140;loginFrame.appendChild(passwordLabel);// 创建密码输入框（矩形）const passwordBox = figma.createRectangle();passwordBox.resize(280, 40);passwordBox.fills = [{type: "SOLID",color: { r: 0.9, g: 0.9, b: 0.9 },}];loginFrame.appendChild(passwordBox);// 创建登录按钮const loginButton = figma.createRectangle();loginButton.resize(280, 40);loginButton.fills = [{type: "SOLID",color: { r: 0, g: 0.5, b: 1 }, // 蓝色按钮}];// 创建登录按钮文本const buttonText = figma.createText();buttonText.characters = "Login";buttonText.fontSize = 16;buttonText.textAlignHorizontal = "CENTER";buttonText.textAlignVertical = "CENTER"; // 垂直居中loginButton.appendChild(buttonText);loginFrame.appendChild(loginButton);// 将创建的登录页面添加到当前页面figma.currentPage.appendChild(loginFrame);
}// 调用创建登录页面的函数
createLoginPage();

从运行错误：

再丢给chatGpt：

然后又报了一个错误，然后再把错误丢给chatGPt，然后解决。

修改后的代码（没有错误）：

// 加载字体的异步函数
async function loadFont(fontName) {await figma.loadFontAsync({ family: fontName, style: "Regular" });
}// 创建一个简单的登录页面
async function createLoginPage() {// 加载必要的字体await loadFont("Inter");// 创建框架const loginFrame = figma.createFrame();loginFrame.resize(320, 480); // 设置框架大小loginFrame.name = "Login Page";loginFrame.layoutMode = "VERTICAL"; // 垂直排列loginFrame.primaryAxisAlignItems = "CENTER"; // 垂直居中loginFrame.counterAxisAlignItems = "CENTER"; // 水平居中loginFrame.paddingTop = 40;loginFrame.paddingBottom = 40;loginFrame.paddingLeft = 20;loginFrame.paddingRight = 20;loginFrame.fills = [{type: "SOLID",color: { r: 0.9, g: 0.9, b: 0.9 }, // 设置背景颜色}];// 添加标题const title = figma.createText();await loadFont("Inter");  // 确保字体加载title.characters = "Login";title.fontName = { family: "Inter", style: "Regular" };  // 使用 Inter 字体title.fontSize = 32;title.textAlignHorizontal = "CENTER"; // 文本居中loginFrame.appendChild(title);// 创建用户名标签const usernameLabel = figma.createText();await loadFont("Inter");  // 确保字体加载usernameLabel.characters = "Username";usernameLabel.fontSize = 16;usernameLabel.textAlignHorizontal = "LEFT"; // 左对齐usernameLabel.y = 80; // 设置位置loginFrame.appendChild(usernameLabel);// 创建用户名输入框（矩形）const usernameBox = figma.createRectangle();usernameBox.resize(280, 40); // 设置宽高usernameBox.fills = [{type: "SOLID",color: { r: 0.9, g: 0.9, b: 0.9 }, // 输入框颜色}];loginFrame.appendChild(usernameBox);// 创建密码标签const passwordLabel = figma.createText();await loadFont("Inter");  // 确保字体加载passwordLabel.characters = "Password";passwordLabel.fontSize = 16;passwordLabel.textAlignHorizontal = "LEFT";passwordLabel.y = 140;loginFrame.appendChild(passwordLabel);// 创建密码输入框（矩形）const passwordBox = figma.createRectangle();passwordBox.resize(280, 40);passwordBox.fills = [{type: "SOLID",color: { r: 0.9, g: 0.9, b: 0.9 },}];loginFrame.appendChild(passwordBox);// 创建登录按钮const loginButton = figma.createRectangle();loginButton.resize(280, 40);loginButton.fills = [{type: "SOLID",color: { r: 0, g: 0.5, b: 1 }, // 蓝色按钮}];// 创建登录按钮文本const buttonText = figma.createText();await loadFont("Inter");  // 确保字体加载buttonText.characters = "Login";buttonText.fontSize = 16;buttonText.textAlignHorizontal = "CENTER";buttonText.textAlignVertical = "CENTER"; // 垂直居中loginButton.appendChild(buttonText);loginFrame.appendChild(loginButton);// 将创建的登录页面添加到当前页面figma.currentPage.appendChild(loginFrame);
}// 调用创建登录页面的函数
createLoginPage();

生成的效果，不理想：

然后继续叫chatGpt修改结果，让其美观一点：

生成的代码：

// 加载字体的异步函数
async function loadFont(fontName) {await figma.loadFontAsync({ family: fontName, style: "Regular" });
}// 创建一个美观的登录页面
async function createLoginPage() {// 加载必要的字体await loadFont("Inter");// 创建框架const loginFrame = figma.createFrame();loginFrame.resize(400, 600); // 设置框架大小loginFrame.name = "Login Page";loginFrame.layoutMode = "VERTICAL"; // 垂直排列loginFrame.primaryAxisAlignItems = "CENTER"; // 垂直居中loginFrame.counterAxisAlignItems = "CENTER"; // 水平居中loginFrame.paddingTop = 40;loginFrame.paddingBottom = 40;loginFrame.paddingLeft = 20;loginFrame.paddingRight = 20;loginFrame.cornerRadius = 20; // 设置圆角loginFrame.fills = [{type: "SOLID",color: { r: 1, g: 1, b: 1 }, // 背景颜色为白色}];// 添加标题const title = figma.createText();await loadFont("Inter");  // 确保字体加载title.characters = "Welcome Back!";title.fontName = { family: "Inter", style: "Regular" };title.fontSize = 32;title.textAlignHorizontal = "CENTER";title.textAlignVertical = "CENTER";title.y = 20; // 设置标题位置loginFrame.appendChild(title);// 创建用户名标签const usernameLabel = figma.createText();await loadFont("Inter");usernameLabel.characters = "Username";usernameLabel.fontSize = 14;usernameLabel.textAlignHorizontal = "LEFT";usernameLabel.textAlignVertical = "CENTER";usernameLabel.y = 80;loginFrame.appendChild(usernameLabel);// 创建用户名输入框（矩形）const usernameBox = figma.createRectangle();usernameBox.resize(320, 40);usernameBox.cornerRadius = 8; // 设置圆角usernameBox.fills = [{type: "SOLID",color: { r: 0.95, g: 0.95, b: 0.95 }, // 输入框颜色}];usernameBox.y = 100;loginFrame.appendChild(usernameBox);// 创建密码标签const passwordLabel = figma.createText();await loadFont("Inter");passwordLabel.characters = "Password";passwordLabel.fontSize = 14;passwordLabel.textAlignHorizontal = "LEFT";passwordLabel.textAlignVertical = "CENTER";passwordLabel.y = 160;loginFrame.appendChild(passwordLabel);// 创建密码输入框（矩形）const passwordBox = figma.createRectangle();passwordBox.resize(320, 40);passwordBox.cornerRadius = 8;passwordBox.fills = [{type: "SOLID",color: { r: 0.95, g: 0.95, b: 0.95 },}];passwordBox.y = 180;loginFrame.appendChild(passwordBox);// 创建登录按钮（需要将矩形和按钮文本放入同一个框架中）const loginButtonFrame = figma.createFrame();loginButtonFrame.resize(320, 48); // 按钮大小loginButtonFrame.cornerRadius = 8; // 设置圆角loginButtonFrame.fills = [{type: "SOLID",color: { r: 0, g: 0.5, b: 1 }, // 蓝色按钮}];loginButtonFrame.y = 240;// 创建按钮文本const buttonText = figma.createText();await loadFont("Inter");buttonText.characters = "Login";buttonText.fontSize = 16;buttonText.textAlignHorizontal = "CENTER";buttonText.textAlignVertical = "CENTER";buttonText.fills = [{type: "SOLID",color: { r: 1, g: 1, b: 1 }, // 白色文本}];loginButtonFrame.appendChild(buttonText); // 将文本添加到按钮框架loginFrame.appendChild(loginButtonFrame); // 将按钮框架添加到登录页面// 将创建的登录页面添加到当前页面figma.currentPage.appendChild(loginFrame);
}// 调用创建登录页面的函数
createLoginPage();

运行结果：


可以看到以上的控件见的距离还是有些紧凑了。自己手动改改，也还可以。

总结：
总体思路是，

1. 使用ai生成脚本代码
2. figma 执行代码，生成界面。

反思：

1. 提示词过于简单，如果在提示词中增加布局要求、颜色搭配要求、控件间的间隔等等（也就是ui设计师，在设计界面时，所考虑的几个方面）产生的效果会更好（个人实验，写的详细的，生成效果好一些）
2. 商用级别的实现思路猜测：1.提示词模板对于ui考虑的各方面写得比较详细。2.用描述很详细的ui界面的文字描述和对应的脚本代码数据进行训练，从而得到一个ai模型。