如何在Figma 輸出APP(Android,IOS)文件給開發團隊?

Figma在現今的Product Design中已經有愈趨重要的地位,它提供了讓設計師與工程師能更好協作的環境,但在眾多的Figma教學中,我發現很少會談到如何出圖的部分,因此今天想要寫一些目前小編研究出來的方法,也歡迎大家不吝嗇指教!

如何輸出IOS?

IOS比起Android來說非常簡單,他主要需要輸出的有三種格式,分別是1x,2x,3x,基本上在Figma上可以請工程師在拿到設計稿時直接爆按三次右上角的加號➕即可,如果要比較搞剛一點,可以在suffix上寫個@1x(2x和3x Figma會自動寫上去,神奇不神奇)就好了,完成的設定會長這樣:

IOS出圖Figma 設定

如何輸出Android?

很不幸的,另一方面有一個叫做安卓 (Android)的陣營,因為他們的手機種類真的太多了,因此有五種尺寸要輸出,這五種尺寸分別為:

來源:Support different pixel densities | Android Developers

根據手機的解析度的不同,程式會抓這五種不同解析度的圖片,那在Figma要怎麼設呢?

用Figma怎麼可以不用外掛(plug-in)?因此現在介紹一個在出圖時快被搞瘋的設計師與工程師一個好用的外掛:

Export Settings Helper(可點此連結安裝)

當打開此外掛時,可以點至Apply for Android

就會發現Export這裡他都幫你設好了

但這時候就會發生一個問題,就是view only的帳號是無法用外掛的,如果要讓工程師直接導出的話,我的做法會是將這張圖給他們,並寫教學(可點此下載)讓工程師可以。

後記小murmur:有些人可能會說直接輸出到zeplin就好,但公司可能來不及申請經費,然後也有看到一個外掛叫做Android Resources Export,但就像我剛剛說的view only不能用外掛,這樣就不能直接給工程師設計稿了…

https://medium.com/as-a-product-designer

--

--

林展顏Dora Lin
AAPD — As A Product Designer

目前為神經科學領域的UIUX Designer,曾任汽車管理系統設計師,喜歡接觸一般生活不常接觸的領域,改寫他們的經驗。歡迎大家搜尋我的Linkedin討論職涯相關議題