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教學