有設計底子的自學UI是很快的，開始進行UI設計前，幾個重要的基本設定要先做好，本篇不包含網站上內容要怎麼呈現，這一部分請看這篇文章 ->SEO網站架構，不用Coding也會的簡易流程，非專業的直白說明
第一步，了解RWD的尺寸
做設計一定要先有尺寸才知道怎麼做，當然網站設計也是一樣，以我的習慣會出三種尺寸，作為響應式網頁RWD使用，但如果沒這麼講究，也可以只出兩版，手機跟網頁就好了，看你們的交付規格需要多詳細。
- 網頁尺寸：W1440 x H1024
- 平板尺寸：W834 x H1194
- 手機尺寸：W375 x H812
其實這些尺寸剛好在Figma的Frame選項裡面都選得到，老實說不太需要在意高度，差不多就可以了，工程師只需要知道當你的畫面縮小、變窄的時候，會怎麼呈現就OK，主要還是看你跟公程師之間的溝通。
第二步，把Guideline做好
效仿套版的網站的基本設定，比如說Wix、Wordpress都有預設的地方讓你設定主要色系跟字體， Figma也可以讓你在Style的地方先設定好常用色跟字體定義，我們先依據以下基本條件設定好，會更容易與工程師之間的溝通，在做整個網站設計的時候也比較有依循
- Color Theme：
- Accent Color：強調色（在Wix只能設定四種）
- Base Color：基本色，基本上用於內文居多
- Text Color：Title、Subtitles、Body text、Secondary text、Links & actions
- Button Color：Primary button、Secondary Color（這邊最好把所有的按鈕顯示動態做完，包含Regular、Hover、Disable）
- Text：除了中文字通常連英文字也要做進來比較有規範，右邊的Styles可以先預設好，最好是可以找網頁上有的Font，比如說Google Font，直接貼連結在此，工程師就會更好找
第三步，把Header跟Footer做成Component
要知道UI設計中，常用的東西都做成元件是比較方便的，二來對於使用者來說也不會有太多不同的操作習慣，把畫面都定義下來對於UX來說也是相對容易使用的！
這邊不會做也沒關係，直接在Google上面找Header&Footer Figma，就有一堆做好的元件可以拿來使用，最多就是改改文字跟連結動畫的呈現而已，畢竟大部分的網站，導覽列跟Footer的樣式都差不多一樣～ 只是為了要更好的導航User到他想要的地方，所以可以找到如下這種模板，打開來就可以用了。
第四步，準備好框架
網站的左右兩方都一定會有留白，所以我們在設計的時候可以先設定好格線，方便設計的時候按照格線走，我只能說12格欄位設計是網頁設計的課綱了，上課基本上都一定會上到，基本上就是固定的原則，所以就照抄就好。
在網頁設計上所有的間隔或數字基本上都是4的倍數，比如說框架的倒圓角也會是以4為基準去設計，包含字體通常也是4的倍數字級，但在設計領域裡面沒有絕對啦，有Ground rules只是方便大家溝通。
心得小Tips
除了以上的基本設定以外，一些常用的呈現最好也固定下來變成元件，可以找到Template來幫助自己整理UI Kit在自己的作業區，並且把他們都定義下來，比較常用的就是Cards, Dialog, Input, Button, Icon，提供以下Template的連結給各位-> https://www.figma.com/@seorp
除此之外善用Auto layout也是很重要的，幫助自己在設計上調整參數就可以達到想要的效果；善用Prototype作為動畫呈現，也有助於取得客戶認同以及跟工程師討論怎麼呈現。