如何用FIgma製作個人作品集UX/UI教學

更新 發佈閱讀 2 分鐘

製作個人作品集有很多方法,Figma是一個免費又支援很多其他套件的工具,你可以用它來製作許多用途:

  • 創意發想 (Ideation)
  • 草稿 (Sketch)
  • 原型 (Prototyping)
  • 線框圖 (Wireframe)
  • 視覺圖 (Muck up)
  • UX/UI 設計在網站和手機


以下展示如何用Figma工具製作一個個人作品集(Pofolio)希望能幫助大家初步學習

影片教學




總結

Figma 是一個很好的團隊溝通工具,可以跟工程師、其他設計師以及產品經理表達你的想法,你也可以在準備設計Muck up之前做Wireframe去確保大家的想法是否大致同方向



額外資源教學

如何用FIgma製作個人作品集教學 - https://vocus.cc/article/645c733dfd89780001ffe890

學習如何設計好產品 - 使用者經驗設計 | 易用性 | 通用設計 - https://vocus.cc/article/64637f74fd8978000175c0f8

前端教學架設TodoApp

- https://vocus.cc/article/64637f74fd8978000175c0f8

學習如何用HMTL5和CSS3,跟JayLin一起做一個NFT卡片完整課程 - https://vocus.cc/article/64637f74fd8978000175c0f8


更多相關教學文章

JayLinXR YT: https://www.youtube.com/@jaylinxr

JayLinXR IG: https://www.instagram.com/jaylin_xr/

JayLinXR FB: https://www.facebook.com/JayLinXR

留言
avatar-img
JayLinXR
14會員
39內容數
設計 + 程式,是一個出版對設計和程式的學習影片和教學文章,目的是為了讓大家能加快學習最新技術以及設計相關題目去思考如何改變產品的設計體驗。 請追蹤JayLinXR獲得最新消息: https://www.youtube.com/@jaylinxr
JayLinXR的其他內容
2024/11/17
本篇文章介紹如何使用Figma設計出高效的表單,適合各類設計師。文章內容包括2025最新UX/UI設計趨勢及實用技巧,並提供完整的教學視頻。學習重點包括介面熟悉度、色彩搭配、設計整體感以及對齊的重要性,助你提升設計效率和用戶體驗。立即訂閱頻道掌握未來設計技能!
Thumbnail
2024/11/17
本篇文章介紹如何使用Figma設計出高效的表單,適合各類設計師。文章內容包括2025最新UX/UI設計趨勢及實用技巧,並提供完整的教學視頻。學習重點包括介面熟悉度、色彩搭配、設計整體感以及對齊的重要性,助你提升設計效率和用戶體驗。立即訂閱頻道掌握未來設計技能!
Thumbnail
2024/06/01
本篇文章將分享手機App設計教學,並往後介紹使用Flutter開發App的相關知識和技巧。透過這系列的分享,讀者將能夠學習如何利用設計和程式開發技能來製作一個App。文章中也提供了一些靈感來源和教學資源,幫助讀者進行設計和開發的思考和學習。
Thumbnail
2024/06/01
本篇文章將分享手機App設計教學,並往後介紹使用Flutter開發App的相關知識和技巧。透過這系列的分享,讀者將能夠學習如何利用設計和程式開發技能來製作一個App。文章中也提供了一些靈感來源和教學資源,幫助讀者進行設計和開發的思考和學習。
Thumbnail
2024/05/22
React Marquee是一個輕量級的React library,可以在網頁上創建流暢的跑馬燈效果。本文提供快速教學和講解,教大家如何安裝、使用React跑馬燈library官方網站。另外,也分享了額外的資源和相關教學文章。希望透過以上講解和影片教學,能幫助大家瞭解這個library。
Thumbnail
2024/05/22
React Marquee是一個輕量級的React library,可以在網頁上創建流暢的跑馬燈效果。本文提供快速教學和講解,教大家如何安裝、使用React跑馬燈library官方網站。另外,也分享了額外的資源和相關教學文章。希望透過以上講解和影片教學,能幫助大家瞭解這個library。
Thumbnail
看更多
你可能也想看
Thumbnail
賽勒布倫尼科夫以流亡處境回望蘇聯電影導演帕拉贊諾夫的舞台作品,以十段寓言式殘篇,重新拼貼記憶、暴力與美學,並將審查、政治犯、戰爭陰影與「形式即政治」的劇場傳統推到台前。本文聚焦於《傳奇:帕拉贊諾夫的十段殘篇》的舞台美術、音樂與多重扮演策略,嘗試解析極權底下不可言說之事,將如何成為可被觀看的公共發聲。
Thumbnail
賽勒布倫尼科夫以流亡處境回望蘇聯電影導演帕拉贊諾夫的舞台作品,以十段寓言式殘篇,重新拼貼記憶、暴力與美學,並將審查、政治犯、戰爭陰影與「形式即政治」的劇場傳統推到台前。本文聚焦於《傳奇:帕拉贊諾夫的十段殘篇》的舞台美術、音樂與多重扮演策略,嘗試解析極權底下不可言說之事,將如何成為可被觀看的公共發聲。
Thumbnail
柏林劇團在 2026 北藝嚴選,再次帶來由布萊希特改編的經典劇目《三便士歌劇》(The Threepenny Opera),導演巴里・柯斯基以舞台結構與舞台調度,重新向「疏離」進行提問。本文將從觀眾慾望作為戲劇內核,藉由沉浸與疏離的辯證,解析此作如何再次照見觀眾自身的位置。
Thumbnail
柏林劇團在 2026 北藝嚴選,再次帶來由布萊希特改編的經典劇目《三便士歌劇》(The Threepenny Opera),導演巴里・柯斯基以舞台結構與舞台調度,重新向「疏離」進行提問。本文將從觀眾慾望作為戲劇內核,藉由沉浸與疏離的辯證,解析此作如何再次照見觀眾自身的位置。
Thumbnail
本文深入解析臺灣劇團「晃晃跨幅町」對易卜生經典劇作《海妲.蓋柏樂》的詮釋,從劇本歷史、聲響與舞臺設計,到演員的主體創作方法,探討此版本如何讓經典劇作在當代劇場語境下煥發新生,滿足現代觀眾的觀看慾望。
Thumbnail
本文深入解析臺灣劇團「晃晃跨幅町」對易卜生經典劇作《海妲.蓋柏樂》的詮釋,從劇本歷史、聲響與舞臺設計,到演員的主體創作方法,探討此版本如何讓經典劇作在當代劇場語境下煥發新生,滿足現代觀眾的觀看慾望。
Thumbnail
《轉轉生》為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,融合舞蹈、音樂、時尚和視覺藝術,透過身體、服裝與群舞結構,回應殖民歷史、城市經驗與祖靈記憶的交錯。本文將從服裝設計、身體語彙與「輪迴」的「誕生—死亡—重生」結構出發,分析《轉轉生》如何以當代目光,形塑去殖民視角的奈及利亞歷史。
Thumbnail
《轉轉生》為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,融合舞蹈、音樂、時尚和視覺藝術,透過身體、服裝與群舞結構,回應殖民歷史、城市經驗與祖靈記憶的交錯。本文將從服裝設計、身體語彙與「輪迴」的「誕生—死亡—重生」結構出發,分析《轉轉生》如何以當代目光,形塑去殖民視角的奈及利亞歷史。
Thumbnail
之前分享過 Notion 卡片盒筆記缺乏圖像化流程圖的視覺呈現,雖然我個人較少用到,但是還是收到一些希望能有圖像化顯示的訊息。最近發現一個 Figma 外掛,可以將便利貼牆匯入 Notion 資料庫,或許也能補足圖像化製作流程圖等方面的需求!
Thumbnail
之前分享過 Notion 卡片盒筆記缺乏圖像化流程圖的視覺呈現,雖然我個人較少用到,但是還是收到一些希望能有圖像化顯示的訊息。最近發現一個 Figma 外掛,可以將便利貼牆匯入 Notion 資料庫,或許也能補足圖像化製作流程圖等方面的需求!
Thumbnail
這篇分享的是我自己在平面設計使用上覺得特別好用的5個Figma Plugin,包括Curve Text、Skew、Noise & Texture、Morph和Blobs等。分享適合初學者的設計工具,並附上了每個工具的安裝連結。
Thumbnail
這篇分享的是我自己在平面設計使用上覺得特別好用的5個Figma Plugin,包括Curve Text、Skew、Noise & Texture、Morph和Blobs等。分享適合初學者的設計工具,並附上了每個工具的安裝連結。
Thumbnail
方格子即將要將專題功能升級為沙龍 Beta,近期的官方說明提供了可以預先準備的項目內容有哪些,在準備過程中我發現有個讓我感到苦手的項目就是要製作沙龍封面圖。我苦惱著色調、形象還有放上去的資訊如何組合出好看又好用的封面圖?後來詢問做平面設計的朋友,她推薦我使用一個網站迅速解決了我的問題,先讓大家看一下
Thumbnail
方格子即將要將專題功能升級為沙龍 Beta,近期的官方說明提供了可以預先準備的項目內容有哪些,在準備過程中我發現有個讓我感到苦手的項目就是要製作沙龍封面圖。我苦惱著色調、形象還有放上去的資訊如何組合出好看又好用的封面圖?後來詢問做平面設計的朋友,她推薦我使用一個網站迅速解決了我的問題,先讓大家看一下
Thumbnail
【Canva】讓設計更輕鬆兼具美感和創意! #一起學一起玩 用【Canva】設計滿意的作品! 【Canva】功能超乎想像地強大,各式設計都有!! 拼貼相片、圖文設計、簡報製作或影音串流等...一起來試試
Thumbnail
【Canva】讓設計更輕鬆兼具美感和創意! #一起學一起玩 用【Canva】設計滿意的作品! 【Canva】功能超乎想像地強大,各式設計都有!! 拼貼相片、圖文設計、簡報製作或影音串流等...一起來試試
Thumbnail
行銷人必學!CANVA設計吸睛簡報實戰 一步步透過Canva 提供的簡報模版與平台,結合行銷概念,掌握知己知彼的簡報關鍵要訣,就能輕輕鬆鬆幫助我們製作成說服力超強的提案簡報!
Thumbnail
行銷人必學!CANVA設計吸睛簡報實戰 一步步透過Canva 提供的簡報模版與平台,結合行銷概念,掌握知己知彼的簡報關鍵要訣,就能輕輕鬆鬆幫助我們製作成說服力超強的提案簡報!
Thumbnail
《光輝模板》:能做出簡報、全息圖、圖卡、動畫,四者兼容的作品,在換色上又有高自由度的一套模板。期望能實作出四種載體兼備的作品,又能最大程度不處理配色問題,仍保有質感。在教育設計路上,用對力氣,聰明努力一點。
Thumbnail
《光輝模板》:能做出簡報、全息圖、圖卡、動畫,四者兼容的作品,在換色上又有高自由度的一套模板。期望能實作出四種載體兼備的作品,又能最大程度不處理配色問題,仍保有質感。在教育設計路上,用對力氣,聰明努力一點。
Thumbnail
不曉得大家有沒有一些想完成的人生待辦事項,對我來說,製作line貼圖就是我想完成的一件事情。從開始學習用平板繪圖後,我就開始構思角色人物,並一天天慢慢摸索繪圖軟體的功能,我使用的是procreate,在看過一些推薦影片後我花了三百塊買下它,它真的挺好用的。包含以下幾點:
Thumbnail
不曉得大家有沒有一些想完成的人生待辦事項,對我來說,製作line貼圖就是我想完成的一件事情。從開始學習用平板繪圖後,我就開始構思角色人物,並一天天慢慢摸索繪圖軟體的功能,我使用的是procreate,在看過一些推薦影片後我花了三百塊買下它,它真的挺好用的。包含以下幾點:
Thumbnail
【設計素材】3dicons 這個網站提供了精美的 3D 圖標,使用 CC0 開源授權,可以 100% 免費用於商業和個人用途,還可以整批一次下載,除了提供一般圖片檔之外,還提供了 3D原始檔,例如 Figma、Blender、Fbx 等檔案格式。   【線上工具】cleanup.pictures
Thumbnail
【設計素材】3dicons 這個網站提供了精美的 3D 圖標,使用 CC0 開源授權,可以 100% 免費用於商業和個人用途,還可以整批一次下載,除了提供一般圖片檔之外,還提供了 3D原始檔,例如 Figma、Blender、Fbx 等檔案格式。   【線上工具】cleanup.pictures
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News