#09 參考Figma 設計圖模仿App頁面設計

Target:對於沒有美感的我,可以利用模仿Figma上的版面設計,來完成App UI介面的設定。

本次參考的樣板連結如下

加入Tab Bar Controller

將下面的Tab Bar 先做出來

此次僅針對Home頁面進行練習

先拉出Home頁面先拉出Table view controller,並拉出相對應的Cell

在Figma的設計圖圖上按住command鍵就可以抓出該物件與周圍的距離與其大小,便可以在storyboard上拉出相對應的物件

再利用之前課堂上學到的scroll view將其他地方設計出來即可

成品如下,下面的Playing song,我這次是先用一個view替代掉,後續再研究如何解決這塊。

--

--