0:00:00
Hey, it’s Kevin Geary, founder of Automatic CSS and Frames. I’m very excited today because I get to give you a sneak peek of two new products that we are launching in July of 2023. What these products do is they effectively bring Automatic CSS and Frames into Figma. Now, if you don’t use Figma as part of your workflow right now, I still want you to watch this sneak peek because we’re gonna talk a little bit at the end about why Figma is so important for a professional web design workflow and how it can actually make you more money and increase your margins and make your life easier.
0:00:37
If you already do use Figma, you already know about all of these benefits of using Figma and this is going to be like a dream come true for you. So we don’t need to talk anymore. What we need to do is actually look at the tool and the workflow. Now I do want to say this, it is a sneak peek. That’s what this is called. That’s what I’m going to give you. We’re not going to deep dive this. We’re going to, we’re not going to overcomplicate things. We’re not going to look at every single feature or every piece of functionality.
0:01:05
I’m going to give you a taste. And then what I’m going to do is ask you to get on a waiting list. I’m going to give you more sneak peeks once you’re on the waiting list. And then you will also get details on the special limited time offer and the launch date in July of 2023. But let’s go ahead and just start working. As you see over here, I have a bunch of sections for what I can add onto my canvas. And we tried to make this as easy as possible for you. So I’m going to open headers and I am just going to quickly add a header to my canvas. Notice that I’m not even putting them in a frame, I’m just throwing them onto the canvas more or less. The next thing I’m gonna do is I’m gonna go to heroes and I’m gonna drop in a hero.
0:01:49
I’m going to go to, let’s do some features next. So I’m gonna do features, a whole feature section right here. That would be good. The next thing I’m gonna do maybe is, maybe some testimonials, maybe some social proof down here. And then why don’t we throw in a footer? Of course, every website needs a footer, right? So I’m going to open the footers and I’m going to throw in a footer here. And I think I’ve got enough for us to get started.
0:02:15
So what I’m actually going to do is just select all of these elements. Shift A turns them into an auto layout and I can actually take the spacing away and now I have what is effectively a home page wireframe. Now, here’s the really, really fun part. You know, sometimes you put a hero on a page, sometimes you put a footer on a page, social proof on a page, and you kind of think to yourself, all right, you know, I kind of like that one, but maybe I want to see some alternatives. So let’s take a look at the footers, for example, and I can zoom in here. What you’re going to see on the left is we have instances and it knows that this is a footer component and it also knows what your other optional footers are. And so I can actually quickly switch from footer to footer to footer.
0:03:03
I don’t have to go back over here to the library and look through and drag another one in and delete the one that was already there. I can actually just flip through and find a footer that is going to work really, really well. So let’s just say I decide on that one. Now I can come up to the heroes. I can do the exact same thing. I can start looking through every hero section in the library, seamlessly switching from one to the next until I find the exact one that I’m looking for. Now, here is the next really cool thing that I want to show you. We’re going to take this, which we’re going to call home page, and we’re going to duplicate it. Now we want to create a mobile version of this, because when we pass this off to whoever’s going to be doing the development, we want to make sure that they understand what needs to happen on mobile devices. So I’m going to grab every single element on here. First, I’m going to say that this is our mobile version, and I’m going to go ahead and click on the header here and I’m going to drop this down to the mobile version of this frame and if I do this to every frame on this page what you’re going to see is that with zero effort I now have a mobile version. Now can I do I have to leave these frames like this? Am I locked in to what you see here? No that is the beauty. What you can do now is you can start shuffling things around.
0:04:29
You can start applying the UI design elements that you want to these frames. Everything is customizable from this point forward. You don’t even have to start with a frame for a specific section. If you want to do completely from scratch, you can go and work completely from scratch. So you have frames as an option to you, or you can do any section you want completely from scratch. Then you have very rapid transition to mobile devices, the ability to swap between different frames on the fly. And this is all powered by automatic CSS within Figma. And I wanna take a look at how that works right now.
0:05:11
So there’s a plugin for Figma. It is a free plugin called Tokens Studio. And I’m gonna go ahead and open Tokens Studio so you can take a quick look at it. And what you’re gonna see here is that all of Automatic CSS is now programmed into Figma via Tokens. This works just like, not just like, very similarly, the underlying philosophy, very similar to how the Automatic CSS dashboard works when you are developing websites where you can go and for example change your action color and it applies everywhere and all of the shades all of the transparencies everything updates on the fly you can go and adjust your typography scale ratio and all of your heading levels adjust on the fly all of your text sizes adjust on the fly you can override individual ones I want to give you a little bit of a taste and a sneak peek of that. So what I’m actually going to do here is go over to layers and I’m going to jump over to some of the style guide pages that we have. And I want to focus on this typography page right here. There’s actually a headings page and then a normal text and typography page. Let’s go ahead and focus on the typography for right now. So what I’m going to do is I’m going to go search for heading scale and as we see we’re going to find the heading scale option right here in Token Studio.
0:06:34
And I want you to watch my headings right here as I make a change to the scale. I’m going to hold command and click on the little token label and I can change my scale to any value that I want. So let’s say I want not a lot of variance between all of my heading sizes. I’m gonna drop this down to 1.1, which basically means every heading size is gonna be 10% larger than the heading size underneath it. I’m gonna go ahead and hit save, and you’re gonna see this update in real time right here. And I can apply this change to a specific page.
0:07:07
I can apply this change to the entire document. I have full control here of what I am changing and adjusting. I’m gonna go ahead and hit command and click again. I can make this 1.618. I think that’s golden ratio, something around there. And you’re going to see that update on the style guide page in real time. And again, this would be happening too. If I was over here on my actual wireframe page or UI design page that I happen to be working on. Actually, while we’re here, let’s go ahead and do spacing. Just so I’m here. So let’s, let’s look at spacing scale.
0:07:40
Works exactly like you saw with the typography scale. You’re gonna notice we have a desktop spacing scale and we have a mobile spacing scale, just like we have in the automatic CSS dashboard. So I’m gonna go ahead and I’m gonna command click on this and I’m gonna turn this into a two instead of a 1.5 and I’m gonna hit save. And you’re gonna see all of our spacing values update accordingly. Now I’m going to command click on that again. I’m going to go to 1.1 just so you can see what a tiny variance in between sizes gets us. Again it works just like automatic CSS. It is like having automatic CSS inside of Figma. Let me scroll down and I’m going to hop over to colors now. Let’s take a look at our colors style guide.
0:08:26
So you see we have all of our standard colors, action, primary, secondary. All of these are already mapped out for you. The light transparencies, the regular transparencies, the dark transparencies. So what I want to do is I want to change the website’s action color. So I’m going to go ahead and open Token Studio for Figma. And I’m going to make this change. I want you to see everything update on the fly. So I’m going to type in action for my action color and I’m going to come down here to where the HSL values are. Okay I’m going to command click on the H and I’m going to change my hue to another value. Let’s say 248 and I’m going to go ahead and hit save and you’re going to see all of my shades, all of my transparencies update immediately. I can adjust the saturation, I can adjust the lightness value, and then I move on with my life.
0:09:17
Now what I want to do is go back to talking about the place that Figma has in a professional web design workflow. I’ve talked about this at length. If you want to maximize revenue, if you want to maximize efficiency, if you want to do better work more consistently, then you need to follow a consistent process. And that process typically starts with wireframing. Why do we do wireframing? We do wireframing because we need to quickly figure out what the user experience is going to be, what the content layout is going to be, the narrative, the calls to action, the overall strategy, and we need to be able to find answers to those questions and those challenges without having to worry about how pretty things are and how well-developed things are and classes and divs and everything else. And so we need a way to just rapidly focus on wireframing and user experience. That’s what the wireframes allow you to do. And they allow you to have conversations with your client without your client being distracted by things like colors and, ooh, that’s not as pretty as I want, or let’s move that around.
0:10:22
That’s not, that’s for later, right? Right now we’re focused on this thing over here. Having a wireframe limits distractions so that you can have important conversations about important topics in the early stages of a project. You sell wireframing, you get experience and expertise at the wireframing process, you use tools that help you do wireframing easier and faster. Wireframing is very important. UI is next.
0:10:48
We take the approved wireframes. Once a wireframe is approved by the client, then you make it pretty. That is the UI phase. That’s when we actually design things. And objectively, it is way more efficient to design in a design tool like Figma. Also, if you are hiring designers, you are going to come across tons of designers who are very talented and who understand Figma like the back of their hand, but they couldn’t tell you a single thing about development or page builders or anything else.
0:11:17
And asking people like that to take their talents and force them to work inside of a page builder, that is not an efficient strategy. It’s not a good strategy in my opinion. Let them work in a design tool like Figma. That is where they are going to do their best work. That’s where they are going to be much more efficient. That’s where you’re gonna get the best results. So now you can allow them to do that because they’re still using the same framework. They’re still using the same templating, uh, aspects from frames that you’re going to be using in development.
0:11:51
They’re now able to access all of that inside of Figma and do their best work inside of Figma. And again, you’re selling the UI face, you’re selling design to the client. Development is the next step. You’re selling development as a separate deliverable because it is a separate area of expertise, often done by a completely different person. Now, if you’re just a one-person shop, I still encourage you to develop a process like this and sell the process in this way.
0:12:19
You will be more efficient, you will do better work, and you will make more money. It doesn’t matter how many people are on your team. And if you decide to add people, you’ve already established a crystal clear process for how this work gets done, which means you can plug and play people easily into your process. You can scale faster, you can scale easier. So we do wireframing, we do UI design next, and then we do development. And the disconnect before was that any work that had to be done inside of Figma before had to be done from scratch.
0:12:53
And there was no tie in to how automatic CSS behaves in a development environment into Figma. And then when we introduce frames, even more of a disconnect, because if I wireframe inside of Brics and then hand that over to a designer who wants to work in Figma, they don’t have access to those same frames to work from. Now they do. Or you can hand off easily the wireframing aspect to your developer now, or I’m sorry, to your designer, they can go into Figma.
0:13:19
They can use frames inside of Figma to quickly wireframe. It’s going to save you a ton of money because they’re going to be skipping a lot of manual work that they would otherwise be doing. They can get to the nitty gritty much faster. They can get to the important aspects of their job much faster. And then whatever they produce right inside of Figma in terms of wireframes or UI that directly translates over into bricks or oxygen or whatever supported page builder that you’re using with automatic CSS and frames. This changes the game for professional web design workflow if you already have Figma as part of your workflow you understand this a thousand percent. If you don’t already have Figma as part of your workflow, I’m gonna ask you to just keep an open mind.
0:14:05
I’m gonna ask you to get on the waiting list. I’m gonna ask you to consider the offer and I’m gonna ask you to continue watching videos and continue hearing people like me, me and people like me, make the arguments for Figma as part of a professional web design workflow. And I just want you to keep it open to consideration. Now, let’s talk about the waiting list. I want you to go to getframes.io slash figma. Again, that’s getframes.io slash figma to get on the waiting list.
0:14:37
I will send you more information about the launch. I will send you more teasers as they are produced. Some of these teasers will only be available to people who are on that list. They will not all be published on this channel. They will not be all be published on the Automatic CSS and Frames YouTube channel. There is going to be exclusive stuff coming to people who are on the waiting list and I’m going to make you an exclusive offer for this bundle in July. This is going to be the only time that this offer is going to be available and that’s going to be made to people who are on So again, getframes.io slash figma to get your name and your spot on the waiting list. This has been a great sneak peek.
0:15:20
I just wanted to give you a taste. Comment below if you have any comments, questions. I can address them, I’m happy to. But definitely get on the waiting list, getframes.io slash figma. Cheers.
