What is up everybody? Welcome back to the channel. I’m Kevin Geary of course. This is geary.co. If you are new here, let me give you a little bit of a rundown. I teach web design and development best practices. We talk about scalability, maintainability, efficiency, workflow, processes, pricing, profitability, all of the stuff that you should care about as if you consider yourself to be a professional in this industry.
And there is one piece of the process that I don’t talk about very often because I’m not a designer. It is the Figma side of the workflow. I do a lot of work in Bricks and Oxygen and WordPress and I show all of this. We do all these great tutorials where you can learn how to be the best possible developer.
But the design side of things I don’t talk about very often. Why not? Because I’m not a designer. But the fact remains that design, UI design, and especially UI design within Figma is a very, very important part of our workflow.
And in this video I’m going to cover seven reasons why that is the case. And if you are in the camp of I don’t need Figma, Figma is not important, I can do everything that I need in the development environment. If that’s you, that’s fine. Hold on to that thought.
But I do want you to have an open mind. I want you to hear the seven reasons why you might want to consider using Figma. If you have any pushback, drop it down below in the comments. I’m always open to hearing pushback as long as you’re able to be nice and respectful and have a coherent logical argument.
But I think after you hear these seven things, if you have an open mind, you’re going to say, okay, all right. I didn’t even consider that. You’re going to say that to a couple of the items, hopefully at least, maybe all the items, but hopefully to a couple of the items. All right, so let’s go ahead and jump in and talk about reason.
Number one, all right. Reason. Number one, designers tend to work best. Hear me out in design tools.
Why is this because they’ve lived in design tools their entire life. This is where they do their best work, their most efficient work. And get this, the design tool is actually built for a design workflow. A design workflow is different from a development workflow.
Also the people doing this work again, I called them designers. I hate to break it to some of y’all developers and page builders out there. You’re not a designer. Maybe you’re able to mimic good design from other places, but that doesn’t make you artistic.
That doesn’t mean you’re actually following a design workflow. See, a real designer who has design expertise and experience and they understand the philosophy of design and all of this workflow approach to iteration and ideas and on and on and on and on. They have a whole thing. It’s a whole thing.
Again, I’m not a designer. It’s a whole thing. They could tell you all about it. But the fact remains that a lot of that messiness that goes into the artistry of design does not belong in a development environment.
A development environment is very structured. It’s very logical. logical, whereas design is kind of the opposite, it feels. They’re trying to do new things that haven’t been done before.
They’re trying to break things. They’re trying to swap things and make iterations. And they’re doing a lot of stuff, again, that is meant to be done in a design tool, not in a development tool. When you do that kind of work in a development tool, you end up making a mess.
You make a mess of the code base. You make a mess of the class names and the conventions. You don’t want to be living that life. As I like to say here, you want design to be done in the design tool.
You want development to be done in the development tool. This allows by the way, you to leverage other people. So right now I’m speaking to those of you who consider yourself to be a one-man band. You’re like, hey, I can do it all.
I can pull up, you know, the list of sites that the client likes. I can mimic the design. I can put it all together in the page builder. I can get the content put in.
I can ship it off. I don’t need Figma. Who needs Figma when I can do this very efficiently very quickly and I feel like I get the job done who needs Figma when you have frames and bricks and WordPress who needs it who needs it that’s probably what you’re thinking right now well the reality is let me go back two things here number one you’re not a designer you’re okay at mimicking designs but what needs to happen when iteration needs to occur? When you mimic a design, but now the client is like, it needs to pop more, it needs to, you know, all the things that Bev says, right?
It needs to do this, it needs to do that, and maybe we need to change the colors out, but you’re not, you don’t know color theory. You don’t really know what you’re doing when it comes to design, you’re just good at kind of piecing things together, and then you hope that they like version number one, and that you’re able to move on with development and ship the website. And, but the minute it or it starts to become an absolute mess. Why?
Because you’re not a designer. Now, we also talk a lot about scalability on this channel, scalability of websites, but also scalability of your company. And the fact remains that, Hey, if it is all on your shoulders, then that’s a lot of risk. That is a lot of risk for your clients.
It is a lot of risk for you. It’s very easy for you to get bogged down. A lot of people in your situation live project to project. It’s much more efficient, smoother, less risky if there are multiple people coming in to handle these multiple disciplines.
Because again, design, development, two different disciplines. So if you’re a good developer, a good page builder, you need to hand off design as quickly as possible to somebody who actually knows and understands design. And the reality is that when you do that, 90% of the time, they’re gonna prefer to do their work in a design tool like Figma. They are not gonna wanna do that work inside of a development environment.
This is especially true, by the way, if you want to hire the best designers, it’s difficult to hire. Let’s say I use Bricks as my workflow. It’s very hard for me to find a great designer who’s also great at Bricks. First of all, who’s good at development at all, but then who’s also good at development in this specific niche tool.
That’s a lot to ask. That’s a hard person to find. However, if Figma, if Figma is part of my professional design workflow, that person is quite easy to find. It’s easy to find a great designer who knows and loves Figma.
Why? Because Figma is a design tool. It’s where all the designers hang out. It’s where all the designers do their best work.
All right. Reason number two, you should be using Figma as part of a professional web design workflow is rapid wireframing and UX design. I’m going to go ahead and share my screen and I’m going to show you a perfect example of this. And now this is made easier by the fact that I am using frames for Figma.
If you have to do wireframing by hand from scratch, especially if you’re planning on using auto layouts, especially if you’re planning on using things like Figma components, it is a lot of work. It is a lot of work, but I do want to remind you, this is a billable step of the process. You are billing separately in a real professional web design workflow. You are billing separately for this step.
You’ve got to get out of the mindset of, I’m billing for a web design and I need to get to the finished product as fast as possible. We need to focus on doing things right and billing for each step of the process that is required. I’ve done many other videos of why UX design, wireframing, and prototyping are insanely important to a real workflow. Imagine we just got hired.
I’m at the first step. I’ve done discovery. I’ve done all the other preliminary steps. I’m at the first visual step, which is we got to get a wireframe going.
We got to get a discussion point, right? I got to do some UX design here. And this is how Frames for Figma alleviates all of that initial infrastructure based work of common layouts and auto layouts and components and on and on and on. So I’m just going to start adding stuff to a page here.
I’m going to throw in our feature section right here. Now we can have many, many, many different types of feature sections to choose from, but I’m just going to go ahead and I’m going to choose this one. I’m going to drop in some FAQs. I’m going to drop in, let’s go down here, it doesn’t really matter, look, I can just drag this over here.
It’s almost like I’m able to idea board this, which you would never be able to do, obviously, in a development environment. I’m gonna toss in a footer down here. I’m gonna toss in, of course, my header. In fact, I don’t want that one.
I’m gonna, no, I don’t want that one either. I’m gonna drop this one in up here. And so I’ve got features, I’ve got a header, I’ve got FAQs. I need a hero section, right?
Let’s just drop in this as a hero section right here. So let’s just talk for a second and I’m gonna assemble this, okay? So you can actually see it come to life. But just the header, just the footer.
I mean, think about this in a page builder like Bricks. I mean, what would I have to do to get a header onto the site? I would have to go to the Bricks templates area. I would have to create a new template, assign that as a, or tell bricks that that’s a header template.
I would then have to open the editor. I would then, if I’m using frames for bricks, obviously this is a lot easier. I would have to go to the templates library, the frames library. I’d import a header, which by the way, imports classes into the database.
And maybe, maybe you end up swapping that header out, which means now you’ve got to go delete those classes. If you really want a clean, efficient database. Why? Because the development environment is not really the best environment for iteration and design concepts.
It’s for a structured, streamlined, logical, end of story development. Right? So once again, this speaks back to design should be done in design tools. Dev should be done in dev.
Okay. Okay, but think of how much clicks and thinking and assigning the template and all of this has to happen to get a header. And then I got to do the same thing for a footer. And then I can’t even work on my home page until I create a home page and assign it as the home page.
And on and on and on and on. So many steps that are not important to what we’re doing right now. What’s important right now is designing the user experience. So popping open a design tool, dragging some starting points onto the page and then look at this.
So I can bring this down here. I’m just going to select all of these. I’m going to hit shift a, and that’s going to put them into an auto layout. Then I can just remove the gap between all of them.
I can throw a background color. Really. I want a background color on my entire frame. That’s going to be like the base color of my website.
And then I’m just going to zoom in for you. And again, I ask how long would it have taken you to get to this point in a page builder environment? Now, aside from just getting to this point faster, I’m also able to quickly iterate faster, right? I can come in here and I can swap one hero for another one feature section for another one footer for another one header for another, or I can go rogue.
I can start making my own customizations to this frame. And again, it’s all about efficiency and speed here. And remember, as this file grows, this kind of stuff is going to become more and more important. I will also say this as the project grows in complexity, the more complex a concept is like, hey, we need an interactive multi-step form.
Okay, well you definitely need to be prototyping and wireframing that multi-step form, mapping out all the logic, all the stuff that needs to happen. The idea that you would open a development environment and just start starting to try to build the thing with no planning whatsoever, no idea or concept of how you’re going to overcome the various challenges or what’s going to go where, that is going to be an insanely messy development environment. Whereas in a design tool, you’re able to come up with complex solutions to complex problems with no mess whatsoever. We don’t want to be doing iteration and creativity and changes and changes and changes and problem solving inside of the development workflow if we don’t have to.
We want to do that kind of stuff in an iterative design tool. Okay, point number three is very simple, and again, if you are a one-man-band type person, you need to open your mind maybe to the future a little bit here, but it is multi-user editing, okay? Multi-user editing when you are working with a team is insanely important, especially as the project grows in size and scope. Right now we’re looking at one wireframe.
It’s kind of odd to have two people, three people come in and be working on one page of a wireframe. But what I want you to imagine is we’re much further along in the project. We actually have 20 to 25 wireframes inside of this project. Don’t you think that as some wireframes get approved the designers going to want to come in and they’re going to want to start working on the first initial design concepts?
That means they’re going to be in this file working on things while I’m in here working on things. Maybe our copy person at some point along the way is going to start coming in and putting copy into these various aspects of the file. Don’t you think they need to be working on the file while we’re working on the file? This is very important.
Figma is a true multi-user editing tool. Bricks, you can do a little bit of multi-person editing, but more often than not, you’re going to end up causing complications. Somebody’s going to overwrite somebody’s work. There’s going to be lost classes, lost styles.
There’s going to be lost something or other. It happens all the time when we try to do multi-user editing. Oxygen, that’s an impossibility. Two people should not be editing the same website at the same time when you are using oxygen.
Page builder after page builder after page builder has these kinds of issues. Figma does not have any issue whatsoever. It has true support for multi-user editing. This is where workflow efficiency goes to the max.
This is how you get larger projects shipped out faster. A tool like Figma is 100% for multi-user editing. Let’s move on to number four. Reason number four, Figma should be an important part of a professional web design workflow is what I call persistent design iteration.
What you’re looking at right here is the wireframe, the starting point, right? We’re gonna bring this to the client. We’re gonna get the feedback. We’re gonna go ahead and iterate on this if we need to.
We’ve already discussed all of this. You see the mobile version right here, but I’m gonna start scrolling sideways. And what we’re gonna run into is a copy of this, which is some very basic iteration done to it. And so you see that we have made the feature cards alternate.
They were not alternating in the initial wireframes, and now they’re alternating. We come down here and these feature cards have been turned into a three-column format instead of the initial four-column format that was right here. We can come down and we can see any types of changes or iterations that have been made. Again, these might be from client feedback, these might be from group discussion.
What you’re also going to see here is the ability for us to just slap notes on various areas. We can put notes as to why these things change. The note could say, Hey, the client requested that we make this change right here for this reason, whatever. And so now the team has kept up to date.
But what I said a minute ago is persistent design iteration. I’m going to scroll over one more. I want you to keep that term in your head, persistent design iteration, because this is what makes or breaks a true professional process. I’m gonna slide over and now you’re gonna see the actual designed version of what this wireframe eventually became, okay?
And now let’s talk persistent design iteration. Imagine you did this in a development environment and not in Figma. You started with that wireframe, okay? Wireframe then got changed, right?
Four columns became three columns. Cards alternated, so on and so forth. At multiple steps along the way, as you’re doing those iterations, remember every iteration is more or less an experimentation, is more or less a proposal to the client, because now we have to go back. Every time there’s an iteration, you gotta go back to the client.
Okay, do you approve this? Right, is this what you wanted? Okay, and they say yes or they say no. And it’s not always about the client.
Sometimes it’s about you yourself. And sometimes you yourself changes your mind, right? You do an iteration and then you decide, that wasn’t the best iteration. I wanna go back to the original concept.
What do you do in a development environment when that happens? You don’t have the original concept anymore. The original concept was changed. Why?
Because a development environment asks you to have one existing version of the thing. I mean, it’s not like you’re going to be duplicating installs. It’s not like you’re going to be, I mean, you could use a library to save iterations, but you’re using a class-based workflow. So every change you make to classes, if those classes are on the old iteration, the old iteration is changing, my friends.
There’s no persistence in the design workflow. Whereas as we look here, I mean, look at this. I still have the very first version of the wireframe that was added to this project. And imagine, guys, we’re looking at a very simplified example example of a homepage but most of our files most of our projects could be 8 pages, 15 pages, 30 pages, 50 pages.
The bigger the project is the more important and critical that you understand these concepts that I can have the initial concept, the initial version untouched unadulterated as they say okay and then we come over here and we look at the next step. We’ve got notes as to why things changed. And then this is going to live here. It’s going to persist while I come over here and I start working on design.
And then if there’s multiple versions and iterations of design concepts, every part of the process persists. If there’s anything that we liked that we changed, right, we change it. Now we don’t like the change. We want to go back to how it originally was.
It’s okay. I have a copy of how things were originally at every phase of the process. Now think about content comes in and then we want to try out different headlines and different lead paragraphs and maybe we’re doing split testing and oh, well in a development environment, right? It’s hard to keep those old copies.
It’s hard to keep those other versions. You have to maintain a whole separate copywriting file. That’s not good. Why don’t we just do this all in the proper design tool where it’s easy to keep iterations of our workflow and our process that persist forever.
I can come back to this file in five years and I can see exactly step by step by step the process that this entire project went through from initial concept to changes to that concept, to design iterations of that design variations in the copy and the messaging. This is of critical importance to a true professional design workflow, something that cannot happen and does not happen in a development environment. All right. Reason number five that Sigma is a critical part of a professional web design workflow.
We’ve talked and alluded to the fact that all throughout a project you are going to need to get feedback from the client. In a design tool like Figma what I always do is I hop into Figma and I get on a call with the client and we go over everything and as I do this look at this I can come up here I can click on anything I want I can add comments of what the person is telling me in terms of their feedback. I can grab these little note modules and drop these note modules in various places. There’s a lot of ways to do this.
I can share the file with my client. They can open the file, they can go through it. They have this little note bubble. They can click on things, they can leave feedback for things.
I know there are overlay tools where you can do this in a development environment, but again, we’re forcing a square peg into a round hole. If we were just using a proper design tool, we would be able to get this feedback, collect this feedback, organize this feedback much more easily. What I’m doing right now on the screen can’t be done in a development environment. The fact that I can get a bird’s eye view of the entire page, then I can come in and I can get a semi bird’s eye view of the entire page.
I can address scannability of this design. Then I can come in and get really detailed on specific sections and really figure out exactly what needs to happen here. And I’m doing this with the client and I’m pointing out various aspects and I’m isolating things and stuff that cannot be done in a development environment can easily be done in Figma. You’re going to get better feedback.
It’s going to be easier to get that feedback. You’re going to be able to organize the feedback, better disseminate that feedback to the entire team. Every part of the iteration and feedback process is happening right here inside of the tool where the design is being done. And that is just, again, efficiency, streamlining, quality of the process makes life so much easier.
Reason number six that Figma is an essential part of a professional web design workflow is very simple, development efficiency, cleanliness of development. Remember what I said, development is that logical step-by-step, try to make it as clean as possible, scalability, maintainability, accessibility. We got enough stuff to focus on and figure out in the development phase of a project We don’t want to be figuring out Iterations and copy changes and all this other stuff what we want Ideally is a snapshot of exactly what this page needs to look like and exactly what this page needs to say And then and it’s all approved then we open the development environment finally and we just build the thing. And by the way, when you’re using frames for Figma as your starting point and all this structurally, all of this stuff was built with frames for Figma, it was all structurally and design-wise built with automatic CSS tokens.
I can now go into my development environment and use frames for the rapid development side of things and automatic CSS is powering everything. So getting to this final design is easier than ever and faster than ever. And so these two tools working together, the efficiency is unprecedented now. But the point stands that we are taking something from a design tool that is like a finished snapshot.
All the developer has to do is do their job of development. And by the way, we’re handing off again a designer in a design tool working in their wheelhouse, handing off to a development, a developer in a development tool in their wheelhouse. This is how the best work gets done in both worlds, right? If everything is happening inside of a development tool, things are going to get messy.
Things are going to slip through the cracks. Bad things are going to happen. A development tool, objectively, is not the best place for where this work needs to be done. Alright, reason number seven, and this is the final reason in this video, but there may be a part two, a follow-up to this video, because there are more reasons.
There are more really good reasons why Figma should be part of a professional workflow, but this is the last one of this particular video, and it is scalability. I have talked at length about how websites are a living, breathing thing in the modern era. It’s not one and done. It’s not launch and just forget about it.
We need to be working with our clients, talking about what’s the next thing we can do? What’s the next thing that we can do? Maybe for a local service business, you’re talking about building out a network of service area pages and what that’s gonna look like. Maybe you’re talking about PPC campaigns, dedicated landing pages for those PPC campaigns, freebies, offers, there are so many things, so many ideas, right?
E-commerce side of things, you can be building out PPC landing pages for them. These are all iterations on the existing website. And you don’t wanna be, going back to an initial argument that I made, you don’t wanna be doing these future iterations, the scaling of the website in the development tool, in the development environment. I mean, now we’ve got to think staging sites and how much mess are we gonna create in these various iterations when we’re working in the collaborative phase, we’re working in the idea phase, the ideation of these things.
All of that is supposed to happen once again in a design tool, in a tool that is designed for this kind of workflow, for this kind of process. So I’m gonna give you an example here. We want to take this homepage right here and turn it into a PPC landing page. So I’m gonna hit duplicate and it’s gonna just make a new one and I can freely start working on this.
I’m making no mess in the development environment. I can get the whole landing page done for PPC. Then I can hit duplicate, duplicate again and have an ABC version with different headlines, different copy, different call to action. And I can do all of this before we ever touch the dev environment.
I can have the conversations with the client. We can put our little sticky notes on things. We can come up here and drop notes. We can do whatever we want to do in terms of discussion.
We can have multiple people working in the file. All the stuff that we’ve already talked about continues to be important even after the website is launched. Why? Because there’s more work that can always be done and that work in the idea phase and the iteration phase and the experimentation phase needs to be done in a design tool.
And by the way, think about this from a sales standpoint. I tell the client, you know, we launched their site, three months later we have a meeting, hey, here’s how things are going, we think it’s time for phase two. Remember that network of service area pages that we told you we should probably build out? We think that that should happen now.
And so what we’re going to need is we’re going to need the directory page, we’re going to need a template for single service areas, and we’re going to need to map out all of the content for these things. And so when the person greenlights that, the client greenlights that, I don’t even have to do any work. I need to tell the designer, hey, the client greenlit this. Here’s what we need.
We need the directory page. We need a template for service area pages. We need to start putting in content. They’re going back into Figma.
Here’s your file right here. They’re just duplicating what they need to duplicate. They’re just making the iterations. They’re having the discussions with the client.
What needs to happen? What needs to change? What do you like? What do you not like?
So on and so forth. And only, only when once again, we’ve got an approved final vision, then I can go on the development tool and bam, bam, bam, knock it out. Super clean, super efficient, super easy. So while all of that’s happening in Figma, all of that new work on this existing project, right, that’s all being done in the old project file, I’m out handling other client stuff, making sales calls, doing content and videos, whatever I need to be doing.
I’m off doing that other stuff while my designer is over here in the design tool doing all of this extra new design work. And only when it’s finished and finalized will I then need to come in and actually do my work. So it doesn’t require me when it, when a client signs on to a lot of extra work, it doesn’t require me for a lot of the time. And then of course you wanna scale to the point where your designer does the design tool and then hands it off to a developer over here who’s gonna do the development work and it still doesn’t ever go through you.
That would be the ultimate reality that you wanna try to get to. But not everybody’s there, not everybody’s there. My point in this video was, even if you’re still doing a lot of development work on a site that’s already live, Figma is still a massively important part of the scalability workflow of that website. All right, guys, that was my seven reasons why Figma is a, an important part of a professional web design workflow.
If you have any comments or objections, again, you’re welcome to leave those down in the comments. I would love to hear them. I will say frames for Figma is right around the corner, but I didn’t want to make this video all about frames for Figma. This video is about what it is titled, why Figma is so important and Figma would be important if I didn’t have frames for Figma coming out.
Just as it’s been important for years as part of our agency’s workflow, it is still just important frames for Figma makes your life tremendously better inside of Figma. It makes everything faster, more efficient, more consistent, more scalable, more maintainable. Before there was obviously some limitations and challenges to using Figma. And frames for Figma alleviates those challenges.
It makes it more accessible to more people. And so this is a good chance for you to give Figma a real look and to say, okay, I haven’t been using Figma in the past. Why? Because I don’t really know how to do it all that well, or I didn’t see the need for it, and now Kevin has convinced me, like those other arguments he made, very convincing arguments, I’m willing to give it a shot now, especially since there is this thing called Frames for Figma which is going to make my life so much easier.
And I can introduce this to my designers, and our workflow can instantly be elevated. The quality of work that we do is instantly elevated by this new addition to our workflow. It’s up to you though. You don’t have to do it.
I’m not going to shame you if you don’t do it. If you don’t use Figma, I’m not going to say you’re not a professional. I just do think that Figma is a critical part of a professional web design workflow. I made my case in this video.
I made my case in this video. Let me know what you think below.
