終於開始要幹正事

確認完所有事情後（需求、功能、邏輯），設計師會陸續交付前端工程師用來切版的 UI Mockup。
Figma 能夠直接產出一個分享連結，在 UI 元件中移動鼠標的同時能看到 Padding。

若設計與前端是同步進行、陸續出圖的，工程師們點選連結就能直接看到實時畫面（看得到設計師的進度 🤣）。請設計師在設計稿上標記 「綠色 [Ready for Dev] 的標記」 ，也能更分辨哪些畫面是確定能夠進開發了！

相關的依照流程攤出的更 detail 的畫面，也可以請設計師另外獨立到另外一個 Page。

不過，不同的權限視角，會看到不同的介面，也有不同顆粒度大小的 SPEC。

• viewer：一般免費帳號透過連結進入檔案，可以看到最基本的 SPEC。
• dev mode：2024 年後，Figma 將過去詳細 SPEC 的服務獨立拆出（割韭菜 😭），需要公司為工程師們採購同等設計師等級的付費帳號才能使用（方案參考）。當然，除了單純收錢，Figma 也因應 Develop 的情境推出了很多幫助前端、設計溝通的好用功能和套件！像是 SPEC 紅線標註、提供基本 code 等（了解更多酷功能）。
• editor：設計師角度，可以看到完整的 SPEC。

補充說明：UI Mockup 是什麼

UI（User Interface，使用者介面）是使用者透過對話、行為與機器互動的操作接觸面。
因此人機互動之間能否有良好的使用者體驗（User Experience，UX）則與介面息息相關！

介面的形式有許多種，像是命令式介面（Command-line interface，CLI）、圖形化使用者介面（Graphical User Interface，GUI）、最近流行的 ChatGPT 則是對話式使用者介面（CUI）。

Mockup 是一個靜態的視覺表示，不包含互動的動態功能。

在前端網頁、App 的領域，UI Mockup 是 Wireframe 的下一步，能夠呈現使用者實際會看到的頁面樣子。
平面設計的 Mockup 指的是把設計圖樣合成到商品上（海報、名片等），讓客戶可以在產出前的最後階段確認近真實的樣貌。