鐵人檔案
在這個系列中，將會深入探討如何透過 Figma 實現設計與開發的協作。我們將從淺至深，從小元件到最終實現完稿，一步步地演示如何利用 Figma 工具，促進設計師與工程師們的合作。
設計師在交付設計稿時，除了基本架構頁面外，更多的是需要依據功能陳列畫面、攤出互動細節和流程等輔助工程師開發的呈現（如下圖），工作中遇過比較資深或從來沒接觸過（也...
屬性區主要用來查看和調整物件的屬性，還可以在此設計 Prototype 、匯出檔案和查看 Dev Code 等進階功能，本章將一一介紹屬性區的功能。 屬性區頂部...
過去前端工程師在刻畫面時，需要由設計師匯出一包設計素材庫供切版使用，現在 Figma 的共同協作讓所有專案成員都能自由匯出檔案，今天我們來聊聊該怎麼使用 Fig...
屬性區其實還會隨著工具和物件狀態不同而有對應的顯示，先前在介紹工具列的章節有稍稍提到 Frame 框架工具，其實除了可以自定義框架大小外，Figma 還有內建的...
基本操作差不多都介紹完畢了，今天將聊聊在屬性區右下角的問號圈圈！ Help and Resources 在 Figma App 的上方有檔案、編輯、文字和幫助等...
(圖片來源：Figma Dev Mode Guide)Figma 的開發模式其實是從 2023 年開始推出的，為了讓平台不僅僅是給設計師使用，它針對開發人員需求...
在開發模式下， Figma 左右兩側的頁面圖層區與屬性區和設計模式會有些不同。 Ready for Dev 設計師們在分階段交付設計稿時，會利用 Ready f...
昨天我們介紹了在 Dev mode 開發者所看到的左側區塊內容，今天將會接續討論右側屬性面板，本區塊最上方有兩個選項可切換：檢視 Inspect 和外掛 Plu...
昨天簡單展示了 Inspect 介面所包含的內容，今天將接續介紹 plugins 外掛/插件這部分。 Plugins 如 Figma 介紹所說 Keep wo...
開發模式的介紹也差不多告一段落了，接下來將小小總結一下對於前端工程師比較常用的操作快速鍵。 Figma 在幫助資源中有提供快速鍵面板 keyboard shor...
