【iOS 】#1 從 Figma 圖稿到製作，製作第一個 iOS App 畫面
最近開始上彼得潘的 iOS 課程，其中一份作業是搭配 sketch 以及 zeplin 製作 iOS UI，不過個人還是比較習慣使用 Figma，所以這篇撰寫的角度是由工程師拿到 Figma 圖稿後，該怎麼著手進行 iOS App 畫面製作。
為什麼選用 Figma？
專門製作 UI 的軟體有很多種，最有名的幾款大致上是 Sketch, Adobe XD, Figma，而近年來越來越多設計師投入 Figma 中，其中的優點有以下：
- 免費：Sketch 僅有 Mac OS 才能下載，並且需要付費。
- 雲端儲存：文件保存在雲端空間中，不需要手動儲存。
- 共同協作：不需下載軟體，每個人都可透過網址連結看到最新的文件版本，並且即時進行修改。
實作 App 畫面
1. 取得 Figma 連結
由設計師製作完成的 UI ，從 Figma 右上角的 Share 鍵分享連結給需要使用的工作夥伴。
貼上連結後即可從瀏覽器中觀看 UI 圖稿。
2. 檢視 Local Styles
若是 UI 中的主色調以及常用樣式，例如陰影效果，通常設計師會設定 Local Styles。在一進網頁的右手邊即可看到這些設定，工程師即可根據這些顏色，先行在程式中設定一些 Global 變數。
3. 檢視元件屬性
左手邊視窗顯示的是每個 UI 畫面，以及每頁 UI 中的所有元件。點擊元件後，除了畫面會顯示元件離其他元件的距離外，右手邊視窗會顯示該元件的所有屬性，包含寬、高、位置、顏色…等。
右下角的地方，可以選擇開發的平台類型，Figma 會顯示相對應的屬性，可讓開發者作為參考。
4. 匯出圖片/Icon
當要匯出圖稿中的圖片或是 icon 時，可以點選圖片後，在右方面板切換至 Export tab，按下「+」後，選擇匯出的格式與圖檔倍率。
5. 在專案中設定將 Local Styles 主色
到 Assets.xcassets 中，把主要會用到的幾種顏色加到專案中。至於 AccentColor 如何修改，可以參照以下彼得潘這篇～
對於多種常用的顏色，也可以在 Assets.xcassets 中用右鍵新增 Color Set，以便之後選色
6. 圖片匯入專案中
一般來說，若圖片是 png 檔案，直接拖拉到 Assets.xcassets ，再去設定其顯示的倍率(1x, 2x, 3x)。不過如果像是 icon ，常常需要根據情況變更大小，這時輸出成 svg 較為適合，拉到 Assets.xcassets 需要額外設定 Resizing，把 Preserve Vector Data 打勾、以及 Scales 設定為 Single Scale。之後在專案中使用時，就會以向量的形式出現。
參考 Figma 畫面，進行 Storyboard 繪製
先來看看設計的手稿，這次先製作首頁除了進度圓的部分。以下列出一些我遇到的問題，以及現階段解決的辦法（因為之後學習後應該會有更好的解法 XD）
1. 旋轉 UI 元件
因為卡片上的房屋 Icon 有做旋轉，針對這個部分，先參照 Apple 的 Document ，在程式碼中 Access 到 UI 元件。
再來對這個 Icon 做旋轉的控制。
homeWhite.transform = CGAffineTransfrom(rotationAngle: -CGFloat.pi/5)
2. 同時具備圓角與陰影
雖然在右邊的屬性控制上，可以用 layer.cornerRadius 製作圓角或設定陰影相關屬性產生陰影，但是兩者不能同時使用。
以上這篇文章提供了兩種方式可以讓 View 同時有圓角以及陰影，後來我選擇使用程式碼的方式。
3. 橫向滑動
UI 介面下半部是橫向移動的卡片，採用 Scroll View，不過 Scroll View 需要設定一些參數，才會有滑動的效果。參考上面這篇後，得知需要在 Scroll View 上設定 contentSize ，設定要滑動的寬度（反之若是縱向的滑動，則設定長度）。
最終畫面呈現
搞了一陣子才完成畫面，這算是我完成的第一個 iOS App 畫面，不過還有許多地方還沒到位，或者是做法不夠好，這就有待之後學習後再來修正囉！
