Introduction

[00:00:00]
>> My name is Steve and I am the front end architect at Temporal. We are a company that does workflows use for distributed systems to make sure that everything runs as planned. Basically taking all of the hard parts out of distributed systems, asynchronous processes and all that kind of stuff.

[00:00:17]
We're gonna talk a little bit about Figma today. This is Figma for developers. What that basically means is kind of from the perspective of a developer, right? A lot of times if you're trying to learn Figma, and you're an engineer, by default, there's a lot of, it's designers talking to designers, right?

[00:00:36]
This is a safe space where we can make jokes about prototypal inheritance in JavaScript and related to Figma. And it's gonna be great. So what are we gonna do in this course? We're gonna learn a lot about creating prototypes and user interfaces in Figma. There's a lot of reasons why you might do this, right?

[00:00:54]
There is the fact that matter is side projects and that you might wanna build. It's a lot easier if you have some of the principles of design. Sometimes if you work at a startup like I did 10 months ago before we had a designer on the team. You need to do a certain amount of the design yourself because nobody else is going to do it for you.

[00:01:14]
And wouldn't it be nice if you knew what you're doing, right? And then the kind of final piece that I kind of wanna kind of poke on a little bit here is knowing how to use the tools. Not only helps them make your life easier as you're implementing the designs.

[00:01:30]
If you have an amazing designer on your team, they're going to hand you a figment. One point they're gonna do everything they can for that developer handoff right. But then it'd be nice if you were on the receiving end ready and familiar with the tool as well. And the other thing is that we're gonna see is knowing how to use Figma not only for yourself to build your eyes.

[00:01:49]
But also if you're working with a designer who's using Figma helps you become an equal partner there, right? Where it's, hey, actually I know what I need to do in this codebase, whether it's reactive, svelte, or view, or angular, or what have you. Here are some ways that we can work together and maybe, you can even show your designer a few things.

[00:02:07]
We're going to touch a lot of design concepts, right? And there's definitely a in that kind of relationship with the designer piece, this idea of a design system, right? Maybe you're using something, using tailwind or chakra or Mattel UI. Or maybe at your company you're kinda building your own.

[00:02:23]
A lot of those are kind of a joint venture, between design and engineering. We're kind of being on the same page, both the how they're designed in Figma. And then also how you go about implementing those designs is incredibly helpful and powerful. Basically, makes everyone's life easier. We're gonna touch a lot of design concepts, but for a full on just design principles.

[00:02:41]
There are two other front end masters courses that you should check out. Because I will say this right now, yes, I've been a front end engineer for longer than I care to admit. I have a certain amount of experience working with some really great designers. That said having worked with a lot of really great designers I understand there's a difference between my specialty as a engineering architect versus a designer as well.

[00:03:01]
So just kinda keeping that in mind this is kind of for developers, by developers as well, right. So we talked a little bit about who is this for? I would also, definitely developers. And then also designers who work with developers, I think getting that other perspective of how to put together a design system.

[00:03:21]
How to structure a UI prototype, how to have reusable components that are easy to kind of work your way around for the engineer. I think as a designer that's super helpful as well. All right, so what do you need? Basically all you need is a Figma account and ideally a web browser.

[00:03:43]
Whether it's one you downloaded or the one that came with your computer either one should be fine. There's some kind of Internet Explorer joke hiding in there somewhere that I can't find. But the major point there is a Figma desktop application it's an electron app it's wrapping the web app it's mostly the same.

[00:04:00]
Do you need it? You do not need it. Do you want it? You are free to download it. I will be using it today, as well. Sometimes it's nice just to be able to Command Tab in between two different apps. One being your browser and the other one being the Figma desktop application.

[00:04:14]
But there's nothing that we're gonna do today that you need the desktop app for that you could not use the web application for as well. There is a template file you can kinda take a look at and I'll show it to you right here. Let's bring it over.

[00:04:28]
You can go basically go ahead to this link and hit duplicate. And then you will get your own copy that you can work in. Has all the course materials, everything we go through today, and some stuff that I'm not gonna get through today as well. Just kind of extra material there as well you can kinda play around and do the exercises there.

[00:04:45]
>> How easy is it to go from Photoshop to something like Figma?
>> That depends right. Figma will import sketch and a lot of things like that all depends if it is a flat JPEG file. It's doable, right, one of the things we'll look at today is I took the screenshot of the front end masters course page.

[00:05:04]
Which when I had this great idea I did not realize that I was on the page. But I also wasn't gonna take the time to remove myself from the page, because I'm an egomaniac. So, I took this screenshot and re implemented it by hand. It took me two or three hours, it wasn't fun.

[00:05:24]
But it didn't take it wasn't a Herculean effort either, right? It was something I did kind of while I was doing other stuff during the course of the day as well. Mark any other question?
>> My designer is struggling to shift she won't use storybook but loves Photoshop.

[00:05:39]
So do you can you make a case for Figma?
>> Yeah, I mean, so one of the things we're gonna see as we start to use Figma is that by default. And we'll kinda go into this more in depth as we work through the material. We'll see that there's a lot of stuff that kind of, it's kind of meant for building web interfaces, right?

[00:05:59]
So for stuff about, if you really if you grab anything and you hold down Option or Alt. If you can see the distances between anything you'd also go into this inspect tab and start to see at least some inspiration for the CSS that you might write. Now as we go through we look at this we'll see that I use the word inspiration very deliberatively right.

[00:06:21]
Should you just will generate all the CSS that you need perfect that you can maintain forever? It will not, right? If that was the case, we would all be unemployed. So, but it will at least kind of give you some here I'll set up the general Flexbox pieces.

[00:06:37]
You don't have to go that same CSS tricks, blog posts that I've been going to for almost a decade now. To remember the difference between justify content and align items. All right, so you get some of that kind of starter pieces as well. So it's definitely, I think there's a few pieces right the idea that it is live and collaborative.

[00:06:56]
Which means, as you can kinda see as your, as your designers making changes. You can see it as well versus, do I have the most recent version of the Photoshop file and stuff along those lines. So we're gonna cover you know how to use Figma. That seems important.

[00:07:11]
We're going to kind of think about exactly how what the implications are for us actually having implement some of these designs as we go along. And we're going to talk about the foundation of building a design system one does not build a design system in a day. One does not build a design system while also learning a tool for building a design system all encompassing.

[00:07:29]
But we will kind of touch that topic and kind of use it as an exemplar as we learn our way around the tool.