# 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

        <!-- 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
: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)