官網：https://www.figma.com/
在進入開發之前，免不了需要經過籌劃階段，例如主題的制定、流程的規劃、以及設計環節等等，而整體 UIUX 更算是網頁重要的角色之一，賞心悅目的介面視覺設計(UI)能吸引使用者，流暢縝密的使用者體驗(UX)更能留住使用者，滿足使用者的需求。

為什麼選擇 Figma？

在眾多的設計開發工具中，最多人使用的除了 Adobe XD 之外，還有近年崛起的「Figma」，我個人一開始接觸的工具就是 Figma ，用了好一段時間後很滿意它的表現，也非常推薦！尤其是以下特點：

• 免費！！！
  • 不需要付錢就能享受許多功能，對於大部分的人來說已經非常夠用了～但還是有一些進階的功能需要付費訂閱，不過如果有學生身份的話，用學生方案也能享有許多額外功能！
• 隨時都能用網頁開啟並進行編輯
  • 不一定要下載軟體，用瀏覽器登入後就可以使用了，真的很方便！（但如果很常使用的話還是建議下載一下，畢竟用 Chrome 的話會消耗電腦很多資源～
• 支援線上同時多人協作
  • 根本是團隊的福音～～～ 不論是學生課堂分組或是公司的專案規劃，支援這樣的多人協作真的很方便！
• 隨心分享設計稿連結
  • 點擊分享連結就可以查看完整的設計稿
• 豐富的社群資源
  • 在 Figma 的 Community 社群中，有許多別人分享的素材或 Mockup，可以節省很多 Google 找資料的時間
• 各式各樣的 Plugin
  • 好用的軟體少不了 plugin 的支援，Figma 中有很多免費或付費的 plugin，我個人最常用：
    • Iconify - 頁面設計過程中會需要用到的 icon 裡面幾乎都有！
    • Autoflow - 流程圖必備，因為 Figma 的設計稿目前沒有像 Google 簡報那樣可以直接將區塊用箭頭連接（除非使用 Figma 的 FigJam），在嘗試了一些免費的 plugin 後，我認為這個最實用（更好用的一定是付費的，但窮學生沒錢買訂閱制QQ）

像是規劃階段會遇到的 Brainstorming、Userflow、Moodboard、Wireframe、Mockup、Prototype…等等，都能在 Figma 上實現，至於如何操作 Figma….如果全部寫上來的話，版面肯定不夠QQ 所以容我跳過這部分（跪）

開始設計介面

以下是我預計這次要做的小專案的 Wireframe - 簡易部落格，目前先簡單大概排一下介面，因為時間問題所以沒有到非常完善，之後可能隨時會更動細節（非常臨時決定參加鐵人賽嗚嗚），所以這張圖請先當一下參考～

附上 Figma 設計稿：https://www.figma.com/file/HkRV39EEwxhWDvwYpcwpso/Blog?node-id=0%3A1

題外話：剛好就在幾天前 Adobe 釋出要把 Figma 收購的消息，不知道以後還有沒有免費又好用的軟體可以用…