#09 參考Figma 設計圖模仿App頁面設計
Published in
Jul 31, 2022
Target:對於沒有美感的我,可以利用模仿Figma上的版面設計,來完成App UI介面的設定。
本次參考的樣板連結如下
加入Tab Bar Controller
將下面的Tab Bar 先做出來
此次僅針對Home頁面進行練習
先拉出Home頁面先拉出Table view controller,並拉出相對應的Cell
在Figma的設計圖圖上按住command鍵就可以抓出該物件與周圍的距離與其大小,便可以在storyboard上拉出相對應的物件
再利用之前課堂上學到的scroll view將其他地方設計出來即可
成品如下,下面的Playing song,我這次是先用一個view替代掉,後續再研究如何解決這塊。