当前位置： 首页 > article >正文

尝试ai生成figma设计

article 2025/2/3 15:43:15

当听到用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模型。

http://www.kler.cn/a/529932.html

相关文章：

  • 安装anaconda3 后 电脑如何单独运行python，python还需要独立安装吗？
  • x86-64数据传输指令
  • Kafka中文文档
  • AutoDL 云服务器：xfce4 远程桌面 终端乱码 + 谷歌浏览器
  • 栈和队列特别篇:栈和队列的经典算法问题
  • origin如何在已经画好的图上修改数据且不改变原图像的画风和格式
  • 系统URL整合系列视频二（界面原型）
  • 独立开发经验谈：如何借助 AI 辅助产品 UI 设计
  • C++中的拷贝构造器（Copy Constructor）
  • 稀疏进化训练：机器学习优化算法中的高效解决方案
  • 蓝桥杯备考：枚举算法之铺地毯
  • R语言绘制有向无环图（DAG）
  • 普通用户（非root） 安装libreoffice
  • Python的那些事第九篇：从单继承到多继承的奇妙之旅
  • 【leetcode详解】T598 区间加法
  • 手机Python爬虫教程：利用手机学习Python爬虫的终极指南_python可以在手机上写爬虫吗
  • 人机交互系统实验三 多通道用户界面
  • C++模板编程——可变参函数模板之折叠表达式
  • 使用 DeepSeek-R1 与 AnythingLLM 搭建本地知识库
  • IM 即时通讯系统-46-OpenIM 提供了专为开发者设计的开源即时通讯解决方案
  • bat脚本实现自动化漏洞挖掘
  • 【零基础学JAVA】数据类型
  • 20250202在Ubuntu22.04下使用Guvcview录像的时候降噪
  • Java/Kotlin HashMap 等集合引发 ConcurrentModificationException
  • [HOT 100] 0167. 两数之和 ||
  • Elasticsearch 指南 [8.17] | Search APIs