嗨 ! 大家好，我是阿蘇
今天是Day 7 ，今天會分享 Wireframe 線框稿的教學，在繪製上是使用 Figma 來進行教學，會採淺顯易懂的方式，希望大家能跟我一起用 Figma 開始繪製線框稿，廢話不多說，讓我們開始今天的正題吧!
繪製 Wireframe 線框稿有很多軟體，每個軟體使用方式不太一樣，雖然今天是分享 Figma ，但是繪製概念都是差不多的，開始慢慢熟悉了解 Wireframe 可以靈活運用變通
一、 建立專案
二、 為什麼選擇 Figma ?
二、 Figma 基礎介面
三、 動手做 Frame 頁面 : 製作一個小區塊
四、 Figma Plugins 插件
前往 Figma 網站
點擊建立專案前往下一步吧 !
Su 專題經驗談 ( Figma )
繪製 Wireframe 軟體有很多種，為甚麼我會推薦使用 Figma 呢 ?
剛接觸 Wireframe 第一次繪製時，一開始是使用 Whimsical 這個網站，當初初次使用覺得十分方便，他可以自動幫你弄出基礎版塊(前篇有連結)，對初次繪製的人十分友善，但是使用到後期發現限制較多(使用數量上限)，較無法客製調整及無法呈現精緻度(強迫症患者一個痛苦啊啊啊!)，加上後續設計視覺稿也需要用 Figma 進行繪製，所以開始踏入學習 Figma 之路。
Figma 優點
Su 專題經驗談 ( Whimsical )
Whimsical 介面 (初次使用草稿)
回頭看第一次做的..畫真醜，讓大家笑一下雖然是介紹 Figma ，但是不代表不推薦大家使用 Whimsical 喔 !
Whimsical 是十分適合初次繪製線框稿使用的，有各自的優點，大家還是可以嘗試看看不同的軟體，再找到合適自己的繪製方式。Whimsical 適合對象:
- 畫純線框稿，後續不畫設計稿
- 初次繪製者、不擅長排版繪圖軟體者
- 想要快速繪製 Wireframe
上面介紹完了 Figma 基礎介紹，有了基礎的認識，我們開始試著做個簡單小區塊
首先先拉出你的頁面，或是選擇右邊區塊有 Figma 尺寸( phone、Dekstop 等尺寸)
成功拉出區塊啦 ! 我們會看到左邊 (圖層區) 有多出你剛剛新增的區塊
是不是很簡單呢，然後我們就可以運用區塊跟文字設計出你的 Wireframe ，動手嘗試看看吧 !
補充知識 : 圖層概念是很多繪圖軟體都有的，可以將物件(文字、圖片)利用 Group 群組起來，裡面就可以看到子圖層 / 群組物件，那這樣有什麼好處呢 ? 我們群組後可以點選眼睛圖示顯示/隱藏方便管理，或是拖曳前後覆蓋順序。
以這張圖為範例，我有一個背景方框+文字，我將它 Group 群組起來，設定群組 A區塊 那裡面就有子圖層 / 群組物件 (方框+文字) ，然後左邊就會看到我群組的內容，我將 A區塊擺在最上面優先顯示覆蓋掉後面的 B區塊。
多多利用圖層特性，好好繪製你的 Wireframe 吧！
Figma 擁有豐富的 Plugins 插件，沒有什麼找不到的，只有你想不到的 !
Figma Plugins 可以補足 Figma不足的地方，下面再一一介紹如何安裝及使用以及推薦的插件。
開啟你的軟體，點擊 Resources ，就會看到 Plugins 插件 ，這邊就可以進行搜尋 Plugins 插件並安裝，也能看到下方你已安裝的插件，使用上十分方便。
還有很多有趣、便利的 Plugins ，有興趣的可以多去嘗試看看
(一) Unsplash 高清圖庫
常用的圖庫網站 Unsplash，不用上網就可以直接搜尋，是不是很方便呢!?
(二) Remove BG 去除背景
簡單快速去背
(三) Wireframe 線框範本
Wireframe範本 ，可快速建立再去修改
這個是很推薦的插件，他可以讓我們快速建立樣式，有點類似 Whimsical，也有很多範本可以使用
(四) Color Overlay 重新上色
這個是我很常用的插件，常常用來調整png圖片顏色，可以直接覆蓋十分便利
Figma Plugins真的是十分棒的功能，可以讓你在使用上更便利性，常用的就是圖庫、icon、產生假字、假圖，當然還有很多其他很便利的插件，大家有興趣也可以去搜尋，嘗試看看吧!
今天就 Figma 繪製就介紹到這邊，也歡迎大家一起分享 Figma 的小技巧，如果有疑問的也歡迎留言一起探討 !
讓我們進入 Figma 開始動手繪製你的 Wireframe 吧!
iThome鐵人賽
看影片追技術