KZhead

就是它以黑馬之姿擄獲了全球設計師的心！超人氣 UI 設計工具 Figma 快速上手！

PAPAYA 電腦教室
2024 ж. 2 Мам.
519 959 Рет қаралды
Жүктеу

► 內容綱要
00:00 開場白
00:53 畫布建立 / 圖層管理
02:55 建立網格糸統
03:23 文字樣式
04:00 外掛安裝
05:38 自適應/響應式版面
07:52 圖片水平捲動效果
09:32 固定頁首 / 霧面玻璃效果
10:19 組件建立與修改
11:28 疊加圖層動畫
12:55 切換瀏覽頁面
13:57 Figma 社群資源
► 練習檔下載
載點一 tinyurl.com/yej2fwtj
載點二 share.weiyun.com/A34153eN
Figma 官網 www.figma.com
► Papaya 電腦教室 - 會員專區 (加入後可觀看會員專區的影片喔)
加入頻道會員 tinyurl.com/sxt3d2b
會員專區影片目錄 tinyurl.com/y6mvo38a
► 小額贊助 Papaya 電腦教室 ☕️
ECPay： p.ecpay.com.tw/A1B71E8
Paypal： www.buymeacoffee.com/papayaclass
► Papaya 剪輯影片所使用的軟體 / 素材來源
Camtasia Studio www.techsmith.com/video-edito...
Adobe After Effects www.adobe.com/products/aftere...
Adobe Audition www.adobe.com/products/auditi...
Keynote www.apple.com/tw/keynote
Envato Elements elements.envato.com
Vecteezy www.vecteezy.com
Unsplash unsplash.com
#記得打開影片的CC字幕喔 #Figma #Prototype #Mockup

Пікірлер

  • 幹 麻煩教育部把PAPAYA的影片列為基本課綱

    @fattyshau@fattyshau2 жыл бұрын

    • 推一個(ﾟ∀ﾟ　)

      @allenchen7953@allenchen79532 жыл бұрын

    • 以後就不用電腦老師了

      @hahaheheho7199@hahaheheho71992 жыл бұрын

    • 推

      @user-jw9iy9ro1k@user-jw9iy9ro1k2 жыл бұрын

    • 推 太有用了

      @kandle71234@kandle712342 жыл бұрын

    • +1

      @user-lr4oh4zd2c@user-lr4oh4zd2c2 жыл бұрын

  • 每個教學影片都沒有冗言贅字，精煉到感覺光是教學的文案都精心撰寫，太令人讚嘆了!

    @peter-you@peter-you2 жыл бұрын

    • 謝謝您的支持與鼓勵 😊

      @papayaclass@papayaclass2 жыл бұрын

  • 老師默默的也快變成百萬KZheadr了！

    @highker@highker2 жыл бұрын

  • 好厲害 而且成品非常符合現在使用手機的習慣 用疊加圖層就不用一直關分頁了 學到了學到了

    @az12345620012@az123456200122 жыл бұрын

  • 學習figma多年,看了無數國內外,教學影片.這是大師級教學,雖然沒對CSS樣式原碼說明,但不影嚮UI設計...感謝您無私教學....平安喜樂永相隨.

    @user-xu3sq7uu1w@user-xu3sq7uu1w2 жыл бұрын

  • 這個太猛了！！！有立馬想去設計一個自己的頁面的衝動！！

    @little-SUNlight@little-SUNlight2 жыл бұрын

  • 最近在學UI 用了很多次Figma沒想到老師還能翻出更多的tips 覺得自己之前好笨很浪費時間 希望老師可以再出進階的 覺得超級受益良多 短短影片帶入了超多重點

    @yilingkuo4226@yilingkuo42262 жыл бұрын

  • 之前聽老師excel教學也輕易了解概念，最近剛好接觸figma的工具正煩惱操作上一些問題，希望老師能多開一些這類課程~感恩老師

    @ching6320@ching63202 жыл бұрын

  • 每次看PA大的教學影片，一整個很療癒， 都是實例+實力，門外漢也看的津津有味！ UI/UX的設計離我太遠，我還是先用初階的Canva， 希望有朝一日能步入Figma。 16:02 這是彩蛋嗎？哈哈哈~

    @sninn5337@sninn53372 жыл бұрын

  • 感覺很實用欸，這主題希望能夠做成一個系🤩列

    @QRAINNIE@QRAINNIE2 жыл бұрын

  • 為了謝謝老師這麼多實用課程，我決定加入會員!

    @user-fn8lz5hv8d@user-fn8lz5hv8d2 жыл бұрын

  • 老師的教學影片真的都非常清楚、不拖泥帶水、不廢話，也不失重點! 真的很推薦! 也謝謝分享

    @patriciahanart8207@patriciahanart82079 ай бұрын

  • 最近剛知道老師的頻道才想說怎麼沒有figma，沒想到竟然就來了，figma真的是神器！

    @Wong5668@Wong56682 жыл бұрын

  • 感謝papaya老師無私的分享，簡單直白的描述方式直接進軟體重點，比許多昂貴線上課程實用很多，超高cp的！推推分享～ 有機會的話，希望papaya老師能分享如何快速上手軟體的學習方式！ 敲碗＋1啊～👇👇

    @rongr6959@rongr69592 жыл бұрын

  • 老師教的超好! 教學速度適中 所有基礎都有展示 教的方法淺顯易懂 是我看過免費的裡面最好的

    @vivi970836@vivi9708362 жыл бұрын

  • 非常清楚、實用的教學，跟著做也完成了一版！希望多出Figma教學^^

    @Yuigerald@Yuigerald2 жыл бұрын

  • 超讚～讓人快速了解Figma功能！最近在自學都只能從很多零散的影片看功能 不是太攏長就是太簡略 剛好前陣子發現PAPAYA老師剛追蹤就出了這支影片 太讚了🤩🤩

    @yenjungchen1338@yenjungchen13382 жыл бұрын

  • 來說一下Figma的缺點好了，就是需要網路，斷了網就比較麻煩 (無論是網頁版或是windows app都一樣) 另一套也是免費的UI軟體 Lunacy 也推，跟Figma差不多用法，也支援很多素材庫或插件 不過 Figma 還有共同協作功能，這點倒是他的優勢

    @user-sl2vn3ls4e@user-sl2vn3ls4e2 жыл бұрын

    • 有看過多文章 也提到FIGMA的缺點是網路 但是感覺網路這點比較像偽缺點 因為現在不太可能在沒網路的情況下使用裝置 而且設計的時候 時不時就會上網reference 所以以現代使用和設計習慣 網路應該不能叫缺點

      @sny.2947@sny.29472 жыл бұрын

    • ​@@sny.2947 你說的也沒錯，但萬一中的萬一他們的伺服器出問題，就會造成很嚴重的影響 當然現在線上服務真的很流行，但網路就是雙面刃，所以可以說是偽缺點，但跟其他軟體比較的話確實是需要注意的一個點

      @user-sl2vn3ls4e@user-sl2vn3ls4e2 жыл бұрын

    • 之前疫情太多人用有爆過的樣子 現在軟體快速開發，趨勢是協作，網路平台避不了

      @kn2484@kn24842 жыл бұрын

    • 其實這是一種資源選擇問題，當提案的總容量太大使用Figma的連網模式可以大幅減少使用者的下載時間及硬碟佔用空間，但當一個企劃小的時候，Lunacy的斷網優勢才會完全顯現出來 這只是考驗設計者有沒有把使用習慣及情境全面考量進去

      @TheWhitePigment@TheWhitePigment2 жыл бұрын

    • 這台灣這年代還會有網路問題?現在深山裡都有網路,沒WIFI,也有4G

      @pianovv510@pianovv5102 жыл бұрын

  • PAPAYA老師您是我的偶像 常常對一個新的領域有興趣卻又不知道怎麼開始，好險有老師的教學讓我們可以沒有障礙的學習，真的好幸福👌

    @mnts7876@mnts78762 жыл бұрын

  • 實習第一個prototype就是摸索Figma做的，謝謝papaya有系統的教學👍👍

    @changnyy11tw@changnyy11tw2 жыл бұрын

  • 老師這些教學在外面上都要上萬元了，感恩老師讚嘆老師!

    @qoiiwwe@qoiiwwe2 жыл бұрын

  • 老師好神，到底每天用多少時間學習，不断提升的教材，每个细节都很美，很用心！不但技巧超高，美術品味也很高！很享受看你的视频，有你太幸福了！很快就是top KZheadr🙏🙏🙏

    @ervicawong@ervicawong2 жыл бұрын

  • 神桌上開始供奉木瓜了...

    @rubyt0312@rubyt03122 жыл бұрын

  • 太強了!!最近剛好對Figma有興趣，結果剛好看到大神的傑作教學!!講的很詳細，還有範例可參考。

    @wen_chun129@wen_chun1292 жыл бұрын

  • 看老師影片好幾年 真的… 都超實用清楚的…

    @chin.__.@chin.__.2 жыл бұрын

  • Great! 多謝你旳示範，讓我基本了解到Figma 的功能，期待你還有更多示範～

    @AlvinLee330@AlvinLee330 Жыл бұрын

  • 哈哈 你拉到後面的影片素材忘了剪掉了 影片一如往常的精彩實用!! 讚起來

    @xmusicworld6997@xmusicworld69972 жыл бұрын

  • 謝謝你介紹了一個這麼好的工具!! 教學好詳細好讚

    @user-ub8lv6vp6m@user-ub8lv6vp6m2 жыл бұрын

  • 因為好奇心點進來，然後因為美感而繼續看下去 介面真的有夠美～

    @arbalors@arbalors2 жыл бұрын

  • 謝謝分享！講得超清楚，設計也好美~

    @Susan-ul4oo@Susan-ul4oo2 жыл бұрын

  • 已經讚嘆無數次但每次新片還是要再來膜拜一次 祝福老師早日破百萬訂閱👏

    @user-redred@user-redred2 жыл бұрын

  • 講的太棒了，整個講解流程很順暢，沒有半點疑惑，很輕鬆就入手了。

    @user-xg5cf1ij1p@user-xg5cf1ij1p2 жыл бұрын

  • 太讚了 學到新知識了!!!! 而且非常清晰、簡單易明

    @yokoltc@yokoltc Жыл бұрын

  • 終於看到台灣版的介紹了...讓新人者好上手!!希望再多一點教材...謝謝~~

    @YuukiLin@YuukiLin2 жыл бұрын

  • 感谢分享，您是我最喜欢的KZhead教学！谢谢！

    @peterxu8875@peterxu88752 жыл бұрын

  • 太神了... 感謝老師用心的講解，讓人收穫滿滿 也好奇老師大概花多久時間自學的呢?

    @user-sd7qt6qx2d@user-sd7qt6qx2d2 жыл бұрын

  • 哇！ 很实用的分享！浏览了下主页，发现有好多APP的使用分享，会用这么多的APP这件事本身就已经好厉害了 还能以视频清楚地讲解各种APP的用法更厉害了😊

    @Jner127@Jner1275 ай бұрын

  • 不愧是百萬KZheadr, 介紹流暢又清晰, 讓人短時間就對Figma輪廓有了一個了解👍

    @user-cs2kc1lz6x@user-cs2kc1lz6x Жыл бұрын

  • 學校老師花2小時講解figma都沒有p大講的清晰好懂，我真的是只能跪了吧; )

    @user-gj7dc3kh7c@user-gj7dc3kh7c2 жыл бұрын

  • 喜歡老師分享流行中的媒體工具！ 真的大神啊🥺🥺

    @The01Cherry@The01Cherry2 жыл бұрын

  • 老师，您讲的太好了，万分感谢，从一个门外汉，到能够开始制作界面，谢谢！

    @user-lr7uz6qh2e@user-lr7uz6qh2e Жыл бұрын

  • 畢業10幾年了,以前學的還是Flash,現在流行的UI/UX是甚麼都不知道...PAPAYA教的UI是我看過最一目了然的!! 非常感謝您的分享🙏🙏🙏

    @ashinny2012@ashinny20122 жыл бұрын

  • 每个影片都很实用，虽然对于我这样的小白比较难，但你的详细讲解真的很棒

    @user-ed7dg3su7t@user-ed7dg3su7t2 жыл бұрын

  • 非常好的入门教程，我UI设计零基础，学起来很流畅，谢谢老师！

    @WUTONG-@WUTONG- Жыл бұрын

  • PAPAYA要獨立製作3A遊戲大作的日子不遠了💕

    @StEvEn11330@StEvEn113302 жыл бұрын

  • 好棒的教學，清楚明瞭～～

    @hafumilove@hafumilove2 жыл бұрын

  • 從20萬訂閱追到現在 每次有朋友遇到電腦技能問題我都直接推薦這裡 沒想到居然百萬了！恭喜木瓜老師 也謝謝老師願意分享這麼讚的教學！

    @poha-tv@poha-tv2 жыл бұрын

    • 謝謝您的支持與鼓勵 😊

      @papayaclass@papayaclass2 жыл бұрын

  • 今天剛好看到這影片就覺得此頻道太強了,馬上訂閱 學習更多的東西

    @user-gt7yz2im9c@user-gt7yz2im9c2 жыл бұрын

  • 老師真的好神！！許願老師可以出一個webflow的教學～

    @user-gd2cg9cj7k@user-gd2cg9cj7k Жыл бұрын

  • 越看越興奮是正常的嗎

    @Ziggggy@Ziggggy2 жыл бұрын

    • 是 很想馬上上手玩玩看！

      @franktr5444@franktr54442 жыл бұрын

    • 依我們papaya大師的水準這是再很正常不過了

      @aduopan@aduopan2 жыл бұрын

  • 太好了..用papaya的影片快速上手好幾個軟體 我唯幾訂閱的頻道..好像是唯一開起小鈴鐺的XDD

    @chlin9875@chlin9875 Жыл бұрын

  • 介紹得好仔細！！超棒的！

    @bear1129@bear11292 жыл бұрын

  • 好誇張！！！ 看完立馬跟朋友分享 謝謝老師的分享！

    @11chen63@11chen632 жыл бұрын

  • 謝謝老師，幫助了很多設計人員，也幫助我了解 Figma 的操作~~謝謝有你~~

    @rockliu5857@rockliu5857 Жыл бұрын

  • 這工具太剛需了，感謝分享

    @chienholin114@chienholin1142 жыл бұрын

  • 讲解的太好了👍，之前都不太懂Figma的优势

    @graffitdog@graffitdog2 жыл бұрын

  • 非常感謝老師的指導！super 👍🏻👍🏻👍🏻

    @mlchan9589@mlchan95892 жыл бұрын

  • 6:34 隱藏Grid的快捷鍵改成 `Ctrl + Shift + 4` 了 9:35 這裡的fix現在 在右上角Prototype裡面的 Scroll behavior 然後小技巧是 選取多個元素之後按下 `Shift + A` 可以自動排版 快捷鍵：F 畫布、R 長方形、P 鋼筆、T 文字

    @gjlmotea@gjlmotea2 ай бұрын

  • 謝謝！希望有更多教學

    @someone0418@someone04182 жыл бұрын

  • 邊看心裡一直wow，藝術品級教學影片又＋1！

    @JT-cr8oi@JT-cr8oi2 жыл бұрын

  • 很不錯的教學示範, 多多交流也PaPa

    @ericlouiscancer@ericlouiscancer Жыл бұрын

  • 謝謝老師 有實際操作，不過所花費時間比影片時間多出很多 ，會多練習的

    @user-wp9yn9ut1r@user-wp9yn9ut1r2 жыл бұрын

  • 好厲害 把生難的UI設計講的淺顯易懂 👍

    @yuchauyi1917@yuchauyi1917 Жыл бұрын

  • 感謝分享，在你的頻道學到好多

    @karlrecon@karlrecon2 жыл бұрын

  • 太有用啦! 簡單易明, 可以多出一些跟figma 有關的影片嗎?

    @chilam6043@chilam60439 ай бұрын

  • 很棒的介紹教學！

    @AHAO.studio@AHAO.studio2 жыл бұрын

  • 哇 終於介紹到Figma了!

    @lainlou2298@lainlou22982 жыл бұрын

  • 偶然看到這部影片 口齒清晰 教學邏輯好 我使用iOS好幾年 對於大部分App佈局蠻有感覺的 我驚艷的是你利用了一個專案設計帶我們了解 讓我從無到有了解設計UI的過程 收穫非常多，也有想自己設計的衝動！ 支持！

    @Style6304@Style63042 жыл бұрын

  • 是我看到过的最好的教学视屏，感谢❤

    @user-wo6oz4rm3w@user-wo6oz4rm3w7 ай бұрын

  • 謝謝超實用的教學！！

    @leleyeeeeeeeeh@leleyeeeeeeeehАй бұрын

  • 讲得太好了！！支持！简洁明了不拖沓。

    @DaVinci-CG@DaVinci-CG6 ай бұрын

  • 謝謝你的分享,很實用好看的影片

    @Yuanchenlight@Yuanchenlight2 жыл бұрын

  • 簡單易明 解說得很好 ！！

    @Fmaex@Fmaex Жыл бұрын

  • 老師謝謝你！！！詳細又清楚！前幾天還在煩惱要找時間學不知道怎麼起QQ超激感謝老師！大姆指點下去，可惜怎抹沒有可以投幣的地方哈哈ＸＤ（長期B站使用者）

    @luprison1883@luprison18832 жыл бұрын

  • 非常棒的教學!

    @MrDianojack@MrDianojack2 жыл бұрын

  • PAPAYA老师，16:02 果然有彩蛋。哈！ 可以介绍Adobe XD吗？怎么看Adobe XD?

    @chriswc3@chriswc32 жыл бұрын

  • 简单明了，太棒了👏感谢作者

    @chacha-ph2rp@chacha-ph2rp2 жыл бұрын

  • 哇我從六月就在找Figma的教學影片 太讚啦

    @qaq448@qaq4482 жыл бұрын

  • 哇！非常受益，感謝您！

    @user-lk6sg1xz7q@user-lk6sg1xz7q2 жыл бұрын

  • 長知識了 感謝老師分享

    @Freesiasman@Freesiasman2 жыл бұрын

  • 我真的是太愛你這部影片了 人生救星！！！！！！！必須加入表示支持！！！

    @user-qd4du7ne7w@user-qd4du7ne7w9 ай бұрын

  • 謝謝 非常有用的教學~

    @sinsin7843@sinsin78432 жыл бұрын

  • 期待也有adobe xd的教學，感恩老師，比外面某些線上課程實用，木瓜老師句句都是重點

    @LanLanshark@LanLanshark4 ай бұрын

  • 知識有價~感謝老師

    @karenchiu9195@karenchiu91957 ай бұрын

    • 謝謝您的支持與鼓勵 😊

      @papayaclass@papayaclass7 ай бұрын

  • 一早起來就看到老師療癒的教學影片～ 話說那個搜尋框應該還不具搜尋功能吧？

    @ArleneHuang0814@ArleneHuang08142 жыл бұрын

  • 太有趣了 ! 厲害

    @kn91002@kn910022 жыл бұрын

  • 入門小白 總是會遇到很多問題 感謝 PA 大大帶我入門 !! (( 超詳細的

    @hochun836@hochun8362 жыл бұрын

  • 看起來很好用！😆

    @whey5020@whey50202 жыл бұрын

  • 哇哇哇好厲害的軟體 謝謝介紹 非常清楚！

    @dcl1635@dcl163510 ай бұрын

  • 太好了~~~~~這兩天才在猶豫要不要花錢學figma課程 papaya來的真是時候 太感謝了~~~~💛💛

    @Charlene_..@Charlene_..2 жыл бұрын

    • 有推薦什麼付費課程嗎？

      @0730pleomax@0730pleomax2 жыл бұрын

    • @@0730pleomax 好學校有figma教學課程 可以參考

      @Charlene_..@Charlene_..2 жыл бұрын

    • @@0730pleomax 產品設計實戰：用Figma打造絕佳UI/UX

      @funhavefun5851@funhavefun58512 жыл бұрын

  • 一直再想老師會不會分享這個教程！ 老師會考慮做figma系列的教學影片嗎

    @ranzheng1458@ranzheng14582 жыл бұрын

  • 看您的教學影片真的療癒，雖然我不見得會去使用 但就是有種充實的感覺。 感謝您

    @readblue-kj7oo@readblue-kj7oo2 жыл бұрын

    • 謝謝您的肯定與鼓勵　😊

      @papayaclass@papayaclass2 жыл бұрын

  • 今天第一次來，就迷上這教學和聲音了，必修的大推網站。

    @user-td4yq2he9g@user-td4yq2he9g Жыл бұрын

  • 最近剛接觸Figma，真心覺得它好強大呀💛💛

    @Himawaliy@Himawaliy2 жыл бұрын

  • 老師 謝謝你 我真的跪著看完

    @user-br7px3bu5t@user-br7px3bu5t2 жыл бұрын

  • 真的很好用 謝謝老師

    @nancynancy4879@nancynancy48792 жыл бұрын

  • 第一次学这个软件。谢谢分享。

    @chloepui8665@chloepui86652 жыл бұрын

  • 很少看到亞洲人介紹這套，很驚艷，我們公司是總部在英國 在中國跟台灣都有工作室 已經從sketch轉成figma兩年，早期有些缺陷（例如沒有安卓程式碼，現在有了），因為是全線上的系統，更新解決問題的速度很快，現在簡直好用到爆，收費也便宜，可以邀人共同編輯，外掛數量現在也不輸sketch，重點是非常容易使用，之後uiux應該都是figma 的天下吧。

    @metoo1142002@metoo11420022 жыл бұрын

    • 已經被Adobe收購了 一堆人哀嚎

      @IloveMaiK@IloveMaiK Жыл бұрын

    • 台灣人很喜歡打字

      @jerryhuang3565@jerryhuang3565 Жыл бұрын

  • 博主讲的很棒，谢谢！👍

    @daxuan90@daxuan9010 ай бұрын

  • 好棒啊，希望经常有UI/UX系列工具的影片😍

    @ziyuuuchen@ziyuuuchen2 жыл бұрын
KZhead