Introduction

[00:00:00]
>> Hi, my name is Steve and I am the head of Front Engineering at Temporal. But we're gonna talk about design today. Well, we're gonna talk about the connection between design and engineering. The origin story of me getting started with Figma was more of a startup tale, which is as the first front end engineer at the startup I work at now that has a full design team and a whole front end engineering team.

[00:00:24]
I kind of inherited some person of the company is like ideas in Figma about what the UI should look like. Right, and then having to iterate on that, I had to learn a lot about how Figma works. And what I figured out was one, actually it's pretty cool and it's an awesome tool and you should learn how to use it.

[00:00:42]
But then two, as now we have a full design team with a head of design and three product designers and all those things, I've got an engineering team of six people. But what's super fascinating is that over time we begin to learn that knowing how the design tools work and also what that means for code.

[00:00:59]
Allows for more collaboration between the design teams and the engineering teams, right? There are ways that the engineering teams can now, or my engineering team can help inform design team like, if we structure stuff like this, it actually makes our job of implementing it way easier. The other interesting thing is as we'll see in this course is that there are a bunch of techniques in figma to, let's say we have a whole color system or a spacing and kind of those design tokens as you hear in a lot of design systems speak, right?

[00:01:33]
There are ways to kind of generate at least not code, you're never gonna generate a React component that you can just copy and paste and move forward with that, yet at least. But stuff like generating all of the CSS variables for the various colors found throughout your design system.

[00:01:50]
There are tools built into figma that will make your life a lot easier. The other thing is that a lot of you know designers will structure things in a way that makes sense for them. And helps them work cleanly but like are ways that once you understand both, how it works on the whatever whether it's vanilla JavaScript Reacts Svelte, what have you side.

[00:02:12]
And then also hey, but if we also structured it in this way, the'll actually translate better when we go to implement in code, and for a lot of these things will actually make the designers in your lives easier as well. Designs in your lives will make their lives easier.

[00:02:31]
And so those things are important as well. And there's a lot of new functionality that's come out in the last few years in figma wher, there's a lot of concepts. I will use some words of some various new figma features, variables. All right there are components and stuff along those lines, things that kind of make sense to us as developers because they map to very engineering related concepts.

[00:03:01]
And sometimes you're gonna work on a side project. And when you work on that side project, you might be helpful to at least know how to use design tools. So you don't end up like me where I started to start designing with Git and Nit and create React app or Svelte kit or what have you.

[00:03:14]
And find myself tweaking CSS just general I think the basic flow. A lot of the reason why these tools exist is because it is easier to kind of think about the UI in a design tool and do some of the prototyping. Towards the end we'll take a very brief look at some of the prototyping tools in Figma.

[00:03:32]
Because one of the biggest things that will save you time is if we can take working prototypes to customers and be able to figure out like, do you even want this thing? Before we go ahead and build it, right? And so all of these things both, I think, make it easier to learn how to use figma from a developer perspective, right?

[00:03:53]
Because yeah, we're all developers in this room, I can make jokes about prototypal inheritance and you'll get them. And they kind of make a lot of these concepts a lot easier cuz in my experience there's not a lot of content out there about using Figma targeted at people who also might be on the implementing side of this as well.

[00:04:11]
One quick caveat to point out is the large majority of everything we're gonna do until close to the very end of this workshop is all in the free Tierra Figma. There are some things towards the very end, particularly like variable modes for doing stuff like dark mode, or various responsive text that does involve a paid account.

[00:04:32]
Stuff like publishing a shared library does involve a paid account, there is no expectation that you have a paid Figma account today, take this course. I will take you and show you some of these things in my paid Figma account because I have it both personally and through Temporal.

[00:04:48]
But we'll go ahead and see some of those features cuz you might also work in a place eventually that has it or have it at your work. And I wanna at least kinda expose you to some of those things because, again, for that design team engineering like integration.

[00:05:01]
I think a lot of that is where a lot of the real benefit is here. So if you are a developer, obviously, like this course is targeted at you. But honestly, if you're also a designer, like understanding the same way the value prop for developers is understanding the design tools figure out how that integration works.

[00:05:19]
The inverse is all also true So the only thing I will say is that, you know, I am an engineer. I'm not a designer, I work with designers Sometimes I pretend to be a designer. So this is definitely from the how do we kind of structure and use all these tools and, you know, how does that inform implementation?

[00:05:39]
I will get a little hand wavy when it comes to stuff like color theory. And you have a typography here because that is not my skill set. But there's a whole section on front end masters that you can definitely watch courses on that and see how all that all those pieces work.

[00:05:53]
So this is kind of like a design tool from the perspective of a front end engineer.