Become a Creator today!Start creating today - Share your story with the world!
Start for free
00:00:00
00:00:01
Is Figma bad at CSS?
1.2k Plays1 year ago
Figma has a brand new feature called Dev Mode! Adam was at Figma's big conference Config and he came here to teach us everything he knows about what Dev Mode has to offer. We also discuss why design handoffs are so difficult and tricks we've learned along the way.
Chapters:
0:00 - Is Figma bad at CSS too?
0:29 - We are bad at design handoffs.
1:46 - Adam was at Figma Config
2:59 - A designer and developer story
5:34 - The difficulties from a design to CSS
7:45 - “Micro-decisions” in design
9:54 - Handoffs were the inspiration for Visbug
10:42 - It’s hard to get consistently get the design correct
12:44 - What is DevMode?
13:40 - 30% of Figma users are developers.
15:10 - How DevMode works
18:48 - Figma can be the “source of truth” for Components
20:39 - Visually coding in Figma
21:53 - Designers can mark things “ready for dev”
21:59 - Generates a changelog
21:30 - A copy SVG button!
23:24 - DevMode still needs some work with layouts
25:23 - There’s a Box Model in Figma!
27:00 - A tangent on :has()
28:20 - display: contents is a hidden gem
30:02 - A recap of DevMode features
Recommended
Transcript
Challenges in Automating Figma Handoffs
00:00:00
Speaker
It's so hard to do handoff that they can't even automate it in any way, even though that tool holds all the micro decisions. They're not manifest well, and the CSS that it creates is still really bad. So Figma is still bad at CSS too. That's good. We still have our job, David. All right. We should get Figma on the podcast.
00:00:27
Speaker
David, I'm bad at something. I know. Is that surprising to you yet? I'm bad. Actually, it is. It is surprising. But go on. All right. I'm bad at puns because we're going to be talking about handoffs today. And I'm like, why doesn't anyone talk about how morbid that sounds? Handoff. Handoff. Why would you take your hand off and give it to someone else? No idea.
00:00:52
Speaker
I feel like an idiot because I totally did not pick up on that pun. I had like, it's such a football mind in my head. So I was like, you just hand the ball off. And then, and so I didn't get it. And I was just a hand, hand off. I mean, in hand, hand the ball off, hand to hand the ball off. Did you just, who made this term and did they really think deeply about what it sounds like and what it means? I feel like the answer is no.
00:01:14
Speaker
No, anyway as elite dad level pun. I just want to say please go on. All right. We're bad. I'm bad at handoffs. We're all bad at handoffs. I'm bad at handoffs in multiple directions. Sometimes handoffs, sometimes giving me their hand, you know, and sometimes I'm giving someone else my hand, right? That's what handoffs are. I just want you to say, right. You're just anyway, but I was at the Figma config.
Figma Config 2023 Conference Highlights
00:01:38
Speaker
Conference huge, 2023, it's like as big as a Comic Con. I'm talking like seas of humans. We could have crowd surfed on the top of these people. It was out of control.
00:01:48
Speaker
And so there's a bunch of handoff tools in there. They're, they're talking about the developer designer handoff, um, which I'm just going to keep thinking about a hand, you know, it's like a seventies movie, just like popping right off. I'm like, here you go. Take my hand. I can't do that. I feel like I need like some magician tricks. It's like, you know, the, the finger trick where it's like, I can't, yeah.
00:02:08
Speaker
Oh yeah. My thumb is gone. Oh, look, I did. There's the one that's my kids know that one. I I'm the dork that does that thumb trick. Yep. Well, but yeah, I want to talk about some of the handoff tools that they gave us. You just talk about how handoff is hard in general and yeah, all the ways that it can go wrong. So that's the topic of today, David.
00:02:28
Speaker
I specifically requested this topic because I knew Adam was there. Adam had a really great tweet about some of the stuff during that time period. We'll have to find that and put that in all the notes. But what I really liked about this is that for a fair good of time and
00:02:48
Speaker
A year that was in the past that I can't remember because time is a concept only. Uh, I basically, I worked on the Firebase blog and so I, we had this old Firebase blog that I also created. We built a new blog for Firebase on Astro, almost like right as Astro was announced. Cause I was like, I like this. This is good. Not even announced yet. Fred shot showed me like an early preview and I was like, I'm going to build something with this. And he was like, well, hold on now. And I was like, no, it'll be fine. Um,
00:03:18
Speaker
It was
Learning Web Design and CSS
00:03:20
Speaker
fine. Uh, I'm still very happy with the decision. Very happy with the decision.
00:03:25
Speaker
And so one of the things that I really wanted to do is I, I've spent the last couple of years being a, trying to learn how to be a better designer, because I find that CSS is that that nice like nexus fulcrum, whatever connecting point, uh, whatever beautiful word I don't know that I should do. That was rad. No, that was perfect. Okay. What a cool use of nexus right now. Is that, is that right? I can only think of the phone. It's, you know, I can't, I don't know, but this nexus too, but anyway, my dog's name is nexus.
00:03:56
Speaker
Is your dog's early name Nexus? Yeah. Well, I have Nexus and Saoirse. Yeah. Okay. All right. All right. There we go. Uh, so we have Adam's dog. No, but, um, you have CSS and then you have design and then to CSS is really the language that kind of gets design going, at least in the web development world. And that was a big reason why I wanted to learn web design and CSS all at the same time, because they felt like I was painting with the same brush.
00:04:23
Speaker
That's not exactly, not exactly true. Uh, it's really, I'm using my fingers when I'm writing code. I'm like, man, my mind is, was a paintbrush. Yes. It's not exactly the case, but one of the things that we did is I teamed up with just this amazing designer on the firebase team, Sean, like a parkowski.
00:04:44
Speaker
just awesome, awesome guide, dream, dream designer to have. And we built the firebase blog and we had a very classic, like, you know, I wish we could just like, you know, back to back, like I'm the designer and like, and now I'm the developer. I hope people are watching this on YouTube for this trick. Uh, and we just like went at it and it was awesome project. But one of the things that I realized that I'm bad at was handoff because
00:05:13
Speaker
he would create these really amazing designs and I'd look at him and I'd even see some of the CSS and Figma and I'd be like, okay, all right. And then I've been studying this topic. Okay. Watch a pro do this. And I would implement it. And then I'd look at it and I would, I would, I would feel like I was playing one of those bar games that was like, what's missing in the two pictures. And it's so subtle and you couldn't figure it out. And you're like, I got four out of the five, but what's the five?
00:05:40
Speaker
And I could never quite figure out what was wrong. And it was always little things like things that I learned was, or things I even learned beforehand that I saw in action for the first time is if you do all caps in like, let's say a label or any font for that matter,
00:05:56
Speaker
you really need to do the smallest bit of letter spacing to give those letters room to breathe. And so the eye kind of catches it and that stuff that I didn't always notice or line height line height is so frigging hard to get right in between Figma and the CSS world and all these things. So he'd have this beautiful design post. I could see all the light, like into the paragraphs and the spacing and everything is great. And then I do it and it's kind of like, eh, and he'd always be like,
00:06:27
Speaker
So that's not quite right. And he'd always give me this like really detailed fix and be like, this needs to be like, this needs to be like this. I love those detailed fixes. That stuff is liquid gold, like poured all over me. So good. And some things I realized, like I, I really thought I was a person who was prime for this kind of activity. I just said liquid gold poured all over me, by the way. I don't know if that's just going to, I'm just going to let that skate through. Okay, moving on. But like, I thought I was the most prime candidate to
00:06:55
Speaker
Hey, I'm not going to move on from that, am I? I thought it was the most prime candidate to do this type of handoff task because I was like, I know.
00:07:03
Speaker
I know design world. I know CSS. I'm going to do great at this. And I did not, you know, I really, I, every time I thought I would smash it out of the park and I was as lucky to get on base. And that to me was really difficult. So, I mean, I had, uh, I've had that kind of happen on my own design. So my own design has never been that complicated. So I can always kind of get it going, but with really complex designs, I find that the amount of subtlety.
00:07:30
Speaker
is so hard to be captured in that handoff process. And so, yeah, I mean, I imagine you've had several instances like this in your own designer, developer, world life, career thing. Absolutely. You know it. And this was like one of my favorite things that I did for years, like when I was in
00:07:49
Speaker
college. I was a front end engineer at design school, implementing other people's designs. And all I got were handoffs, constantly getting Photoshop files, handoffs, right? And I had to make it come true. And you're right, the subtleties between what I was building and what they showed me was always
00:08:07
Speaker
I mean back then it was even more starkly obvious what the web couldn't do and what a designer could do and yeah they weren't even if they red line to they're not really writing down all those little micro decisions because as a designer the subtleties and the micro decisions make a huge difference talking about letter spacing on an all caps headline absolutely.
Collaborating with Designers for Better Handoffs
00:08:27
Speaker
And yeah, one of my favorite moments that I started to do after about a year or two and noticing that what I built looked like Frankenstein and what they built looked like a shiny, glossy, gorgeous piece of, you know, design was I would sit down with them and be like, let's sit down. I will be.
00:08:46
Speaker
your hands, you know, you beat the eyes. I'll be the hands. Um, I just imagined a really creepy video where like hands like slide in on a keyboard, right? And someone else is on the mouse. That's the way we work. It's like a CSI thing where they're all like, Oh no, we need to hack the mainframe. And yet like eight hands on a keyboard. And the guy's like, I know what I'll do. I'll plug the computer.
00:09:11
Speaker
That's how we work. What I did as I started, because I think designers like to do that too. Designers feel like specialists, they feel in control. They feel like they're being asked for their expertise. So you sit down with a designer and say, I built it. I built the thing, it's responsive, check it out. And they'll be like, oh, nudge this. Oh, nudge that.
00:09:34
Speaker
And I did that for years. And I acquired all those little details over and over and over again. They're like subtle things. But the thing is, is one or two of the decisions might feel really dumb at first. You're like, that was really tiny. But then at the end, after all these things have come together, the lots of little things add up to big things and it makes a humongous difference. And then that's also what led me to making VisBug, is how many times I sat down with designers and the stuff that they wanted to change was always the same.
00:10:03
Speaker
And so i made them a tool that let them do it so that they didn't need me it's like here i'll just like take myself out of it let me mimic what your tools do and let you do that on the page that we actually work on together. Yeah dude hand off sir mad credo red lines can't do it green lines can't do it there's a lot of decision making this gone in there that's undocumented and it's on you to take your hand off and you know figure out.
00:10:25
Speaker
You know, I, this reminds me of, I used to work on the Firestore console, like big database viewer editor thing. And when we were, I was also very fortunate to have another very, very talented designer, Allie Johnson. She, um.
00:10:42
Speaker
uh, was, uh, she designed the firebase paper flame like logo. And she also, um, she designed a lot of the corgis that are like used in a lot of Google stuff. And she also, uh, uh, designed Sparky who's he's right there. Where is it? You're right there. Oh, no, what's up, Sparky. She's she's powerhouse. And, uh, but about once a week or so after we get like, I get a fair amount of work done.
00:11:07
Speaker
She would sit down with me at my desk and point out all this like stuff that I did wrong, like on spacing and it was always nudges. It was like, like you're saying, it's always the same stuff. It was always like, eh, eh, eh, eh. And every week she'd sit down again. You could tell she would go, okay.
00:11:24
Speaker
All right. And here's how many ways you were bad, David. It's what it felt like. And not in a way where I was like mad at her, I was mad at myself because I was like, we're not making these mistakes this week. And then we sit down and she'd be like, you don't see how we did this week. And I'm like,
00:11:43
Speaker
I did good. And she's like, I'm like, Oh, and it's because as developers, we have so many insane with designers. We have so many decisions to make. And that communication between the two is just so incredibly hard. No matter how hard you try, like it's like in basketball, you can try to play as great as defense as you possibly can. But if it's just like that shot can just go in and there's just nothing you can do. Like sometimes it's just too hard.
00:12:09
Speaker
And you think you got everything covered and you did everything right and it still doesn't quite click. And so this is why I'm incredibly excited to hear about all these new tools that Figma has given us in dev mode, because I've pretty much primarily used Figma and everything.
Exploring Figma's Dev Mode
00:12:27
Speaker
I use Figma for making little Twitter cards or X cards, whatever we're calling that now, or
00:12:38
Speaker
I use it for even just simple concepts or just even if someone's like, I don't really know what you mean by that. I'd be like, I'll just open up in a Figma.
00:12:49
Speaker
something was become like an everyday tool for me and when i saw this i was kind of like this at first i thought it was a gimmick uh not like a gimmick but like a fun new idea that's like sounds too negative but like again i thought it was like a new feature that was probably gonna get better in the future and then as i saw it i was like
00:13:06
Speaker
Oh, this is already that better in the future. This is really advanced. And so like any other good developer, I decided I'm not going to learn that right now. Uh, I'm going to do that later and I'm going to ask a friend to do that. So speaking of which that Adam, what is, what, what is dev mode and how do I mode on the, on the dev? Ring, ring, ring phone and a friend is named Adam.
00:13:30
Speaker
Well, there's a funny, funny good news. So yeah, they went all out. Figma went all out. This is not a tiny new feature. This is like a completely richly integrated developer experience because they recognize, I think one of the stats is like 30% of the people that open Figma are developers.
00:13:45
Speaker
And they're like, well, I guess we should really lean in. Plus they've seen other companies in the past go in and out like Zeppelin and all these things that are all about the handoff, right? But the funny thing is Figma is still bad at CSS handoff. So through dev mode, dev mode is very good. We'll go over it here in a second. But I just like the irony is that even after all, it's so hard to do handoff.
00:14:10
Speaker
that they can't even automate it in any way. Even though that tool holds all the micro decisions, they're not manifest well. And the CSS that it creates is still really bad. So Figma is still bad at CSS too. That's good. We still have our job, David. All right. We should get Figma on the podcast.
00:14:28
Speaker
That's we could probably could it be really awkward, you know, to give Figma a voice, but, you know, I don't know. So, okay. So want some, want some juicy, some, some meat and potatoes. What they, what they ship to help handoff. You know what? I think that a real foundation of nutrition is vegetables and in, in more vegetables. So please give me the vegetables, Adam.
00:14:52
Speaker
yes we're not on the paleo diet are we we need to we're on a whole 30 give me the whole 30 version i don't i don't know diets so i'm like yes the one with i sound like i do i've never been on one but i hear about them a lot
00:15:10
Speaker
Okay, so to help handoffs and make handoffs easier for front end, between designer and developer, Figma comes out with dev mode. There's an icon in the top right of your kind of editor now. And when you spin it up and when you go into dev mode, you can choose what platform you work for, right? So you're handing off to a certain platform. It allows you to be specific about that iOS, Android, web, and then it has a more button. And I think the more is kind of alluding to like,
00:15:39
Speaker
React or something more flutter, for example, some sort of framework specific subset of one of those platforms. You can also choose your units. You can choose REMS in Figma now. I saw that. That was cool. I like that because I like not having to do math every time I see pixels.
00:15:58
Speaker
Yes, that's frustrating. And it's nice that they can say this is one RAM wide, which is kind of nice to say, or like one RAM a padding or something like that. It does also ask you to provide a unit scale, which is kind of interesting because the RAM is based off of a root number. So apparently, designers go make an entire design using RAM and then bump up the base unit scale and then watch it change or something. I'm not really sure. I don't know. I'm sure there's a good reason for doing that, but that kind of scares me.
00:16:26
Speaker
Yes I want and that's one of the things I was really tentative of I was like what is this mean and how does it actually manifest inside built some designs with it and then check my dev mode output and I was getting things like half a ram or one ram which is nice but I mean it there's also a certain point in which if you're using variables.
New Features in Figma for Developers
00:16:44
Speaker
You know you have size one size two size three It's very similar to talking about whole numbers and not having to think about whatever so I don't know I'm somewhere on the fence with the REM stuff It's just nice to see them thinking about it and just being considerate of a unit for a platform Because like one of the things that Figma has always had is they're like we're Agnostic to a platform where we we can be you can design here for Android iOS web whatever XR VR we don't care and so it's
00:17:14
Speaker
Interesting to see them making some platform decisions here like the unit scale If I say something like Swift do I get like actual Swift UI and the same thing with like Android I get like jetpack compose and stuff like that Yeah, that's dope like I love that. It's pretty sweet. They're helping that handoff You get to choose a theme of your dev mode. You can bring in some your favorite tools So there's like storybook and things like that
00:17:41
Speaker
Then there's, can you hear the, uh, someone's song outside of my window right now? Uh, like very, uh, you know, we'll just say that's a sound effect, uh, that we included in the podcast for learning purposes. Yeah. We're grinding their data waves and they're good for you.
00:18:03
Speaker
Okay good he stopped for a second there's also a vs code plugin so they're really positioning figma as the heart and soul and center of your design whereas like before you might be saying that your heart and soul was your storybook or your heart and soul was something else they're really
00:18:22
Speaker
putting a lot of things down in the ground and saying, we want to be this single source. Everything should be a child of us. Things should trickle down to these other services. And we are the source of truth. They're trying to be the source of truth. And that's why they made this VS Code plugin. They have this dev mode. They're like, stop leaving us. Spend more time in this tool and be more integrated with your designers.
Figma's Integration with VS Code
00:18:45
Speaker
And then they've got other tools to help that out. So if they're being the source of truth, because a framer kind of had an idea for this for a while. I don't think they fully went all the way in on it. But one of the things that, and that was very interesting to me. And so it seems like, let me get if I get this right here, because I actually don't feel like I have this right.
00:19:05
Speaker
I design a button in Figma, and it can become a button on one of many platforms. And that is something that Figma generates the code for. And then using a VS Code plugin, I see that code inside my project. I see there's like a GitHub sync and everything that is built in. So if I'm following that philosophy as a thinking about as like a JavaScript developer,
00:19:32
Speaker
I'm very much having to follow the presentation in container component style where I just have a nice style button, but it doesn't do anything. I need to create a button container or something like that to process any actual logic on it. How do I go from I have a button to I have a button that does something?
00:19:52
Speaker
that like processes a click. A button is a good one. So yeah, it's got states, active, hover, all these different things. And so Figma now has variables and they're not just tokens. They're variables that can be typed. They can be a Boolean. They can be an integer, stuff like that. They have flow control. So in the prototyping modes, you can basically visually code and say what happens in all these things. Yeah. I've done that before, like rudimentary in Figma before, but it's like a first class feature now.
00:20:22
Speaker
Yeah, and it's basics, but it's beyond the basics. They've done a good stance on it. It looks nice. It's well-designed. We'll see if designers pick it up, but it is a lot more powerful. And so why this is important, though, is these props, these variables that can be toggled and changed based on interaction and based on other values of variables. They can make variables based on other variables, values, and so forth.
00:20:46
Speaker
And so when you go to look at the code, so yeah, you're in VS Code, right? And you click the new Figma icon that's on the left-hand rail, and it pops out all your team's design files. You find the design file you want, you click it. It's already in dev mode in a big tab in VS Code for you. You find the particular component that you want to work on, which is easy to find because the designer marked it as ready for development. And it gets a big badge over it. And it gets a promoted export experience, a promoted handoff moment.
00:21:15
Speaker
The designer also can say what changed. The dev tool will tell you what has changed. So since they last marked it ready for dev, it has a change log that tells you what spacings they changed, the font sizes, the letter spacing that got adjusted, sort of things like that.
00:21:30
Speaker
You can also click on any SVG and just copy the SVG right out of that file and take it to your code and hit paste. Yeah, it's super sick. Oh my God, that feature alone, I'm like sold. That feature alone, I agree, dude. It's one of the best ones in there. The amount of time, because the designer I work with, Shamik, he was really good at like little icon to some SVG, like even as I go background pattern or whatever, just
00:21:58
Speaker
Dude was great at creating SVGs. So they were everywhere, which I loved. And I love getting SVG as my source, but yes, every time. And also like the way that permissions were done, I would have to copy the, the design cause he had everything locked. So I couldn't mess with it, which is a good idea. And then I would have to then go and export and do all this stuff and then drag them. And then.
00:22:19
Speaker
So, and that's how I sounded as I did it all. So I very, yeah, exactly. So I, I love this feature already. I'm already like, okay, I'm sold. Nope. All right. All right. I'm on all the other stuff. Okay. It's there, but this, that way we're good. We're good. That's amazing. Uh, amazing. Uh, okay. So then the designers put all these props on there. They've got all this state that now the button is able to represent. It's an interactive button. They made a prototype. Now, when you go look at the,
00:22:45
Speaker
the handoff code that Figma is generating for you, and you choose something like React or whatever framework you want to, it's going to clearly tell you the props that this component needs to take and their types because the designer already did it.
00:23:00
Speaker
And so you get to just go use those and maybe migrate them as you will. I doubt people are just going to straight take it, but it's a re it provides a really good hint though. Right. It's a good handoff hint, kind of like the CSS to Figma outputs. It's not great, you know, um, but it is a hint. It's like, eh, it gets you kind of there. You know, we kicked your can down the, the, but you got to walk. I guess I'm the can and they kicked me anyway, whatever.
00:23:26
Speaker
Is it good at layouts because before you'd always get some like, you know, they're doing the bet. No. Okay. Cause you always get some like absolute positioning, you know, it's just doing its best. Dude, there's so much garbage in it. It's like, if you just do a basic, let's say you have a layout with two cards that are next to each other and you use their auto layout, for example, which is going to make you a flex box container.
00:23:46
Speaker
You're going to look at the code that it outputs and there's going to be about four extra properties that you don't need. There's going to be some flex basis. There's going to be flex shrink zero and all this weird defensive CSS that you're like, I don't need. This is making a simple layout look really complicated in this handoff because this tool is not very good at CSS.
00:24:07
Speaker
I don't know. I like that point you made. I think sometimes you can copy CSS and then you're just like, and you kind of know in your head that like two of those properties are probably unneeded or they're like extra declarative. And sometimes that's good to be extra declarative. Like I'm not going to say don't do that. But I like the concept of, especially as a CSS developer, like showing people like you don't need that.
00:24:29
Speaker
Like, look, four, we had four properties on this rule. That's it. And I think that is like something really good to strive to, for the sake of CSS. So people can stop saying it's so complicated or whatever. Because we're like, look, four properties. And we're done. Misrepresenting. It's the same thing that AI does right now. You ask AI to give you some say, you're like, hey, AI, make me a really beautiful card component. Surely you can go steal enough CSS across the internet to make me a beautiful card.
00:24:56
Speaker
And it will give you styles. Uh, and it will not be beautiful and it will be terrible. Like the six year old floated CSS. And you're like, dude, you really, AI, you suck at this. Uh, you're not just bad at CSS AI. You are, you need to go home and stop. I can't remember. Float is now. I mean, I float on my one wheel, but I'm not floating my layouts. You know, why float when you can flex?
00:25:24
Speaker
Figma also has a box model in there. You can go click your button and see the box model. They have concepts of padding and stuff now, which is interesting, right? Where you didn't really have that before. Now it is awkward though, because it's not real padding. They measure it based off where you put the thing in the middle of something else. So it's like...
00:25:42
Speaker
Okay. So it can be a little, I mean, it's nice that they're thinking about it because there's a lot of times where I'm thinking about it when I'm looking inside Figma and I'm like, okay, so it'll be that and that, or sometimes you lose the concept of the box model at all when you're inside Figma because you're not really sure as you've sized something like you can get, you can look at a button for instance, and then you, as you start to like hand it off and type it up, you're like, wait, do I want padding on this or do I want an actual height? Cause you'd always be.
00:26:13
Speaker
It's a dilemma dilemma for sure. Yeah. Yeah. And so many things like that, like, you know, like, I mean, cards a little, the card might have, you might want only specific width for a card because then it stops looking like a card and looks more like a hamburger if it just keeps growing. So like, you know, like you, but then again, Oh God, we have another episode here. I'm like, do I want it? Uh, do I want that? Do I want the container though? The layout container to, to decide it's with.
00:26:41
Speaker
Do I why? Oh, no. Should it have a container query? Oh, no, David, stop it. Stop it right now. Like I'm starting. These are the things that, that really feel better. Keep going. Keep talking to me to me. Like, why are you stopping? Yeah. Add a container query. Hey, add some has has is going to query that one.
00:27:02
Speaker
I mercy assess right now. I love, I love has because one of the things that has that is just, there's just one use case for has that I have actually I've used a couple, but the one that just maybe be like chef's kiss is when in Markdown, you, let's say you want to add an image and when it gets converted a lot of times, if not most of the time or every time that I've been dealing with it, uh, it gets wrapped in a P tag.
00:27:31
Speaker
And there are many times where I don't want that image to follow the same rules as an element inside of a P tag. Yeah. I definitely feel this. Yup. Yes. And so I know what, and it's the only element inside of that P tag. And so now it's bound by the same. So I have all that in the firebase block and a grid rule.
00:27:50
Speaker
Where it's like, Hey, you're in this column. If you're a P tag, because if you're a P tag, your content and, but in this case, it's not. And I want it to break out to be like more of a full bleed or just, you know, shift a little bit, a little more visually interesting. And so he has image breaks out of the container. And I saw that and I was like tier weeping tears of joy because I wouldn't have been able to do it otherwise. I just had a fixed image inside that little column. He has image display contents.
00:28:16
Speaker
Yeah. Ooh. Yeah. Display content. We need to do a whole episode on display contents because I didn't tell you this, but I ran into another beautiful use case of display contents. And yes. Uh, I don't know if I want to spoil it. Yeah, I'm not going to spoil it. Don't spoil it. I think, you know, display contents better than me now. I'm like, I know what it does. It seems like a mystery disguising, you know, thing, but I'm like, if you found cool use cases, yeah, share them over. You were doing it mostly for sub grid before, right?
00:28:41
Speaker
Yeah, I was doing it for subgrid originally, but I found one that's completely unrelated to subgrid. Well, not unrelated because you could be in a subgrid, but, but for the most part, conceptually I saw it and I was like, Oh, and when I tell you, you're gonna, you're probably gonna be like, Oh, I've done that before, but you're gonna be like, but it's a good one.
00:29:00
Speaker
Sick. You're cliffhanging like the next episode here. You're just like, Ooh, be ready for the next one. There are some more Figma things if I will want to go through them. But yeah, let me know. I was going to say, this is the part of the podcast where we just completely rant on CSS and do not talk about our topic chosen at all. But yes, let's get through those so we can, I feel like that'll be like a nice wrap up.
00:29:20
Speaker
Cool, yeah, recap with your teaser for the display contents where I'm bad at it and you're good at it, I'm down. No, I'm definitely still bad at it. Okay, one really quick thing just because we blew over it like it's normal. You just click on the Figma icon on the sidebar and it's just easy and simple and look how it's probably... Dude, that's crazy amazing. They're literally loading the entirety of Figma. I'm trying not to cuss because it's so cool. They're loading Figma
00:29:45
Speaker
in your VS code editor. It's just a tab. It's just a tab of stuff. You're like, that's not just a tab. That's an entire app that people pay hundreds of dollars for loading now inside of a tab, inside of my code editor. The world is out of control. It's a pretty amazing feat that they accomplished there. Just got to go and holler out for that. All right. Yeah.
00:30:10
Speaker
Oh, I thought you were kind of glitching out there for a second. Are you back? We're good. We're good. Yeah. No, that's always my biggest thing. My biggest fear in these podcasts is there's going to be latency and then you're going to be making a really good points. And I'm going to be like, I like turtles. David, that was like 20 seconds ago, you weirdo. Um, yeah, they got built in diffing.
00:30:34
Speaker
So it'll tell you what changed. You can see marks that they're things are being changed. There's a slider when you get it. So it's almost like you can go to the left. You see what it was before. Go to the right. You see what it is after. So they have a slider with the change list, which is super cool. Yeah. Rems worked out pretty good for padding.
00:30:52
Speaker
Dev mode sidebar, you can see a simplified view of layers. When you're in dev mode, you don't see the whole complexity of the layers. You get a simplified version. Nice. You get autofocus to the element. So when you're working and trying to extract things, it autofocuses it for you. There's lots of cool stuff inside of there. You can open NVS code right from Figma. So of course there's a button there, right? You can just be like, oh crap, I'm in Figma. I want to be in my editor. Boop, just pops it right in there. Takes you right to the document. That's pretty sweet.
00:31:23
Speaker
Um, I tested out putting all of open props into Figma variables because Figma variables are very different. So you can't just, they're not, they just aren't the same as anything we've had before. So the tooling needs to update. There's not a lot of auto import stuff, although there probably is now it's been a couple of weeks and people were really excited about that. Yeah. The diff overlay is cool. Seeing all the variables.
00:31:46
Speaker
I mean, that's mostly it. We talked about rims and the handoff stuff. There were some really cool, there's a plugin architecture as well. So that as a team member, and we're all working now inside of Figma, Figma is the source of truth. I can write a plugin that takes the work from designers and ports it into our components.
00:32:04
Speaker
So whatever architecture we have, whatever unique React thing we're doing, whatever thing we're doing with Lit or some other component framework, we can port these things over. So it will give us an abstract representation of that component. We can iterate over it and pop out the code all within VS code with Figma running it. So it's like I wrote code that taught Figma a trick that taught my VS code a trick and now I'm like,
00:32:28
Speaker
easing this handoff all amongst ourselves inside of this, this tool.
Top Features of Figma's Dev Mode
00:32:33
Speaker
So that's a pretty good. Yeah. We live in the future, man. I, I just say like, if I had to rank the features in my very brief understanding of it, number one, CS, CS, uh, SVGS export copy is SVG. I mean, no, I mean, it puts it in your clipboard.
00:32:48
Speaker
Yeah, that's good stuff. Number one, number one by light years. Sorry. It's just, it's such a great convenience. Number two, so good. Number two, I would have to say that diffing because I can't tell you the amount of times I've had the designer be like, and you see what's different, right? And I'm like, yeah, because before, before, before it had the thing and now it doesn't. And
00:33:11
Speaker
This isn't my line falsetto. This is how I always talk. So I like to be like, yeah, okay, I see. And also, or a lot of times the designer has to make two copies of every time they do something or copy it over. And then sometimes I can get confused about which is the current. So I like that. And then three, I just say, yeah, probably having Figma inside VS code is really nice because it's just one less thing to jumble through. And
00:33:33
Speaker
That's like, you know, you're jumbling through and you, you see Twitter X, whatever. And then you're like, and I'm distracted. All right. Oh, what was I doing? Oh yeah, that's right. So staying focused. I like that. I like getting everything streamlined. So those are, those are David's top three. Very nice. And yes, we're bad at handoffs. So is Figma and that makes me feel less bad about it. It's hard for everyone. So feel good about that for yourself. Listener that handoffing is hard.
00:34:00
Speaker
Well, thank you all for joining us on this one. Stay tuned. Uh, actually I don't know what order we're going to do these in, but we, at some point you may have listened to it or you may be listening to it next. We have a very special guest coming on and I'm very excited about it. So be either happy that you heard it already or get excited because you're going to hear it soon. See y'all. We'll see ya.