Figma Tutorial: Prototyping (older version)

Поделиться
HTML-код
  • Опубликовано: 25 сен 2024

Комментарии • 124

  • @Figma
    @Figma  Месяц назад

    We have made an updated version of this tutorial! Check it out here: ruclips.net/video/-d6zNGeF59M/видео.html

  • @Monarch_943
    @Monarch_943 6 лет назад +97

    I'm in love with Figma :D Even a noob in design like me can make something out with it. Thanks!

    • @nanahitia5438
      @nanahitia5438 4 года назад +1

      @Daniel Denver,, ფერისმჭამელები

    • @nanahitia5438
      @nanahitia5438 4 года назад +1

      No

  • @iusearchbtw69
    @iusearchbtw69 4 месяца назад +3

    The official tutorial are surprisingly understandable for someone that never use Figma like me

  • @kahoang6500
    @kahoang6500 5 лет назад +160

    Your voice is awesome for sleeping T.T

    • @WaltonV
      @WaltonV 3 года назад +1

      Very cool

    • @OGblackx
      @OGblackx 2 года назад +2

      Read my mind 😢🤦🏾‍♂️ guess you are a pro already on design since it's been 2years already

    • @infipoetic
      @infipoetic 2 года назад +1

      😂very calm

    • @Kirankumar-wl9nn
      @Kirankumar-wl9nn 2 года назад +1

      Haha 😆

    • @kaskas55
      @kaskas55 2 года назад +1

      Lol. So true

  • @elcasa6587
    @elcasa6587 3 года назад +26

    Thank you for the video. I am just learning Figma (UXUI) and I really appreciate your lessons. Can you send the link for the previous tutorial videos for doing the wireframes?

  • @newagedesigntz
    @newagedesigntz Год назад +2

    I cant find the blue circular node, It doesn't appear in my figma

  • @morgan.shaffer.design
    @morgan.shaffer.design 6 месяцев назад +2

    This vidoe is very helpful.

  • @hellstormllc1277
    @hellstormllc1277 4 года назад +5

    Seriously, you missing the prereq there is no circle that appears. I put everything out into pages but NOTHING will link. Very frustrating I'm about ready to drop this tool.

    • @abramgrey2237
      @abramgrey2237 4 года назад +1

      hey i am not getting any connecting blue dot? Any tips?thankx

  • @jg8326
    @jg8326 3 месяца назад

    This is very straight forward tutorial👍

  • @layanmohammed531
    @layanmohammed531 7 месяцев назад +1

    my page is long and i want to link the arrow in the down of the page how can i do that ,thank u

  • @juliawein
    @juliawein 8 месяцев назад

    basic, but useful video and explanation, thank you! 💓

  • @abramgrey2237
    @abramgrey2237 4 года назад +5

    hey why i can't make connection on Figma?please help.No blue dot appears to connect

    • @midnox3587
      @midnox3587 3 года назад +8

      @@aatmajap.4660 THIS needs to be way higher in the comment Section. It was driving me Nuts, i put several frames in a group (not another frame) and that's why the prototyping circle didn't appear. Thank you so much man.

    • @vandanabhanushali3503
      @vandanabhanushali3503 2 года назад

      @@aatmajap.4660 God, thank you. I couldn't find the answer anywhere

    • @vandanabhanushali3503
      @vandanabhanushali3503 2 года назад

      @@aatmajap.4660 No wait, even if its an icon in the main frame that isnt's showing the blue dot to connect in prototype ? what to do in that case?

  • @growwithdesign
    @growwithdesign 4 года назад +5

    any keyboard shortcut to set starting frame on Figma? I have 100s of artboards. And moving the starting frame arrow icon everytime is a pain.

  • @atif7865
    @atif7865 Год назад +1

    there are no blue circular nodes. I have tried everything. Not a very intuitive UX!

  • @MitchStewart08
    @MitchStewart08 2 года назад +1

    Thanks that was just what I was looking for! Great video.

  • @ntukwasi
    @ntukwasi 3 года назад +2

    Hi! Great stuff, but I don't think the videos for the Prototyping playlist are in order. (Just wanted to let y'all know in case!)

  • @temp78980
    @temp78980 2 года назад +1

    there is no plus sign next to the objects, and interaction also has no plus sign

  • @ViralSongs-channel
    @ViralSongs-channel Год назад

    your voice is very soothing

  • @alexanderhill5206
    @alexanderhill5206 5 лет назад +4

    My design frames are each on separate pages so I am unable to link with the arrow. How do I put all frames on the same page to link the original frame to the destination frame? Thanks.

    • @Figma
      @Figma  5 лет назад +2

      Hey Alexander, one of the fastest ways to do this is with your Frames selected, you can right click on them and choose "Move to Page" and then the destination page.

  • @brocker8617
    @brocker8617 4 года назад +6

    Almost took a nap watching this video, seriously guys, put someone with more energy to do the narrative :D

    • @tajaran
      @tajaran 4 года назад +1

      Wow that's some really helpful feedback Deaf Dog

  • @maryrobinson7590
    @maryrobinson7590 3 года назад +3

    So what to do when the basic connections do not work?

  • @ChristosNikolis
    @ChristosNikolis 3 года назад +7

    Thank you for this tutorial! :-) I'd like to give some *feedback*. I think 2:20 should be at 2:05. Maybe it's best to first define what a hotspot is, then explain what does it do, not vice versa. Just 2 cents! Also, it'd be nice if you modified all your tutorial titles with index numbers, to let people know *where to start from*, when studying figma. *Example*: Figma tutorial 1: Prototyping, then Figma tutorial 2: Device frames (or whatever) and so on. Thank you for reading my comment. Cheers!

  • @geoffreyschuchardt5350
    @geoffreyschuchardt5350 11 месяцев назад +1

    not seeing prototype settings....

  • @raymasraymas
    @raymasraymas 2 года назад +1

    Anyone had problems with images not showing when you play the prototype?
    Some of my images appear just fine and some don’t appear at all when I play prototype

  • @paul8392
    @paul8392 2 года назад +1

    Is there a way to make connections from icons? Like if I choose an icon indicating the DMs page, I want it to navigate to the frame that displays messages from other users.

  • @TobasscoJelly
    @TobasscoJelly 4 года назад +2

    I love figma

  • @thapelommakola8208
    @thapelommakola8208 7 месяцев назад

    Thank you

  • @uidesignwithfigma
    @uidesignwithfigma 2 года назад

    Thanks for the lesson! 🔥

  • @kittens3029
    @kittens3029 5 лет назад +7

    What about doing multiple connections? You only covered one link. Could have at least shown us how to do two.

  • @Samed21
    @Samed21 4 года назад +1

    Thanks

  • @gilbertumeh
    @gilbertumeh 5 лет назад +2

    How can I apply prototype linking across screens on different pages? I used the page setting to separate the Admin side, User Side and the Front-end pages of the web application and I am stuck here.

    • @winmonaye
      @winmonaye 5 лет назад

      @figma I don't think Figma has a ability to link between page...

    • @SeanConnolly
      @SeanConnolly 5 лет назад

      Figma replied to similar comment more recently. Looks like they're not interested in linking between pages but they do suggest a workaround:
      "Hey Shinlenox, in Figma each Page is a unique prototype. This means that a single Figma File can have as many Prototypes as you have pages, which is a really powerful value proposition for some use cases. We don't have any plans right now to link using prototyping connections (noodles) between pages. It is technically possible for you to use an Action to navigate to a URL where the URL is the second/destination page, but it's not ideal since the prototype would need to load again."

    • @FrankfavorHenshaw
      @FrankfavorHenshaw 3 года назад

      @@SeanConnolly you can actually link between pages on figma

  • @luckyardhika3781
    @luckyardhika3781 2 года назад +1

    My dot node didnt show up

  • @berargumen2390
    @berargumen2390 5 лет назад +2

    this is awesome

  • @Ibrahimidris
    @Ibrahimidris 2 года назад

    Can't see the BLUE NODE anymore in the new version......

  • @ripcity921
    @ripcity921 4 года назад +2

    I was just introduced to Figma. It seems similar to Adobe XD. Agree? Disagree? Are there any important features / benefits of Figma that XD does not offer?

    • @zal9706
      @zal9706 4 года назад

      For one it’s in a browser and makes collaboration easier

  • @DinomadeAventura
    @DinomadeAventura 5 лет назад +1

    No shortcut for switching to prototype mode?

  • @CS-yc6qp
    @CS-yc6qp 3 года назад +1

    I added and arrow at the bottom of my prototype and connected to the home page but it doesn’t work

    • @nolsa8080
      @nolsa8080 3 года назад

      same! anyone knows why? or have you already found out why?

    • @CS-yc6qp
      @CS-yc6qp 3 года назад

      @@nolsa8080 is the way is arrange on your stack on the left side, it may be lock and that is why doesn’t go back

  • @nathanielabrasosaii8565
    @nathanielabrasosaii8565 Год назад

    Thank you bro🚬

  • @iakanshasoni
    @iakanshasoni Год назад

    Thanks for sharing

  • @officialapuyt9158
    @officialapuyt9158 7 месяцев назад

    Thanks❤️

  • @jacksonbaris1335
    @jacksonbaris1335 2 года назад

    Super useful.

  • @petersainz
    @petersainz 4 года назад

    Hi! great video, I would like to know how to use the visual indicator? Thanks

  • @digitaleducation1718
    @digitaleducation1718 2 года назад +1

    الله اكبر
    الحمد لله
    لاحول ولا قوة الا بالله
    اللهم صل وسلم وبارك على سيدنا و نبينا محمد

  • @leggermentesara
    @leggermentesara 2 года назад

    I don't get the selection with the dots :( what's wrong?

  • @DexterOhaeri
    @DexterOhaeri 2 года назад

    I loved it. 😍

  • @MeowfaceMusic
    @MeowfaceMusic 3 года назад

    I made three separate clickable prototypes, each within their own file. I copied each of their share-links to a doc. Upon clicking on all three, I'm only being taken to just _one_ of them. Each link is different, yet they all lead to the same prototype : /
    Anyone know what to do?

  • @FaisalJavedAkhtarKhan
    @FaisalJavedAkhtarKhan Месяц назад

    mera left arrow nai a raha koi aur tarika ho to zaroor batai

  • @sandrakayitesi9456
    @sandrakayitesi9456 2 года назад

    My prototype only shows parts of the frame😭 help please

  • @ranimnaimi6140
    @ranimnaimi6140 3 года назад

    does everything have to be in the same page ? I can't connect element existing in a different page each ?

    • @Figma
      @Figma  3 года назад +1

      Hey Ranim, protoypes need to be built on the same page. A file can have multiple pages, and each page is treated as a unique prototype, meaning you can have as many prototypes in a file as you have pages!

    • @ranimnaimi6140
      @ranimnaimi6140 3 года назад

      @@Figma I get it , do I have to MAKE a page a prototype or is it considered one by default ? thanks for answering

  • @Cybergirl
    @Cybergirl 2 года назад

    Amazing! ♥

  • @TheAmarjeetkr
    @TheAmarjeetkr 3 года назад

    How did you make this video?

  • @deyna5574
    @deyna5574 2 года назад

    Can you send me the link to your document please?

  • @ACABSTUDIOS
    @ACABSTUDIOS 6 лет назад +2

    can you do rollover states with this?

    • @DavidBall770
      @DavidBall770 6 лет назад

      I'm interested in this too. I'm a developer and I have to chase the designer for hover and active states. It'd be nice if they could be shown

  • @optics-artandblogging1279
    @optics-artandblogging1279 4 года назад +2

    I can't make connection arrow.

    • @abramgrey2237
      @abramgrey2237 4 года назад

      me too!really frustrating..

    • @lexc7036
      @lexc7036 3 года назад

      I had the same issue. I didn’t place the arrow within a frame. Try putting it within a frame & connect it from the frame to the page u want. Hope that helps

  • @sabarena2439
    @sabarena2439 2 года назад

    hi! can figma make the prototype where the screen can scroll down? if can can you make the tutorial as soon as possible? because I need to learn it for my innovation presentation. Thank You!

  • @sandro1616
    @sandro1616 2 года назад

    I did everything but it shows me A prototype needs a least one frame

  • @ernestegedegbe
    @ernestegedegbe Год назад

    The audio volume is too low please work on that next time. But apart from that great video. Enjoyed it a lot.

  • @scotangus9616
    @scotangus9616 5 месяцев назад

    Is this even still relevant given that the software has changed a lot since this video was created?

  • @damionc6423
    @damionc6423 6 лет назад +3

    Your volume is a little low. Thanks for the teaching though.

  • @oxenfurt9987
    @oxenfurt9987 5 месяцев назад

    1:17 / 3:57

  • @padrello
    @padrello 2 года назад

    Guys, gg but, please adjust your audio lvl... Too low!

  • @LeonGrayJ
    @LeonGrayJ 4 года назад

    how do I export the prototype I made? so i will be interactive! URGENT !, who knows? it would be great help to me

    • @Figma
      @Figma  4 года назад

      Hi Leo, Figma doesn't support the ability to "export" prototypes to local/standalone files. To share a prototype, you can share the link to your prototype from the share menu instead. Viewers will be able to interact with your prototype. You can have unlimited viewers on any team, and we don't charge for viewers on Professional teams. If you want to create a video file of your prototype, you can try using screen recording software.

  • @theinnocent_one
    @theinnocent_one 4 года назад

    Is there a way to embed this in my website ? For my portfolio ?

    • @Figma
      @Figma  4 года назад +1

      Hey The Innocent One, you can embed Figma files and prototypes. You can read how live embeds work on our Help Center here: help.figma.com/hc/en-us/articles/360039827134-Embed-files-and-prototypes-with-Figma-Live-Embeds

  • @MultiLenoxxx
    @MultiLenoxxx 5 лет назад +1

    can i link between pages?

    • @Figma
      @Figma  5 лет назад +2

      Hey Shinlenox, in Figma each Page is a unique prototype. This means that a single Figma File can have as many Prototypes as you have pages, which is a really powerful value proposition for some use cases. We don't have any plans right now to link using prototyping connections (noodles) between pages. It is technically possible for you to use an Action to navigate to a URL where the URL is the second/destination page, but it's not ideal since the prototype would need to load again.

  • @khunshaali2738
    @khunshaali2738 5 лет назад

    How we can make a screen clickable using figma???

    • @Figma
      @Figma  5 лет назад +1

      Hey Khunsha, I think this video answers your question, but if you're still confused, can you be more specific? If you think you've found a bug, you can also contact our Support team within the app from the black ? icon, or by emailing support@figma.com

  • @itoshisae4590
    @itoshisae4590 2 года назад

    udinus absen ygy

  • @samko344
    @samko344 11 месяцев назад

    nejaky lepši tutorial by sa nedal ???

  • @yeseniagonzalez5640
    @yeseniagonzalez5640 3 года назад

    Please take these down cause it’s confusing to look at old stuff when it’s changed

  • @Tejassuthar777
    @Tejassuthar777 4 года назад +1

    This video is too old now. Needs to be updated

    • @sandhyak3602
      @sandhyak3602 3 года назад

      Can You help me on knowing about figma prototyping , please.

    • @Tejassuthar777
      @Tejassuthar777 3 года назад

      @@sandhyak3602 There are other videos on youtube. Check them. Unfortunately, I am not a UI designer.

  • @swaggysveryown
    @swaggysveryown 6 лет назад

    Hey

  • @saniegp7132
    @saniegp7132 Год назад

    ada yang bisa joki ga

  • @TheRelytYT
    @TheRelytYT Год назад +2

    Ugh i hate when they speak so slow in tutorials. couldve been a 2 minute tutorial

    • @yusufusman2920
      @yusufusman2920 2 месяца назад

      Increase the playback speed lol😂

  • @manjilmaharjan6883
    @manjilmaharjan6883 2 года назад

  • @LaurenAbbyRosenthal
    @LaurenAbbyRosenthal 5 лет назад +5

    the narrator's voice is almost entirely without inflection. Very difficult to listen to his voice, he sounds like a robot.

    • @badbrother_2023
      @badbrother_2023 Год назад

      It's wonderful most Americans sound like that.

  • @matheusgabriel8136
    @matheusgabriel8136 Год назад

    achei este video deveras ruim pois o método de ensinamento foi precário e paia mais uma vez revoltado com a indústria brasileira neonazz isso é um pedido de ajuda das pessoas necessitadas pois estamos com fome e queremos comer

  • @naitikkathiriya
    @naitikkathiriya 3 года назад

    basic..

  • @masterloot
    @masterloot Год назад

    5yo tutorial take it down

  • @edsbloggingcom
    @edsbloggingcom 6 лет назад

    Get me a standalone app like Sketch so I don’t need an internet connection all the time. Dealbreaker for me. And I’m willing to pay for it. No problem. But get rid of that stupid internet connection!

    • @theinnocent_one
      @theinnocent_one 4 года назад

      As far as I know if you download the desktop app you don't need the continuous internet connection

  • @Kokola-qh9wp
    @Kokola-qh9wp 3 года назад +4

    The blue connection node never appears for me in figma what is wrong? is the interface of figma having a bug with this feauture?

    • @Figma
      @Figma  3 года назад +1

      Hey Kokola, if you're not able to make connections, be sure you're in the Prototyping tab at the top of the right sidebar. For more help, try posting on the forum at forum.figma.com to get help from other Figma users!

    • @Kokola-qh9wp
      @Kokola-qh9wp 3 года назад +1

      @@Figma I fixed it. It doesn't recognize random shapes as a frame, so you need to first select your parts and click "ctrl+f" for it to become a frame. Then the blue connections appear.

  • @hikmatabayun3274
    @hikmatabayun3274 2 года назад

    Thank you

  • @nizarkdidir1753
    @nizarkdidir1753 2 года назад

    thanks