Figma 跨平台設計的字型選擇
在現代設計中，跨平台設計是一個常見的挑戰。在字型選擇方面，我們需要盡量符合各平台的慣用字型，以確保使用者體驗和設計稿的還原度。在這篇文章中，我會分享 CMoney 設計師在 Figma 選用字型時的策略。
For Native APP
我們在設計 APP 時是先在 Figma 畫 iOS 版，字型選用 PingFang TC 與 SF Pro ( 符合 iOS 預設系統字 )，需特別交待 Android 情境、例如使用 Android 原生元件時，則補充部分 Android 設計稿，設計稿採用 Roboto ( Android 預設系統字、支援中文 )。
原因是的我們的手機使用者 iOS 居多，所以我們第一優先提供 iOS 版設計稿，方便檢查開發與設計的還原度。
也因為要選用 PingFang TC 與 SF Pro 這兩種 Windows 所沒有的字型，CMoney 的 UI/UX Designer 是配給 Mac 作為工作用電腦的。
For Web
為網頁設計又是另一回事。在 Desktop ( 大螢幕 ) 的解析度下，使用者們會使用 Windows 與 Mac 來閱覽網頁，而我們來自 Windows 的造訪數量又遠大於 Mac，所以字體上我們要選用 Windows（用戶端）和 Mac（設計師工作端）都有的字型，因此選用 Noto Sans TC，英數則用 Arial。
Arial 是 Windows 與 Mac 都內建的英數字型，Noto Sans 則是內建於現代的瀏覽器如 Chrome / Safari / Edge，因此使用者都能存取得到我們設計稿的字型，當然我們也會在 Font-family 中多宣告幾種無襯線字來確保顯示效果。
Figma 的原生字型 — Inter
Inter 是 Figma 中的預設字型，是一款無襯線字體，與常見的 Arial 字體相比有幾個不同之處 :
- 首先，Inter 字體在細微的字形和比例上進行了優化，使其在不同解析度和螢幕尺寸下呈現更清晰和一致的效果。
- Inter 字體支援多語言，包括中文，這對於跨平台設計和國際化非常重要。
- Inter 字體被設計為在不同平台和設備上都能提供良好的可讀性和美學體驗，這使它成為 Figma 適合多平台設計的理想字體選擇。
但 Inter 並非是瀏覽器、桌機的內建字體，因此它目前較不適合放入 Font-Family 中。
Noto Sans TC 在 Figma 中的行高 ( line-height ) 問題
Figma 中設定完字型後，再來就是設定 Line-height，雖然可以使用 Auto，但 Figma 為不同字型所自動抓取的行高是不一樣的，連同家族的 Noto Sans 與 Noto Sans TC 都不一樣，因此在中文字與英數採用不同字型的情況下，確實宣告 Line-height 會是個必要的步驟。
以上是這次的分享，感謝您的閱讀 ~
