Figma 是一款 UI/UX 使用者介面與體驗設計軟體，專用於介面設計和原型製作，能讓多名設計師同時在同一專案上協作，這使得團隊合作變得更加簡單。Figma 支援向量圖形編輯，並提供各種設計元件庫和擴充套件，方便設計師快速建立和調整設計。
Figma 不僅適用於設計師，也對開發者友好。開發者可以直接查看設計的樣式、間距等細節，並導出設計資產和切圖標註，這極大地縮短了設計與開發之間的溝通時間。
我們可以直接註冊並下載軟體到 Windows, macOS 使用，並且 Figma 是網頁瀏覽器就能打開的軟體，因此就算不安裝也可以在任何設備上使用，包括 Linux 作業系統等。
很開心這次可以挑戰鐵人賽！接下來的 30 天我會每天發佈一則關於 Figma 的小教學，並且為了能夠有體驗更好地學習軟體操作，也會搭配一支螢幕錄影的影片，可以點進 YouTube 頻道觀看順便訂閱噢！🥸
Isometric 的中文就是「等距」的意思
所以它又被叫作等距插畫或是 2.5D 插畫
「等距透視」的重點就是
Ｘ、Ｙ、Ｚ軸的線之間距離相等且相互平行
可以看作多個小正立方體
在平面創造出一種看似立體的空間
算是一種偽 3D
因此又被稱為 2.5D
因為這種物件需繪製不同角度
我們就可以利用 Figma 的 Plugin 來完成這樣的效果
讓我們來試試看吧
我們今天要嘗試的 Plugin 是這個
「Skew det」
首先先繪製 100x100 的正方形
點擊 Plugin 這邊輸入「SlewDet」
點下去之後就可以開始使用囉
接著在下面這個調整橫條
調整至 -30 度
點擊 運作（Apply）
就會獲得一個梯形
回到 Figma 這裡
右邊角度這裡也幫我輸入 -30 度
我們就得到一個具有等距透視的菱形
這個菱形就是 Isometric 的基礎形狀
那如何完成一個小方塊呢？
Command + C 複製
Command + V 貼上
這樣上下就有了
接著需要完成左右
一樣點擊 Plugin
點下去之後就可以開始使用囉
接著在右邊這個調整橫條
調整至 -30 度
點擊 Apply 運作
就會獲得一個和剛剛不一樣的梯形
接著點擊右鍵找到 垂直翻轉（Filp Vertical）
這樣左右兩面都完成囉～
我們試著上色看看
這就是一個最基本的 Isometric 小方塊！
圓柱也是比照相同的做法
先繪製 100x100 的圓形
開啟擴充套件
在下面這邊調整至 -30 度
點擊 運行
重新調整一下它的寬度
四捨五入即可
Command + C 複製
Command + V 貼上
這樣上下就完成囉
接著繪製一個寬跟圓形一樣寬的數值
對齊圓形的中心點
選取方形和底部的圓形
來到上面合併
將這兩個形狀合起來
接著把上方的圓形點擊右鍵找到 Bring to front
移至最前
調整好底部的顏色就完成囉～
知道這個等距透視的小技巧
未來就可以應用在很多地方～
敬請期待！
社群傳送門 - https://portaly.cc/designer.riven
在 IT 和網路產業近十年的數位產品設計師，專注於 UI/UX 使用者介面與體驗設計領域，在全臺多間大專院校與社群機構擔任顧問及講師，並於國內外各大線上課程平台開立設計課程，目前已累積超過近萬名學員參與上課。
為 Adobe 官方合作的設計師兼 Insider，曾環島舉辦設計工作坊，並獲邀代表台灣飛往美國洛杉磯參加 Adobe MAX 設計師年會，並以設計師 KOL 角色與 Intel、微軟、華碩、微星等知名品牌合作推廣科技產品。
常在 Medium 寫作設計上的知識與觀察，並得到官方認證 #Design 領域 Top Writer，同時也會在 YouTube 上製作影片教學設計的方法，近期開始實驗使用 VTuber 技術在 IG 用 Reels 短影片分享設計技巧。
▌擅長利用淺顯易懂的內容，將艱難的設計與開發技術，用任何人都能夠聽得懂的語彙，說給每一個人聽。
iThome鐵人賽
看影片追技術