iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
IT 管理

前端工程師&UI 的30天約會:教會猴子用Figma! 系列

在這個系列中,將會深入探討如何透過 Figma 實現設計與開發的協作。我們將從淺至深,從小元件到最終實現完稿,一步步地演示如何利用 Figma 工具,促進設計師與工程師們的合作。

鐵人鍊成 | 共 30 篇文章 | 4 人訂閱 訂閱系列文 RSS系列文 團隊擁有夢想的鐵人猴子隊
DAY 11

[Day11] 10. Figma 基本操作(六):畫布區

設計師在交付設計稿時,除了基本架構頁面外,更多的是需要依據功能陳列畫面、攤出互動細節和流程等輔助工程師開發的呈現(如下圖),工作中遇過比較資深或從來沒接觸過(也...

2024-09-23 ‧ 由 percev_shih 分享
DAY 12

[Day12] 11. Figma 基本操作(七):屬性區 - Design & Prototype

屬性區主要用來查看和調整物件的屬性,還可以在此設計 Prototype 、匯出檔案和查看 Dev Code 等進階功能,本章將一一介紹屬性區的功能。 屬性區頂部...

2024-09-24 ‧ 由 percev_shih 分享
DAY 13

[Day13] 12. Figma 基本操作(八):屬性區 - export

過去前端工程師在刻畫面時,需要由設計師匯出一包設計素材庫供切版使用,現在 Figma 的共同協作讓所有專案成員都能自由匯出檔案,今天我們來聊聊該怎麼使用 Fig...

2024-09-25 ‧ 由 percev_shih 分享
DAY 14

[Day14] 13. Figma 基本操作(九):屬性區 - Frame

屬性區其實還會隨著工具和物件狀態不同而有對應的顯示,先前在介紹工具列的章節有稍稍提到 Frame 框架工具,其實除了可以自定義框架大小外,Figma 還有內建的...

2024-09-26 ‧ 由 percev_shih 分享
DAY 15

[Day15] 14. Figma 基本操作(十):Help and Resources

基本操作差不多都介紹完畢了,今天將聊聊在屬性區右下角的問號圈圈! Help and Resources 在 Figma App 的上方有檔案、編輯、文字和幫助等...

2024-09-27 ‧ 由 percev_shih 分享
DAY 16

[Day16] 15. Figma Dev mode 開發模式 (一)

(圖片來源:Figma Dev Mode Guide)Figma 的開發模式其實是從 2023 年開始推出的,為了讓平台不僅僅是給設計師使用,它針對開發人員需求...

2024-09-28 ‧ 由 percev_shih 分享
DAY 17

[Day17] 16. Figma Dev mode 開發模式 (二)

在開發模式下, Figma 左右兩側的頁面圖層區與屬性區和設計模式會有些不同。 Ready for Dev 設計師們在分階段交付設計稿時,會利用 Ready f...

2024-09-29 ‧ 由 percev_shih 分享
DAY 18

[Day18] 17. Figma Dev mode 開發模式(三)

昨天我們介紹了在 Dev mode 開發者所看到的左側區塊內容,今天將會接續討論右側屬性面板,本區塊最上方有兩個選項可切換:檢視 Inspect 和外掛 Plu...

2024-09-30 ‧ 由 percev_shih 分享
DAY 19

[Day19] 18. Figma Dev mode 開發模式(四)

昨天簡單展示了 Inspect 介面所包含的內容,今天將接續介紹 plugins 外掛/插件這部分。 Plugins 如 Figma 介紹所說 Keep wo...

2024-10-01 ‧ 由 percev_shih 分享
DAY 20

[Day20] 19. Figma Dev Mode - 快速鍵(上)

開發模式的介紹也差不多告一段落了,接下來將小小總結一下對於前端工程師比較常用的操作快速鍵。 Figma 在幫助資源中有提供快速鍵面板 keyboard shor...

2024-10-02 ‧ 由 percev_shih 分享