尝试ai生成figma设计

news2025/2/3 10:03:11

当听到用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.coloradmin.cn/o/2291212.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【周易哲学】生辰八字入门讲解（八）

【周易哲学】生辰八字入门讲解（八）

😊你好，我是小航，一个正在变秃、变强的文艺倾年。 🔔本文讲解【周易哲学】生辰八字入门讲解，期待与你一同探索、学习、进步，一起卷起来叭！ 目录 一、六亲女命六亲星六亲宫位相互关系 男命六亲星…
阅读更多...
解决whisper 本地运行时GPU 利用率不高的问题

解决whisper 本地运行时GPU 利用率不高的问题

我在windows 环境下本地运行whisper 模型，使用的是nivdia RTX4070 显卡，结果发现GPU 的利用率只有2% 。使用 import torch print(torch.cuda.is_available()) 返回TRUE。表示我的cuda 是可用的。 最后在github 的下列网页上找到了问题 极低的 GPU 利…
阅读更多...
【自开发工具介绍】SQLSERVER的ImpDp和ExpDp工具02

【自开发工具介绍】SQLSERVER的ImpDp和ExpDp工具02

工具运行前的环境准备 1、登录用户管理员权限确认 工具使用的登录用户(-u后面的用户)，必须具有管理员的权限，因为需要读取系统表 例：Export.bat -s 10.48.111.12 -d db1 -u test -p test -schema dbo 　　　　 2、Powershell的安全策略确认…
阅读更多...
java异常处理——try catch finally

java异常处理——try catch finally

单个异常处理 1.当try里的代码发生了catch里指定类型的异常之后，才会执行catch里的代码，程序正常执行到结尾 2.如果try里的代码发生了非catch指定类型的异常，则会强制停止程序，报错 3.finally修饰的代码一定会执行，除…
阅读更多...
DeepSeek-R1：通过强化学习激励大型语言模型（LLMs）的推理能力

DeepSeek-R1：通过强化学习激励大型语言模型（LLMs）的推理能力

摘要 我们推出了第一代推理模型：DeepSeek-R1-Zero和DeepSeek-R1。DeepSeek-R1-Zero是一个未经监督微调（SFT）作为初步步骤，而是通过大规模强化学习（RL）训练的模型，展现出卓越的推理能力。通过强…
阅读更多...
低成本、高附加值，具有较强的可扩展性和流通便利性的行业

低成本、高附加值，具有较强的可扩展性和流通便利性的行业

目录 虚拟资源类 1. 网课教程 2. 设计素材 3. 软件工具 服务类 1. 写作服务 2. 咨询顾问 3. 在线教育 4. 社交媒体管理 虚拟资源类 1. 网课教程 特点：高附加值，可复制性强，市场需求大。 执行流程： 选择领域&#xff1a…
阅读更多...
vue入门到实战 二

vue入门到实战 二

目录 2.1 计算属性computed 2.1.1什么是计算属性 2.1.2 只有getter方法的计算属性 2.1.3 定义有getter和setter方法的计算属性 2.1.4 计算属性和methods的对比 2.2 监听器属性watch 2.2.1 watch属性的用法 2.2.2 computed属性和watch属性的对比 2.1 计算属性computed…
阅读更多...
二叉树-堆（补充）

二叉树-堆（补充）

二叉树-堆 1.二叉树的基本特性2.堆2.1.堆的基本概念2.2.堆的实现2.2.1.基本结构2.2.2.堆的初始化2.2.3.堆的销毁2.2.4.堆的插入2.2.5.取出堆顶的数据2.2.6.堆的删除2.2.7.堆的判空2.2.8.堆的数据个数2.2.9.交换2.2.10.打印堆数据2.2.11.堆的创建2.2.12.堆排序2.2.13.完整代码 3…
阅读更多...
基于springboot私房菜定制上门服务系统设计与实现(源码+数据库+文档)

基于springboot私房菜定制上门服务系统设计与实现(源码+数据库+文档)

私房菜定制上门服务系统目录 目录 基于springbootvue私房菜定制上门服务系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、管理员功能实现 （1）菜品管理 （2）公告管理 （3） 厨师管理 2、用…
阅读更多...
2025开源DouyinLiveRecorder全平台直播间录制工具整合包，多直播同时录制、教学直播录制、教学视频推送、简单易用不占内存

2025开源DouyinLiveRecorder全平台直播间录制工具整合包，多直播同时录制、教学直播录制、教学视频推送、简单易用不占内存

一、DouyinLiveRecorder软件介绍（文末提供下载） 官方地址：GitHub - ihmily/DouyinLiveRecorder 本文信息来源于作者GitHub地址 一款简易的可循环值守的直播录制工具，基于FFmpeg实现多平台直播源录制，支持自定义配置录制…
阅读更多...
利用飞书机器人进行 - ArXiv自动化检索推荐

利用飞书机器人进行 - ArXiv自动化检索推荐

相关作者的Github仓库 ArXivToday-Lark 使用教程 Step1 新建机器人 根据飞书官方机器人使用手册，新建自定义机器人，并记录好webhook地址，后续将在配置文件中更新该地址。 可以先完成到后续步骤之前，后续的步骤与安全相关&…
阅读更多...
python算法和数据结构刷题[5]：动态规划

python算法和数据结构刷题[5]：动态规划

动态规划（Dynamic Programming, DP）是一种算法思想，用于解决具有最优子结构的问题。它通过将大问题分解为小问题，并找到这些小问题的最优解，从而得到整个问题的最优解。动态规划与分治法相似，但区别在于动态…
阅读更多...
【Rust自学】16.2. 使用消息传递来跨线程传递数据

【Rust自学】16.2. 使用消息传递来跨线程传递数据

喜欢的话别忘了点赞、收藏加关注哦，对接下来的教程有兴趣的可以关注专栏。谢谢喵！(･ω･) 16.2.1. 消息传递 有一种很流行而且能保证安全并发的技术（或者叫机制）叫做消息传递。在这种机制里，线…
阅读更多...
解锁豆瓣高清海报(二) 使用 OpenCV 拼接和压缩

解锁豆瓣高清海报(二) 使用 OpenCV 拼接和压缩

解锁豆瓣高清海报(二): 使用 OpenCV 拼接和压缩 脚本地址: 项目地址: Gazer PixelWeaver.py pixel_squeezer_cv2.py 前瞻 继上一篇“解锁豆瓣高清海报(一) 深度爬虫与requests进阶之路”成功爬取豆瓣电影海报之后，本文将介绍如何使用 OpenCV 对这些海报进行智…
阅读更多...
利用腾讯云cloud studio云端免费部署deepseek-R1

利用腾讯云cloud studio云端免费部署deepseek-R1

1. cloud studio 1.1 cloud studio介绍 Cloud Studio（云端 IDE）是基于浏览器的集成式开发环境，为开发者提供了一个稳定的云端工作站。支持CPU与GPU的访问。用户在使用 Cloud Studio 时无需安装，随时随地打开浏览器即可使用。Clo…
阅读更多...
DeepSeek r1本地安装全指南

DeepSeek r1本地安装全指南

环境基本要求 硬件配置 需要本地跑模型，兼顾质量、性能、速度以及满足日常开发需要，我们需要准备以下硬件： CPU：I9内存：128GB硬盘：3-4TB 最新SSD，C盘确保有400GB，其它都可划成D盘…
阅读更多...
基于VMware的ubuntu与vscode建立ssh连接

基于VMware的ubuntu与vscode建立ssh连接

1.首先安装openssh服务 sudo apt update sudo apt install openssh-server -y 2.启动并检查ssh服务状态 到这里可以按q退出 之后输入命令 ： ip a 红色挡住的部分就是我们要的地址，这里就不展示了哈 3.配置vscode 打开vscode 搜索并安装：…
阅读更多...
【LLM-agent】(task2)用llama-index搭建AI Agent

【LLM-agent】(task2)用llama-index搭建AI Agent

note LlamaIndex 实现 Agent 需要导入 ReActAgent 和 Function Tool，循环执行：推理、行动、观察、优化推理、重复进行。可以在 arize_phoenix 中看到 agent 的具体提示词，工具被装换成了提示词ReActAgent 使得业务自动向代码转换成为可能&am…
阅读更多...
【Redis】Redis 经典面试题解析：深入理解 Redis 的核心概念与应用

【Redis】Redis 经典面试题解析：深入理解 Redis 的核心概念与应用

Redis 是一个高性能的键值存储系统，广泛应用于缓存、消息队列、排行榜等场景。在面试中，Redis 是一个高频话题，尤其是其核心概念、数据结构、持久化机制和高可用性方案。 1. Redis 是什么？它的主要特点是什么？ 答案&a…
阅读更多...
FastExcel使用详解

FastExcel使用详解

文章目录 FastExcel使用详解一、引言二、环境准备与依赖引入1、Maven 依赖引入2、实体类定义 三、核心操作：读写 Excel1、读取 Excel1.1 自定义监听器1.2 读取文件 2、写入 Excel2.1 简单写入2.2 模板写入 四、Spring Boot 集成示例1、文件上传（导入&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023