UI: 搜索欄 Search Bar 製作 | Figma 教學
這集我們來看一下如何製作像 搜索欄 (Search Bar) 的UI設計. 我們會學到如何設定較好的Corner Radius 讓動態設計更順暢.
設計檔: https://drive.google.com/drive/u/3/folders/18pohZCy0G8xeACDqVsCiqiTV5Hr-oRUj
支持這頻道: https://ko-fi.com/alandesign
---------------------------------------------------------------------------------------------------------
0:00 設計介紹
0:52 Icon 設定
2:59 Icon 按鈕設定
5:20 搜索欄單一組裝
9:12 Instance Swap & Text Properties
10:47 搜索欄全部組裝
15:06 Corner Radius 弧度
16:09 搜索欄優化
27:14 設計結尾
---------------------------------------------------------------------------------------------------------
#figma搜索欄設計 #FigmaSearchBar設計 #搜索設計UI #figma教學
設計檔: https://drive.google.com/drive/u/3/folders/18pohZCy0G8xeACDqVsCiqiTV5Hr-oRUj
支持這頻道: https://ko-fi.com/alandesign
---------------------------------------------------------------------------------------------------------
0:00 設計介紹
0:52 Icon 設定
2:59 Icon 按鈕設定
5:20 搜索欄單一組裝
9:12 Instance Swap & Text Properties
10:47 搜索欄全部組裝
15:06 Corner Radius 弧度
16:09 搜索欄優化
27:14 設計結尾
---------------------------------------------------------------------------------------------------------
#figma搜索欄設計 #FigmaSearchBar設計 #搜索設計UI #figma教學