Figma一鍵輸出網頁工具：Builder.io
Builder.io於10月份宣布推出「Visual Copilot」，為Figma Plugins插件工具帶來全新變革，也為設計師與工程師共創便利快速的開發流程。
Builder.io與Figma合作，透過Visual Copilot的Ai技術，一鍵轉換程式代碼，支援多種程式語言，同時也透過AI將設計稿轉換為RWD檔案。為設計開發帶來全新的趨勢，透過AI技術減緩過去長期開發的工作。
筆者本身是UI菜雞，對於程式相關的知識還不充足QQ 若想要看程式觀點，推薦大家看 Kordan Ou 大大以程式開發的角度撰寫的文章：一鍵生成：用 AI 將 Figma 設計稿直接生成可維護的程式碼
而筆者將會以設計的角度，引領認識Builder.io如何在Figma中使用、當中潛在的問題。
Builder.io作為Figma插件工具的使用方法
在Figma中找到Plguins，並搜尋Builder.io 按下Run即可，也可以從Figma Community中找到 Builder.io Plugins 說明文中按照步驟執行。
目前Builder.io開發的Visual Copilot功能外，還有另外兩個功能：Generate、Import UI，分別是以AI生成網頁設計圖與將外部網站轉為Figma的功能。
Builedr.io於Figma中三個功能的執行方法與成果：
（1）Export Code
選取所要的Frame檔案或小物件，按下Generate Code，就會轉跳制Builder.io網站獲得設計檔案的程式碼，也能夠看到AI協助讀入的設計稿模樣。
在生成程式碼後，開發者能在Builder.io的網頁中檢查、修改設計圖稿，方便後續的設計更動。
特別要注意 Builder.io不能同時輸出兩個Frame檔案，但若是在Frame之外的小物件，是可以跟Frame一起輸出，但輸出結果會被放在同個頁面上，會打亂原始的設計稿。
原始預設AI輸出的程式碼Fast是屬於比較簡易的，而若想要較為精緻的程式碼，就要再轉跳後於Builder.io中選擇Quality的輸出，Quality能讓AI跑MUI、Next.js等其他多種程式語言。若是設計網頁本身構圖排版不複雜的話，推薦註冊Builder.io免費會員，就能免費輸出Quality的程式碼。
不同於Fast生成的Code功能，Quality多了輸入欄，能輸入想要的動作或外貌指令，讓AI生成相關的程式碼。筆者在下圖中便是選取登入按鈕，並且輸入「The button turns blue when the mouse hovers over it.」讓AI生成移動鼠標便能夠變色的程式碼。
在Builder.io中也會生成RWD的指令，預設的檢視畫面分別為電腦與手機尺寸，可以透過鼠標長壓設計稿自行決定想要的尺寸，以此確認RWD不同尺寸的排版是不是自己所想要。
（2）Generate
今年4月Builder.io更新與OpenAI所合作功能，透過輸入關鍵字、參考網站，便能夠生成Figma設計檔案，同時在生成也能夠再編輯排版與圖片。
特別的是此功能是與OpenAI合作，因此需要至OpenAI網站中取得OpenAI Key，再回到Figma中使用OpenAI Key的鑰匙碼進行指令。
提醒生成OpenAI Key後要記得將那串Key保存好，未來是無法從網站中再次開啟那串英數字
Generate目前免費用戶無法使用，若想要體驗一鍵生成wireframe，需要於Builder.io的官網付費升級會員。
（3）Import UI
將想要的外部網站，透過AI生成成為Figma的Frame檔案，生成後能夠自行編輯拆解。若是有臨摹、練習重新排版網站，是一個蠻方便的工具。
首先先選擇想要生成的網頁，在Figma的Builder.io中貼上想要導入的網頁網址，也能夠選擇想要的頁面尺寸大小。
要特別注意不能找過多動畫複雜的網站，目前AI無法讀取太多動畫的網站。
生成後可以看到在Figma中顯示的檔案不是單純的圖檔，能點選物件並且拆解移動。Builder.io的AI收到指令後會生成網站該頁背後Code的圖像、文字等等，如圖中可以看到本來該網站中隱藏的一些大字都會顯示出。因此太過於繁複的網站，容易讓AI無法順利讀取，導致生成的Frame混亂無法辨識。
如果是作為個人練習臨摹簡單網頁或優化拉頁式網站，是一個蠻方便的選擇。
Builder.io使用上所遇到的問題
AI作為輔助工具提升了工作效率，但新的技術會需要時間進行改善優化，Builder.io這次的合作依然有許多需要改善的空間。以下列出筆者在使用上遇到的問題，以及可以嘗試的排除方法，在使用上可以參考以此減少修正的時間。
（1）不明原因位移
設計圖稿需要將所有的圖形設定成component（元件），並且將網頁區塊群組化。這樣在輸出至Builder.io後，能避免在預覽的網頁排版會變形、跑版。同時在使用RWD時，也不會有過度變形、不如預期的排版。
（2）部分物件輸出模糊
如果設計的網頁過大過複雜的話，即使是在Figma中繪製的圖形，較小的圖形可能會在讀檔中模糊化。Builder.io客服建議轉為Quality，以此避免使用Fast讀檔產生模糊。如果沒有規劃在Builder.io中升級會員的人，要注意設計檔案不能過大過複雜，以此避免過小圖檔模糊。
（3）特殊字型、圖形轉為PNG、SVG檔案避免AI無法辨識
Builder.io的字型庫與Figma無法對接，因此在生成程式碼時，特殊的字型是無法順利生成。另外也發現，AI讀取檔案疑似是讀取檔案框線範圍內的圖形，若是以鉛筆、鋼筆繪製，Figma會以線條為範圍設定框架，但AI就無法順利讀到匡線外的圖形，造成吃圖的問題。
建議是將特殊字型與圖形轉為PNG或SVG檔案，方便讓AI順利導出。
結語
Builder.io的Visual Copilot推出，是網頁程式開發學習者一個很好的學習工具。在這裡補充Builder.io 創辦人Steve近期發布進階使用Visual Copilot製作動態Menu選單，為一開始AI生成程式碼時，無法生成動態效果的解決方法。
筆者認為此AI能作為很大的學習工具，但也很難依賴此工具完成獨立的開發。Builder.io以UI菜雞的角度來看，是協助練習前端架設網站的第一步。筆者認為讓架設網站的學習沒這麼讓人懼怕與感到繁雜。也可以透過AI所生成的程式碼，將自己所學的知識交叉參考與比對，或許是能協助日後更加熟悉程式碼的助力之一。
參考資料來源：
Generate Figma Designs with AI
Builder.io 推出名為 Visual Copilot 的 Figma-to-code plugin，可以快速將 Figma 設計稿轉成網頁程式碼
一鍵生成：用 AI 將 Figma 設計稿直接生成可維護的程式碼
Figma to code with Visual Copilot, drag-and-drop for native apps, and more!
