---
# System prepended metadata

title: Code in Figma
tags: [UX / UI]

---

# Code in Figma


* 市面上有很多設計稿轉成 HTML & CSS code 的功能
    * 但是 code 的品質和維護性不一定好
    * 後天的 RWD 加工不容易
    * 如何加速開發過程優化這項缺點?
        * Components 可以使用 -> 修改好一個 component 可以重複利用
        * CSS 變數的可行性
        * Tailwind code 是否就容易實現 RWD?
          <img width="300px" src="https://hackmd.io/_uploads/S17C6hp4T.png" alt="tailwind RWD setting">
          [tailwindcss RWD doc](https://tailwindcss.com/docs/responsive-design)
        
        Tailwindcss in Figma
        :::spoiler
        ```htmlmixed
        <!-- Figma sample code -->
        <div class="w-[126px] h-8 justify-start items-center gap-3 inline-flex">
            <div class="w-[58px] h-8 px-2 rounded-2xl border border-black justify-center items-center gap-2 flex">
                <div class="grow shrink basis-0 text-center text-black text-base font-normal font-['Inter'] leading-relaxed">1</div>
            </div>
            <div class="justify-start items-start gap-2 flex">
                <div class="w-6 h-6 rounded-2xl border border-black justify-center items-center gap-2 flex">
                    <div class="w-5 h-5 relative">
                        <img class="w-2 h-px left-[6px] top-[9.50px] absolute" src="https://via.placeholder.com/8x1" />
                    </div>
                </div>
                <div class="w-6 h-6 rounded-2xl border border-black justify-center items-center gap-2 flex">
                    <div class="w-5 h-5 relative">
                        <img class="w-2 h-2 left-[6px] top-[6px] absolute" src="https://via.placeholder.com/8x8" />
                    </div>
                </div>
            </div>
        </div>
        ```
        :::

---


* Figma AutoHTML | Developer Plugin
    ![image](https://hackmd.io/_uploads/Hyup3qaVa.png)
    :point_right: Better structure for developer to arrange code
    :point_right: Add html class
    :point_right: Potential css variables
    :point_right: RWD possibility (edit className)
cons:
    - className 很冗長
    - 會自己添加一些額外的 code 如: position: relative; text-align: left;
    -> Figma 權限共享 (複製一份去做 code 修改)


---

* 與 UI/UX 相關的文章連結

    * [從費格馬到無碼 — Figma to Code工具大解碼](https://blog.able.cool/%E5%BE%9E%E8%B2%BB%E6%A0%BC%E9%A6%AC%E5%88%B0%E7%84%A1%E7%A2%BC-figma-to-code%E5%B7%A5%E5%85%B7%E5%A4%A7%E8%A7%A3%E7%A2%BC-dfaf37829fdb)
    * [利用 AI 技術簡化網頁開發，一鍵將Figma 設計稿轉換成可維護的程式碼](https://1314520.com.tw/figma1018/)
    * [Builder Velocity 發佈了 Visual Copilot（由 AI 驅動的「Figma to Code」）](https://hitripod.com/figma-to-code/)
    * [【Design】前端工程師覺得UIUX應該知道的事2：元件篇](https://tiffrrr.medium.com/design-%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%B8%AB%E8%A6%BA%E5%BE%97uiux%E6%87%89%E8%A9%B2%E7%9F%A5%E9%81%93%E7%9A%84%E4%BA%8B2-%E5%85%83%E4%BB%B6%E7%AF%87-999d4702ea4b)
    * [Design tips4: 在 Figma 裡面寫程式 🤯 給設計師的加速工作效率小撇步](https://designtips.today/design-tips-4)