Figma 是一款 UI/UX 使用者介面與體驗設計軟體，專用於介面設計和原型製作，能讓多名設計師同時在同一專案上協作，這使得團隊合作變得更加簡單。Figma 支援向量圖形編輯，並提供各種設計元件庫和擴充套件，方便設計師快速建立和調整設計。
Figma 不僅適用於設計師，也對開發者友好。開發者可以直接查看設計的樣式、間距等細節，並導出設計資產和切圖標註，這極大地縮短了設計與開發之間的溝通時間。
我們可以直接註冊並下載軟體到 Windows, macOS 使用，並且 Figma 是網頁瀏覽器就能打開的軟體，因此就算不安裝也可以在任何設備上使用，包括 Linux 作業系統等。
很開心這次可以挑戰鐵人賽！接下來的 30 天我會每天發佈一則關於 Figma 的小教學，並且為了能夠有體驗更好地學習軟體操作，也會搭配一支螢幕錄影的影片，可以點進 YouTube 頻道觀看順便訂閱噢！🥸
https://youtu.be/hFYzFushrYY?si=gAX4dw0fXayAW2cz
在現代網頁設計與開發流程中
UI 設計師與前端工程師之間的協作至關重要
而 Figma 作為一款介面設計工具
當然有著強大的協作功能和方便的標註系統
成為了許多設計團隊的首選
這個單元將介紹如何透過 Figma 設計稿
進行前端工程標註和交付
確保設計意圖準確傳達
並提高產品開發效率
回到我們的 Figma
就像前面說到的
當 UI 設計稿完成後
下一步就是交付給前端工程師開發
只要點擊右上角的 Share 分享
就可以透過 Email 邀請相關工程師加入
輸入信箱後
記得調整成 can view 也就是檢視權限
也可以分享連結
我們切換成工程師的帳號來看看
可以告知工程師被邀請後
在通知訊息裡可以看到被邀請的檔案
點選接受後就會開啟檔案
畫面上方會明確告知目前處於檢視模式
工程師就可以開始瀏覽你的設計參數
若要下載 Icon 與圖片
選擇到圖片後
右方屬性面板切換到 export 再點擊 +
就可以新增匯出
並且還可以預覽輸出的樣式
如此一來就可以在設計師與工程師之間
建立協作的流程
不過實際在跑專案的時候
人際之間的溝通還是少不了的
工具就是降低人為的摩擦力而已
隨著經驗變多就能夠更好地去發揮了
我們明天見～
社群傳送門 - https://portaly.cc/designer.riven
在 IT 和網路產業近十年的數位產品設計師，專注於 UI/UX 使用者介面與體驗設計領域，在全臺多間大專院校與社群機構擔任顧問及講師，並於國內外各大線上課程平台開立設計課程，目前已累積超過近萬名學員參與上課。
為 Adobe 官方合作的設計師兼 Insider，曾環島舉辦設計工作坊，並獲邀代表台灣飛往美國洛杉磯參加 Adobe MAX 設計師年會，並以設計師 KOL 角色與 Intel、微軟、華碩、微星等知名品牌合作推廣科技產品。
常在 Medium 寫作設計上的知識與觀察，並得到官方認證 #Design 領域 Top Writer，同時也會在 YouTube 上製作影片教學設計的方法，近期開始實驗使用 VTuber 技術在 IG 用 Reels 短影片分享設計技巧。
▌擅長利用淺顯易懂的內容，將艱難的設計與開發技術，用任何人都能夠聽得懂的語彙，說給每一個人聽。
iThome鐵人賽
看影片追技術