104學習

Figma

Figma
關注
邀請朋友
邀請朋友

Line

Facebook

複製連結

取消
這是一款雲端設計工具，主要用於界面設計與原型製作。具備多人即時協作功能，方便團隊共同編輯和溝通，提升工作效率。操作直覺，支援跨平台使用，設計稿易於分享與反饋。對UI/UX設計師、產品經理及前端工程師來說，是協調設計與開發流程的重要利器。掌握此技能能提升職場競爭力，尤其在數位產品設計領域非常受歡迎。
關於教室
關注人數 130 人
104人力銀行從職缺中挑選出常見技能所成立的官方教室，提供大家進行共學互動。
學習主持人
持續分享知識，
有機會成為官方教室主持人
教室標籤
  • Figma
    • 關於教室
    關注人數 130 人
    104人力銀行從職缺中挑選出常見技能所成立的官方教室，提供大家進行共學互動。
    學習主持人
    持續分享知識，
    有機會成為官方教室主持人
    教室標籤
  • Figma
    • Hi~ 歡迎分享學習資源，有學習問題可匿名向Giver發問！
    我要分享
    我要提問

    Figma 學習推薦

    PM好同學
    關注
    Trulli Wu

    產品主管

    05/20 14:52

    畫圖不再是難事！Google Stitch 讓你「用說的」一鍵生成 UI 介面，打破設計高牆
    什麼是 Google Stitch？用嘴巴就能「畫」出 App 的 AI 設計神器 🎨
    傳統的網頁或 App 開發流程中，最耗時的就是「把想法變成視覺畫面」的階段。產品經理（PM）或創業者要先畫出密密麻麻的線框圖（Wireframe），再交給 UI 設計師精修，溝通成本高得嚇人。
    Google 推出的 Stitch（stitch.withgoogle.com）就是為了徹底終結這個痛點。它是一套由 Google Gemini 驅動的 AI 原生設計畫布。
    它最狂的地方在於：你不需要會畫畫，也不需要懂複雜的設計工具。 你只需要用簡單的文字（例如：「幫我做一個健身 App 的會員登入頁，要有進度條、深色模式」），甚至直接用說的（Voice Canvas 功能），Stitch 的 AI 設計助理就會「即時」在無限畫布上幫你把高質感的 UI 介面、互動原型（Prototype）直接生成出來。
    為什麼你需要懂它？三大受眾的黃金應用價值
    這款產品不是只給設計師用的，它真正的價值，是全面解放「非設計背景」的專業工作者：
    1. 專業工作者 / 產品經理（PM）：告別靈魂畫手，溝通效率提高 10 倍 🧠
    痛點： 腦中有很棒的產品想法，但每次畫出來的草圖都很像小學生作品，跟工程師或老闆溝通像在雞同鴨講。
    Stitch 的價值： 以前開會前準備原型要花好幾天，現在你可以一邊和團隊討論，一邊對著 Stitch 下指令微調介面（「把按鈕變圓一點」、「這裡加上搜尋欄」）。Stitch 還能自動生成「點擊後的下一個邏輯畫面」，自動幫你把使用者旅程（User Journey）串起來。這讓 PM 在敏捷開發、Sprint 計畫時，能用最低的成本與團隊達成 100% 的視覺共識。
    2. 求職 / 轉職者：履歷作品集「速成外掛」 🚀
    痛點： 想轉職做產品經理（PM）、數位行銷或獨立開發者，但作品集裡沒有拿得出來的 App 或網頁原型。
    Stitch 的價值： 它是轉職者展現「產品思維」的終極利器。你可以把你想做的 side project 想法餵給 Stitch，在幾分鐘內產出整套精美的 UI 介面。更厲害的是，它支援「一鍵匯出到 Figma（帶有命名圖層與自動佈局）」，甚至能產出 HTML/CSS 程式碼。在履歷上寫出自己能熟練運用 Google Stitch 進行敏捷原型設計，絕對會讓面試官眼睛一亮。
    3. 外包接案者：用「超音速」提案，提高結案率與報價 💰
    痛點： 客戶需求講得不清不楚，花幾天做好的提案不對客戶胃口，白白浪費時間。
    Stitch 的價值： 在跟客戶初步諮詢時，你可以直接打開 Stitch，上傳客戶給的參考截圖或隨手畫的草圖（Stitch 支援草圖轉 UI 結構）。一邊講、一邊對著 AI 下指令，在 30 分鐘內現場把「設計雛形」做出來給客戶看。這種「即時回饋」的超專業提案力，不僅能讓你在競標中脫穎而出，更能直接把客戶的黏著度牢牢鎖定。
    結語：AI 時代，懂「氛圍設計（Vibe Design）」才是贏家
    在 Google Stitch 誕生後，設計的門檻已經被降到了最低。未來職場拉開差距的關鍵，不再是你會不會拉 Figma 的線條，而是你有沒有好想法，以及能不能用精準的邏輯引導 AI 產出你要的結果。現在就登入 stitch.withgoogle.com，開始用你的嘴巴「說」出你的第一個軟體設計吧！
    Google Stitch
    看更多
    畫圖不再是難事！Google Stitch 讓你「用說的」一鍵生成 UI 介面，打破設計高牆
    stitch.withgoogle.com
    Stitch - Design with AI
    1 0 355 0
    UI 設計新手村：Figma學習之旅🪐
    關注
    104學習

    產品

    2024/10/28

    如何在Figma中，一次將文字轉為大寫或小寫？懶人福音一鍵搞定超簡單
    在設計中，文字格式的統一性非常重要。Figma作為設計師常用的設計工具之一，提供了方便的「文字轉換」功能（Text Transform），可讓用戶輕鬆將文字一次性轉為大寫、全小寫或標題大小寫。本篇文章將深入介紹如何在Figma中進行文字大小寫的快速轉換，幫助你提升設計效率。
    ▮為什麼需要使用文字大小寫轉換？
    1. 提升設計一致性：當需要統一標題或段落的大小寫格式時，使用Figma的文字轉換功能可以確保整體設計風格一致。
    2. 節省時間：避免手動逐字調整大小寫，提升設計流程的效率。
    3. 更好地適應設計變更：在進行UI/UX設計迭代時，能夠靈活應對文字樣式的變更需求。
    ▮如何在Figma中一次性將文字轉為大寫或小寫？
    以下是具體操作步驟：
    1. 選中要轉換的文字層（Text Layer）
    首先，在畫布（Canvas）上選中你想要改變大小寫的文字層。可以是標題、段落或其他文字元素。
    2. 打開右側的屬性面板（Properties Panel）
    當選中文字層後，Figma介面的右側會顯示屬性面板，這裡包含該文字層的所有設置選項，如字體、字重、字體大小、顏色等。
    3. 找到「Text」部分
    在屬性面板的「Text」部分，可以看到文字相關的設定，這是調整文字大小寫的起點。
    4. 展開「Text Transform」選項
    在「Text」屬性部分的下方，可以找到「Text Transform」選項。點擊展開後，你會看到以下選項：
    - Uppercase（全大寫）：將選中的文字轉為全大寫格式。
    - Lowercase（全小寫）：將選中的文字轉為全小寫格式。
    - Title Case（標題大小寫）：將文字轉為標題樣式，每個單詞的首字母大寫。
    - Original Case（原始大小寫）：將文字恢復為原始的大小寫狀態。
    5. 選擇需要的文字轉換方式
    選擇合適的大小寫轉換選項，文字層會立即顯示出相應的效果，無需手動調整。
    ▮文字轉換的最佳實踐
    1. 統一標題格式：當你在設計標題或重要文字時，可以使用Uppercase選項，讓標題顯得更加醒目和專業。
    2. 適用於批量轉換：可以一次選中多個文字層，然後應用相同的文字轉換選項，以實現快速統一。
    3. 靈活應對設計需求變更：在設計過程中，當需要變更文字格式時，只需通過「Text Transform」即可快速完成修改，無需手動調整。
    ▮結論
    在Figma中，一次性將文字轉為大寫或小寫是提升設計效率和保持格式一致性的關鍵功能。無論是用於標題設計還是段落格式調整，文字轉換（Text Transform）功能都能讓你更輕鬆地應對不同的設計需求。如果想要在設計過程中節省時間並提高整體設計效果，不妨試試這個方便的功能。
    看更多
    如何在Figma中，一次將文字轉為大寫或小寫？懶人福音一鍵搞定超簡單
    2 0 6950 1
    UI 設計新手村：Figma學習之旅🪐
    關注
    104學習

    產品

    2024/10/28

    Figma 統一文字樣式方法：教你建立自己的文字範本，保存文字樣式，下次直接叫出使用
    在設計專案中，保持文字格式的一致性是非常重要的。Figma中提供了一個功能，讓你可以輕鬆將常用的文字格式保存為「文字樣式」（Text Styles），以便在專案中反覆使用。本文將為你介紹如何在Figma中創建和應用文字樣式，從而提高設計的效率和一致性。
    ▮什麼是文字樣式？
    文字樣式是Figma中用來儲存和重用文字格式的功能，包含字體、字重、字體大小、顏色、行高、字距等設定。透過將文字樣式保存，你可以在整個專案中快速應用統一的文字格式，而不需要手動一一調整。
    ▮如何在Figma中將文字保存為文字樣式？
    以下是創建文字樣式的詳細步驟：
    1. 選中設計好的文字
    在畫布（Canvas）上，選擇你想要保存的文字層（Text Layer）。確保已設置好所有的文字屬性，例如字體、字重、字體大小、顏色、行高、字距等。
    2. 打開右側屬性面板（Properties Panel）
    選中文字層後，Figma介面的右側會顯示屬性面板。在面板中，你可以看到所有與文字相關的屬性設定。
    3. 找到「文字樣式」區域（Text Style Section）
    在屬性面板中的「Text」部分下方，你會看到一個標籤為「Text Style」的區域。這個區域用來管理文字樣式。
    4. 點擊「+」按鈕（Create Style）
    在「Text Style」區域右側有一個「+」按鈕（即「Create Style」）。點擊此按鈕會彈出一個對話框，讓你可以為新的文字樣式命名。
    5. 命名樣式（Name the Style）
    在彈出的對話框中，輸入一個清晰的名稱來命名這個文字樣式。例如「標題-加粗-24pt」或「正文-常規-16pt」，以便你和團隊成員在後續應用時能快速識別樣式。完成命名後，點擊「Create Style」按鈕保存。
    ▮如何在其他文字層上應用文字樣式？
    一旦保存了文字樣式，你可以在設計過程中輕鬆地應用它：
    1. 選中需要應用樣式的文字層。
    2. 在右側屬性面板的「Text Style」區域中，點擊下拉選單。
    3. 從選單中選擇所需的文字樣式。
    文字層會立即應用選定的文字樣式，無需手動調整格式。
    ▮文字樣式的好處
    1. 提高設計一致性：文字樣式確保整個專案中使用相同的文字格式，避免不同頁面間的格式不一致。
    2. 加速設計流程：保存和重用文字樣式可減少手動調整的時間，提升設計效率。
    3. 便於更新：如果需要修改樣式，只需在文字樣式中進行一次更改，所有應用了該樣式的文字層都會同步更新。
    ▮最佳實踐：文字樣式的應用
    1. 分類管理：在創建文字樣式時，按照功能分類，如「標題」、「副標題」、「正文」、「註釋」等，方便快速查找和應用。
    2. 使用設計系統：如果你有一個完整的設計系統，請將文字樣式納入其中，以便在不同專案中重用。
    3. 命名規則清晰：採用一致的命名規則來命名文字樣式，讓樣式一目了然，提高團隊協作效率。
    ▮結論
    在Figma中創建和應用文字樣式是設計中保持一致性和提升效率的關鍵。無論是大型專案還是日常設計工作，文字樣式的合理運用都能讓你的設計流程更加順暢。透過本篇指南，相信你已掌握如何在Figma中將文字保存為文字樣式，並有效地應用於設計中。
    看更多
    Figma 統一文字樣式方法：教你建立自己的文字範本，保存文字樣式，下次直接叫出使用
    0 0 5337 2
    你可能感興趣的教室