在這個系列中,將會深入探討如何透過 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...