iT邦幫忙

2024 iThome 鐵人賽

DAY 3
0
自我挑戰組

UI/UX 新手30天的自學實錄系列 第 7

Figma實作(1)-介面與工具認識

  • 分享至 

  • xImage
  •  

這次實作我將選用Figma,原先就有聽聞此軟體也看過一些操作影片覺得很有趣,但一直沒有深入了解,因此想嘗試用Figma來做我本次的實作

首先登入後的介面如下,我選用的是免費版本
https://ithelp.ithome.com.tw/upload/images/20241005/20169329qUAIjMuK2d.jpg

圖片來源(http://jinjin.mepopedia.com/~jinjin/ui/ui-02.html)

點下「開啟新的Figma檔案」
https://ithelp.ithome.com.tw/upload/images/20241007/20169329NseiUqYo2J.png

下圖是左上角的工具列,圖中選定的框框是可以用來繪製介面的選項
https://ithelp.ithome.com.tw/upload/images/20241007/201693298oA8HNecBG.png

點下去後,最右側便會出現可以選擇想要的界面大小尺寸,如下圖
https://ithelp.ithome.com.tw/upload/images/20241007/20169329FxQE9mKQ4b.png
可以看到有手機、筆電、桌機等不同裝置的尺寸選擇,而Prototype則是可以創建互動流程的地方Yes


https://ithelp.ithome.com.tw/upload/images/20241007/20169329THVCimVyL0.png
此處則是插入物件、外掛的地方

  • 結語

總的來說我覺得Figma的介面很清晰易懂,基本的操作甚至沒看什麼教學就可以摸索出來,並且使用起來非常流暢,期待後續的製作


上一篇
打造出色介面之UI設計原則解析
下一篇
Figma實作(2) : 需求分析及功能確認
系列文
UI/UX 新手30天的自學實錄30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言