---
# System prepended metadata

title: Figma 一鍵無碼 - Square Su

---

# 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 Plugin](https://hackmd.io/_uploads/r1DBNmMgkx.png)


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

![Builder.io Sharing](https://hackmd.io/_uploads/HkdaEmGlJl.jpg)
---
### 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)