Jack, Paige, and TJ join this week's panelist episode to talk about Figma. Figma is a web-based design tool. Jack takes the lead as he talks about its new exciting features, how this tool benefits the designers,  what sets it apart from competing design tools, and many more!

Jack Herrington:

Welcome back to React Roundup. I'm your host for today, Jack Harrington, and with me are my esteemed colleagues, Paige Neeteringhouse.

 

Paige Niedringhaus:

Hello everyone.

 

Jack Herrington:

And TJ Vantolle.

 

TJ VanToll:

Hey everybody.

 

Jack Herrington:

So glad to be back. It's really nice to go to Amsterdam and all that. And but it's nice to be back and be with you guys for another episode. So today, just, we're gonna do a very topical episode. It would be because figma has just released this huge new change, which is amazing for a company that got acquired like a what a year ago or so by Adobe. And normally, those companies just kind of wilt on the vine sort of thing after they get acquired. But they just blew the doors off with this huge new release that literally just completely flips the script on how we were doing the design flow and if figma is part of your process i'm sure you have felt this so it used to be i would say back in the day the product manager and the developer would kind of get together, maybe whiteboard out some designs, here's what it's gonna look like. And the developer, yeah, page, check it out. Yeah, yeah, exactly.

 

Paige Niedringhaus:

I'm going to

 

Jack Herrington:

And,

 

Paige Niedringhaus:

go to bed.

 

Jack Herrington:

you know, we would, they would go through and build out, you build out like a kind of, hey, this is it. And then the designer would come in and skin it, make it look good. You know, maybe add some text, blah, right? Yeah. And that completely with figma has changed right now it's like the PM the product manager and the designer get together and they build a high fidelity mockup that then just kind of like it's on the developer who may sit in those meetings may not because you know as a kind of combination of talking about what how the product works and also like what the right shade of mauve is and like after

 

Paige Niedringhaus:

I'm gonna

 

Jack Herrington:

an

 

Paige Niedringhaus:

go

 

Jack Herrington:

hour

 

Paige Niedringhaus:

to bed.

 

Jack Herrington:

you're just like oh my god i can't handle this anymore please god stop and then you kind of bail out and you're like wait a second but now i don't get any input into what the the feature actually is I got so you know you get this thing at the end where it's like it's kind of a half baked feature but it's really good you

 

Paige Niedringhaus:

Mm-hmm.

 

Jack Herrington:

know and from the product managers perspective they love it because then they can go and take that high fidelity mock and show it to their boss and say hey this is what you're gonna have in like two months or whatever kind of thing it's a better cycle for them but not a better cycle for us as developers or at least it wasn't because figma used to have like what you got out of Figma was terrible. It's basically Photoshop. It was all the other side. Everything is in pixels and we don't work in pixels, not doesn't handle responsive or anything. And yesterday, they may have their big keynote, where they went over this whole huge new feature called dev mode, where it literally is like a big old switch on the thing and dev mode and a little like, you know, chevrons and a slash indicate, you know, this is HTML now kind of thing, right? Although it does end like more than HTML, it'll do like web and also iOS and also Android. But they have simplified the interface for developers. So it's like you just look at what the actual finalized mock is, you can actually get deltas between like what the mock was yesterday and what it is today. So you know what changed? Wow, little things like that. And then the CSS has gotten so much better. They've actually put enough auto layout tools into Figma so that the newer designs can actually work like the web works, actually do like wrapping flex and responsive and all that sort of stuff. And they can actually generate that. And they partnered a whole bunch of companies that will like connect that to developer tools. Like it'll go and generate out tailwind and react for you as a starting point. and even like integrated into your VS code. So it is like, unbelievable, like a whole paradigm shift in how we are going to do development from here on out.

 

TJ VanToll:

So.

 

Jack Herrington:

If Figma is part of your process.

 

Paige Niedringhaus:

Wow.

 

TJ VanToll:

Jack, I have to stop you first and say that was a glowing review. Have you tried this

 

Jack Herrington:

Yes,

 

TJ VanToll:

or

 

Paige Niedringhaus:

Ha

 

TJ VanToll:

are

 

Paige Niedringhaus:

ha.

 

TJ VanToll:

you basing

 

Jack Herrington:

I tried it

 

TJ VanToll:

this

 

Jack Herrington:

last

 

TJ VanToll:

off

 

Jack Herrington:

night.

 

TJ VanToll:

of the keynote?

 

Jack Herrington:

No, no, I tried last night. And

 

TJ VanToll:

Okay.

 

Jack Herrington:

I've been talking to like the folks over chromatic. They do storybook and they're just like, oh my god, this is so good. I, what can I say I used to work at Macromedia back in the day, like 10 years ago, when that became Adobe and that required figma. So if you do some like weird like guy in front of a whiteboard thing, you might think Jackson their pocket, I really have nothing to do. Like, I just

 

TJ VanToll:

Hehehe

 

Jack Herrington:

think it's good. Like I, I am at the end of the day, I think it would if you are a front end developer. And you've been kind of like thinking of a figma is like a pain in your butt. Now is the time to twist your thinking into you should learn figma so that you can get back into that process. So that if you get a design that's like very, very good looking, but not really implementable because they're missing a couple of fields, or you don't have the right data at the right time, or that feature actually requires 100% perfect AI, you can actually go and make those changes yourself, and get back into that design flow and say, Hey, I love your design. But here's something that actually we can actually implement. And then let it help you implement it. I think it's good.

 

TJ VanToll:

Yeah, I only raise some skepticism because it sounds like a familiar pitch that I've heard before. A lot of these sort of design tools have posed themselves as like, well,

 

Jack Herrington:

Mm-hmm.

 

TJ VanToll:

this is, this is a tool for designers, but look, here's the developer tab or whatever.

 

Jack Herrington:

Right, right,

 

TJ VanToll:

Or

 

Jack Herrington:

right.

 

TJ VanToll:

here's

 

Paige Niedringhaus:

Yep.

 

TJ VanToll:

the like, I've used tools

 

Jack Herrington:

Yeah.

 

TJ VanToll:

that'll like export a React component or have

 

Paige Niedringhaus:

Mm-hmm.

 

TJ VanToll:

some functionality like that. And it sounds good on a marketing website, but then you actually go to try it and you look at what it outputs and you go.

 

Paige Niedringhaus:

It doesn't

 

TJ VanToll:

Well,

 

Paige Niedringhaus:

work.

 

TJ VanToll:

no, I'm gonna... I'll just throw

 

Jack Herrington:

totally

 

TJ VanToll:

this

 

Jack Herrington:

agreed.

 

TJ VanToll:

out and...

 

Jack Herrington:

Although I will say I think I think it's I think you're the give it a little give in both directions here. Because I think what we've been looking for is something like, hey, we use material, we use chakra, we use one of those design systems or something like that. Give us that design implemented in material. And it's not going to do that. It doesn't,

 

Paige Niedringhaus:

Mm-hmm.

 

Jack Herrington:

it doesn't understand that. And it's never going to do that. What it will do is it they've effectively gone to where they're skating to where the puck is. And because of RSCs and all that sort of stuff, we're getting away from that we're actually moving towards like shad CN on top of radix, which is like literally just copy and paste tailwind. And so you're gonna get pretty soon here. both things are moving in parallel here. And then it's kind of hard to track. But I do think that they're going more towards the future, as opposed to where we are now. And so if components have been your thing, like, oh, I'm really bought into material or whatever. I think that's old school thinking. Going into the next couple years.

 

Paige Niedringhaus:

So do you think that the component libraries that still exist are going to need to exist? Do you think that there's still going to be a place for Ant Design and Material and those different things? Or do you think it's going to be, if Figma can generate any component that you want in the syntax that you need, or is that going to be a thing of the past?

 

Jack Herrington:

Yeah, maybe, maybe everything in the past. The question, I guess, from your experience,

 

Paige Niedringhaus:

Mm-hmm.

 

Jack Herrington:

how much have you really stuck to those design systems? Like, really?

 

Paige Niedringhaus:

I think it really depends on the team. Like when I was working

 

Jack Herrington:

Yeah,

 

Paige Niedringhaus:

for

 

Jack Herrington:

sure.

 

Paige Niedringhaus:

Home Depot, we went from basically all the development teams choosing their own design system if they had one or home growing all of their own components to everybody must use AMP design or material design. There were like three that you could choose from. And for the most part,

 

Jack Herrington:

and they had

 

Paige Niedringhaus:

the,

 

Jack Herrington:

skins for each one.

 

Paige Niedringhaus:

yeah, they had the the color palette that was the same across all teams. It was standardized. So things

 

Jack Herrington:

red

 

Paige Niedringhaus:

like that existed,

 

Jack Herrington:

gold or what

 

Paige Niedringhaus:

but

 

Jack Herrington:

is it

 

Paige Niedringhaus:

yeah,

 

Jack Herrington:

orange and black

 

Paige Niedringhaus:

orange,

 

Jack Herrington:

i think yeah

 

Paige Niedringhaus:

lot of orange, lot of orange, lot of black,

 

Jack Herrington:

a lot

 

Paige Niedringhaus:

a

 

Jack Herrington:

of

 

Paige Niedringhaus:

lot

 

Jack Herrington:

a lot

 

Paige Niedringhaus:

of

 

Jack Herrington:

of orange yeah

 

Paige Niedringhaus:

white. But it was good because it didn't matter so much what tools you were working with. You could... expect a similar user flow or you could expect that if I click this button, it will do this thing or it will open this tab or whatever. So in that regard, I think it made things a lot more standardized and it made it a lot easier to build tools that, you know, multiple different departments were using or different people within the company were using in tandem with other tools. So in that regard, it was great. Now where I work, where TJ and I work, it's a lot less standardized and it's because we have a lot less sites. So it's much more

 

Jack Herrington:

Yeah, okay.

 

Paige Niedringhaus:

the sites have their own flavors and their own kind

 

Jack Herrington:

Right.

 

Paige Niedringhaus:

of styling. We, we still have prescribed fonts and color schemes and things like that. But, but it's a lot more.

 

Jack Herrington:

to the Style Guide.

 

Paige Niedringhaus:

Yes, exactly.

 

Jack Herrington:

Yeah.

 

Paige Niedringhaus:

And we've talked

 

TJ VanToll:

Yeah, it's

 

Paige Niedringhaus:

about

 

TJ VanToll:

early

 

Paige Niedringhaus:

putting

 

TJ VanToll:

stages.

 

Paige Niedringhaus:

in a component library, but we haven't.

 

Jack Herrington:

Yeah, I just find like when we have component libraries everywhere I've worked. It's always like, oh, that's the standard such and such button. But and

 

Paige Niedringhaus:

Uh-huh.

 

Jack Herrington:

then it's like, you know, like, but it's also kind of goopy and it has weird edges and all this sort of stuff. And that's at the moment that they say, but you're like, oh, my God, oh, no,

 

Paige Niedringhaus:

Mm-hmm.

 

Jack Herrington:

no. You know, kind of like,

 

Paige Niedringhaus:

Yes.

 

Jack Herrington:

yeah. So like it was a design system, but we were constantly breaking the design system. And That's the thing about these. Yeah. It

 

Paige Niedringhaus:

I mean, that

 

Jack Herrington:

seems like

 

Paige Niedringhaus:

is,

 

Jack Herrington:

you wanna. Yeah.

 

Paige Niedringhaus:

you just described a lot of my experiences to a T. It's like, I like this, but the margin's not

 

Jack Herrington:

Yeah.

 

Paige Niedringhaus:

quite right.

 

Jack Herrington:

But.

 

Paige Niedringhaus:

The padding's not quite right. I don't like how it wraps the text. If you could put more, you know, XYZ in here and suddenly you've completely broken the component. You don't understand why it's

 

Jack Herrington:

Yeah.

 

Paige Niedringhaus:

not formatting correctly in some other spot on the site. And when you start to strip away the extra CSS that you've added to make it do something special, suddenly it starts to work again. But

 

Jack Herrington:

Right, right,

 

Paige Niedringhaus:

getting the designers

 

Jack Herrington:

right.

 

Paige Niedringhaus:

to understand that we're breaking what has already been built is so difficult or impossible.

 

Jack Herrington:

Yeah, and I think the I think the value of a lot of this is that it's bringing designers closer into development. They actually

 

Paige Niedringhaus:

Mm-hmm.

 

Jack Herrington:

I man there's even more features that I didn't even get in there. Geez. Like one another feature is you literally like they're now they understand that a button is a button. Yay. Okay. And now you've got a component playground, where literally they have all the variables for the button everything all the props that would go to your react component. And you can literally just like, Oh, I want the outlined variant. Oh, I want the such and such variant. And this is all in Figma. And then, you know, when you generate it, you literally generate a button that has those props. Right. And it's like, there's so many features. It's oh, my God. I can't like I can't. You just have to watch the keynote. It's amazing. But yeah, so. it that will move designers into this world of Oh, I understand that we have a component system as opposed to like,

 

Paige Niedringhaus:

Mm-hmm.

 

Jack Herrington:

always thinking about a component system is this kind of ethereal weird thing that like, it gets in the way of my creativity kind of thing, you know.

 

TJ VanToll:

Yeah. And the part that I've always liked about Figma, or at least the things I, I think they've done the best is encouraging the communication between the designers and the developers as well, because I've also been a part of workflows in the past where it was very much just like a handoff situation,

 

Jack Herrington:

Mm-hmm.

 

TJ VanToll:

like the decree. The decree

 

Paige Niedringhaus:

I'm

 

TJ VanToll:

comes

 

Paige Niedringhaus:

sorry.

 

Jack Herrington:

Make

 

TJ VanToll:

that

 

Jack Herrington:

it work.

 

TJ VanToll:

this, this is the, this is the UI, like

 

Jack Herrington:

Yeah.

 

TJ VanToll:

this is it.

 

Paige Niedringhaus:

Make

 

TJ VanToll:

Like

 

Paige Niedringhaus:

it

 

Jack Herrington:

Congrats.

 

Paige Niedringhaus:

so.

 

TJ VanToll:

it has been sent from above. Here it is. It is. It is

 

Jack Herrington:

Which

 

TJ VanToll:

yours

 

Jack Herrington:

sucks.

 

TJ VanToll:

to implement and yeah.

 

Jack Herrington:

It's it's a drag, right? I mean, why did we get into this, we got into this because we enjoy working with people and making cool stuff, right? That's why we're

 

Paige Niedringhaus:

Mm-hmm.

 

Jack Herrington:

front end engineers, in large part, because we enjoy that process. And now we're kind of extricated from that process. And it's like, Here it is. Here's your UI. Make this thing and it's like, oh, that's no fun. I like that.

 

TJ VanToll:

I will say too that this feels like one of the harder bits about switching to more remote work too, because

 

Jack Herrington:

Mm-hmm.

 

TJ VanToll:

honestly the design stuff is one of the things that is far nicer to do in person, where you

 

Jack Herrington:

Yeah.

 

TJ VanToll:

can have a

 

Paige Niedringhaus:

Mm-hmm.

 

TJ VanToll:

whiteboard,

 

Jack Herrington:

Right.

 

TJ VanToll:

you can walk over to someone's desk and say like, here's this thing. It's

 

Paige Niedringhaus:

Right.

 

TJ VanToll:

just the visual nature of everything you're doing is you can do it over Slack calls, Zoom calls, whatever, but

 

Paige Niedringhaus:

Mm-hmm.

 

TJ VanToll:

it's far more convenient to just have everybody in a room with a whiteboard. and a big screen and just to hash these things out and make sure everybody's on the same page.

 

Paige Niedringhaus:

Yeah.

 

Jack Herrington:

And that's what product managers and designers are doing today, but they're doing it in Figma. And by not knowing how to work in Figma, developers are leaving themselves out of that whiteboard conversation because they're not on the whiteboard.

 

TJ VanToll:

Yep. And I think it's vital

 

Paige Niedringhaus:

So.

 

TJ VanToll:

because that's, that's the other thing is you have to be able to raise the concerns of, I think something that has remained true over all of these design tools is that people that are pure designers still have a hard time translating that into what is difficult and what is hard from a development

 

Paige Niedringhaus:

Mm-hmm.

 

TJ VanToll:

point of view, because sometimes they'll do things that they'll think is hard, but are actually trivial and vice versa,

 

Jack Herrington:

Yes,

 

TJ VanToll:

right? Like come

 

Jack Herrington:

yes.

 

TJ VanToll:

up with some. come up with something like, oh, well, can't you just, and then like the developer and you goes like, oh my God, no, cause I need to get

 

Paige Niedringhaus:

Thanks

 

TJ VanToll:

it,

 

Paige Niedringhaus:

for watching!

 

TJ VanToll:

that data from four different database

 

Jack Herrington:

Right.

 

TJ VanToll:

tables. I can never load it on the, by default. Right. And you have all this on your head, but like, that's the fundamental divide that some of these tools help address. Cause you, you want to be having those conversations earlier rather than like, oh, now we're a week from the deadline and you're seeing this and this comes up.

 

Jack Herrington:

Yeah, exactly.

 

TJ VanToll:

The

 

Paige Niedringhaus:

Yeah.

 

TJ VanToll:

earlier you can be in those conversations and raise those is that.

 

Paige Niedringhaus:

So

 

Jack Herrington:

Yeah,

 

Paige Niedringhaus:

one

 

Jack Herrington:

Paige?

 

Paige Niedringhaus:

thing that I wanted to ask about is you said that you can say, okay, I need a primary button that is a solid color with some text. And I also need the secondary button, which is just an outline with a different color of text. So is that if that is something now that Figma can do that makes me wonder is something like storybook still necessary or has Figma just taken what storybook used to be? before, which was all the variations and the props and the, you know, when you click the button, it does this or this is how an error state looks. So has that just been eliminated? The need for

 

Jack Herrington:

Well,

 

Paige Niedringhaus:

both.

 

Jack Herrington:

yeah. Yeah. It's funny because I was literally just I say it was a guy from storybook who

 

Paige Niedringhaus:

Mm-hmm.

 

Jack Herrington:

ping me on LinkedIn yesterday and I was like, Are you listening to the keynote? I'm like, what keynote? I don't know.

 

TJ VanToll:

Hehehehe

 

Jack Herrington:

Whatever. It's like the figma keynote. I'm like, and it's because I talked to him in Amsterdam, like, this is a huge pain point, like getting from design into a component is this huge deal. AI, they're trying to do all this AI stuff. And it doesn't work. I mean, I was I

 

Paige Niedringhaus:

Mm-hmm.

 

Jack Herrington:

mean, totally in TJ camp of like, It's just bogus. Nobody's nobody's figured this out. And he's sitting there on this knowledge of like, no, actually, Figma has totally they've got this demo has been in private beta for a while. But I can't tell you about it kind of thing. Obviously, whatever. And he says that there is they've done a whole bunch of work. I was actually one of the folks that they partnered with was Chromatic. They're the storybook folks. And he said that they potentially got even a lot more in the in the in the back, you know, waiting, waiting to go. So.

 

Paige Niedringhaus:

Hmm.

 

Jack Herrington:

I don't know what that is. I think you're totally right. I think they I there's another company, I think zeppelin zeppelin's whole

 

Paige Niedringhaus:

Yes.

 

Jack Herrington:

thing was they would sit on top of figma and then they would curate what production was, I think they're gone. They're toast. Like there's

 

Paige Niedringhaus:

Hmm.

 

Jack Herrington:

no need for them anymore. So

 

Paige Niedringhaus:

Mm-hmm.

 

Jack Herrington:

at least that I know that was zeppelin's only bag. I think that's gone. But you know, whatever.

 

TJ VanToll:

Yeah, we were trying to build a tool like this at Progress while I was there. And I'm pretty sure that is now also gone. Maybe,

 

Jack Herrington:

Hahaha!

 

TJ VanToll:

maybe not, but it was one of those things too, where like we were responding to, there's still an obvious need for this. Like the problem is very real. But I think the reason there's so many of this is nobody knows exactly what the silver bullet or what the correct way of doing it, because storybook to me is still. I would still prefer to use that. I wouldn't trust Figma as a developer, and maybe that's just me, right? But Storybook is more like, I can integrate that into my code directly.

 

Jack Herrington:

Yeah.

 

Paige Niedringhaus:

Yeah.

 

TJ VanToll:

I can have that run as part of my testing process. I can make changes in my React component and have a tab open where it's rendering with all these variations. And I wouldn't trust Figma to do that. I mean, maybe Figma's heading in that direction, but I'd want something that just runs in my... completely in my local environment with all my tooling and such that I'd want to rely.

 

Jack Herrington:

Yeah, I think another thing that they showed off during the in the keynote, I mean, just crazy amounts of volume of information was that you can actually adorn like stuff in Figma with links to GitHub or storybook or whatever. So I mean, it's basically there, right?

 

Paige Niedringhaus:

Nice.

 

Jack Herrington:

Yeah. So that's

 

Paige Niedringhaus:

OK.

 

Jack Herrington:

kind of cool.

 

Paige Niedringhaus:

So we have been using Adobe XD for our designs at work. And since Adobe owns Figma, is there any easy way to move those designs to Figma that you know of?

 

Jack Herrington:

To be honest, I have never used it. I'll be XD. I don't even know what I'm. What is it?

 

Paige Niedringhaus:

It's the Adobe

 

Jack Herrington:

Oh, wait.

 

Paige Niedringhaus:

version

 

Jack Herrington:

OK.

 

Paige Niedringhaus:

of Figma. You know, your designer

 

TJ VanToll:

Yeah.

 

Paige Niedringhaus:

has the mock-up and then they start putting new content on the page. And you know, here's your new blog layout or here's your new landing page, homepage design. It's a very high definition. Well, ours end up being high definition. I'm sure you could do more bare bones, skeletons, but ours end up being very high definitions of what our. you know, website looks like, and then here's the new, the new feature, the new page that we're adding to it. Here's how it should look, here's interactions that it should have, here's your main state, and then here's your hover state where, you know, all the links are highlighted or the little copied

 

Jack Herrington:

Hehehehe.

 

Paige Niedringhaus:

link is showing off or whatever. So it's just,

 

Jack Herrington:

Yeah, yeah.

 

Paige Niedringhaus:

it's another version of Figma, basically.

 

Jack Herrington:

So, but Adobe owns Figma.

 

Paige Niedringhaus:

I know, very confused.

 

Jack Herrington:

Right, exactly. I'm

 

TJ VanToll:

Well,

 

Jack Herrington:

confused. Everybody's

 

TJ VanToll:

the history

 

Jack Herrington:

confused.

 

TJ VanToll:

here is XD was losing massively to Figma. So

 

Jack Herrington:

And...

 

TJ VanToll:

Adobe's solution to it was just, well, let's just buy Figma then,

 

Jack Herrington:

Hahaha

 

TJ VanToll:

because

 

Paige Niedringhaus:

Yeah.

 

TJ VanToll:

we have billions of dollars in the bank. So we can just make this problem go, make this competitor go away.

 

Paige Niedringhaus:

Yeah, I mean, maybe eventually

 

Jack Herrington:

Yeah.

 

Paige Niedringhaus:

XD will go away and it will all become Figma or vice versa.

 

TJ VanToll:

Yeah, I don't know. I think we need to get a Adobe executive on the podcast and

 

Jack Herrington:

Good luck with

 

TJ VanToll:

drill

 

Jack Herrington:

that.

 

TJ VanToll:

them on their corporate strategy.

 

Jack Herrington:

Yeah, that's

 

Paige Niedringhaus:

Hehehehe

 

Jack Herrington:

never gonna happen. Well, I mean, they would give you the I actually have a friend who works over at figma and he kind of cagey about it like he's like, Oh, he drifted some little thing on LinkedIn about developers and figma and I'm like, kind of back channeled. I'm like, what are you what are you talking about? And he's like, Oh, nothing, nothing. I'm just kind of curious. I'm like, Oh, come

 

Paige Niedringhaus:

Nothing.

 

Jack Herrington:

on. Now I'm looking at like, Oh, my god, come on. Like, you guys are whatever. So yeah, XD. I don't know. Does it allow you to do things other than the web or than the web and like or you eyes or things like that?

 

Paige Niedringhaus:

Mmm.

 

TJ VanToll:

I've only ever seen it in a web-centric way, but I don't know.

 

Jack Herrington:

Okay.

 

Paige Niedringhaus:

Yeah, I mean, we don't design or build typically desktop based apps like electron based anything. So we've only seen it used for website type of stuff. I'm trying to think though, if there's anything else that I've seen it used for, I know that I don't remember if it was Adobe or if it was some other design tool, it might have been Figma or something that actually had animations so that you could interact with elements on a page and see, you know, this is what a button looks like when it's clicked, or this is what it how it should animate and expand this drawer or things like that. But yeah, I can't I can't think if it's I assume it could be it seems like a very flexible tool and whatever you would want to design for it, you could, but it's very UI focused. So if you just had something that was

 

Jack Herrington:

Okay

 

Paige Niedringhaus:

purely an API or a backend type of system, you'd never use Adobe for it. You would just use it to skin like the login page and then somebody else would build the

 

Jack Herrington:

Right.

 

Paige Niedringhaus:

interface.

 

Jack Herrington:

I'm just thinking like if you want to make a pamphlet or a page for a literal like a physical eight and a half by 11 page, I don't know whoever

 

Paige Niedringhaus:

Mm.

 

Jack Herrington:

does that anymore. To actually, you know, can you do that in InDesign and our next day? I know you can I know you can do it in the other thing is like Adobe. I don't know if you have I have an Adobe. Yeah, the

 

Paige Niedringhaus:

license.

 

TJ VanToll:

Creative Cloud.

 

Jack Herrington:

yeah the creative cloud the subscription I got like the

 

Paige Niedringhaus:

Mm-hmm.

 

Jack Herrington:

big one there are there is a unbelievable amount of apps in there. Like it's like,

 

TJ VanToll:

Yeah.

 

Paige Niedringhaus:

Mm-hmm.

 

Jack Herrington:

there's like 80 apps!

 

Paige Niedringhaus:

Yeah.

 

TJ VanToll:

And I think knowing what I know about Adobe, that like really XD honestly is a play to say, it's a good enough tool that before Figma existed, that

 

Jack Herrington:

Yeah, okay.

 

TJ VanToll:

you just, it'd be an incentive to get people on Creative Cloud. And then

 

Jack Herrington:

Mm-hmm.

 

Paige Niedringhaus:

Mm-hmm.

 

TJ VanToll:

once, because that's really all Adobe cares about. It's kind of like, why would you use Microsoft Teams? Well, if you're paying for Office 365, you're paying for Teams. So even if it's not as good as Slack, if it's

 

Paige Niedringhaus:

or Zoom, yep.

 

TJ VanToll:

free or...

 

Jack Herrington:

teams. What

 

TJ VanToll:

included,

 

Jack Herrington:

Transcribed

 

TJ VanToll:

why not? I

 

Jack Herrington:

by

 

TJ VanToll:

think

 

Jack Herrington:

https://otter.ai

 

TJ VanToll:

XD is sort of the same thing.

 

Jack Herrington:

blows me away about teams is they're always adding these new features when you're like, all I want you to do is get marked down right.

 

Paige Niedringhaus:

Mm-hmm.

 

Jack Herrington:

You know, but it's no, we'll give you like automatic, you know, meeting transcription. Oh, great. Thanks. Can you get marked

 

Paige Niedringhaus:

Here's

 

Jack Herrington:

down

 

Paige Niedringhaus:

theater

 

Jack Herrington:

right?

 

Paige Niedringhaus:

mode.

 

Jack Herrington:

Oh, no,

 

Paige Niedringhaus:

So

 

Jack Herrington:

no.

 

Paige Niedringhaus:

your whole team

 

Jack Herrington:

Yeah,

 

Paige Niedringhaus:

looks

 

Jack Herrington:

right.

 

Paige Niedringhaus:

like they're

 

Jack Herrington:

You

 

Paige Niedringhaus:

in

 

Jack Herrington:

know,

 

Paige Niedringhaus:

a theater.

 

Jack Herrington:

right. You know, and it's like, but can I get like a decent code snippet in a message? No. No, but we can give you like, like sentiment recognition inside of a meeting so it will tell you later if you're being passive aggressive or not.

 

TJ VanToll:

Yeah.

 

Jack Herrington:

Like what? What I needed this why? Jack can be passive aggressive.

 

TJ VanToll:

Teams. The thing about Teams for me is I never thought it was that good at chat, which I,

 

Jack Herrington:

Right!

 

TJ VanToll:

like, that's the

 

Jack Herrington:

The

 

TJ VanToll:

thing.

 

Paige Niedringhaus:

No, it's

 

Jack Herrington:

one

 

Paige Niedringhaus:

terrible.

 

Jack Herrington:

thing!

 

TJ VanToll:

It was like,

 

Jack Herrington:

Just get that right!

 

TJ VanToll:

yeah, it's

 

Paige Niedringhaus:

Yeah,

 

TJ VanToll:

just

 

Jack Herrington:

Yeah.

 

TJ VanToll:

like, I don't

 

Paige Niedringhaus:

well

 

TJ VanToll:

know,

 

Paige Niedringhaus:

I remember.

 

TJ VanToll:

maybe make sending, yeah.

 

Paige Niedringhaus:

I remember having Teams, but also using Skype for Business to actually chat with somebody at work. Like,

 

TJ VanToll:

Yep,

 

Paige Niedringhaus:

you

 

Jack Herrington:

Oh

 

Paige Niedringhaus:

know, we

 

Jack Herrington:

lord.

 

Paige Niedringhaus:

had four different

 

TJ VanToll:

I've done

 

Paige Niedringhaus:

things

 

TJ VanToll:

that too.

 

Paige Niedringhaus:

open

 

TJ VanToll:

Yeah

 

Paige Niedringhaus:

at the same time.

 

Jack Herrington:

Oh god.

 

Paige Niedringhaus:

Yeah.

 

Jack Herrington:

So bad. Just use discord. Discord is the best. It really is. It just works.

 

Paige Niedringhaus:

I really

 

Jack Herrington:

I know it's

 

Paige Niedringhaus:

like

 

Jack Herrington:

GG

 

Paige Niedringhaus:

Slack.

 

Jack Herrington:

gamer thing, but like,

 

Paige Niedringhaus:

I gotta say.

 

Jack Herrington:

really? Okay. It's better than it's better than teams. But then that's not saying much. That's like saying that like, this non on fire dumpster is far better than that on fire going across the water dumpster.

 

Paige Niedringhaus:

Ha

 

Jack Herrington:

You know,

 

Paige Niedringhaus:

ha ha!

 

Jack Herrington:

sorry teams. Guys, you know you know you know the deal.

 

Paige Niedringhaus:

Okay, so let me ask you, since you've got the Creative Cloud Jack, does Figma actually come bundled with it, or is that a separate subscription purchase,

 

Jack Herrington:

I don't know.

 

Paige Niedringhaus:

whatever?

 

Jack Herrington:

Actually, that's a really good question. I

 

TJ VanToll:

This

 

Jack Herrington:

do

 

TJ VanToll:

is why

 

Jack Herrington:

not

 

TJ VanToll:

we

 

Jack Herrington:

know.

 

TJ VanToll:

do need

 

Jack Herrington:

I'm literally

 

TJ VanToll:

to book some Adobe

 

Jack Herrington:

like looking

 

TJ VanToll:

executives

 

Jack Herrington:

at apps right

 

TJ VanToll:

here.

 

Jack Herrington:

now. Oh, my god. What is it 3d and AR really?

 

Paige Niedringhaus:

Nice augmented

 

Jack Herrington:

substance

 

Paige Niedringhaus:

reality with Adobe.

 

Jack Herrington:

3d assets? What is this mixamo? I don't know what to animate 3d characters for games, film and AR experiences? What is this?

 

Paige Niedringhaus:

Ooh.

 

Jack Herrington:

What? Turn your photos

 

TJ VanToll:

It certainly.

 

Jack Herrington:

into editable 3d materials. I can do that. Cool. I don't even have like, yeah, okay. I don't know. It does. It's not in the like the top list of things, but I it's free. There's like, you can get on there for free. And then there's like the premium packages and all sorts of Yeah.

 

TJ VanToll:

They do not mention the word Adobe on their website or pricing anywhere. I think they're, they seem to be trying to distance themselves from the Adobe. Everything

 

Paige Niedringhaus:

Mothership,

 

TJ VanToll:

at least.

 

Paige Niedringhaus:

yeah.

 

Jack Herrington:

Yeah, come to think of it, when I was watching the keynote, there was no Adobe branding at all. It was all like the weird F Figma

 

Paige Niedringhaus:

Mm-hmm.

 

Jack Herrington:

kind of thing. And yeah, it's like it's like never happened. It's like, oh, I guess,

 

Paige Niedringhaus:

Mm.

 

Jack Herrington:

you know, new corporate daddy is Adobe. That's where the money

 

Paige Niedringhaus:

Maybe

 

Jack Herrington:

comes

 

Paige Niedringhaus:

it's

 

Jack Herrington:

from. No,

 

Paige Niedringhaus:

like

 

Jack Herrington:

nothing else.

 

Paige Niedringhaus:

GitHub and Microsoft, where we never see anything Microsoft related on GitHub, but we know they're owned by them.

 

Jack Herrington:

Yeah, totally. Although

 

TJ VanToll:

Stay still.

 

Jack Herrington:

I would expect at least at least that I could log into my Adobe account on Figma. That would be nice. You know, can't do that.

 

TJ VanToll:

They still on Figma's website, there's still a Figma versus Adobe XD marketing page.

 

Jack Herrington:

Womp Womp. Hahaha.

 

TJ VanToll:

Very funny.

 

Paige Niedringhaus:

They didn't make them take that down.

 

TJ VanToll:

Apparently not.

 

Jack Herrington:

I will say

 

TJ VanToll:

Uh.

 

Paige Niedringhaus:

Hmm.

 

Jack Herrington:

I think I would imagine if because I having worked at Macromedia, which became Adobe, I mean, these are huge. These are huge companies back then, you know, 1000s

 

TJ VanToll:

Yeah.

 

Jack Herrington:

of developers and that sort of stuff. The fact that they were able to do this is just mind blowing. It is so hard to like because I'm absolutely sure there are folks who were at the literally, developer number five at Figma who are still there today, who are like, we are building a pure design tool for the web. And now

 

Paige Niedringhaus:

Mm-hmm.

 

Jack Herrington:

that they've got this like developer flow, they're like, this is not big, but this is not ever what I signed up for. I didn't sign up for make a UI builder. This sucks. You know, and those people are probably in power positions. And you got to fight that to like actually say, Hey, you know what, actually know what, 99% of the time people are using Figma to build the web UI to build iOS to build Android, you know, that's our market. You know, that's

 

Paige Niedringhaus:

Mm-hmm.

 

Jack Herrington:

what we are. And to acknowledge that and to say, Hey, we're gonna go make the tweak the tool so that it works better for developers. That's that's that was a speak. I'm sure some people put their features on the line at the company for that. It'll

 

TJ VanToll:

Figma

 

Jack Herrington:

be

 

TJ VanToll:

2 is kind of fascinating because the whole code base is like C++, Rust basically, and they use WebAssembly to get it to work in the browser.

 

Jack Herrington:

And Canvas,

 

TJ VanToll:

And

 

Jack Herrington:

yeah.

 

TJ VanToll:

yeah, it's just a fascinating architecture.

 

Jack Herrington:

Oh yeah.

 

TJ VanToll:

And I'm surprised there's not more of that. But it's interesting because it helps explain why it's successful just because it works so fast.

 

Jack Herrington:

Mm-hmm.

 

Paige Niedringhaus:

Mm-hmm.

 

TJ VanToll:

in the browser, whereas so many tools like this that I've used in the past just feel so clunky.

 

Jack Herrington:

Oh yeah.

 

TJ VanToll:

I mean, we love JavaScript, that's why we're here, but when you scale up to absurd scale, which is needed to have something like Figma running in the browser, it's very hard to keep that running efficiently and well.

 

Jack Herrington:

Yeah.

 

Paige Niedringhaus:

Mm-hmm.

 

Jack Herrington:

And I mean, I've seen massive pages, you know, or, you know, the basically have the entire app, you know, with all the lines and the blah, connecting all of it. And you can just like zoom in, zoom out, navigate all over. And even on old commodity hardware. It's snappy. And you never hear the fan were anything it is. It's a miracle of engineering. At least at

 

TJ VanToll:

Yeah.

 

Jack Herrington:

that level. Yeah. I do think they actually I think the like all the all the nav and all like the toolbars and all that sort of stuff that are sitting on top of the canvas. I think that's all react actually.

 

Paige Niedringhaus:

Hmm.

 

TJ VanToll:

I think you're right. I think that

 

Jack Herrington:

Yeah.

 

TJ VanToll:

the core of it is just the core hardest part of the rendering is all basically native code.

 

Paige Niedringhaus:

Yeah, lower level

 

Jack Herrington:

It was.

 

Paige Niedringhaus:

languages.

 

Jack Herrington:

It's amazing to hear how far React has gotten. I actually talked with one of the folks over at Meta when I was in Amsterdam about like, they have a really good relationship now with Microsoft. I'm like, wait, Microsoft? What, what?

 

Paige Niedringhaus:

Hmm.

 

Jack Herrington:

Why do they care? And they're like, oh no, actually they're using like React Native on Windows, on the Xbox. They use a lot of React in Microsoft. And it's like, whoa,

 

Paige Niedringhaus:

Oh.

 

Jack Herrington:

that's cool. Like yeah, Microsoft is a huge player in React Native.

 

TJ VanToll:

I believe Teams was rewritten in React also, although

 

Jack Herrington:

Oh, that

 

TJ VanToll:

now

 

Jack Herrington:

doesn't

 

TJ VanToll:

I'm

 

Jack Herrington:

sound

 

TJ VanToll:

having...

 

Jack Herrington:

good.

 

TJ VanToll:

This is...

 

Jack Herrington:

That's not right. Ouch.

 

Paige Niedringhaus:

So one thing

 

Jack Herrington:

Bring in

 

TJ VanToll:

I

 

Jack Herrington:

better

 

TJ VanToll:

don't

 

Paige Niedringhaus:

I'm

 

TJ VanToll:

know.

 

Jack Herrington:

libraries

 

Paige Niedringhaus:

curious,

 

Jack Herrington:

for Markdown.

 

TJ VanToll:

We had to fact check it.

 

Paige Niedringhaus:

yeah, well, TJ fact checks that. You said that

 

Jack Herrington:

Hehehehehe

 

Paige Niedringhaus:

one of the things that they touted for the new version of Figma was being able to say, I want this to be a view component, or I want this to be a react component or something like that. Is that something that Figma is actually doing, or is that something that some intermediary library that translates? plain HTML and CSS or whatever Figma is using into a particular syntax or flavor of component.

 

Jack Herrington:

It was a what I played with it last night. It was a plugin

 

Paige Niedringhaus:

Okay.

 

Jack Herrington:

Like a first party when that first party, I guess a third party plug-in. Let me see where my Okay, come

 

Paige Niedringhaus:

Mm-hmm.

 

Jack Herrington:

here you get their whitespace UI and that was the one I was playing with and I was literally like looking at a Like a button or something like that and trying to see if it would make it and it was a third party kind of thing But

 

Paige Niedringhaus:

Mm-hmm.

 

Jack Herrington:

what they've done is Am I in developer mode now? I don't even know like this green developer mode This is okay, design mode, switch, switch to dev mode, I'm in dev mode. And then I can like go and scroll down, I think I can get like the code for this. But it was a third party thing I get the what they've done, which is good is they basically added enough metadata, I would say to all of the design, so that now it's not like, oh, this is a round the rectangle, it's like, no,

 

Paige Niedringhaus:

Mm-hmm.

 

Jack Herrington:

this is a button,

 

Paige Niedringhaus:

Okay.

 

Jack Herrington:

you know, and so there's enough there's enough metadata in the design to where you can effectively code generate it and do it right. Ish,

 

Paige Niedringhaus:

Mm-hmm.

 

Jack Herrington:

enough, right, enough to create

 

Paige Niedringhaus:

Yeah.

 

Jack Herrington:

react components that have the right stuff. But I think I'm pretty sure that the older like kits or whatever, because they don't have that metadata in them, they're not going to work. So this is going to be one of those things where it's gonna take a little while for it to actually like, older code, older kits, all that sort of stuff that's thinking about It's not going to understand what to do with those.

 

Paige Niedringhaus:

Mm-hmm.

 

Jack Herrington:

But you know, hey, that's the nature of things, I guess.

 

Paige Niedringhaus:

That's

 

Jack Herrington:

Export,

 

Paige Niedringhaus:

pretty cool.

 

Jack Herrington:

yeah. Plugins, oh, there we go. Never really a great interface. Oh, there we go. Figma to React Native. Component inspector. Storybook Connect. There you go. Yeah, all kinds of good stuff. Oh, and Jira. Great.

 

Paige Niedringhaus:

Ugh.

 

Jack Herrington:

Jira integration. Yay.

 

Paige Niedringhaus:

Yeah, that's what

 

TJ VanToll:

That's

 

Paige Niedringhaus:

everyone

 

TJ VanToll:

how you know

 

Jack Herrington:

Everybody's

 

Paige Niedringhaus:

needs.

 

Jack Herrington:

favorite.

 

TJ VanToll:

you're a real business.

 

Paige Niedringhaus:

Ha

 

Jack Herrington:

Yeah,

 

Paige Niedringhaus:

ha!

 

Jack Herrington:

exactly. Everybody loves moving those tickets from open to closed.

 

TJ VanToll:

I think if you have that on your feature list though, you're like 100% more likely to get a CTO to buy.

 

Jack Herrington:

Oh, totally.

 

TJ VanToll:

Like it doesn't even matter if the feature

 

Jack Herrington:

Yeah.

 

TJ VanToll:

does anything, right, it just looks really great.

 

Jack Herrington:

Will it integrate with my burn down chart? That's the

 

TJ VanToll:

Yeah.

 

Jack Herrington:

important

 

Paige Niedringhaus:

Yes.

 

Jack Herrington:

thing. Because damn it. The burn down chart is what sells the product. No, it doesn't.

 

Paige Niedringhaus:

Mm-hmm.

 

TJ VanToll:

Yep.

 

Paige Niedringhaus:

The points do matter.

 

Jack Herrington:

Features sell the product. Yeah, sure. Okay.

 

TJ VanToll:

So do we have any other talking to design developments? Do we have any other tips for people? Uh, like in terms of just design workflows, anything we've, we've been a part of in our careers that we think have worked really well or vice versa. Things that have been. Nightmares, any tips for developers out there and their day

 

Paige Niedringhaus:

Well,

 

TJ VanToll:

to day.

 

Paige Niedringhaus:

one thing that I remember that was useful was when I was a dev team lead, I would have a, I think it was a bi-weekly meeting with my product manager and my designer. And the designer would show us the new mock-ups that they were working on for whatever new features were going to come into the backlog in the next week or two. And it was a great opportunity to say, this is not going to work. or this is going to be extremely hard

 

TJ VanToll:

Hehehe

 

Paige Niedringhaus:

to implement.

 

Jack Herrington:

Yeah, right, right.

 

Paige Niedringhaus:

So if you have the opportunity to work closely with your PM and your designers and kind of get almost a sneak peek or a heads up of what's coming, that can save everybody a lot of heartache and gnashing of teeth further down the line. If you can kind of be able to say, hey, I see where you're going with this and. while it looks cool and the interaction is really nice and the users might like it, it's gonna be a beast for us to actually make this happen. Maybe there's another way and you can, you know, brainstorm other ways to do it that might be less of a lift for the dev team.

 

Jack Herrington:

Absolutely. I think what's worked for me in the past is if you on the launch of a new feature, like, oh, we're going to do this new thing, right. And to have to have as part of the process, a time where devs and or these dev leads and design leads and PMs, you're working like in figma, sure, but you're not working with the high res stuff, you're working with like more the pencil drawing type layout things. And they are specifically unstyled, so nobody argues about the styling and the fonting and all that sort of stuff. And then you just kind of work out the flow. It's like, hey, we're gonna have this page is gonna talk to that page, you're gonna talk to that page, this page has the data, blah, blah. And that, if you can get that going, you know, that may be a rough two hour meeting or whatever, but like that, you know, then as that moves into design, then you're not going to get into the issue which page is talking about where it's like, oh, you guys went off and you design something that like is has zero chance of actually ever being implemented because it's insane. But it's beautiful.

 

Paige Niedringhaus:

It's impossible,

 

Jack Herrington:

You know,

 

Paige Niedringhaus:

right?

 

Jack Herrington:

it's impossible what it is gorgeous. It's gonna be you're gonna have a lot more likelihood of actually getting something that's actually going to be a design that's gonna work. And I think the designers can be happy because it's like, oh, I in my creativity is there, but it's constrained a little bit. And I don't really need to necessarily understand all the ins and outs of this particular business, because that can be hard, I would say, you know, like not everybody needs to know everything about IOT as an example, or what an IRQ is or, you know, that kind of stuff that you guys are doing.

 

TJ VanToll:

Yeah, I think as developers, we, we try to avoid meetings, uh,

 

Jack Herrington:

Ahahaha,

 

TJ VanToll:

just

 

Jack Herrington:

yeah.

 

TJ VanToll:

like as a general statement, but this is one of those situations where it's kind of important to get involved early because if I mean, I think the flip side of this though, too, cause I was going to say that I also have had to try to not be too, I guess, picky about designs either. Like. So as a developer, our role is kind of to go in and say, this is doable, this isn't, or at least say like how hard this is gonna be to implement,

 

Jack Herrington:

Yes, yeah,

 

TJ VanToll:

do

 

Jack Herrington:

yeah.

 

TJ VanToll:

red flags. It is not really our role to pick the best blue for the website,

 

Jack Herrington:

Mm-hmm.

 

TJ VanToll:

right? Or the spacing. So I've tried to catch myself because design is a place where everybody has opinions.

 

Paige Niedringhaus:

Mm-hmm.

 

TJ VanToll:

It doesn't matter who you are. You could be in any role whatsoever. You have thoughts about the colors, the looks, the fonts, and whatever. But... I try to keep my critiques of different things to more black and white type of things and well, not the yeah,

 

Paige Niedringhaus:

Hehehe

 

TJ VanToll:

black and white, maybe the wrong metaphor here, but to the objective things rather than the subjective like, oh, this doesn't feel right because designs can also get bogged down if you have eight people in that meeting. And then the very important VP or whatever comes in and says like, oh, that blue looks bad, right? And then I can

 

Jack Herrington:

Ah,

 

TJ VanToll:

just

 

Jack Herrington:

yeah.

 

TJ VanToll:

throw. everything

 

Jack Herrington:

Yeah.

 

TJ VanToll:

off

 

Paige Niedringhaus:

Ha

 

Jack Herrington:

Flip

 

TJ VanToll:

altogether.

 

Jack Herrington:

the

 

Paige Niedringhaus:

ha.

 

Jack Herrington:

table. Yeah.

 

TJ VanToll:

Right? So I try to be cognizant of that. That's like, that doesn't mean you shouldn't have an opinion, right? Like, but make sure to just, if you're discussing something trivial, make sure you say that like this, I'm just throwing this out there. You can take it or leave it, whatever.

 

Jack Herrington:

Yeah, yeah.

 

Paige Niedringhaus:

Mm-hmm.

 

TJ VanToll:

Because you also don't want to bog down the design process either.

 

Jack Herrington:

Yeah, for sure. I kind of look at my role is more like a last part gatekeeper to like, oh, the contrast on that is crazy low weight, we can't

 

Paige Niedringhaus:

Mm-hmm.

 

Jack Herrington:

ship that or

 

TJ VanToll:

Yeah.

 

Jack Herrington:

that font size is way too small. That's way beyond way below alley because I mean, I'll designers and then tend to have really good eyesight. And they think that like eight point font is like totally acceptable. And you're like,

 

TJ VanToll:

Yep.

 

Jack Herrington:

No,

 

TJ VanToll:

Oh,

 

Jack Herrington:

that's

 

TJ VanToll:

I've...

 

Jack Herrington:

not okay. like, or the, the point zero eight contrast thing, or it's like a light, light gray on a white, you're like, come on, like, you know, that's crazy. But I will say that the use of me, you mentioned like the bad feeling parts, I don't, I don't like to be the bad guy. And I think that that's

 

TJ VanToll:

Yeah.

 

Jack Herrington:

if your process turns developers makes your role as a developer as a person who says at the end, oh, that's we can't do that. or, oh, that's going to be that's going to take forever, or something like that. You sound like the bad guy. You sound like the naysayer. You're just in a bad position. And

 

Paige Niedringhaus:

Mm-hmm.

 

Jack Herrington:

so, you know, try to make sure that whatever the process is, that you are involved enough where you can at least kind of stop that stuff at the pass, where you don't end up having to be the bad guy at the very end. Who's like, no, you know, or, you know, why did you why did you make a five? blob thing where you click on a blob to set the volume when you could have just made a slider, you know, or something that's, you know, actually accessible that people understand, you know, that's one thing I find kind of funny is when people, for whatever reason, they're just like, Oh, I just want to make some new novel interaction mechanism. And you're like, that's, that's not good. Like as a

 

Paige Niedringhaus:

Yeah.

 

Jack Herrington:

as a user, like I when I get on my exercise bike, and I'm setting like the, you know, the duration or something like that. I don't want to set it by like blob. I want to set it, I want it to be text. I want to be here for 15 minutes or 30 minutes or 45 minutes for an hour, right? I don't want to think about it. It's like, you know.

 

Paige Niedringhaus:

Mm-hmm.

 

Jack Herrington:

Simplest Better.

 

TJ VanToll:

It's funny, the part that resonated with me most of all is it's amazing how much designers love small text. That's the one thing that's been

 

Jack Herrington:

Oh, I know,

 

TJ VanToll:

a constant

 

Jack Herrington:

right?

 

Paige Niedringhaus:

It's

 

TJ VanToll:

throughout

 

Paige Niedringhaus:

true.

 

TJ VanToll:

my career.

 

Jack Herrington:

Oh

 

TJ VanToll:

I don't

 

Jack Herrington:

my

 

TJ VanToll:

know

 

Jack Herrington:

God.

 

TJ VanToll:

what it is. Maybe it's that they're trying to fit stuff in a certain space, right? And that the small text helps do that. But I swear, over and over again, I've had to just flag, like, you realize that this is like impossible to read or

 

Jack Herrington:

Right.

 

TJ VanToll:

like this is not... This is not going to work. It's, it's a weird, weird phenomenon.

 

Jack Herrington:

I don't

 

Paige Niedringhaus:

Mm-hmm.

 

Jack Herrington:

think they like text. I just don't think

 

TJ VanToll:

Yeah,

 

Jack Herrington:

text is

 

TJ VanToll:

that

 

Jack Herrington:

a

 

TJ VanToll:

too.

 

Jack Herrington:

fun thing to

 

Paige Niedringhaus:

It

 

Jack Herrington:

put

 

Paige Niedringhaus:

does

 

Jack Herrington:

on a

 

Paige Niedringhaus:

it.

 

Jack Herrington:

site. You know?

 

Paige Niedringhaus:

It ruins the layout. It always does.

 

Jack Herrington:

Yeah. And when in reality,

 

TJ VanToll:

So good.

 

Jack Herrington:

what really hurts customer interaction or user interaction is like the length of text. Like

 

Paige Niedringhaus:

Mm-hmm.

 

Jack Herrington:

if you got like three paragraphs of expository stuff about like, oh, and then it's got an okay cancel at the bottom, you're like, I'm never gonna read that. I don't know what that is, you know, kind of thing. Where it's like, just try and keep your try and keep everything to a sentence or less. Oh, we always a sentence. I mean, there's nothing less than a sentence, I guess. Oh, yeah, whatever. But you know, keep it brief.

 

TJ VanToll:

The other,

 

Paige Niedringhaus:

Okay.

 

TJ VanToll:

the other tip that comes to mind, this, this is more like UX design than really developer feedback. But when you are reviewing mockups, keep in mind that you probably have more knowledge of the system than your average user does.

 

Jack Herrington:

Hmm.

 

TJ VanToll:

So lots of times it's good to get another pair of eyes. Uh, my wife's here. I've dragged her into this a lot, so she, she

 

Jack Herrington:

Hahahaha

 

TJ VanToll:

kind of hates, but it can be just somebody else at your company, right? Even if they work in a different. department, division,

 

Paige Niedringhaus:

Mm-hmm.

 

TJ VanToll:

team, whatever. But there's a good chance that you understand this UI more than your average user coming into your system does. So it's always worth keeping that in mind too.

 

Jack Herrington:

Yeah, for sure. Yeah.

 

Paige Niedringhaus:

Yeah.

 

Jack Herrington:

Especially

 

Paige Niedringhaus:

And

 

Jack Herrington:

if

 

Paige Niedringhaus:

that's,

 

Jack Herrington:

you're in like a tangential field.

 

Paige Niedringhaus:

and that's something that in, especially in larger companies, your UX team probably does user interviews, which is great. They'll show them mockups. They'll have a little bit of interaction to them. They'll ask them, you know, how would I do X, Y, and Z, given that you've, you have this layout and that is so revealing about how people have no clue how your UX designer was thinking it would work or the develop. development team even was thinking it would work. And then the user is in a completely different part of the screen clicking around on stuff that is not interactive. So if you have the ability to do that sort of thing, you should absolutely take advantage of it because it'll show you a lot.

 

TJ VanToll:

And

 

Jack Herrington:

Exactly.

 

TJ VanToll:

it's a good sign if you're working at a company that has those processes and procedures, that's, that's a good thing. That's a good sign.

 

Paige Niedringhaus:

Yes. Alright, so one final question, Jack, since you've brought it up a couple of times, is if you're a developer and you don't work in Figma, how would you get started learning about how to use Figma?

 

Jack Herrington:

think it's free. So just create an account. It's got the usual sort of OAuth kind of connections to Google and blah, blah. So it's pretty easy to get started. I actually don't know. It's a pretty, it's a pretty brutal interface, actually. I can say like, you know, you can just kind of get you literally hit like new design is just literally

 

Paige Niedringhaus:

Mm-hmm.

 

Jack Herrington:

like, you know, white, white canvas, you know, kind of like,

 

Paige Niedringhaus:

Yeah.

 

Jack Herrington:

there are templates out there. This is actually gonna be something I'm gonna have to learn because I mean I honestly think that at a certain point It's gonna be so integrated where it's gonna be like a dialogue editor within VS code like there's gonna be a tab It's like you're literally like oh, I'm looking at this This widget now this component and I can click on a different view and it's gonna be figma and I can just might move Around and it's gonna change the underlying HTML or react native or whatever it is. So, you know but I gotta say like It's just kind of weird. Like, I don't know, like, it just it doesn't feel very good. Like, it's not like it's not like a dialogue designer from I don't know, VS code, every visual basic days, right, which is kind of like the last time I remembered like dragging and dropping, like that sort of stuff.

 

TJ VanToll:

It's a hard tool to use as a developer

 

Jack Herrington:

Yeah.

 

TJ VanToll:

unless you're already using it at your company because what'll happen is you'll sign up for that Figma account and then you'll be looking at a blank canvas and

 

Jack Herrington:

Yeah.

 

TJ VanToll:

you'll be

 

Paige Niedringhaus:

Yeah.

 

TJ VanToll:

like, okay, now what do I do? Whereas if your company's already using it, you'll log in and you'll see a design and then that makes it far more real and

 

Paige Niedringhaus:

Mm-hmm.

 

TJ VanToll:

you could start poking with it. You can see how the commenting system works, how you can try to get code or information out of it.

 

Paige Niedringhaus:

Yeah.

 

TJ VanToll:

I don't think I'd recommend people just hop into it just because you're just gonna be staring at a screen and not know really what to do. You can poke around just for sheer interest. I

 

Paige Niedringhaus:

Mm-hmm.

 

TJ VanToll:

think it's probably worth taking 30 minutes to just play around, but I don't think it's gonna be real for you unless it actually gets implemented into whatever design flow you're using at your work.

 

Jack Herrington:

There are

 

Paige Niedringhaus:

And

 

Jack Herrington:

templates

 

Paige Niedringhaus:

that's.

 

Jack Herrington:

though. I mean, for all the basic design systems, like there are

 

Paige Niedringhaus:

Yeah.

 

Jack Herrington:

templates, and you can start with those.

 

Paige Niedringhaus:

And that's kind of what I was hoping for was, you know, how so many different frameworks now and the web give us kind of like a starter project, that there'd be some starter template that you can just go in and say, here's a button or here's an input or here's a dropdown, you know, fiddle

 

Jack Herrington:

Right.

 

Paige Niedringhaus:

around with it, export it, see what happens when you change it, how do you change it, that kind of thing. But it sounds like it's just here's a blank screen, go wild.

 

Jack Herrington:

Yeah!

 

TJ VanToll:

I do know, like when I was still at Progress with Kendo UI, and one thing they still have is they have design kits for Figma because

 

Jack Herrington:

Mm-hmm.

 

TJ VanToll:

they kind of recognize Figma's popular enough now that if you're going to use our components, your designers are also going to want to design with our components. So I know frameworks, if Kendo UI has it, I imagine a bunch of the other popular ones have that now. So that also might be a reasonable...

 

Jack Herrington:

Oh yeah,

 

TJ VanToll:

starting

 

Jack Herrington:

yeah.

 

TJ VanToll:

point, like I material probably, like if

 

Jack Herrington:

Oh,

 

TJ VanToll:

I Google

 

Jack Herrington:

material

 

TJ VanToll:

material,

 

Jack Herrington:

definitely has their own. Yeah, it has their own kit.

 

TJ VanToll:

Figma, okay.

 

Jack Herrington:

Yeah, lots of them have their own. I think any reasonable frameworks that have its own kit. So yeah, cool.

 

TJ VanToll:

Okay. Oh wow, material.

 

Jack Herrington:

I guess I would expect I don't know, as a developer, I kind of always expect it like, when I when you say kit to me, it's gonna be a right hand panel or left hand panel full of like button, I just grabbed the

 

Paige Niedringhaus:

Mm-hmm.

 

Jack Herrington:

button, put on the page. you know, that sort of thing. And it's like, no, that doesn't. Not that it's like you have your design kit is a basically a big old page. And you kind of like copy and paste, I think, just like, okay, I'm going to go scroll down to where the button section is located, grab a button that I like, copy that, go back up to where I was before paste it. It's just like, what is that? Like, but I guess, you know, people like it. So designers like it. So there you go. Just seems cluttered to me.

 

TJ VanToll:

But material UI actually charges for their Figma kit, which is very interesting. They must see it as a way to

 

Jack Herrington:

Yeah, profit

 

TJ VanToll:

generate

 

Jack Herrington:

center.

 

TJ VanToll:

revenue, which makes sense.

 

Jack Herrington:

Yeah. I mean, if you're if you're a company that uses material UI daily, I mean, you should definitely buy the pro. So you get the grid. But you know, baby, see, it's a good. I mean, they literally live off that stuff. Like they

 

TJ VanToll:

Yeah.

 

Jack Herrington:

that's their jet. That's the way they make money. So you want them to get around? You know, you

 

Paige Niedringhaus:

Hehehe

 

Jack Herrington:

should probably pay that

 

TJ VanToll:

It's a pretty good model. Keep

 

Jack Herrington:

Yeah.

 

TJ VanToll:

your like JavaScript components free, but then charge for the stuff that you need for like

 

Jack Herrington:

a really

 

TJ VanToll:

corporate

 

Jack Herrington:

good day picker,

 

TJ VanToll:

stuff.

 

Jack Herrington:

a really

 

TJ VanToll:

Yeah.

 

Jack Herrington:

good grid, and they've got like

 

Paige Niedringhaus:

Mm-hmm.

 

Jack Herrington:

you can get a basic grid. But if you want like the in place, I don't know what the features are, but they like the massive like filtering, sorting, blah, expert level stuff. And then you

 

Paige Niedringhaus:

Yeah.

 

Jack Herrington:

get the pro, you know, that's cool. That's fine. Should we do picks?

 

TJ VanToll:

Yeah, this is fun.

 

Paige Niedringhaus:

Yeah,

 

Jack Herrington:

Alright, yeah.

 

Paige Niedringhaus:

let's do it.

 

Jack Herrington:

Okay, alright. Yeah, sounds good. So TJ, why don't you start on with a picks this week?

 

TJ VanToll:

Sure, so I'm going to pick Breath of the Wild, which

 

Jack Herrington:

Ooh!

 

TJ VanToll:

is the first Zelda game for the Switch. So the new one is Tears of the Kingdom, which came out fairly recently.

 

Jack Herrington:

Yeah. Why don't you pick that one?

 

TJ VanToll:

So the new one is a sequel, right? So it encouraged me to finally get around to playing the original one, which is now like five or six years old or whatever that was on my like, oh, I should play this list for forever. So I finally got around to doing it. It's a good game. And I held off because the sort of big open world games are

 

Jack Herrington:

Yeah...

 

TJ VanToll:

typically not my thing because

 

Jack Herrington:

Right...

 

Paige Niedringhaus:

Mm-hmm.

 

TJ VanToll:

it's like, I don't have time anymore to play a game where I'm like, get immersed in a world and go explore. Uh, but even given that, like my prejudice against those sort of games, I still had fun, it was,

 

Jack Herrington:

Yeah.

 

TJ VanToll:

it's, uh, it's open world, but you can kind of just go, like go straight to the dot where they, they want you to go and do that

 

Paige Niedringhaus:

Mm-hmm.

 

TJ VanToll:

too. So, uh, I had fun playing through it and probably gonna play the, the sequel now next.

 

Jack Herrington:

It's like one of the best

 

Paige Niedringhaus:

Nice.

 

Jack Herrington:

apparently video games ever, you know, so

 

Paige Niedringhaus:

Yeah, I've

 

Jack Herrington:

yeah.

 

TJ VanToll:

Yeah,

 

Paige Niedringhaus:

heard so many good things

 

TJ VanToll:

can't

 

Paige Niedringhaus:

about

 

TJ VanToll:

go wrong.

 

Paige Niedringhaus:

it.

 

Jack Herrington:

All right, Paige, what you got?

 

Paige Niedringhaus:

My pick this week is going to be for the final season of Ted Lasso, which is an Apple

 

Jack Herrington:

Oh

 

Paige Niedringhaus:

TV series. It is about a football coach, an American football coach who goes to coach for a team in England. And they are a soccer team. So, you know, the hilarity ensues because he knows nothing about the game of soccer. But The thing that I think is so great about it is even if you don't care at all about sports and sports dramas, you'll fall in love with this show because of the characters and how they relate to each

 

Jack Herrington:

Yeah,

 

Paige Niedringhaus:

other

 

Jack Herrington:

yeah,

 

Paige Niedringhaus:

and the world

 

Jack Herrington:

yeah.

 

Paige Niedringhaus:

around them. The third season, which is the final season, just wraps it all up so well. I don't think I have cried as much as I did in the last couple of episodes.

 

Jack Herrington:

Oh my god. Yes.

 

Paige Niedringhaus:

Happy tears. But

 

Jack Herrington:

Mm-hmm.

 

Paige Niedringhaus:

Yeah, you should definitely check it out. It's worth subscribing for a month to get Apple TV and just binge through it because it's an amazing series and I would highly recommend it to anybody to watch. It's so good. So good.

 

Jack Herrington:

up. Apple TV is on a roll. They really are.

 

Paige Niedringhaus:

Yeah.

 

Jack Herrington:

I mean, they got silo now silos really good. Fascinating world. Interesting that it's different than the books. Like I read all the books after like the episode one came out and totally different. Yeah, just such good stuff coming on there. So my pick for the week is gonna be monkey type. It's a typing tutor tool. that will kind of keep you stretched out when it comes to your exercise when it comes to your typing. So my daughter blows the doors off of my typing. It's crazy. She has like 120 words per minute or whatever, at like 100%. Like, geez, I don't even know. But it's good because it'll get you understand your keyboard a little better and all that good stuff. So definitely fun.

 

Paige Niedringhaus:

Nice.

 

Jack Herrington:

I'm trying to like every day I do a little monkey type.

 

Paige Niedringhaus:

Hehehe

 

Jack Herrington:

Cool. Well, this has been really fun, y'all. We should do this again.

 

Paige Niedringhaus:

Definitely.

 

TJ VanToll:

Yeah, this is fun. Sorry. I got distracted by monkey type. I'm,

 

Jack Herrington:

Yeah,

 

TJ VanToll:

I'm already all in.

 

Jack Herrington:

I know,

 

Paige Niedringhaus:

already

 

Jack Herrington:

dude,

 

Paige Niedringhaus:

checking it

 

Jack Herrington:

it

 

Paige Niedringhaus:

out.

 

Jack Herrington:

is. You can change the theme. It can track your progress. I have not been I'm not improved, by the way. I sort of stabilized, but I stabilized at a level that I like. So I'm okay with that. Just keep me there. And I'm good.

 

TJ VanToll:

They

 

Jack Herrington:

Yeah.

 

TJ VanToll:

have a store? This is a, this

 

Jack Herrington:

Oh,

 

TJ VanToll:

is next.

 

Jack Herrington:

oh, yeah. Yeah, you can get

 

Paige Niedringhaus:

Get

 

Jack Herrington:

like

 

Paige Niedringhaus:

some

 

Jack Herrington:

monkey

 

Paige Niedringhaus:

swag.

 

Jack Herrington:

type swag. Yeah. Do you guys do you guys

 

TJ VanToll:

Monkey

 

Jack Herrington:

home?

 

TJ VanToll:

merch.

 

Jack Herrington:

Like you do the whole thing we home on like a SDF JKL, semi

 

Paige Niedringhaus:

try

 

Jack Herrington:

colon

 

TJ VanToll:

I

 

Paige Niedringhaus:

to.

 

TJ VanToll:

do.

 

Jack Herrington:

and then you start typing.

 

Paige Niedringhaus:

Yeah, it works

 

Jack Herrington:

Yeah.

 

Paige Niedringhaus:

pretty well

 

TJ VanToll:

Yeah.

 

Paige Niedringhaus:

for me.

 

TJ VanToll:

Do you not?

 

Jack Herrington:

Okay.

 

TJ VanToll:

Is that?

 

Jack Herrington:

I don't know. I've been typing since I was like 12. So no, not really. I mean, it kind of like, you know, I, I start off homed, because like, I had a type, I had a literal typing teacher when I was in school, who was like,

 

TJ VanToll:

Yeah.

 

Jack Herrington:

crack the knuckles sort

 

Paige Niedringhaus:

Mm-hmm.

 

Jack Herrington:

of thing, like you start on home. And then

 

Paige Niedringhaus:

Yep.

 

Jack Herrington:

I immediately go into like hunting pack. Yeah.

 

TJ VanToll:

Now I had the same typing, I had a typing teacher in middle school that like same sort of cracked the whip, but for me it stuck. I was traumatized into doing it. So.

 

Paige Niedringhaus:

Mm-hmm.

 

Jack Herrington:

Yeah.

 

Paige Niedringhaus:

We had one where they put a little like almost like a thing over your keyboard so that you couldn't see your hands while you were doing typing. Yeah,

 

Jack Herrington:

Oh, that's

 

TJ VanToll:

Oh.

 

Paige Niedringhaus:

so

 

Jack Herrington:

evil.

 

Paige Niedringhaus:

that

 

Jack Herrington:

That's

 

Paige Niedringhaus:

really got

 

Jack Herrington:

evil.

 

Paige Niedringhaus:

you to learn where the keys were.

 

Jack Herrington:

Oh my god.

 

Paige Niedringhaus:

It worked pretty well.

 

Jack Herrington:

I thought geez, okay. Wow. All right. Man. I don't want to go to your school. Yeah, I'm so old that like it was select tricks when I was learning and now they had the old typing the old typewriters and they would have this kind of whirring sound. So like

 

Paige Niedringhaus:

Mm-hmm.

 

Jack Herrington:

you the everybody would light them with those things up. And man, it was like, and then bang,

 

TJ VanToll:

Yeah.

 

Jack Herrington:

like machine gun fire. I if my head, if we had the Apple watches back then, I swear to God, it was it was an hour of 90 decibels. Like it was I don't know how we got

 

TJ VanToll:

Yeah,

 

Jack Herrington:

through that. Yeah.

 

TJ VanToll:

no backspace key.

 

Jack Herrington:

Oh,

 

Paige Niedringhaus:

No.

 

Jack Herrington:

Lord, no. Oh, it was a whiteout. Yeah. You got the whiteout. Mm hmm. It was terrible. Oh, my God. OK, well, that's been fun. I expect to see your scores in our in our DM later.

 

TJ VanToll:

All right. Yeah, I've got it open. I'm ready to go.

 

Jack Herrington:

OK.

 

TJ VanToll:

Although

 

Jack Herrington:

OK,

 

TJ VanToll:

it

 

Jack Herrington:

here

 

TJ VanToll:

said

 

Jack Herrington:

we

 

TJ VanToll:

that

 

Jack Herrington:

go.

 

TJ VanToll:

it,

 

Jack Herrington:

Here

 

TJ VanToll:

I

 

Jack Herrington:

we go.

 

TJ VanToll:

got it,

 

Jack Herrington:

I'm

 

TJ VanToll:

it

 

Jack Herrington:

so

 

TJ VanToll:

popped

 

Jack Herrington:

excited.

 

TJ VanToll:

up a thing that said AF, AFK detected. So I've got a,

 

Paige Niedringhaus:

Nice.

 

TJ VanToll:

I don't know if

 

Jack Herrington:

Oh,

 

TJ VanToll:

that ruined

 

Jack Herrington:

yeah,

 

TJ VanToll:

me for

 

Jack Herrington:

yeah.

 

TJ VanToll:

the

 

Jack Herrington:

Well,

 

TJ VanToll:

day

 

Jack Herrington:

that's because

 

TJ VanToll:

or.

 

Jack Herrington:

you interacted with it, and then you were supposed to start typing, and you didn't type, so, yeah.

 

TJ VanToll:

I'll go to a private tab and try again.

 

Jack Herrington:

Okay, okay. See you next week guys.

 

TJ VanToll:

Yeah,

 

Paige Niedringhaus:

All

 

TJ VanToll:

until

 

Paige Niedringhaus:

right,

 

TJ VanToll:

next

 

Paige Niedringhaus:

see

 

TJ VanToll:

week.

 

Paige Niedringhaus:

you then.

 

Jack Herrington:

All right. See you then. Bye.

 

Paige Niedringhaus:

Bye.