自從上次寫了一篇關於Figma的入門文章之後，想到不到大家對Figma的熱情如此的高仗，為了滿足大家學習的熱情，我決定出一個Figma系列小教程，如果有緣，這個教程我會一直堅持將他完善，Figma只是一切的開始。
話題回來，如果你是首次使用Figma的同學，建議安裝Google瀏覽器+Figma的中文插件，不知道如何安裝的同學可以點擊這篇文章，「文章連結」。
這時候我們要新建一個iphoneX的畫布，點擊左上角的#，選擇「畫框」。
選擇好畫布之後，我們就順利的建好了一個畫布，接下來新的問題馬上擺在我們的眼前，ios的組件庫在哪裡獲取呢？
別方，讓我們返回上一層，從最近瀏覽裡選擇一個模板進入，問題不就解決了嗎?（關於組件的問題其實還有高級玩家的付費玩法，以後有機會向大家介紹）
框選其中一個畫布command+c一下，回到我們的項目裡，command+v一下，這時候只需要將狀態欄和底部的安全線粘貼到項目中的畫布上即可。
基礎的控制項搭建完畢之後，我們就要開始正式開始設計啦。首先我們要布局整體的框架，這一步應該對大家來說都非常的簡單。
如果在這過程中遇到字體丟失，需要安裝 Figma Font Helper，這允許你在瀏覽器中訪問本地字體。
接下來就是細節的設計，第一步就是要搞定背景圖片的設計，這一步很簡單，我們只需要找到你喜歡的素材，Command+C然後回到Figma中Command+V一下即可。（建議大家都去嘗試一下，Figma的智能超乎你的想像）
如果這時候你想簡單調整一下圖片的對比度以及飽和度等參數，你只需點擊圖片，就能調節相應的參數。
好了，下面我們快速的完成對圖片文案的設計以及底部TabBar的icon設計。
現在整個設計已經完成了95%，剩下的5%來自於TabBar的細節設計。
Figma實現毛玻璃的效果和Sketch類似，只需要打開「背景模糊」功能即可。
這只是我們的第一個關於Figma的小教程，如果條件允許，往後不僅會繼續完善Figma的基礎教程，還會推出其他軟體的系列教程，比如Protopie，Principle等，也歡迎大家加入我們的知識星球一起學習，一同進步，我們下期再見👋