Wrapping Up

[00:00:00]
>> Is there a way to create a version of styling typography in figma?
>> For example?
>> For example, let's say our in house UI component libraries on the latest version with the new styling and typography, but our old products use the old version of the library. For some reason, we're not able to bump the version I don't know.

[00:00:22]
Seems like a very specific question.
>> Yeah, one of the things that you can't do that just may or may not answer the question I wish you could do in figma is like cool we have a team library or whatever. But then also like, I wish I could override it for this design, like sometimes it's like, cool, the design system has moved on, but everyone's got that legacy app that can't get updated.

[00:00:42]
It's like cool new design systems in react. We got a backbone app over there. Did what I mean I wish you could like override versions of it. But it's like the overall design system has moved on, and they're using the library other than having two libraries and like having the like, effectively, we had to do this, which is like we had the old version and the new version.

[00:01:03]
And different themes that we had to use in both places. For things we couldn't update I don't know if that answers the question. So another question is it recommend to start components from scratch or use some predefined material design components and just you use it depends right. I think that generally speaking, if it's like, hey, we're a brand new project, yeah.

[00:01:28]
Go grab material, UI, chakra, UI, whatever, right? And start with that versus, I'm now gonna build basic functionality and get a proof of concept in place and also develop a design system at the same time. Now at Temporal, for instance, we were working on for a brand identity as well, right and so like the UI needs to match the overall brand aesthetic.

[00:01:52]
We were also using smell instead of react where there were less pre existing libraries to begin with right. We did use tailwind that got us like most of the way there, right that had all the different kinds of like Tokens that one might need. And our design language is also built on top of tail and so do we grab a full set of components no.

[00:02:10]
But also that was part about using hipster frameworks is that there wasn't as much out there and think it was a lot of times easier for us to just style the button with tailwind, which was like again, super simple. You just string a bunch of classes are mostly ready to go.

[00:02:24]
You can theme it that said if like you don't have that whole idea of like we have a brand identity yet we're just trying to get something work again, grab material. And like there are if you go into the community section in figma there is like a material UI.

[00:02:38]
A set of components that you can just bring in and use, right? Absolutely we're working on 2.0 of our app. So like the original one was, I wasn't even to say that it was a component library was generous. It's just a thing, right? But like, this was the kind of like refresh and stuff along those lines for us.

[00:02:55]
But yeah, I think there's nothing wrong with pulling in a component library all right. Yeah, there was a question about recommended plugins. I left a link to a bunch. This is my favorite named one, but you can just try like content released by Microsoft. I have a few installed,there is iconified, which is just like every icon library, and you can just drag them in, so you don't have to like download them all.

[00:03:19]
With that said, like, if you're gonna do that component trick, just downloading the like Git repo of like all the SVGs, dragging them into figma. And making the component is way easier than adding zahlen one by one. But if you're just kind of like proof of concept and something and you need a house or whatever, just like go grab it.

[00:03:37]
Content real is real cool. Let's take a look at one real quick. It basically gives you the ability to like, let's see, did I have a cool picture here? Like preload, like dummy data, like fake avatars and stuff along those lines in the UI and kind of just have some of that kind of in place.

[00:03:56]
So you'd not like dragging in a whole bunch of pictures of users for like a comment section or something along those lines helps you like load in some dummy data. But yeah I put in a bunch of kind of little ones in here like as well that you can kind of try try out and use to unsplashed just gives you stock photography stuff like that.

[00:04:17]
But generally speaking I think I said either during the break or maybe we said it in part of the recording when I feel like I need something like accessibility to color contrasting I will go to the community section. I will hit plugins I will search I will then sort by installs.

[00:04:31]
[LAUGH] and I will usually grab whatever the most popular one is first and then if it doesn't appeal to me then I'll grab the next one as well. But you can see like look it's on slash and I kind of phi and content real and a few other ones as well and that is kind of like our.

[00:04:46]
I like high level kind of view of using figma to both implement designs kind of work with our designers to like organize things in a way that makes sense for us. But then also for ourselves to begin to figure stuff out because like I said in the very beginning.

[00:05:00]
This workshop, there's been plenty of times where I've tried to build a feature either when I didn't in the early days in my current company where we didn't have a designer yet, which is like, okay, I know that we need to build these things. And a lot of times it was about getting the data abstractions, right?

[00:05:14]
But it's kinda out take lucky guesses, right? There's a term of art something around and find out. But like to figure out how to work versus like actually being able to conceptualize it I think it works really well kind of put it in front of customers also like being able to work with the tool.

[00:05:33]
And understand like how how to play or how that helps you. Figuring out the alignment, what CSS you might need also bring order. So if you just expect the designer on your team to know how to organize everything and how to lay everything out. So that it works for engineers, that's kind of just putting the on us on one-half of the equation.

[00:05:53]
Engineering and design should be a partnership. So this gives you the ability to kind of be an equal player in there as well and collaborate or build some designs yourself right both are possible. But I think like we think a lot about the term like full stack developer right which is there are jokes to be made about that.

[00:06:12]
Whereas like cool back end and front end, but like, that's not all of a product, right? And do you need to be an expert? Maybe not right. And but like, should you have familiarity with the old the, kind of like entire pipeline of building products for your customers?

[00:06:27]
My argument is yes,right. And so this helps you get to kind of round yourself out whether it's kind of just one more tool. Do you have at your disposal or thing that you're using to kinda decide what you're building I think both become a lot more possible and I think that figma is incredibly powerful tool.

[00:06:45]
And something that like just be being more comfortable to tool has been a great advantage for me as I kind of build and implement do my just day to day job, above and beyond just side products as well. Awesome, thank you so much. [APPLAUSE]