# Figma 一鍵無碼 - Square Su

:::info
**議題：**
Builder. io：AI-Powered Design to Code，透過 Visual Copilot 轉出
1. 前端架構：React、Vue、Svelte、Angular、Qwik、Solid 或 HTML 程式碼
2. CSS型態：純 CSS 程式碼、Tailwind、Emotion、Styled Components
3. 實際操作與解說
:::

[填寫議程滿意度問卷｜回饋建言給辛苦的講者](https://forms.gle/U1FRBakf46dXUhEG6)

---

UI 設計與前端工程師合作的痛點：
想傳達的沒有清楚傳達，做出來的和想的不同（溝通成本大、理解設計意圖難）

### [Builder.io](https://www.figma.com/community/plugin/747985167520967365/builder-io-ai-powered-figma-to-code-react-vue-tailwind-more)

### 選擇 Builder.io 的原因
1. 設計轉換精準度
2. 程式碼是否可維護
3. 是否支援 RWD 設計
4. 平台的學習曲線

---
### Builder.io 的 8 個特色
1. 快速部署與預覽

---
### 使用 Visual Copilot 的生成技術

---

只有 Desktop 可以自動生成 RWD(Auto layout)
可以 publish 到 webserver

### 使用 Figma to code
透過 Figma 輸出成 code
依照原本的群組可以產出對應的複用 component

### 使用 Figma use notice
自動佈局要做好
圖片 group 要做好
文字邊界要明確

### 講者觀點
1. UI 設計師
a. 逐漸透過 D2C 工具來設計介面
b. 必須具備更嚴謹的元件與圖層結構規劃能力
c. 必須結交很多個 AIGC 隊友
2. D2C 工具
a. 成為 UI 設計師和前端工程師的溝通橋樑
b. 會將觸手伸及支持更多後端功能
c. 將 Prototype 動畫自動轉成 Lottie
3. Figma / UI 設計工具
a. 會將 Design to Code (原生) 功能列為標配
b. Figma Dev Mode 更加趨近前端功能

---
[10/30新功能分享會](https://make-real.builder.io/?utm_campaign=make-it-real-launch-Q3-2024&utm_medium=email&_hsenc=p2ANqtz-97cad7VHLuw_L1tcdo8m8FJVjAMTYwyRxI25QrBEsKDevqtXzFlqXpIRfe1bx3QvdmokQFlTEEhfsROxtrp030fFg3mg30MlAIY_ZVh4wswSmMjsY&_hsmi=328065076&utm_content=webinar&utm_source=marketing)