尝试ai生成figma设计

雾散睛明2025-02-03 14:22

当听到用ai 自动生成figma设计时，不免好奇这个是如何实现的。在查阅了不少资料后，有了一些想法。参考了：在figma上使用脚本自动生成色谱

这篇文章提供的主要思路是：可以通过脚本的方式构建figma设计。如果我们使用ai 生成figma脚本。然后放到figma 中执行是不是就有可能生成设计图那？

使用ai生成脚本

使用如下提示词：

利用figma 控制台脚本能力，实现登录界面

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

typescript 复制代码 
// 首先，确保你已加载了正确的字体（如果没有加载，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，然后解决。

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

typescript 复制代码 
// 加载字体的异步函数
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修改结果，让其美观一点：

生成的代码：

typescript 复制代码 
// 加载字体的异步函数
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模型。
相关推荐
仙人掌_lz1 分钟前
机器学习ML极简指南
人工智能·python·算法·机器学习·面试·强化学习
weixin_4352081618 分钟前
论文浅尝 | Interactive-KBQA：基于大语言模型的多轮交互KBQA（ACL2024）
人工智能·语言模型·自然语言处理
碣石潇湘无限路28 分钟前
【奇点时刻】GPT-4o新生图特性深度洞察报告
人工智能·经验分享·chatgpt·gpt4o·新生图特性
深眸财经36 分钟前
从商汤科技年报，看一家AI企业的确定性叙事
人工智能·科技·百度
I'mFAN1 小时前
QT_xcb 问题
人工智能·python·opencv·计算机视觉
赋创小助手1 小时前
Gartner预计2025年AI支出达6440亿美元：数据中心与服务器市场的关键驱动与挑战
运维·服务器·人工智能·科技·架构
晨航2 小时前
AI Agent拐点已至，2B+2C星辰大海——行业深度报告
人工智能·ai·aigc
果冻人工智能2 小时前
只让 AI 写点坏代码，它却学坏了整颗心
人工智能
zy_destiny2 小时前
【工业场景】用YOLOv12实现饮料类别识别
人工智能·python·深度学习·yolo·机器学习·计算机视觉·目标跟踪
热门推荐
01我决定放弃搞 Java 了02DeepSeek各版本说明与优缺点分析03如何在WPS和Word/Excel中直接使用DeepSeek功能04RAG 实践- Ollama+RagFlow 部署本地知识库05苍穹外卖面试总结06从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑07本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程08DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具09如何本地部署AI智能体平台，带你手搓一个AI Agent10循环神经网络RNN（含LSTM，GRU）小综述