江西南昌网站制作,图片短链接生成器,百度收录工具,网站网络推广方式方法当听到用ai 自动生成figma设计时#xff0c;不免好奇这个是如何实现的。在查阅了不少资料后#xff0c;有了一些想法。参考了#xff1a;在figma上使用脚本自动生成色谱 这篇文章提供的主要思路是#xff1a;可以通过脚本的方式构建figma设计。如果我们使用ai 生成figma脚本…当听到用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模型。
