#129 從 Figma Community 練習實作 App 畫面
Published in
7 min readOct 29, 2020
目的: 從 Figma Community 找尋有興趣的頁面，從 Xcode 模仿實作 App 頁面。
Figma 官方網站有個貼心的 Community(社區)，分享許多設計師設計的 iOS App 畫面，很適合像彼得潘這樣身上沒有美術血液，但卻想學習 iOS App 開發的人參考模仿。而且 Figma 還提供貼心的畫面檢視功能，所以我們可以直接查詢畫面裡元件的位置，大小，顏色，字型等資訊。接下來就讓我們一步步示範如何從 Figma Community 找尋 IG 相關的設計頁面。
註冊 Figma 帳號
ps: 如果有學生和老師身份，還可以申請教育方案，免費享有付費會員的功能，像是 dev mode。
連到 Figma 的 Community(社區)頁面
搜尋有興趣的主題
在此我們輸入 instagram 後按 enter。
選擇下圖的 Instagram UI Mockup。
開啟檔案
點選右上的 Open in Figma 開啟檔案。
查看 UI 元件的設定
比方點選 po 文的頭像，可知它的寬高是 31.5 pt。
按住 option 鍵移動滑鼠可查詢頭像和其它元件的間距。
顏色，字型和大小也可以查詢，以下圖的文字為例，從右邊顯示的資訊可查詢顏色，字型和大小。
