> [目錄](https://hackmd.io/EGd-7VhjSqGWXqq4Iw6WUg?view)
> 筆記目錄：
> [TOC]

## 目標
快速生成 ui

## 研究方向
* 使用工具生成 code
* 目前先以 angular 為主，如果按照我們只要生成 ui 的話，生成 html + css 應該也可以
* 2 種生成結果
* 直接生成 code
* 按照元件庫生成 code
* IDE 輸入時，自動建議？
* 例如輸入 button 就會自動出現 cub button 元件的 code
* coding style
* 看可不可以統一大家寫的 code
* 新增檔案，讓原本不能使用的 bootstrap 可以使用，加快開發速度
* 例: `px-20` `py-20` `p-20`
* padding
* p - 同時設定上下左右
* px - 同時設定 *-left 和 *-right
* py - 時設定 *-top 和 *-bottom
* 寫個 [template](https://uxd-uat.cloud.cathaybkdev.com.tw/cub-web-guideline-portal-primeng-v2/#/layout/combination)
* 可以直接複製常用的，例: 搜尋區域 傳遞流程

## cub 元件
* 如果要可以直接生成元件庫的 code 的話，應該可以看看有沒有什麼規則可以遵循？
* 常見規則
* 用 class 控制樣式，如 `<button class="cub-btn cub-btn-danger"` `<div class="cun-input-container"/>` `<div class="cub-jumbotron"/>`
* 用 primeNG，如 `<p-card/>` `<p-dropdown/>` `<p-table/>`
* 參數控制 `<input pInputText/>` `<input pButton/>`
* cub 開頭的元件 `<cub-news-ticker/>` `<cub-step/>`

## library

* [builder.io](https://www.builder.io/c/docs/custom-components-setup)
* 優點：
1. 行內可以用
2. 支援多框架
3. 可以自訂以什麼 UI library 產出 -> 非常強大
4. 直接把 rwd 做好了
5. 轉成程式碼的步驟非常簡單快速
6. allow register component -> 待研究
* 缺點：
1. 行內不支援 sync code
* 測試
:::spoiler 畫面 ＆ code

:::
* [pxcode](https://www.pxcode.io/zh-TW/)
* figma plugin，匯出後會在 [pxcode](https://www.pxcode.io/)
:::spoiler pxcode img
:::
* 如上圖，需要先看過教學才可以開始專案
* 缺點：
1. 行內不能用
2. 不支援 angular(可以匯出React,Vue2,Vue3,Html)
3. 需要去設定設計稿上各個元件之類的關係，很耗時
4. icon 會被轉成 img 標籤
5. 重複的元件設定不能複製（也可能是我不會用）
* 優點：可以正確的匯出 html（僅限有設定關係的區域）
:::spoiler 畫面 ＆ code
下圖為沒有設定元件關係的程式碼

完整畫面：https://codepen.io/Chia_Maureen/pen/QWXYPBp
:::

:::info
[範例設計稿的連結](https://www.figma.com/design/QFXH9osKaqVmh8msEmwYHU/%5B%E7%A0%94%E7%A9%B6%5D-figma-to-code?node-id=23-238&t=ystgO9Z6LCfIs9rA-4)
:::

* [figmular](https://docs.figmular.com/export-components/export-with-my-design-system)
* figma plugin
* 優點：
1. 可以按照 figma variants 自訂 html 參數
2. 可以用 email 登入
* 缺點：
1. 間距的部分，需要在自己調整 bootstrap 、或是請設計在 figma 標示容器 row col
2. 使用人數少
3. 要一個一個元件設定，另外還要再研究，在不同 figma 檔案要如何共享自訂參數
:::spoiler 使用方法
[🔗 使用方法](https://www.figma.com/design/x8zKHpOwBBfRRfso3FeEmf/Figmular-Playground-(Community)?node-id=104-1347&t=DcHMrvTpReK3zHmO-4)

* [anima](https://www.animaapp.com/)
* figma plugin，匯出後會開在 anima plugin 介面或是 anima 自己的網站
* 可匯出 html + css
* 缺點：
1. 有幾次生成的不是很精準，感覺不太穩定
2. [這邊](https://www.animaapp.com/blog/product-updates/anima-introduces-support-of-component-variants/) 看起來可以客制自己的 class，但需要透過設計師在 figma 命名，才可以直接生成且只能對應 [cub 元件規則-用 class 控制樣式](https://hackmd.io/@wuYa/S18wT1XhA#:~:text=%E5%B8%B8%E8%A6%8B%E8%A6%8F%E5%89%87-,%E7%94%A8%20class%20%E6%8E%A7%E5%88%B6%E6%A8%A3%E5%BC%8F,-%EF%BC%8C%E5%A6%82%20%3Cbutton%20class)
* [figma demo](https://www.figma.com/design/QFXH9osKaqVmh8msEmwYHU/%5B%E7%A0%94%E7%A9%B6%5D-figma-to-code?node-id=23-238&t=7xZMnIdYonJtIMO7-4) ➡️ [code](https://playground.animaapp.com/EetzUIxx?file=%2Findex.html)
:::spoiler 畫面 ＆ code

* [codia](https://codia.ai/design-to-code)
* figma plugin，匯出後會開在 codia 自己的網站
* 可匯出 html + css
* 優點：
1. 實際匯出還原度蠻高的
2. 可以用 email 登入
* 缺點：
1. 但無法客製化使用元件庫的 code
* [figma demo](https://www.figma.com/design/QFXH9osKaqVmh8msEmwYHU/%5B%E7%A0%94%E7%A9%B6%5D-figma-to-code?node-id=23-238&t=7xZMnIdYonJtIMO7-4) ➡️ [code](https://codia.ai/record/inspect?record_id=c93215c3-1a66-4c34-8a50-d61981aacce0)
:::spoiler 畫面 ＆ code

* [clapy](https://www.figma.com/community/plugin/1083031796594968801/clapy-export-figma-design-to-code-react-html-css)
* figma plugin，匯出後會開在 codesanBox
* 優點：
1. 可匯出 angular
2. 可以用 email 登入，但也需要手機登入
* 缺點：
1. 會把所有 component 匯出成 angular 的 component -> 跟我們的用法不太符合
2. 看起來無法辨識 figma 的變數，只會生成最 default 的 component
3. 看起來也無法辨識 figma 的 autolayout
* [figma demo](https://www.figma.com/design/QFXH9osKaqVmh8msEmwYHU/%5B%E7%A0%94%E7%A9%B6%5D-figma-to-code?node-id=23-238&t=7xZMnIdYonJtIMO7-4) ➡️ [code](https://codesandbox.io/p/sandbox/angular-forked-zrgdwj?file=%2Fsrc%2Fapp%2Fcomponents%2Fpage1%2Fpage1.component.html%3A14%2C9)
:::spoiler 畫面 ＆ code

#### 需付費
* zeplin
* [🔗 影片demo](https://zeplin.io/features/connected-components/)
* figma 須可以 publish libary `付費`，因為 zeplin 需 import Figma library
* 再看看可不可以輸出整個頁面，目前影片看到的是只輸出 component 的方法

---
## 下周（9/16 - 9/20）
* 繼續試用
* [framer](https://www.figma.com/community/plugin/1037108608720448600/figma-to-html-with-framer)
* [code.fun](https://code.fun/)
* [locofy](https://www.figma.com/community/plugin/1056467900248561542/locofy-lightning-figma-to-code-in-1-click)
* 看看 React 、 Vue 有沒有適用的工具
* builder.io
* try register component
* ABC 的表格可以拿來試試看（看能不能做出非元件庫的表格元件）
* 測試常常覺得困難的元件情境
* 注意有沒有付費版本的問題