尝试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模型。
相关推荐
笨小古2 分钟前
保姆级教程：利用Ollama与Open-WebUI本地部署 DeedSeek-R1大模型
人工智能·deepseek
AI浩39 分钟前
【Block总结】CPCA，通道优先卷积注意力|即插即用
人工智能·深度学习·目标检测·计算机视觉
IT果果日记1 小时前
Ollama+OpenWebUI部署本地大模型
人工智能·ai编程·ollama·openwebui
说私域1 小时前
基于开源2 + 1链动模式AI智能名片S2B2C商城小程序的内容创作与传播效能探究
人工智能·小程序·开源
想拿高薪的韭菜2 小时前
人工智能第2章-知识点与学习笔记
人工智能·笔记·学习
雾岛心情3 小时前
【AIGC专栏】AI在自然语言中的应用场景
人工智能·chatgpt·aigc
Jet45054 小时前
玩转ChatGPT：DeepSeek测评（科研思路梳理）
人工智能·chatgpt·kimi·deepseek-r1
车载诊断技术4 小时前
基于新一代电子电器架构的SOA服务设计方法
人工智能·架构·汽车·计算机外设·ecu故障诊断指南
Luzem03194 小时前
使用朴素贝叶斯对自定义数据集进行分类
人工智能·机器学习
热门推荐
01DeepSeek本地部署详细指南02【deepseek】deepseek-r1本地部署-第一步：下载LM Studio03DeepSeek r1本地安装全指南04将DeepSeek接入Word，打造AI办公助手05使用Ollama 在Ubuntu运行deepseek大模型：以DeepSeek-coder为例06DeepSeek学术写作测评第一弹：论文润色，中译英效果如何？07DeepSeek 云端部署，释放无限 AI 潜力！08新鲜速递：DeepSeek-R1开源大模型本地部署实战—Ollama + MaxKB 搭建RAG检索增强生成应用09Dell服务器升级ubuntu 22.04失败解决10在Windows下安装Ollama并体验DeepSeek r1大模型