iT邦幫忙

2023 iThome 鐵人賽

DAY 28
0
自我挑戰組

30天的Figma學習筆記系列 第 28

Day28 Figma強大的Prototype

  • 分享至 

  • xImage
  •  

今天要來介紹的是Figma裡面非常方便的原型工具—Prototype。那它的位置在屬性面板的上方,一般我們平常在畫設計圖時都是在Design,但是我們要切換到Prototype時就可以點選Prototype,這樣就可以開始製作我們的Prototype了!
https://ithelp.ithome.com.tw/upload/images/20231012/20163136XPCR6Hvvxn.jpg
切換到Prototype後我們可以選擇你要呈現的裝置,Figma提供非常多的裝置類型供你做選擇,還可以更改裝置的外框以及背景顏色。
https://ithelp.ithome.com.tw/upload/images/20231012/20163136i4hNOztex0.jpg
那我們要怎麼加入動態效果呢?
首先,需要先設計好兩個頁面,那我們這邊準備一個登入的畫面,以下示範我希望我點選帳號欄位時他會變成右邊藍色的框線且鍵盤會跳出來;
https://ithelp.ithome.com.tw/upload/images/20231012/20163136QCXZookycd.jpg
這時候我們先點選帳號欄位,會跑出一個"+"號,我們按住拖移到我們要切換的下一個頁面,這樣一個簡單的動態效果就連上啦!
https://ithelp.ithome.com.tw/upload/images/20231012/20163136JTV7kDRT0H.jpghttps://ithelp.ithome.com.tw/upload/images/20231012/20163136NFKsgzyB7m.jpg
在我們連上線後,會跳出以下框讓你調整參數:

  • On click→代表你是做點擊的動作
  • Navigate to→代表你是從上一頁導航到下一頁
  • sign in_id_typing→是指我連的下一頁的名稱

Smart animate以下的部分就是可以調整動畫的參數,大家可以嘗試看看不同的樣子,Figma很貼心的有做參數會呈現怎麼樣的效果動畫在下方,個人非常喜歡用Smart animate,他是一個非常好用的效果,大家可以自己試試看!
https://ithelp.ithome.com.tw/upload/images/20231012/20163136vGM9pMs1Q4.jpg
因為做Prototype這樣動態效果用文字敘述其實效果沒有很好,最下面會貼上Figma官方Prototype的教學影片,其實Figma幾乎把所有功能的教學影片都放在他的官方Youtube,大家如果有不懂的地方也可以到他的Youtube頻道找,Figma在有新功能推出時,也會做影片跟大家做解說唷!


Figma教學影片→Figma Tutorial: Prototyping
Figma官方Youtube頻道→Figma
https://ithelp.ithome.com.tw/upload/images/20231012/20163136PGUHTaHTFo.jpg

今天就先到這裡唷!謝謝大家~


上一篇
Day27 Figma另一個強大功能_FigJam
下一篇
Day29 如何展示Prototype?
系列文
30天的Figma學習筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言