這篇文章記錄了使用Figma製作UI元件、以及實際將設計稿刻到網頁上所遇到的問題。這次的設計稿其實是某Figma線上課程的作業，當中運用到了變體、Autolayout等功能。 而網頁部分利用偽元素製作input、同時利用正規表達式限制輸入內容，配合Javascript的監聽。
講了這麼多，實際的設計稿長成下面這樣子：
這篇簡單紀錄一下學習心得，也把Demo與設計稿放下面：
強大的Auto Layout 與 Variants
初學Figma的我在使用Auto Layout時常感到非常困惑，原因是常搞不懂元件中的 Hug contents 、 Fix width 、 Fill container 該如何使用，特別是當元件的層級複雜化之後，該如何調整才能達到自適應的效果，這方面看來只能多熟悉工具、透過多次練習來加強。
不過如果有學過 CSS 中的flex排版的話，對於Auto Layout的概念應該會更好理解。像是轉換方向就是使用 flex-direction ，元素的對齊則是使用 align-items 及 justify-content 。
順帶一提，Auto Layout 快捷鍵是 Shift + A
另一個很棒的功能是變體 Variants ，能減少重複造輪子的時間，同時也能更好管理，就像是網頁上常見的 :hover 、 :active 、 :checked 等樣式都能利用變體功能來製作。元件設計好之後就能從Assets中拉出來，選擇自己要的property。
input的樣式修改
實作中遇到了 input 無法修改CSS的問題，選取型的input都只能用預設樣式(radio、checkbox)，不好看而且與設計稿不同，非常麻煩。這邊的解決方式使用了偽元素 ::before 以及 ::after 來處理，用 label 把 input 包起來的特性，再針對選取後 :checked 的樣式做調整。
有興趣可以參考w3schools所提供的範例。
正規表達式過濾其他格式
為了避免使用者輸入非正確的e-mail格式，這邊用了正規表達式(Regular Expression)來過濾不正確的e-mail，在//中定義出表達式即可。
const re = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;或者是利用 new RegExp 來建立也可以。
let re = new RegExp('^09\d{8}$')接下來就增加判斷式，不符合格式時border變成紅色。
這次的實作心得非常簡短，因為幾乎所有元件都是看著影片跟老師製作，所以其實沒遇到太大的問題，缺點就是大家的作業都長得一樣。這次也抱持著「啊反正我都做設計稿了、不然把它刻出來吧」「啊反正我都刻出來了，不如來寫心得吧」，所以就有了這篇。後續還有很多作業要提交，也會繼續分享心得！