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

► 內容綱要
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

Пікірлер: 471

  • @fattyshau
    @fattyshau3 жыл бұрын

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

  • @allenchen7953

    @allenchen7953

    3 жыл бұрын

    推一個(゚∀゚ )

  • @hahaheheho7199

    @hahaheheho7199

    3 жыл бұрын

    以後就不用電腦老師了

  • @user-jw9iy9ro1k

    @user-jw9iy9ro1k

    3 жыл бұрын

  • @kandle71234

    @kandle71234

    3 жыл бұрын

    推 太有用了

  • @user-lr4oh4zd2c

    @user-lr4oh4zd2c

    3 жыл бұрын

    +1

  • @gjlmotea
    @gjlmotea5 ай бұрын

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

  • @peter-you
    @peter-you3 жыл бұрын

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

  • @papayaclass

    @papayaclass

    3 жыл бұрын

    謝謝您的支持與鼓勵 😊

  • @highker
    @highker3 жыл бұрын

    老師默默的也快變成百萬KZreadr了!

  • @sninn5337
    @sninn53373 жыл бұрын

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

  • @user-sl2vn3ls4e
    @user-sl2vn3ls4e3 жыл бұрын

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

  • @sny.2947

    @sny.2947

    3 жыл бұрын

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

  • @user-sl2vn3ls4e

    @user-sl2vn3ls4e

    3 жыл бұрын

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

  • @kn2484

    @kn2484

    3 жыл бұрын

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

  • @TheWhitePigment

    @TheWhitePigment

    3 жыл бұрын

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

  • @pianovv510

    @pianovv510

    2 жыл бұрын

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

  • @qoiiwwe
    @qoiiwwe3 жыл бұрын

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

  • @little-SUNlight
    @little-SUNlight3 жыл бұрын

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

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

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

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

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

  • @az12345620012
    @az123456200123 жыл бұрын

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

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

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

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

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

  • @ching6320
    @ching63203 жыл бұрын

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

  • @Susan-ul4oo
    @Susan-ul4oo3 жыл бұрын

    謝謝分享!講得超清楚,設計也好美~

  • @QRAINNIE
    @QRAINNIE3 жыл бұрын

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

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

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

  • @hafumilove
    @hafumilove3 жыл бұрын

    好棒的教學,清楚明瞭~~

  • @rongr6959
    @rongr69593 жыл бұрын

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

  • @patriciahanart8207
    @patriciahanart820711 ай бұрын

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

  • @yokoltc
    @yokoltc2 жыл бұрын

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

  • @AlvinLee330
    @AlvinLee3302 жыл бұрын

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

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

    介紹得好仔細!!超棒的!

  • @yenjungchen1338
    @yenjungchen13383 жыл бұрын

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

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

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

  • @chienholin114
    @chienholin1143 жыл бұрын

    這工具太剛需了,感謝分享

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

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

  • @yilingkuo4226
    @yilingkuo42263 жыл бұрын

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

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

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

  • @wen_chun129
    @wen_chun1293 жыл бұрын

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

  • @user-redred
    @user-redred3 жыл бұрын

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

  • @ading818
    @ading8183 жыл бұрын

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

  • @karlrecon
    @karlrecon3 жыл бұрын

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

  • @ervicawong
    @ervicawong3 жыл бұрын

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

  • @peterxu8875
    @peterxu88753 жыл бұрын

    感谢分享,您是我最喜欢的KZread教学!谢谢!

  • @mnts7876
    @mnts78763 жыл бұрын

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

  • @changnyy11tw
    @changnyy11tw3 жыл бұрын

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

  • @someone0418
    @someone04183 жыл бұрын

    謝謝!希望有更多教學

  • @user-gj7dc3kh7c
    @user-gj7dc3kh7c3 жыл бұрын

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

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

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

  • @Style6304
    @Style63043 жыл бұрын

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

  • @AHAO.studio1
    @AHAO.studio13 жыл бұрын

    很棒的介紹教學!

  • @rubyt0312
    @rubyt03123 жыл бұрын

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

  • @MrDianojack
    @MrDianojack3 жыл бұрын

    非常棒的教學!

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

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

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

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

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

    簡單易明 解說得很好 !!

  • @Freesiasman
    @Freesiasman3 жыл бұрын

    長知識了 感謝老師分享

  • @Wong5668
    @Wong56683 жыл бұрын

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

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

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

  • @papayaclass

    @papayaclass

    2 жыл бұрын

    謝謝您的支持與鼓勵 😊

  • @DaVinci-CG
    @DaVinci-CG9 ай бұрын

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

  • @user-kl9vx3qf5l
    @user-kl9vx3qf5l Жыл бұрын

    非常厲害! 簡單明瞭 乾淨俐落

  • @11chen63
    @11chen633 жыл бұрын

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

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

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

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

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

  • @kn91002
    @kn910023 жыл бұрын

    太有趣了 ! 厲害

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

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

  • @Jner127
    @Jner1277 ай бұрын

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

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

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

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

    哇!非常受益,感謝您!

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

    邊看心裡一直wow,藝術品級教學影片又+1!

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

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

  • @papayaclass

    @papayaclass

    2 жыл бұрын

    謝謝您的肯定與鼓勵 😊

  • @chacha-ph2rp
    @chacha-ph2rp3 жыл бұрын

    简单明了,太棒了👏感谢作者

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

    謝謝 非常有用的教學~

  • @metoo1142002
    @metoo11420023 жыл бұрын

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

  • @IloveMaiK

    @IloveMaiK

    Жыл бұрын

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

  • @jerryhuang3565

    @jerryhuang3565

    Жыл бұрын

    台灣人很喜歡打字

  • @whey5020
    @whey50203 жыл бұрын

    看起來很好用!😆

  • @user-bi7by7dg4u
    @user-bi7by7dg4u3 жыл бұрын

    好實用! 好人性化的設計!

  • @danyeong179
    @danyeong1792 ай бұрын

    非常好的教學內容,清晰,讓受眾聽得投入舒服,不自覺地跟隨你節奏去學習。 加油,請繼續製作多些優質教學影片來分享。謝謝你們團隊的努力

  • @StEvEn11330
    @StEvEn113303 жыл бұрын

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

  • @caralee8150
    @caralee8150 Жыл бұрын

    講解得非常仔細易懂,太感謝了

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

    真的很好用 謝謝老師

  • @user-gt7yz2im9c
    @user-gt7yz2im9c3 жыл бұрын

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

  • @YuukiLin
    @YuukiLin3 жыл бұрын

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

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

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

  • @leleyeeeeeeeeh
    @leleyeeeeeeeeh3 ай бұрын

    謝謝超實用的教學!!

  • @graffitdog
    @graffitdog3 жыл бұрын

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

  • @user-mm2xp2dx6y
    @user-mm2xp2dx6y3 жыл бұрын

    影片每次看每次驚嘆

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

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

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

    老師真的好神!!許願老師可以出一個webflow的教學~

  • @arbalors
    @arbalors3 жыл бұрын

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

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

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

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

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

  • @chilam6043
    @chilam6043 Жыл бұрын

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

  • @calvinlim
    @calvinlim2 жыл бұрын

    感謝P大神的教學,受用終身

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

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

  • @chloepui8665
    @chloepui86653 жыл бұрын

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

  • @user-zd4vx8uu5o
    @user-zd4vx8uu5oАй бұрын

    這個也太強大了~感謝分享~

  • @alice721927
    @alice7219272 жыл бұрын

    簡單易懂 太厲害了 立刻學會了

  • @user-dx8pg6ic5x
    @user-dx8pg6ic5x3 жыл бұрын

    感謝 又長知識了

  • @seediqliu
    @seediqliu2 жыл бұрын

    講解的太厲害了!簡直出神入化,很難打瞌睡耶。讚!請問有沒有實體課程?

  • @daxuan90
    @daxuan90 Жыл бұрын

    博主讲的很棒,谢谢!👍

  • @Bayashat2002
    @Bayashat2002 Жыл бұрын

    windows按 Ctrl + Shift + g 的话不仅会隐藏网格, 并且还会把手机的整个frame隐藏掉 建议只按 shift + g隐藏网格

  • @lainlou2298
    @lainlou22983 жыл бұрын

    哇 終於介紹到Figma了!

  • @user-sd7qt6qx2d
    @user-sd7qt6qx2d3 жыл бұрын

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

  • @karenchiu9195
    @karenchiu919510 ай бұрын

    知識有價~感謝老師

  • @papayaclass

    @papayaclass

    10 ай бұрын

    謝謝您的支持與鼓勵 😊

  • @chriswc3
    @chriswc33 жыл бұрын

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

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

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

  • @user-si4ib1fh1j
    @user-si4ib1fh1j3 жыл бұрын

    超厲害!!!!

  • @user-wo6oz4rm3w
    @user-wo6oz4rm3w9 ай бұрын

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

  • @qaq448
    @qaq4483 жыл бұрын

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

Келесі