嘗試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模型。