https://ericchung24.github.io/blog/tags/figma/Recent content in Figma on EricChung的程式勇者村Hugo -- gohugo.iozh-twFri, 17 Apr 2026 00:00:00 +0000https://ericchung24.github.io/blog/p/%E6%96%B0%E6%89%8B%E7%AC%AC%E5%8D%81%E4%B8%83%E6%AD%A5figma-%E5%85%A5%E9%96%80-%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%B8%AB%E4%B8%80%E5%AE%9A%E6%9C%83%E7%A2%B0%E5%88%B0%E7%9A%84%E8%A8%AD%E8%A8%88%E5%B7%A5%E5%85%B7/Fri, 17 Apr 2026 00:00:00 +0000https://ericchung24.github.io/blog/p/%E6%96%B0%E6%89%8B%E7%AC%AC%E5%8D%81%E4%B8%83%E6%AD%A5figma-%E5%85%A5%E9%96%80-%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%B8%AB%E4%B8%80%E5%AE%9A%E6%9C%83%E7%A2%B0%E5%88%B0%E7%9A%84%E8%A8%AD%E8%A8%88%E5%B7%A5%E5%85%B7/<img src="https://cdn.sanity.io/images/599r6htc/regionalized/5094051dac77593d0f0978bdcbabaf79e5bb855c-1080x1080.png?w=540&h=540&q=75&fit=max&auto=format" alt="Featured image of post 新手第十七步：Figma 入門　前端工程師一定會碰到的設計工具" /><p>很多新手以為 Figma 是設計師才需要學的工具，但其實不是。</p> <p>只要你是前端工程師，你很快就會碰到這些情況：</p> <ul> <li>設計師丟一個 Figma 連結給你</li> <li>你要量按鈕尺寸、看字體大小、抓顏色碼</li> <li>你要確認某個區塊在手機版怎麼排</li> <li>你要看 hover 狀態、元件變體、間距規則</li> </ul> <p>也就是說，<strong>你不一定要用 Figma 畫設計稿，但你幾乎一定要會看 Figma。</strong></p> <hr> <h2 id="1-figma-是什麼">1. Figma 是什麼？ </h2><p>Figma 是一個雲端 UI / UX 設計工具。</p> <p>設計師可以用它來做：</p> <ul> <li>網站設計稿</li> <li>App 畫面</li> <li>元件庫</li> <li>Prototype（互動原型）</li> <li>團隊設計協作</li> </ul> <p>而前端工程師最常用它來：</p> <ul> <li>看設計稿</li> <li>量尺寸</li> <li>查顏色</li> <li>看字體</li> <li>確認元件狀態</li> </ul> <p>你可以把 Figma 想成：</p> <blockquote> <p><strong>設計稿版的 Google Docs。</strong></p> </blockquote> <p>它強的地方不是只有畫圖，而是多人協作、雲端同步、分享方便。</p> <hr> <h2 id="2-為什麼前端工程師要會-figma">2. 為什麼前端工程師要會 Figma？ </h2><p>因為現在大部分公司，設計交付幾乎都在 Figma 上完成。</p> <p>以前可能是 PSD、Sketch、Zeplin，現在很多團隊直接用 Figma 一條龍處理。</p> <p>如果你不會看 Figma，常常會出現這些問題：</p> <ul> <li>切版尺寸抓錯</li> <li>間距亂掉</li> <li>字重看錯</li> <li>顏色用錯</li> <li>手機版和桌機版搞混</li> </ul> <p>所以學 Figma 對前端來說，不是為了變設計師，而是為了：</p> <p><strong>把設計稿正確地做成畫面。</strong></p> <hr> <h2 id="3-figma-裡最常見的幾個概念">3. Figma 裡最常見的幾個概念 </h2><p>剛打開 Figma 時，新手很容易被一堆面板嚇到。其實你先懂下面幾個概念就夠了。</p> <h3 id="frame">Frame </h3><p>Frame 可以理解成一個畫板，通常代表：</p> <ul> <li>一個頁面</li> <li>一個區塊</li> <li>一個手機畫面</li> <li>一個桌機版面</li> </ul> <p>你可以把它想成設計稿裡的主要容器。</p> <h3 id="layer">Layer </h3><p>每一個文字、按鈕、圖片、背景區塊，都是一個 layer。<br> 這和你在前端裡看到的 DOM 結構有點像。</p> <h3 id="component">Component </h3><p>設計師會把常用的按鈕、卡片、輸入框做成 Component。<br> 這跟你在 React 或 Vue 裡寫元件的概念很像。</p> <h3 id="auto-layout">Auto Layout </h3><p>這是 Figma 很重要的功能。<br> 它讓元件在排列時會自動維持：</p> <ul> <li>間距</li> <li>對齊</li> <li>內距</li> </ul> <p>你可以把它想成設計稿版本的 <code>flex</code>。</p> <hr> <h2 id="4-前端工程師最常怎麼用-figma">4. 前端工程師最常怎麼用 Figma？ </h2><p>這一段最實際。</p> <p>前端在 Figma 裡最常做的事通常不是「設計」，而是「讀設計稿」。</p> <p>例如：</p> <ul> <li>看容器寬度是 <code>1200px</code> 還是 <code>1280px</code></li> <li>看按鈕高度是多少</li> <li>看字體大小是 <code>16px</code> 還是 <code>18px</code></li> <li>看顏色是 <code>#2563EB</code> 還是 <code>#1D4ED8</code></li> <li>看元素和元素之間的間距</li> <li>看元件有沒有 hover / active / disabled 狀態</li> </ul> <p>所以你不需要一開始就學會做很完整的 UI 設計，<br> 但你一定要先學會怎麼「看懂」設計稿。</p> <hr> <h2 id="5-用-figma-看設計稿時前端最該注意什麼">5. 用 Figma 看設計稿時，前端最該注意什麼？ </h2><p>很多新手只看畫面長相，卻沒注意真正會影響切版的細節。</p> <p>你至少要看這幾個地方：</p> <h3 id="1-字體">1. 字體 </h3><ul> <li>字型名稱</li> <li>字體大小</li> <li>字重</li> <li>行高</li> </ul> <h3 id="2-顏色">2. 顏色 </h3><ul> <li>文字色</li> <li>背景色</li> <li>邊框色</li> <li>hover 狀態色</li> </ul> <h3 id="3-間距">3. 間距 </h3><ul> <li>padding</li> <li>margin</li> <li>元素和元素之間的 gap</li> </ul> <h3 id="4-響應式版本">4. 響應式版本 </h3><ul> <li>桌機版</li> <li>平板版</li> <li>手機版</li> </ul> <h3 id="5-元件狀態">5. 元件狀態 </h3><ul> <li>default</li> <li>hover</li> <li>active</li> <li>disabled</li> </ul> <p>這些東西如果一開始沒看清楚，後面切版常常會一直返工。</p> <hr> <h2 id="6-figma-和前端開發的關係">6. Figma 和前端開發的關係 </h2><p>這裡有一個觀念很重要：</p> <blockquote> <p><strong>Figma 不是程式碼，但它會直接影響你的程式碼。</strong></p> </blockquote> <p>因為你最後寫的 HTML、CSS、React component，很多細節都來自設計稿。</p> <p>例如設計師在 Figma 裡做一個按鈕元件，前端可能就會對應做出：</p> <ul> <li>Button component</li> <li>size variant</li> <li>color variant</li> <li>disabled state</li> </ul> <p>所以當你越懂 Figma，你在實作 UI 時就越容易抓到真正的結構，而不是只照著畫面硬刻。</p> <hr> <h2 id="7-figma-和-codepen-有什麼不同">7. Figma 和 CodePen 有什麼不同？ </h2><p>這兩個工具常常一起出現，但它們做的事完全不同。</p> <h3 id="figma">Figma </h3><ul> <li>偏設計</li> <li>用來畫介面、看設計稿、做 prototype</li> <li>重點是視覺和版面規劃</li> </ul> <h3 id="codepen">CodePen </h3><ul> <li>偏實作</li> <li>用來寫 HTML / CSS / JavaScript</li> <li>重點是把想法快速做成真的畫面</li> </ul> <p>你可以這樣記：</p> <ul> <li><strong>Figma 是先看設計</strong></li> <li><strong>CodePen 是再動手做</strong></li> </ul> <p>兩者不是競爭關係，而是前後流程。</p> <hr> <h2 id="8-給新手的學習建議">8. 給新手的學習建議 </h2><p>如果你是前端新手，我建議你先學會這些基本操作：</p> <ol> <li>開啟 Figma 檔案</li> <li>找到頁面和 Frame</li> <li>看文字大小、顏色、間距</li> <li>知道怎麼看 component 和 variant</li> <li>知道桌機版和手機版切換在哪裡</li> </ol> <p>你不一定要一開始就去研究很深的設計系統，<br> 但至少要先讓自己能夠順利地「從設計稿走到切版」。</p> <hr> <h2 id="結語前端不只是在寫程式也是在讀設計">結語：前端不只是在寫程式，也是在讀設計 </h2><p>很多人以為前端工程師的工作只是把功能做出來，但其實不是。<br> 前端很大一部分工作，是把設計師的想法正確地轉成可以互動的介面。</p> <p>而 Figma，就是現在這個流程裡非常核心的工具。</p> <p>你不需要先成為設計師，才開始學 Figma。<br> 你只需要先學會一件事：</p> <p><strong>怎麼用它看懂設計稿。</strong></p> <p>這件事一旦打通，你的切版效率會高很多，和設計師溝通也會順很多。</p> <p><strong>接下來你可以做什麼？</strong><br> 如果你願意，下一篇我們可以接著寫 <strong>前端工程師怎麼看設計稿切版</strong>，把 Figma 裡的尺寸、字體、顏色、間距，真正對應到 HTML 和 CSS 的實作思路。</p> <p><strong>準備好把設計稿變成真正的網頁了嗎？下一篇見！</strong></p>