如何交付設計與素材給前端工程師？設計 x 前端溝通基礎篇. 這篇適合常做網站的設計師或是常需要交付文案與素材給工程師的人，一些基本不錯的方式… | by Doppler Kuo | AAPD — As A Product Designer | Medium
我是一名曾經由設計師轉為前端工程師，現職產品經理的工作者，自己本身用過 Adobe PhotoShop (PS), Adobe Illustrator (Ai), Sketch, Zeplin 到現在的 Figma 及 Adobe Xd 設計過，除此之外大概也配合過 30 位以上的設計師。 雖然現在幾乎不怎麼做設計，但分享我個人在執行前端時，覺得很棒的設計稿及素材接收格式。 無情推薦 Adobe Xd 或 Figma。相關標註可以用簡報或在設計稿旁空白區標註 我認為 Figma 跟 Xd 還是最讓我覺得很方便，尤其是在意字重，理論上 Figma 也是網頁，可以讓設計稿跟網頁呈現一樣的字重；而其他是因為我個人沒有在續購 PS, Ai 所以拿到檔案也無法開啟，更不用說一般前端工程師，此外 Sketch 也可透過 Adobe Xd 開啟，支援上大致上沒問題。 Photoshop 本來就是針對影像處理，而 Ai 針對輸出品處理，UX 上很不一樣；而 Figma 與 Xd 都可以免費開啟閱讀，方便直接複製文案及觀看尺寸，2022 年我還是認為這兩者是設計很好的設計平台。 例如空白狀態、hover、下拉選單，都可以額外開一個畫板或放旁邊附上文字說明即可。那也可以特別區分哪些是全站通用 (global)，工程師看到會很開心。 (1) 畫板大小：根據客戶或設計師會觀看成品的裝置去開，以便到時候檢測方便。但要注意！設計稿須考量真實狀況，例如你使用 Mac 開網頁，你會有一堆工具列，所以實際網頁高度很窄；或是手機會有網址跟工具列，也需要注意，這樣才能確保你審稿時不會覺得哪裡怪怪的！ (2) 尺寸標註：如果已經用 Figma 或 Xd， 基本上尺寸不太需要特別去標註，該平台可以直接看得到顏色、大小、間距。 額外進階：如果設計稿有很多標準規則，並能將以下一開始額外整理成一份設計準則 (UI Guideline) 出來，會很有效提升工程師效率 任何根據不同裝置尺寸而有不一樣的規則需要額外溝通，常見的設計可以是： 但其實 RWD 蠻多東西的，可能有空再仔細整理一篇，但無論如何，心法就是： 目前這畫面如果螢幕開始拉大縮小拉高拉矮，每個元件會變大變小嗎？位置在哪裡？ 放 google drive 即可 非常簡單，要讓網站跑得快，圖片要剛剛好，可以根據下列原則 Q: 哪些東西要特別出圖，哪些不用？
Explore this link on the map →