UX Design

UX補充錠|培養洞察力

Figma Config 2025:用 AI 徹底重塑數位產業的工作流程

2025 年 Figma Config 年度發表會來了!這次根本是要改寫很多產業的工作流程! 不僅提升設計人數位產品的工作效率與流程,而且就連非設計人都可以直接從 Figma 輕鬆快速的產出需要的設計!以下介紹五個這次發表會的重點項目。 Figma Sites:從設計、Prototype、發部到網頁上一條龍完成! 最後能發表到網頁上很驚人!這功能直接是 All in one 產品開發了,從設計、Prototype、最後直接發部到網站上,而且具備 RWD(響應式設計),完全可以 No code 做完網頁設計。 雖然還在測試階段,但這功能上線應該會影響很多網頁設計的工作流程跟工具,完全可以在Figma軟體中完成所有的工作,一切都可以更從設計角度出發,並且大幅降低開發時間!🥹 想看更多 Figma Sites Figma Buzz:行銷人、創作者、廣告人的大福音 這功能和 Canva 在做的事情很像,而這次,Figma 先以建立數百個的精美的範本,或是品牌方團隊也可自己建立品牌範本之後,讓團隊非設計背景的人,都可以直接按照模板去填入需要的內容。 甚至可以透過簡單的文字表格,定義好的欄位對應的位置,就可以大量將標格中的內容產出大量的素材!這個今年 Canva 也發表了表格產出設計的功能,還沒實測過兩邊差異,但可以用表格產圖這功能對於廣告人來說,過去要將表格發包給設計師做的,現在透過 Figma 就可以生圖出來,根本大幅降低時間成本!這功能也還在測試階段,期待正式普及會發生什麼事! 想看更多 Figma Buzz Figma Make:用文字或圖片 Prompt 就幫你生成介面 透過 Prompt 的方式直接產出高保真度、而且有程式碼的設計原型,然後繼續下 Prompt 來微調裡面的邊距、圖像等等,而且不僅支援文字,連介面也都可以直接丟給他來幫忙產出,這樣的好處是可以更快有互動式的Prototype,對於要和使用者驗證功能、或是介紹功能時都可以加速! 而像這樣將文字轉換成設計原型的工具在市面上也已經有了,像是 Bolt、Lovable,大家都相繼出現透過 AI 方式快速產出介面設計的互動模型功能,但 Figma 的好處就是他在 UIUX的市佔率極高,能在同一個軟體做到相同的事,一定能讓互動與元件都更相容,體驗也會更一致,這功能也還在測試階段。 想看更多 Figma Make

Read More »

如何設定 Figma 封面 Cover ? 2025 官方更新尺寸 1920×1080 (16:9) Thumbnail

每開一個 Figma 檔案,當然需要設定好一個漂亮又能識別檔案的 Figma 封面圖 Cover,(在 Figma 中稱之為 Thumbnail )做法簡單三步驟就能輕鬆完成! Figma 封面圖 Step1:新增 Frame 1920 x 1080 目前官方更新 Figma 封面圖建議尺寸為 1920 x 1080 (16:9),在一個檔案中,開一個 1920×1080 的 Frame。 Figma 封面圖 Step2:製作封面圖設計 做好你預期想要放封面的文字就行,可以依據你會有的當案類型來規劃,例如產品可能本身有多個,且產品會有幾個大的 Project,每一個 Project 會有新的迭代,或是新的功能要上線,所以我會設置: Figma 封面圖 Step3:右鍵 Set as thumbnail Figma 的檔案封面圖又稱之為 Thumbnail,點擊這個 Frame,右鍵選擇「Set as thumbnail」,就完成設定囉! 你就會看到這個 Frame的名稱前面多了一個符號。 在檔案的列表中也可以看到漂亮又好辨識的 Figma 檔案封面囉! 如果有想要了解更多 Figma 從零開始的學習,可以看《Figma 教學:新手UIUX設計師快速上手的入門指南》 想要 Figma 快捷鍵大全,可以看這篇《Figma Shortcuts 快捷鍵大全:提升設計效率必備(Mac & Windows)》

Read More »

Figma Shortcuts 快捷鍵大全:提升設計效率必備(Mac & Windows)

以下是目前整理的 Figma 快捷鍵,包含 MAC 跟Windows,也會再持續更新!如果你是 Figma 新手,可以搭配這篇文章一起學習《Figma 教學:新手UIUX設計師快速上手的入門指南》 個人常使用 Figma 快捷鍵 這些是我個人常使用到在 Figma 專有的快捷鍵,之前初學 Figma 時還有朋友說,不知道怎麼辦時就點 ⌘ Cmd + A 就對了😂 想想雖然好笑,但確實是一個超常使用到的快捷鍵,以下給你參考囉! Figma 快捷鍵:Selection 選擇類 Figma 快捷鍵: Tools 工具類 Figma 快捷鍵:Auto Layout 自動編排類 Figma 快捷鍵:Components 元件類 Figma 快捷鍵:View 瀏覽類 Figma 快捷鍵:Zoom 縮放類 Figma 快捷鍵:Text 文字類 Figma 快捷鍵:Cursor 鼠標類 Figma 快捷鍵:Shape 形狀類 Figma 快捷鍵:Transform 轉換類 Figma 快捷鍵:Edit 編輯類 Figma 快捷鍵:Arrange 對齊類 以上這些是 Figma 的快捷鍵(Figma Shortcuts),好用的快捷鍵可以加速設計很多唷! 如果有想要了解更多 Figma 從零開始的學習,可以看《Figma 教學:新手UIUX設計師快速上手的入門指南》 延伸閱讀

Read More »

Figma 教學:新手UIUX設計師快速上手的入門指南

從 2012 年才成立,就快速崛起就稱霸 UIUX 設計界的 Figma,不論是網頁設計、App 設計、概念發想、簡報設計,不僅容易上手、強大的即時共編、開放資源,學習管道也容易取得,更甚至曾經讓設計大佬 Adobe 以天價 200 億美元收購(其因涉及壟斷疑慮破局),Figma 深受設計界喜愛的原因是什麼呢?以下這篇將告訴大家特色、Figma 必備的設計邏輯、軟體基本介紹、適合初學者的官方教學影片、外掛推薦、快捷鍵,讓你不用一天,就可以掌握 Figma 的概念,一兩週的實作就可以上手囉! Figma 是什麼?7 大特色讓你離不開他 之前 UX Tools 就有在 2023 年統計最受歡迎的 UI Design Tools,可以看到即使是第二名的 Adobe Photoshop 也是有非常顯著的差異,而以下是我認為最關鍵的 7 大關鍵特色!(有更多但列都列不完😂) 特色 1:即時線上協作能力 Figma 的一大亮點是即時線上協作功能,讓多位 UIUX 設計師同時編輯同一個文件,線上會議也能因此很好說明,就像在 Google Docs 上多人共同編寫文件一樣。這樣讓團隊能夠即時分享想法與設計討論,更重要的是調整一個小物件無需來回傳遞檔案,極大提升工作效率!(過去都需要先匯出再上傳,才能進一步討論,是非常麻煩的事情😱) 特色 2:檔案交付便利性 Figma 不僅讓 UIUX 設計師將作品以多種格式(如 PNG、SVG、PDF 等)匯出,並且無需反覆打包、壓縮或轉檔、上傳等,讓軟體工程師可以直接從 Figma 上將檔案設定好 Dev Mode 後,即可看到設計規格和 CSS 代碼,所以設計標注尺寸的需求也大幅減少(過去使用其他軟體的地獄輪迴)!讓 UIUX 設計與開發吧討論與交付檔案變得更加順暢! 特色 3:流暢設計互動關係(Component, Auto Layout) 他有強大的 Component(子母元件),同時還有快速異動項目時可以輕鬆排列的 Auto Layout(自動排列),有這兩件事,就讓設計過程又再更大幅提升。(文章後面有說明) 特色 4:豐沛的外掛與免費資源 Figma 有大量的外掛(Plugin),從一個檔案內就可以快速叫出外掛,執行一些快速的進階功能,例如需要 Icon 時,可以使用 Iconify,需要快速繪製 Flow 時,也可以使用 Flo

Read More »