尝试ai生成figma设计

雾散睛明

已于 2025-02-02 21:11:30 修改

阅读量1.7k

点赞数 4

文章标签：人工智能 figma

于 2025-02-02 21:09:17 首次发布

本文链接：https://blog.csdn.net/qq_25160759/article/details/145422419

版权

当听到用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();

运行结果：
在这里插入图片描述

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

总结：
总体思路是，

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

反思：

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