Ricardo Costa
Ricardo Costa
  • 170
  • 424 026
FigJam Essential Course in just 15 Minutes
Try Figjam here: bit.ly/figjamRCDesign
I organize my everyday tasks with Notion: affiliate.notion.so/sj7rw7m77ye1
Welcome to our comprehensive guide on FigJam! In this video, you’ll learn everything you need to know to get started with FigJam, from the basics to advanced features. Whether you're new to FigJam or looking to refine your skills, this tutorial has got you covered.
Access working file: www.figma.com/community/file/1383099221312996114/figjam-101-getting-started
Timestamps
0:00 Intro
0:48 File basics
3:48 Toolbar
6:22 Diagramming
8:03 More Tools
10:28 Collaboration tools
12:39 Premium features, extensions & AI
👍 Like & Subscribe: Enjoyed the video? Hit 'Like', share with friends, and subscribe for more UX insights!
💬 Comment Below: Have thoughts or questions on UX Design? Join the conversation in the comments!
Tools I use everyday (Referral links)
Try Figma bit.ly/figmaRCDesign
Try Figjam here: bit.ly/figjamRCDesign
Try Notion here: affiliate.notion.so/sj7rw7m77ye1
Subscribe Envato for unlimited downloads resources: 1.envato.market/zaNvOM
Try Adobe for free adobe.prf.hn/click/camref:1100luj8w
Other tools
Host your website with Hostinger www.hostg.xyz/aff_c?offer_id=6&aff_id=151637
Tubebuddy - The ultimate UA-cam creators tool bit.ly/tubebuddyRicardo
Connect with me on social media
Twitter: ricardocostaeu
Linkedin: www.linkedin.com/in/ricardocostadesign
Instagram: ricardocostadesign
#figjam #whiteboard #brainstorming
Переглядів: 120

Відео

5 ESSENTIAL Micro Animations in Figma
Переглядів 8322 місяці тому
👉Figma Professional psxid.figma.com/sqolu12rnye1-ouafk I organize my everyday tasks with Notion: affiliate.notion.so/sj7rw7m77ye1 Hey friends, in this video I combine 5 essential animations for you to create awesome prototypes. Micro animations elevate your designs some steps up to demonstrate your ideas when doing some work. Today you will learn how to animate a Switch toggle, a dropdown, an a...
Splash screen animation in Figma
Переглядів 4,6 тис.3 місяці тому
Try Figma bit.ly/figmaRCDesign I organize my everyday tasks with Notion: affiliate.notion.so/sj7rw7m77ye1 In this video I'll guide you through simple steps to elevate your animation skills in splash screens or intro app screens. Maybe you're creating a project for an app that needs to create an intro, in this easy tutorial you will understand how you can pop your animation to differentiate from...
Share Figma Files with clients and developers
Переглядів 2,8 тис.3 місяці тому
Unlock the full potential of Figma by mastering the art of sharing your designs! From a single frame to an entire prototype, I’ll show you how to streamline your design workflow by sharing efficiently with anyone, anywhere. Keep watching to uncover professional insights that could elevate your design process. 🚀 Quick Tip: Before sharing a file, name your layers properly to ensure Figma recogniz...
Interactive radio button like a PRO
Переглядів 4424 місяці тому
Figma: bit.ly/figmaRCDesign Figjam: bit.ly/figjamRCDesign Figma file: www.figma.com/community/file/1353554618481960293/radio-button-single-choice-tutorial Chapters 0:00 Intro 0:08 Create radio button component 1:27 Create card component 2:37 Apply auto layout 5:30 Card component set 6:20 PRO tip on prototypes 9:40 Test prototype Creating an engaging and efficient radio button animation in Figma...
MASTER Figma Multi-Edit: Boost Your Design Efficiency
Переглядів 3584 місяці тому
My Tools Figma: bit.ly/figmaRCDesign Figjam: bit.ly/figjamRCDesign File playground: www.figma.com/community/file/1350883583011375464/multi-edit-playground Multi-edit is a feature in Figma that lets you select and edit multiple objects across different frames at the same time. Now, you can select objects in multiple frames on your canvas or within a specific section to resize, align, and modify ...
I Redesigned Amazon Prime Mobile App
Переглядів 3664 місяці тому
In this video, I use Figma to redesign the home and profile screen of a popular video subscription app, Amazon Prime Video. I used the FigJam board to write and brainstorm ideas In this video, we dive into the creative process of reimagining the user interface of Amazon Prime Video, one of the leading video subscription platforms. Using Figma and FigJam, a powerful design tool, and the collabor...
How to create a new FigJam file in Figma
Переглядів 1845 місяців тому
Try Figjam here: bit.ly/figjamRCDesign In this Figjam nugget you will know how to create a figjam file and learn the basic features of this app inside Figma. 👍 Like & Subscribe: Enjoyed the video? Hit 'Like', share with friends, and subscribe for more UX insights! 💬 Comment Below: Have thoughts or questions on UX Design? Join the conversation in the comments! Tools I use everyday (Affiliate lin...
Brainstorm ideas in FigJam - Figma
Переглядів 3425 місяців тому
FigJam is an online collaboration tool designed for everyone. I use Figjam a lot on my design process and I want to share with you a series of figjam nuggets to help you start with it. 👍 Like & Subscribe: Enjoyed the video? Hit 'Like', share with friends, and subscribe for more UX insights! 💬 Comment Below: Have thoughts or questions on UX Design? Join the conversation in the comments! Tools I ...
Scale frames with content in Figma - EASY
Переглядів 2,2 тис.5 місяців тому
Try Figma bit.ly/figmaRCDesign I organize my everyday tasks with Notion: affiliate.notion.so/sj7rw7m77ye1 In this Figma nugget you will know how to use the scale tool to proportionally resize layers and objects. This tool preserves aspect ratios and ignores constraints of any nested layers in order to scale them proportionally. Any blurs or strokes will scale as well. Activate the scale tool by...
DESIGN for Apple Vision Pro
Переглядів 5505 місяців тому
Try Figma bit.ly/figmaRCDesign Try Figjam here: bit.ly/figjamRCDesign Today, we're diving into the exciting world of Spatial Design, especially with the buzz around Apple's latest innovation, the Apple Vision Pro. Let's break it down into simple terms and explore what makes this device a game-changer in AR and VR technology. As designers, understanding this new frontier can revolutionize how we...
Prototype an Interactive Map in Figma
Переглядів 4155 місяців тому
Try Figma bit.ly/figmaRCDesign Try Figjam here: bit.ly/figjamRCDesign In this tutorial, you will know how to create an interactive map in Figma using basic elements. Map plugin (Figmap): www.figma.com/community/plugin/937760472566581732/figmap 👍 Like & Subscribe: Enjoyed the video? Hit 'Like', share with friends, and subscribe for more UX insights! 💬 Comment Below: Have thoughts or questions on...
Figma prototype will never be the same after this
Переглядів 7106 місяців тому
Try Figma bit.ly/figmaRCDesign If you use sections only to organize your frames, you are not using it to its full potential. They are great to visually group frames on the canvas but in this video I will show you how you can improve your prototypes to become faster in prototyping and reduce the amount of frames in your files. 👍 Like & Subscribe: Enjoyed the video? Hit 'Like', share with friends...
DON'T become UI/UX designer BEFORE you know this
Переглядів 4446 місяців тому
DON'T become UI/UX designer BEFORE you know this
2024 Complete Guide to Becoming a UI/UX Designer
Переглядів 1,1 тис.6 місяців тому
2024 Complete Guide to Becoming a UI/UX Designer
How to create 3D effect in Figma - [FREE PLUGIN]
Переглядів 4737 місяців тому
How to create 3D effect in Figma - [FREE PLUGIN]
Sticky scroll Figma
Переглядів 5638 місяців тому
Sticky scroll Figma
Brainstorm ideas FASTER in Figjam AI
Переглядів 1,4 тис.8 місяців тому
Brainstorm ideas FASTER in Figjam AI
Create a Button Component in Figma
Переглядів 2,9 тис.8 місяців тому
Create a Button Component in Figma
Figma components FULL GUIDE | Components and Variants tutorial
Переглядів 8148 місяців тому
Figma components FULL GUIDE | Components and Variants tutorial
Figma Game Prototype - Flappy bird game inspired
Переглядів 2,7 тис.8 місяців тому
Figma Game Prototype - Flappy bird game inspired
Using Generative Fill Ai In Photoshop: 16 Ways To Get The Most Out Of It
Переглядів 7489 місяців тому
Using Generative Fill Ai In Photoshop: 16 Ways To Get The Most Out Of It
Adobe Updates with AI that will BLOW your Mind! Adobe MAX Highlights 2023.
Переглядів 1 тис.9 місяців тому
Adobe Updates with AI that will BLOW your Mind! Adobe MAX Highlights 2023.
You need to know this Figma Gradient Animation
Переглядів 8329 місяців тому
You need to know this Figma Gradient Animation
NEVER forget this when designing apps
Переглядів 4799 місяців тому
NEVER forget this when designing apps
5 HERO Sections Styles That You Can COPY
Переглядів 8999 місяців тому
5 HERO Sections Styles That You Can COPY
Parallax scroll animation in FIGMA
Переглядів 4,8 тис.10 місяців тому
Parallax scroll animation in FIGMA
Scroll animation in Figma - Horizontal & Vertical
Переглядів 2,2 тис.10 місяців тому
Scroll animation in Figma - Horizontal & Vertical
NETFLIX Hero section in 3 STEPS - FIGMA
Переглядів 2 тис.10 місяців тому
NETFLIX Hero section in 3 STEPS - FIGMA
Carousel animation in 3 EASY STEPS - Figma tutorial
Переглядів 6 тис.10 місяців тому
Carousel animation in 3 EASY STEPS - Figma tutorial

КОМЕНТАРІ

  • @chingmingphotosable
    @chingmingphotosable 21 годину тому

    Thank you Ricardo. I have a question about multiple dropdown menus: I used your approach to make multiple dropdown menus but quickly found out I can pull down every single menu items. Is there any way to limit the number of dropped-down menu to just one? Tried boolean variables but still couldn't solve this issue.

  • @aronfelipe5157
    @aronfelipe5157 2 дні тому

    Hii guy thanks for the video , I'm not sure, but do you speak Portuguese?

  • @ilhanaluk5116
    @ilhanaluk5116 3 дні тому

    thanks quaresma

  • @baumotion
    @baumotion 11 днів тому

    thanks for the quick help!

  • @lauranixon20
    @lauranixon20 11 днів тому

    Is there a way of making one component for the dropdown that will work in any scenario? In our app we have loads of dropdown lists, I don't want to have to create a component for every single one. This is nice for a one off dropdown but doesn't work as a reusable component.

  • @bandungmee
    @bandungmee 12 днів тому

    thanks... it looks simple function but quite tough for a beginner. but the steps you show are detailed and easy to follow

  • @anissaford378
    @anissaford378 13 днів тому

    This gels with much, if not all that I learned in Google UX certification recently. I've only done one project and am almost finished with a second. Research for both apps produced innovation and provided information that both consumers and businesses hadn't considered in the past. Still, professional designers sharing beautiful designs is intimidating. I see it and want it which means more time studying software.

  • @jamalabdotube
    @jamalabdotube 14 днів тому

    Good for macbook ? i mean the colors and brightness

  • @Underhills
    @Underhills 18 днів тому

    27" is too small for 1:1 4K res. on 16:9. Best res. for this size is 1440p. Especially if you do UI work. To utilize 4K at least "31.1 or preferably 32" is optimal. In that regard my recommendation is the Eizo ColorEdge CG319X 32 4K. This product also has much better Adobe RGB coverage if you do photographic work and the best color accuracy on the market.

  • @hajiral-rashdia8488
    @hajiral-rashdia8488 20 днів тому

    thanks

  • @Intelligentchips
    @Intelligentchips 23 дні тому

    Nice idea. I tried creating a side bar with 6 buttons. There is a dropdown on the second and fifth buttons. The dropdown is floating above the main buttons. Couldn't figure out what was the challenge. Can you do a video of that kind?

  • @user18501
    @user18501 24 дні тому

    Thank you for this very helpful video. I have one question, can you also add "close when clicking outside" when the dropdown is visible? Thanks!

  • @mastroale
    @mastroale 26 днів тому

    Thanks, mate, this tutorial helped me a lot. One thing I've noticed is that when inserting the component into a form on a page with other inputs, the dropdown will push the bottom content since it's not an overlay, and if you try and add the dropdown as absolute into the instances, it won't push the bottom content. Still, it will go behind, and there is no way to control the z-index. Any suggestion.

  • @user-bw3wi7fk8s
    @user-bw3wi7fk8s 27 днів тому

    How keeP selected option defferent? on click only change variables , not states

  • @MARCOS4U
    @MARCOS4U Місяць тому

    The issue I'm encountering is that when there are 4 identical dropdowns in a row, selecting an option in one dropdown changes the value of all the others. Any ideas?

  • @abhishekkandulna3202
    @abhishekkandulna3202 Місяць тому

    What if I have 20 different dropdowns for my complete product, if i try to create new one how complicated it will be in local variable section.

  • @youwdin
    @youwdin Місяць тому

    You missed to show the icon home flow. Could you please explain to me how to connect all home icon to the home screen?

  • @helenamota7645
    @helenamota7645 Місяць тому

    I cant find an answer for my problem anywhere on the internet, maybe you can help me? I need to use multiple dropdown menus, one under the other, but they cant move when i expand the list, and i need then to close when clinckng outside

  • @maariaidk
    @maariaidk Місяць тому

    I was searching a tutorial for the accordion feature, easy to follow and on point! Thank you very much!

  • @mdcs00
    @mdcs00 Місяць тому

    Hey Ricardo I'm a Product Designer and I'm planning to buy this monitor, I just wanna know your opinion on this monitor. Do you think is it perfect for product designer? Is it good for doing UI Design? Do you find any color shift on this, like you choose a HEX code and it shows a slightly different color? Thanks in advance ☺️

  • @attilabodi826
    @attilabodi826 Місяць тому

    So if apple is selected, how do you advance to another page in a prototype where that option is set property?

  • @nealcaffrey8890
    @nealcaffrey8890 Місяць тому

    Nice tutorail,but $12/month

  • @TheVitok24
    @TheVitok24 Місяць тому

    Good luck 🎉

  • @user-ke8be4yj6v
    @user-ke8be4yj6v 2 місяці тому

    🎉thank you a lot 😊

  • @takeiteasy6961
    @takeiteasy6961 2 місяці тому

    Which is good for Photographer ?

  • @Condor_One
    @Condor_One 2 місяці тому

    Why doesnt the hover work for me??? Anyone got the same problem?

  • @rodfritz2645
    @rodfritz2645 2 місяці тому

    Exactly want I needed as a Figma noob. Thank you!

  • @mdershadmia5482
    @mdershadmia5482 2 місяці тому

    I cant set fruit list into the select Fruit,, i select fruit list and expended component but when i should copy ,, i dont understand i have to copy frutis list before select select expended component, anyone should help me

  • @gravitalez
    @gravitalez 2 місяці тому

    Great Video! Do you make the connection through HDMI or Display Port? (In a macbook air m1)

  • @oliveirasmj
    @oliveirasmj 2 місяці тому

    top⭐

  • @tutukumarpanda
    @tutukumarpanda 2 місяці тому

    It's helpful, thanks

  • @brunoreis3
    @brunoreis3 2 місяці тому

    amazing

  • @RicardoCostaDesign
    @RicardoCostaDesign 2 місяці тому

    👉Figma Professional psxid.figma.com/sqolu12rnye1-ouafk Thanks for watching!

  • @sebastianovzky1253
    @sebastianovzky1253 2 місяці тому

    There is some blurry text problem with this monitor?

  • @harshitdhasmana587
    @harshitdhasmana587 3 місяці тому

    Can someone please explain what shortcut did he said at 9:53 timestamp for putting the fruitlist component back inside the expanded component ...

  • @julianaramirez7669
    @julianaramirez7669 3 місяці тому

    How can you connect after finish this, a fruit you select with a specific frame? to show a new screen or frame when you select each fruit?

  • @hoangloc0710
    @hoangloc0710 3 місяці тому

    Love how you make that text animation, appreciate the tutorial ☺

  • @RicardoCostaDesign
    @RicardoCostaDesign 3 місяці тому

    Thanks for watching! Try Figma bit.ly/figmaRCDesign Try Figjam here: bit.ly/figjamRCDesign

  • @tutukumarpanda
    @tutukumarpanda 3 місяці тому

    Nice, thanks for sharing 👍

  • @SamueleBesoli
    @SamueleBesoli 3 місяці тому

    Wow! Beautiful Animation 😍 Thank you for the video! I will try it 😏

  • @sibyllynxdragneel3792
    @sibyllynxdragneel3792 3 місяці тому

    Este video me ayudo en el trabajo, gracias!!!

  • @RicardoCostaDesign
    @RicardoCostaDesign 3 місяці тому

    Thanks for watching! 👉Try Figjam here psxid.figma.com/r84po22vy008-lpaypq

  • @jlcontrer1219
    @jlcontrer1219 3 місяці тому

    THIS IS FOR PAID FIGAM ONLY, THIS IS FOR PAID FIGMA ONLY, wasted time on this. until the end I have to buy the subscription to do anything.

  • @yuriiandrusiak3510
    @yuriiandrusiak3510 3 місяці тому

    Thanks. Finally i managed to resize whatever I needed :)

  • @CosimoWise
    @CosimoWise 3 місяці тому

    that's a great solution, but what about if you want to add a bit of style with motion?

  • @masterfangeek6689
    @masterfangeek6689 3 місяці тому

    Hello. In reviews of the ProArt Display PA279CRV monitor, customers complain about PWM, that their eyes get tired, and someone hurts when working on this monitor, probably because of PWM, or something else. How can you comment on this situation with the monitor, is it worth buying it, given this drawback, is it a marriage, or do all monitors have such bad features? Thanks .

  • @a.ha.pixels
    @a.ha.pixels 3 місяці тому

    Excellent job man, very helpful, and thanks for sharing the file as well!

  • @Galacxia
    @Galacxia 3 місяці тому

    This guy is a fricking rocket scientist. Just saved me days and days of work. I am, however, angry that the developer I hired to do the UI/UX for the app I'm developing DIDN'T do a single drop down combo box this way and I now have to go back and fix at least 15 combo boxes.

  • @sopikhutchua
    @sopikhutchua 3 місяці тому

    Thank you for sharing, but I am interested if I can use it for a mobile app?

  • @RicardoCostaDesign
    @RicardoCostaDesign 3 місяці тому

    Thanks for watching! Try Figma bit.ly/figmaRCDesign Try Figjam here: bit.ly/figjamRCDesign