No video

Advanced prototyping with less complexity with variables - Miggi, Ricky R, Garrett M (Config 2023)

  Рет қаралды 60,197

Figma

Figma

Күн бұрын

Speakers:
Miggi (Miguel Angel Cardona Jr.) - Designer Advocate, Education, Figma
Ricky Rajani - Software Engineer, Figma
Garrett Miller - Product Manager, Prototyping, Figma
Join us for an in-depth session to learn how to build even higher fidelity prototypes with less complexity (read: less interactions!)
Please visit config.figma.c... to view ASL version of this Config 2023 session.
Figma is free to use. Sign up here: bit.ly/3msp0OV
____________________________________________________
Find us on ⬇️
Twitter: / figma
Instagram: / figma
LinkedIn: / figma
Figma forum: forum.figma.com/
____________________________________________________
#Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems #Config2023

Пікірлер: 59
@milksliced
@milksliced Жыл бұрын
Figma teaching us all to become developers year by year lol
@dududu5788
@dududu5788 Жыл бұрын
true af lol 🤣🤣
@Underhills
@Underhills Жыл бұрын
Cuz that's easier than making designers out of developers.
@vickyb5683
@vickyb5683 Жыл бұрын
​@@Underhills Do you think? development is harder than design IMO. It's just a lot of devs are aesthetically challenged.
@LarryStevenSaxon-mz6yj
@LarryStevenSaxon-mz6yj Жыл бұрын
​@@vickyb56830:15 😊
@EnesKab
@EnesKab Жыл бұрын
Miggy is a true story teller. And for Ricky, that's a remarkable moment of her career. Congrats !
@Mary55113
@Mary55113 3 ай бұрын
Thank you so much dear Ricky and dear Miggi. This video was awesome because you explained the premise so well.
@vaanresvaanica
@vaanresvaanica Жыл бұрын
Hi Miggi, please publish your demo file to the community. Thank you so much
@cjohndesign
@cjohndesign Жыл бұрын
Did this file get posted? I don't see him looking at the cart total
@Benfry57
@Benfry57 Жыл бұрын
Maybe this will finally make more designers care about prototyping and creating more sophisticated experiences
@theado3183
@theado3183 Жыл бұрын
Miggy you are my life savor! Thank you Figma team for these videos!
@Emuepic
@Emuepic Жыл бұрын
This is actually game changing! So keen to play with this.
@MehboobRiaz
@MehboobRiaz Жыл бұрын
Great work, bridging the gap between design and dev!
@exgeeinteractive
@exgeeinteractive Жыл бұрын
I've successfully transitioned my carousel galleries with multiple nested components to a single component that uses variables+conditionals. In just one component, well two if you include the main component that holds the images.
@jordanroywhite
@jordanroywhite Жыл бұрын
Thank you so much for these features! Excited to see them expand in the future.
@MikeDenton-ze5ps
@MikeDenton-ze5ps Жыл бұрын
Great to see this new feature although the demo still doesn't solve one of the most common needs... SELECTING A SINGLE ITEM FROM A LIST. How can you create an interactive component (such as a group of radio buttons, or a navigation menu) that can select a single item from a list of 12 items without needing to create 132 connections?
@MrMartinjo
@MrMartinjo Жыл бұрын
It's really amazing how they can release these features without catering for this super common case!
@Drjhwatson
@Drjhwatson Жыл бұрын
But variables let you build that with 1 click and 0 connections.
@madhumia1196
@madhumia1196 Жыл бұрын
This is actually game changing! OMG
@MariaReyddsign
@MariaReyddsign 11 ай бұрын
Thanks Ricky for the conditionals!!
@TheCds777
@TheCds777 6 ай бұрын
Navigrate. Confishionals. Love it.
@LukasFigely
@LukasFigely Жыл бұрын
Amazing spekers and features ... love it
@Underhills
@Underhills Жыл бұрын
Except from some rare contexts I don't really see how this solves an endless amount of linked frames for the most part. 90% of the times I don't make counters and stuff like that. I make common interaction patterns that we all know is the bread and butter of UI design. They need to make working with interaction simulation much easier. Also, prototyping needs to be more stable. Every time I hit that prototype play icon I expect to see linked frames skipping left and right, up and down, when clicked. They don't stick to the same position. Same if it's 100% view or zoomed, each click change results in the frame changing position, either alot or slightly. Figma is great for operating DS's and for collaboration but for UI prototyping it still sucks on a daily. I miss XD every time I need to prototype something but I'm forced to use Figma now due to the project. I gave these variables a try and it didn't work, it didn't connect to my existing color tokens, it didn't find any of the established names in the token section, it didn't work basically. Bugs bugs bugs. There's Figma for'ya.
@gospoda2
@gospoda2 Жыл бұрын
Another thing I noticed is that I'm not able to build in simple hover states with variables based on a component from our design system. I now have to detach the parent component in order to apply those.
@richardsilcock7791
@richardsilcock7791 Жыл бұрын
UXPin and other platforms have had this for YEARS, glad Figma has finally caught up.
@A22by7
@A22by7 Жыл бұрын
Loving the Zelda Tears of the Kingdom references at 39:00 😊
@Mattc0m
@Mattc0m Жыл бұрын
What about text input / text strings?! Would love to be able to support keyboard inputs to set a variable.
@Des0war0ich0netAgentNoMiss
@Des0war0ich0netAgentNoMiss 10 ай бұрын
After working a while with variables, it really strikes me that there is just a global scoping context form them. You just can't use them in components or variants :/
@markusgaderbauer8409
@markusgaderbauer8409 Жыл бұрын
Got it!
@kaushikmitra6402
@kaushikmitra6402 9 ай бұрын
Awesome! but can you give some example of using color variable?
@MrMartinjo
@MrMartinjo Жыл бұрын
The loop back demo is such a clusterfuck. How can they demo this with a straight face? And how can there not be "local" component specific (instance) variables that can be set via actions? I can probably solve my "group selection" problem a little bit easier now using the loop back hack, but this still feels like a giant missed opportunity to fix prototyping in Figma. Luckily for them, no one else seems to get it right either...
@deeawn6051
@deeawn6051 Жыл бұрын
No local component instance variables is a huge drawback... Playing with the variables there is also a lot of limitations on the logic. It doesn't seem that a conditional +1 iteration can exist alongside a value reset either.
@enulyraunaj
@enulyraunaj Жыл бұрын
yep
@GurdevSambali
@GurdevSambali Жыл бұрын
Bone Thugs! Yeaaah!
@sauravchhangani
@sauravchhangani Жыл бұрын
21:17 this is what i learned first day at C language class😮
@HolographicKode
@HolographicKode Жыл бұрын
Wow :) Figma can do now coding :) visually kinda .. why not open up a coding window to edit code directly? If the designers really don't want to touch code and do developer's job, then is this visual coding with variables so much of a departure from coding? A desinger would have to learn a little bit of coding after all no matter what to make the prototyping more complex and effective. Perhaps one day AI will do both design and code so the creator (desinger+developer) would only have to give prompts to the AI tool to prototype and create apps.
@ShabirGilkar
@ShabirGilkar Жыл бұрын
Wow Awesome! really would like to play with it.
Жыл бұрын
Great
@djashawe88923
@djashawe88923 Жыл бұрын
Hi Figma, thanks for the updates. Where can I find the Miggi's example Figma files? I am stuck at 34:12 so I want to expand the collapsed interactions to see the whole interactions. How was he able to assign the string type variable, "load_percent" to a number type variable, "load_value"? That's the part that's confusing.
@minkim5651
@minkim5651 Жыл бұрын
I don't know why figma is developing these features. Figma is not a final product. You can save much time just by communicating directly to developers rather than multiple clicks for prototypes.
@MrBelisa11
@MrBelisa11 Жыл бұрын
I dont have smart animation in my gallery, when i use variable button's
@BrunoFelicio
@BrunoFelicio Жыл бұрын
One thing comes to mind. Feature creep.
@alaliphotographics
@alaliphotographics Жыл бұрын
Wow Can I upload this on my channel
@user-ff8nw4mu6j
@user-ff8nw4mu6j Жыл бұрын
anyone has link to the calculator's file in community? I can't find it anywhere
@miguelbernuy834
@miguelbernuy834 Жыл бұрын
Copying and pasting the prototype doesn't work for me, it copies the button and pastes it inside my component, I clicked on the left too, but it doesn't work for me, someone please help me
@KeshaLukin
@KeshaLukin Жыл бұрын
It is buggy. Create a second interaction. You will see a burger menu next to each interaction when you add more than one. Clicking on burger menu lets you select it as described in the video.
@SubinSyd
@SubinSyd Жыл бұрын
Has anyone been able to successfully copy and paste the prototype interactions like the demo? I tried following the Figma documentation by using CMD+Control+C, but it doesn't seem to work.
@sbpate6
@sbpate6 Жыл бұрын
Yeah btw it’s just CMD+C. And you have to play around with the interaction a little bit to select it properly when copying and/or pasting.
@jacquelinetse
@jacquelinetse Жыл бұрын
You have to make sure you click that one little space that makes the selection turn blue first before you copy
@Goose-wedding
@Goose-wedding Жыл бұрын
I wish it didn't have a million bugs!
@omotayoyohan3217
@omotayoyohan3217 Жыл бұрын
Wow
@andrewstrasser
@andrewstrasser 4 ай бұрын
Does anyone remember Macromedia flash?
@neerajnegi8747
@neerajnegi8747 Жыл бұрын
Now we can't flex our gigantic spider web to devs..which had only 4 interactions
@kevinmcgrath9109
@kevinmcgrath9109 Жыл бұрын
These are cool but SOOO BUGGY right now. Can't set Change To as a later action after Set Variable. Can't assign transition types on instances that are tied to variables. Changing the size of an object based on variables ignores Constraints. But the biggest one thats driving me nuts is that I can't assign Variable to an instance unless that instance is NOT nested in another component (seriously??) These features need way more time in the oven.
@bradmacdonald6591
@bradmacdonald6591 Жыл бұрын
Bone Thugs-N-Harmony
@nofavors
@nofavors Жыл бұрын
So basically you copied a lot of Axure's features into Figma.
@Victor.Seferidis
@Victor.Seferidis Жыл бұрын
Another thing I won’t use.
@heartsbox
@heartsbox Жыл бұрын
lots of fancy words, over a decade behind in your approach.
@whomi2379
@whomi2379 Жыл бұрын
Why the people need to show there support to the pride months, we support many activities but don't show.
Your next component - Dan Mall (Config 2023)
37:23
Figma
Рет қаралды 31 М.
Parenting hacks and gadgets against mosquitoes 🦟👶
00:21
Let's GLOW!
Рет қаралды 13 МЛН
How I Did The SELF BENDING Spoon 😱🥄 #shorts
00:19
Wian
Рет қаралды 37 МЛН
Figma for Edu: Advanced prototyping workshop
59:48
Figma
Рет қаралды 56 М.
Reduce Prototypes by 50% (Simple trick) | Figma Tutorial
5:41
Parenting hacks and gadgets against mosquitoes 🦟👶
00:21
Let's GLOW!
Рет қаралды 13 МЛН