Why I Ditched Figma

I have outlined a professional web design workflow many, many, many times on this channel, but to give you a little bit of a recap, it starts with discovery and then we move into a UX design phase and the deliverables for that phase are wireframes. Then there’s content production.

There’s a UI design phase where a designer makes everything look really, really, really good. And then once everything is approved and basically green lit, we move into the development phase where the developers now are just building what they see.

Everything is already approved, there’s no more decision making, it’s just build what you see. And this results in a very, very efficient process, a process that is very kind to iteration because of where design is actually taking place.

And that’s really the question here. Where is the work at each phase actually getting done?

And in the last video that I published on this channel, I talked about the importance of doing design work, that’s UX design and UI design, in an actual design tool and not the development environment. But I wanna talk a little bit about my personal journey with all of this and how I came to realize these facts of a professional web design workflow because it’s no secret that we are releasing two new tools today.

One is called ACSS Tokens, which basically brings our CSS framework, automatic CSS into Figma. The other one is called Frames for Figma, which brings our entire library of layouts and elements and various component type functionality into Figma as well.

But if you know anything else about me, if you know anything else about me, you know that I don’t just create products to create products. I create, my team and I create products to fill very vital needs that freelancers and agencies and developers and designers have in their everyday life, in their everyday workflow.

And so what I want to do with this video is not convince you as to why you should be using Figma and of course why these tools make your Figma life easier. I want to explain exactly how I arrived here.

How did we come to the decision that these tools for Figma are actually necessary? But I want to take you back many, many, many years to where I was using a tool called Adobe XD.

You may have heard of it. I was doing wireframing in Adobe XD.

And then what I would do is I would take that wireframe file and I would hand it off to a talented designer who would then use it to make everything look pretty, right? So I was doing the UX design.

They were doing the UI design and then this new tool came along called Figma and it started to gain traction and I started experimenting with Figma and playing with Figma and it did not take me long to make a very bold statement. I said, and this was many, many years ago, many years ago, Figma will kill Adobe XD.

And a lot of people laughed at me, but that is the reality. Now Figma has killed Adobe XD.

Adobe recently acquired Figma. That was the final nail in the coffin for XD.

And I believe Figma is the new standard for design tools, uh, at least for the type of design that we do as web design agencies. Now, I actually left Figma.

That is the title of this video, of course, and I wanna explain why I left Figma. So I’m gonna go ahead and share my screen.

What you’re looking at right now is Bricks Builder. This is a blank canvas in Bricks Builder.

Of course, I am the creator of Automatic CSS, which is a utility framework for WordPress page builders, and I released an add on not too long ago called frames. So what frames allows me to do is to quickly wire frame out a page directly in bricks builder, which accomplishes the wire frames, but it also accomplishes all of the development at the exact same time.

Plus I don’t have to sit here and think up different concepts for layouts. I have an entire library of layouts to choose from.

They’re all well-coded, semantically accurate, accessibility has been considered all throughout the entire system. And so what I’m able to do is just come up here and say, okay, well, we’re gonna start off with a hero section and I can just hit insert and more or less insert the exact hero section that I’m looking for.

Then I can come in and say, the next thing that we need is a content section. So I’m gonna go to content section and I am going to insert maybe content section hotel.

And you know, there’s a lot going on here that would take me, you know, hours of work just to get to this starting point. And again, I’m just gonna continue going.

So I did content, now I can do something like testimonials. Maybe we want a little bit of social proof.

So I go to the social proof category. I start looking around.

I decide I like testimonial section Lima. So I’m going to put all of these little call out quotes in here.

Nice, fantastic balanced layout. I’m just going to go back up to templates and say, okay, we’ve done the hero.

We’ve done some content. We’ve done social proof.

Now what I need to do is feature some things. So I’m going to go into our features section.

I’m just going to start looking around what would be a good feature layout. And this catches my eye right here.

So we can do feature Tango. I’m going to insert that.

There we go. And I just keep going with this workflow.

I’ve got headers, I’ve got footers, I’ve got so many different options within each category that every single website can be unique and all of this stuff can be changed, adjusted, and customized. And it’s very, very easy to work with.

And I’m showing you this because I think you can see why this might convince you to leave Figma. If you’re doing from scratch, manual wire framing in Figma, and then you look at a process like this, where not only are you able to deliver full, full done wire frames to the client in minutes, right?

That you’re charging a lot of money for. We’re checking the development box at the exact same time.

Again, Semantic HTML, accessibility, all of this is taken care of while you’re doing the wireframing. And what I would do once these wireframes are done is just hand off these real pages to our designer.

And our designer would take them into Figma and they would handle the from scratch work. It was basically still on our designers to work from scratch.

And what I wanna show you right now, I’m gonna hop into Figma, and I’m gonna show you what that from scratch workflow looks like, so that you can really get an understanding for why I abandoned this workflow, and why I personally stopped doing any work inside of Figma. But then, I wanna talk about why this actually limited me dramatically and why we identified the gap and said, no, this work does, we can’t get away with doing all of this wireframing directly in the builder.

We still need Figma, but we can’t use Figma manually. That’s not going to be the, if we have to use Figma manually, then we’re just going to keep doing this inside of the builder.

But if there’s a way to not have to do it manually in Figma, we would much prefer to do it in Figma because Figma is the place that this work really needs to be done. So what I’m going to do is I’m just going to start a typical from scratch workflow.

We’re not going to get very far with this. I’m just going to make a point.

Okay. This is exactly what a manual workflow looks like inside of Figma, and then I’m gonna show you what’s available to you now, okay?

So this is gonna be a section, and I’m gonna set a width on this like 1440 as an example, and because it’s a section, it’s gonna need an inner container. So what I’m gonna do is I’m gonna turn this into an auto layout going up and down.

This is not gonna be a Figma tutorial. I’m just talking through what the process actually looks like.

The next thing I’m gonna do is add a frame inside of that frame, and you see once again, because I made it an auto layout, certain things change here. I need to go to 1440 again.

I want the block padding to be 80 on these sections, and then the inline padding, this is gonna be, my width on this is gonna be fixed, and it’s gonna be 1280. I’m gonna add a little bit of a background color here, that way you can see more of the structure.

So this is gonna be F5, F5, F5, and this kind of brings us to, actually that exactly coincides with Figma’s background, so I’m just gonna do DDD. And you can start to see, first of all, off with colors.

You’ve gotta manually determine how are you gonna organize your colors? Are you gonna be able to tokenize your colors?

Are you going to how scalable and maintainable is this project file actually going to be? And if we’re trying to replicate something like this side-by-side section here, we can go ahead and start to do that.

I want to show you exactly what that would look like. So I’m going to add two blocks in here, two more frames.

Okay, so we’re going to add a frame in here, and we’re going to add another frame in here, and then we are going to auto layout those side by side. What we want to have happen is no block padding in here, no inline padding in here.

We just want our two blocks. I’ve got my block there and my block there.

And then I want to put in an accent heading. Okay, so this is going to be an accent heading.

This is going to, I’m just going to duplicate that and bring that down here. This is going to be our actual marketing heading that says this is just a placeholder for right now.

All right, this is just a placeholder. And then I’m going to duplicate that again and I’m going to put in our paragraph.

All right, so we are coming in and putting in our paragraph, which is very long. Now I want this block over here to also be an auto layout.

Notice that when I make that an auto layout, some things are breaking. That’s probably because these things are not set to fill their container as they should be.

This frame right here needs to set to fill container. This needs to be set to fill container as well.

This needs to be set to fill container. And then we need to put some inline padding on our section.

We can do something like 80. Okay, perfect.

So now we’re getting to where to go, we need to now think about our typography. And once again, all of your typography has to be done from scratch.

It’s this decision after decision after decision. Not only what are the typography values going to be, how are you going to tokenize them?

Are they gonna be based on some sort of mathematical scale? There’s just a lot of decisions that you have to make as the designer working inside of Figma.

So this would be, let’s say, maybe 48 pixels as our, well, let’s do 42. Okay, this is effectively gonna be our H1.

So I’m gonna come up here and I’m gonna tokenize this by creating the name H1. This is gonna be our paragraph, which I’m gonna make 18 pixels.

We’re gonna set a line height here of 160%. Okay, and then I’m gonna come in here and make this my body style.

And then I’m going to make this our accent heading. This is going to be maybe 13 and then we’re going to uppercase this and we are going to save that as our accent heading style.

Okay, so I’ll just say H double dash accent. So now I’ve got some typography styles going on.

Now I’m going to come over here and I’m gonna try to replicate, actually, you know what I need, what else I need in this box, is I need buttons that go side by side. Okay, so I’m gonna start by inserting text here, and this is gonna say, call.

Guys, just creating that one little hero section, I was already done in bricks with frames, already done with an entire page.

I’m on to the next page doing another page and another page and another, I will have half the website wire framed out before I’m done with a single wire frame. If I’m doing manual work.

And I think you see, that’s why I abandoned this process. Once frames for bricks was available, I completely abandoned Figma personally.

Here’s the thing, you go back and watch the last video that I created where I covered very specific reasons why this type of work, wireframing, should still be done in Figma. We have to be able to do this work inside of Figma, but we’re not willing to do it from scratch.

So what is the solution going to be? And so the solution is building automatic CSS for Figma and building frames for Figma.

And now that workflow that you saw within Bricks can actually be done inside of Figma. And so I have all of my assets here available to me.

I’m now not in a default Figma file, I’m in the frames for Figma project file. And I have automatic CSS tokens installed in this project file and now I can use both automatic CSS and frames inside of Figma.

And so I can search assets for, for example, my hero sections and I can bring in any hero section that I want to. Let’s bring in this particular hero section.

The next thing I can do is I can go look through my features and see, hey, what is available for me for my features? And I’m going to bring this feature section in right here.

And what is the next thing I need? I need a little social proof.

Maybe we’re going to bring in testimonials. Let’s see, testimonial.

Well, here’s that exact one that I was using in Bricks. So why don’t we bring that one in?

Perfect. What else do we need?

We may need a, is there any content sections available to me? Why, yes, there is.

Let’s bring in this content section right here. And then I decide, you know what, I actually wanna move those around.

I’m not gonna continue doing an entire page. I just want you to get the point.

I’m gonna auto layout these and I’m gonna take away the gap that’s between them. And then I can actually decide, you know what, I want that content section to come before the features section.

And it’s as simple as just dragging it up there. I can also, because of how frames in Figma, and Figma really, uses components and instances and things like that, that’s one thing I want you to notice.

All of this is done with auto layouts, all of this is done with components, all of this is done with instances, which means all the scalability, all the maintainability, all the tokenization has already been done for you. You’re gonna be able to come in here and you’re going to one, you can see a mobile version of all of this, but you can also come in and just swap the instance.

I don’t have to remove a hero that I don’t like and then add a new one. I can simply swap the instance.

So here’s hero alpha. And then here is a hero Oscar as another example, I can go back to hero India, which I was using initially not to mention.

And I just want to say it again, that your typography, your headings, your text, your buttons, the colors, all of the spacing, the width, the border radius, everything is already tokenized for you because frames for Figma leverages ACSS tokens. And so I can go up here in this left panel under layers.

I can go see my typography style guides at any time. I can change the typography on the website whether I’m changing the math scale that controls the ratio between the sizes or individual heading sizes I can change my spacing at any time.

I want these changes update across the entire project file just like automatic CSS CSS updates values across an entire website, whether you’re at the beginning or you’re in the middle of the build or you’re at the end of the build. I can go again, look at my width, look at my display grid, look at my shadows, my border radius.

I can come in here and I can take care of the identity of an entire project. For example, when I put in the business name right here, it’s updating all of my footers, all of my headers, anywhere this business name has been mentioned is being updated.

Anytime I mention the business email somewhere, that’s being updated. Their phone number, their business address.

This is like having an options page in WordPress where you have global control over the information related to a project. Their social icons, their business logo, the copyright text.

I can go in and look at my colors file. Every color, every shade, every transparency is tokenized, which means that if we need to update the website’s action color, we can update the action color right here.

Every shade, every transparency is going to update, not just on this little UI style guide, but across the entire project, which means that we can now theme projects and we can change the theme. Never has it been easier when a client says, oh, we’ve changed this brand color.

Guess what, you can go in, and it doesn’t matter if you’ve used just that brand color or a shade of that brand color or a transparent version of that brand color. You simply make one change right here and the entire project file updates, whether you have one page for this project or you have 500 pages for this project.

So not only are you wireframing these pages out like it with insane speed and then passing that straight through to the design phase, which is why the design phase in a file like this is so much easier. Your UI designer is going to absolutely love you because of how all of this is thought through, how everything is already tokenized, how everything is a component, how everything already uses auto layouts, how we already use instances of components.

It’s a joy to work with. It makes your workflow insanely efficient, which means your margins are very high.

And this is what we said. We can’t work in Figma without something like this.

We don’t want to have to make these decisions from scratch. We don’t want to have to work from scratch.

We want to have global control over all the stuff that we’re doing, pre-made tokens that we can use in every single project, which means everything becomes insanely consistent. This is what’s required to have a really fast, efficient, scalable, maintainable workflow inside of Figma.

But the key here is that these frames are a direct one-to-one mapping. Every frame that was available to me in Bricks is going to be available to me now in Figma, which means when I wireframe all of this out and then we hand it off to a

designer, we’re going to do a whole video with one of my designers and actually the creator of ACSS tokens and our lead developer for frames for Figma.

He’s going to do a whole video showing you how he goes from a wireframe to a fully designed project that then gets handed off to the development team using Figma, using frames in Figma, using ACSS tokens in Figma. He’s gonna show you the whole thing.

But as a non-designer, I’m still able to come in here. I’m able to do all the wireframing that I wanna do very rapidly.

I’m able to do all of the content work that I want to do very rapidly. Or we can have a content person come in as we often do to do the content inside of this project file.

By the way, content people are used to working in Figma. They’re not used to working in development environments.

So it’s very easy to integrate your content people in here. And then the designer gets to come in, they get to duplicate, and then they can, and they can put this in another page if they want to, however they want to organize their workflow.

And they can simply design here while this old wireframe copy persists. I talked a lot about persistent design in Figma, in these design tools that doesn’t exist to you in a development environment.

In a development environment like right here, once the designer gets to work, there’s no – if they were going to design in Bricks, in the development environment, once they start designing there’s no going back to the wireframe. The wireframe is gone.

And there’s no record of it, there’s no anything of it, unless you manually took screenshots of everything. But again, you can’t get back to that initial state in the development environment.

You only have a screenshot. That’s all you have now.

Whereas in Figma, you always have the full wireframe available to you. If there are multiple design iterations, you can’t have multiple design iterations in a development environment because there’s only one real version of every page.

And so once you’ve designed something, if you need to change it, you change it, you can’t get back to what you had before very easily. Not to mention you’re creating an entire mess in the back end.

This is why I said, all of this design stuff needs to be happening in a design tool because the design environment, the design tool creates an environment where all of this actual work of iteration, of testing, of experimentation, of trying this, trying that, showing the client multiple variations, that’s only possible in a design tool. And so I said, you know, this really needs to be happening in Figma, but if I have to do it from scratch in Figma, I’m not, I’ll deal with the downsides of doing it in a dev environment.

If my only other option is to work from scratch in Figma, but really, this all needs to be done in Figma. So what we did is we said, we’re going to make this possible.

Everything that you saw in bricks with just bang, bang, bang, adding frames to a page, doing your content development work, creating multiple iterations and copies, trying out different things, getting good feedback from the client inside of Figma, being able to move things around easily and not have to mess up a dev environment to do all of this. Now that is as easy as it has ever been.

I’m not saying it’s as easy as it will ever get because we might find ways to make it even easier, but this puts Figma back into the workflow for everyone. And because it’s all starting from frames and it’s all using automatic CSS inside of Figma We’re able to then go when it’s time for development go into bricks add all the exact same frames style them up done ship The workflow is insane and remember for these steps for UX design that is a separate billable process For UI design separate billable process development separate billable process.

It’s not costing you any extra money to do this inside of Figma. In fact, you’re making more of a case to increase your revenue, to have these as separate deliverable items or sections of your workflow that if you’re not currently charging for right now, you can instantly start charging for.

So your revenue is going to go up, your margins are clearly going to go up, your workflow is going to get more efficient, the quality of the work that you’re doing is going to go up, everything is going to improve, and there’s no downside anymore. See, the objective downside before was no, doing it from scratch like I just showed here, doing it from scratch, it’s too much, we’re not going to do that, we can’t afford to do that, the client can’t afford for us to do that anymore.

Do you know what we have to charge to justify doing all of this work from scratch to the client benefits from this workflow as well? It’s a win, win, win, win, win.

And that, that is the history. That’s why I left Figma.

And this, this right here is why I’m back to Figma. So if you want to get your hands on ACSS tokens, if you want to get your hands on frames for Figma, now is the time to do it.

There’s a special launch offer. There’s a link down below in the description.

Highly, highly, highly recommend. If you want all of these benefits, if you want this one seamless workflow where all of these tools talk to each other now, this is the way to go.

If you have any questions, drop them down below in the comments. I’m happy to help.

And I’ll be back very soon with another video And I’ll be back very soon with another video right here on gary. co, peace.