---
# System prepended metadata

title: '[ figma to code - 1 ] 0902-0912'
tags: [figma to code]

---



> [目錄](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
         ![image](https://hackmd.io/_uploads/SJim5MlTA.png)


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

    
* [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
    ![截圖 2024-09-06 15.40.35](https://hackmd.io/_uploads/SkZGMEdhR.png)
    ![截圖 2024-09-06 15.38.35](https://hackmd.io/_uploads/ry-fMNOhA.png)

* [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
    ![截圖 2024-09-06 13.56.06](https://hackmd.io/_uploads/SJKtFGdh0.png)
    ![截圖 2024-09-06 13.55.06](https://hackmd.io/_uploads/HJkQjfOhR.png)
    
* [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
    ![截圖 2024-09-06 13.51.35](https://hackmd.io/_uploads/B1xcOGd2R.png)
    ![截圖 2024-09-06 13.51.50](https://hackmd.io/_uploads/ryxcuzd3R.png)


#### 需付費
* 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 的表格可以拿來試試看（看能不能做出非元件庫的表格元件）
* 測試常常覺得困難的元件情境
* 注意有沒有付費版本的問題