Mix & Matchbox Episode 1 – Why We Use Figma Transcript

This is the Why We Use Figma Transcript from episode 1 of our Mix & Matchbox podcast.

3:27:30 pm – You:

Hi! I am Brent, Feldman. And this is the Matchbox Design group podcast, that is soon to be named potentially something different. But we’re starting a podcast here at Matchbox Design Group to give you information on different tools that we use. Certainly tips tricks, things that we basically do at our company to help our clients get ahead. So today we’re actually going to be talking with our UI UX designer. Alex Shaw. Hi Alex.

3:28:00 pm – Alex Shaw:

Hello.

3:28:02 pm – You:

How’s it going?

3:28:03 pm – Alex Shaw:

It’s going good. I’m excited to finally start the podcast.

3:28:06 pm – You:

absolutely, I know it’s actually

3:28:07 pm – Alex Shaw:

And talk about figma.

3:28:09 pm – You:

Whoo, go figma.

3:28:10 pm – Alex Shaw:

Yes, I, hopefully, we can condense us in 30 minutes to an hour, but I think you and I both know that I could probably talk about it forever. So

3:28:22 pm – You:

Absolutely. I mean, what is there not to say wonderful about Figma, it’s not just a figment of our imagination.

3:28:30 pm – Alex Shaw:

You’re just gonna start off the podcast with the pun.

3:28:33 pm – You:

Just bad funds.

3:28:34 pm – Alex Shaw:

This is again. This brings in the compilation aspect that we could probably make an entire video This is again, this brings in the compilation aspect that we could probably make an entire video upon throughout the podcast series.

3:28:43 pm – You:

I really hope so, I, I hope that we can, you know, hopefully hold everybody’s attention. Even though there’s gonna be bad, puns involved. So anyway, but but I guess we should get to the meat of the content which is exploring why we as a company use figma and I can definitely say that Alex is the person who really you know brought using figma instead of what we were formally using which was sketch to the team sketch is wonderful.

It you know is definitely it has a lot of you know similar features and stuff to figma but Alex definitely brought a very compelling case to us about you know, why the potential use it and he definitely won over the Dev team in terms of the you know the exploration of like different files and looking into them on the back end that made it just you know overwhelmingly compelling and and that’s why we actually ended up switching everything from sketch to figma way back in the day, we actually used to do stuff in Photoshop. Which? Wow, I’m super glad that we don’t do that anymore and we were using a companion tool.

Called avocado, I think and oh, avocode avocode and in avocode was good and I know there’s things like Zeppelin out there that can certainly help, you know, dig into these files and actually be a pairing to things like sketch files or figma files but at the end of the day, we actually just use figma and then the Dev team uses those figma files to end up, you know, building in constructing the websites that we put on the Web. But anyway, all that being said, You know, I I think that maybe one of the first things to address is that, you know, just as there’s a competitors like sketch, there’s also Adobe Xd and Alex, you’ve you’ve actually had an opportunity to kind of like do xd stuff as well beforehand, right?

3:30:26 pm – Alex Shaw:

Yeah, so Xd was actually something I started out Web design in back in 2017 and I believe sketch was one of the first big programs that come out for Web design. I think it was 2010. I came out and Xd and Figma didn’t common soul about 2016, but Xd was the first one that I was introduced to just because I think as designers everybody is used to the Adobe suite and that was the program that Adobe created for web design and it is a great program but it seems to be that the majority of larger companies in industry as a whole uses sketch in figma for a multitude of reasons.

3:31:13 pm – You:

Definitely. Yeah, it’s really interesting because, like XD was a product that seemed like it came out. And it really did start to kind of like modernize or really focus the web design and layout and prototyping, and all that sort of stuff in an Adobe product. Which obviously had Photoshop really never necessarily was designed for, or I guess, you know, as we reflect on it should have been used for in the first place but it was definitely interesting to you know, see it be kind of used like that and so anyway so now you know that we’re kind of in this landscape after you know having seen all these different competitors. What is the thing that really drew you to figma?

3:31:54 pm – Alex Shaw:

Oh so I I think the main thing and this is coming from, you know, first starting out as a designer. Even before I started in my career was I was primarily a Windows-based designer which I know is not very common, it’s it’s more common now. But even going back to college days. You know, like a lot of colleges, have you buy a MacBook because it just seems to be the common tool and the common OS that designers use. But given that I used a Windows computer, I needed something that ran on Windows and unfortunately, Sketch does not do that. You know, they are a Mac OS native app, which there are a lot of pros to that, but I think it obviously segments, you know, a lot of potential users from using that specific app and so that’s why I originally got into Adobe Xd for the first year.

So, you know, and then coming out of college I learned about Figma and one of the other reasons why the kind of stood out to me versus Xd from the start was It was very collaborative whereas like Sketch, an Adobe, Xd are really for designing and obviously handing off files to developers, but Figma was actually built from the ground up with collaboration in mind.

So when you think about that and thinking about, well, eventually when I do get into a career I’m gonna be working with developers and everybody else on the team. I wanted to have some software that actually worked better with that. So that’s how I started kind of getting into FEMA. And then obviously the rest was history.

3:33:43 pm – You:

Yeah. Oh that’s awesome. And I mean like I can definitely you know vouch for the fact that it’s been A wonderful collaborative tool, especially the fact that we basically fully operate remotely now, so, you know, we’re not in the office. We can’t sit next to each other and poke around in a file or point to things. You know, the the collaboration helps especially because we’re remote. But I would say that it helps, you know, in collaboration with the Dev team, it helps in collaboration actually with clients so that they can review files.

So yeah, I certainly I will second that point in being very very helpful about Figma is a tool in general and certainly think it’s it’s probably one of the best tools for collaboration. I know that, you know, sketch definitely offers things like that and more and more tools that we use are kind of getting those collaboration features, you know, so that you can see multiple people within a file. But really I think Figma is doing such a good job of it and you know, and we’ve had really, really good luck with with using it with remote teams.

So I guess that that brings us to you know the kind of the Pictures of figment in general. And I definitely feel like, you know, collaboration is you know is namely one of the highlight features. But what are some of the other features that that you like as a part of figma?

3:35:03 pm – Alex Shaw:

One that, you know, was introduced pretty early on and it’s still being, you know, worked on throughout the last couple of months is auto layout. And really what auto layout is, is, you’re able to create dynamic components that react to the content in the design, whether that is, you’re adding additional content or even taking some away.

And as a result, you can really see how responsive the designs are from, you know, a tablet to mobile device. For instance, and something that I’ve seen compared to it which It’s not a complete one-to-one but it’s similar to like a CSS flexbox just in a design program. And we’ve really seen this being used recently in some of the projects that we’ve worked on where typically, you know, we have maybe 10 to 20 layouts given a project.

And so we create all the layouts and typically if we needed to make a change to a certain block, we’d have to go through every single page where that block is located and make the change manually and then you’d have to manually resize, the frame, bring all the elements back together, so they have the appropriate sizing and I realized that that took a lot of time to do. And so just applying auto layout to some of the components. Let’s just say, we wanted to add Additional, you know, products on a product role in the design, all I would have to do is just drop them in everything would resize perfectly and there’s no additional work that needs to be done. And I think as designers and especially figma designers start seeing how they’re improving the auto layout feature.

I mean, they started on the V1 feature, which brought some of those elements in, but it was still restrictive. And I think a couple months ago, they released me to and they’re actually starting on V3. I seen on Twitter and so they’re going to be bringing some even additional elements. So that but It is such a powerful tool to have and it makes doing iterations of your designs a lot faster.

3:37:25 pm – You:

That’s awesome. That’s cool. Yeah, I certainly feel like that is also another feature. That’s that. Yeah, big standout. And you know what is kind of available in sketch as well? You know, in full transparency, I guess. You know, they, they definitely have some of those kind of features. But I, I feel like in figma. It’s also it’s very intuitive and, and definitely easy to use and certainly for, yeah, whether it be expanding designs, you know, you know, making a designs more efficient and effective as you kind of create iterations as you mentioned, absolutely. Like, I definitely I feel like it works out pretty well. Um, so I, I guess are there any other features, you know, you feel like that are important to touch on

3:38:06 pm – Alex Shaw:

I I really think the the main thing and it’s not really necessarily a one feature kind of aspect, but it seems to be figma is an almost an all-in-one tool. And I I say that with air quotes because there’s certain things that it is restrictive on, of course, video editing you obviously, it’s not a video editing tool. However, you know, because it is a Web design tool There’s a lot of elements that you can do from that. And one of them is creating really nice, working prototypes, which we’ve used for clients quite often and it’s actually it’s, it really does bring on a wow factor When you think about your inner design program, there’s no code to it and you could see that if I click this button and animation happens and it’s something that really does bring your designs to life right in figma.

And so, going off of that, there’s also the ability to obviously create vector images in vector designs. Which is something that sketched was known for not doing very well on, you know, typically when you use sketch, a lot of people also use Illustrator in tandem with it. And so, I know that, you know, working at other companies that, you know, if we needed icons or other illustrations, we open Illustrator Try to save them out as svgs and then import them into sketch and sometimes, you know, importing them messes up the file.

But in figma, a lot of people have actually transitioned to just designing icons straight in figma and this is something that I’ve actually done it was It’s a little nerve-racking at first because you’re used to illustrator if you design icons quite often and it’s very good at doing that but figma has these things called vector networks, which are essentially, you know, the way vectors typically work is you have to go from, you know, point A to point B and then you have to connect it somewhere. Whereas figma’s vector networks, really allow you to Create complex shapes without having to reconnect the vectors.

And there are tons of examples of people on Twitter creating like insane illustrations just in Figma. And so I I just think the vectors alone is just a standout feature but they’re plug in support allows you to bring in other plugins that maybe you want to create a 3D image or maybe you want to create or do some photo editing or even bringing, you know, a gif and create a GIF. There are multiple things that you can do in Figma. So I I do think it it’s turning into almost an all-in-one you know, editing program So if I would have had to say just an all-encompassing feature, is that it’s very versatile in whatever you can do with it.

3:41:14 pm – You:

That’s awesome. Okay, cool. Well I I think, you know, the the features are definitely there’s there’s, you know, quite a few. But I feel like that, you know, touching on those you know big ones is is certainly important, especially, for like, design organizations and, you know, first and foremost, the collaboration part and especially for like, you know, remote people. But yeah, definitely things that can kind of enhance. It being all in one tool, especially when you’re considering ditching. Know, maybe another tool that you had formerly used now that you can’t, you know, also use something like Sketch.

It could be duplicative to a certain extent, but like if you’re using something like Photoshop abandoning tools, you could be very familiar with moving to something else, you’re like, Oh, am I going to be able to do this, or this, or this, but it’s also it’s good to know that, you know, somebody who’s in it and doing it on a daily basis. Obviously those things exist and they’re easy to use and, and the transition it isn’t too rough. So I guess that does kind of lead us to like, you know, other things just about it in general and, and maybe, you know, the community aspect of it.

I, you know, this is kind of like the reason why we use WordPress, not only did we think it was a great cms and they have absolutely, you know, kind of wonderful, you know, ability to, you know, improve it and customize it and build it from the ground up. And we’ve been leveraging the WordPress platform for 12 years but really having a good community around something. Can mean the world, especially when you’re Looking for support for very very niche issues. So anyway, I guess. Yeah, that was something that I know you had told me before that the community something that that drew you to it.

3:42:55 pm – Alex Shaw:

Yeah, especially you know, I I am not so active on Twitter but when I realized that the figma community is active on Twitter and their designers and developers are always listening, it actually brought me on the platform and so most of the people I follow advocate for figma or, you know, actively create plugins or assets for it. Something that, you know, along the lines of the plugins that they have on figma, they actually introduce a community tab and so community members, whether that is somebody that does work at figma or just a completely random designer or developer can jump in there, they can share files. And and something that is quite often, you know, used is obviously browser assets, you know, recreating the Google Chrome asset recreating maybe Mac OS.

Obviously, it would take a lot of time for every designer to do that on their own. And there are a lot of great people in the community who have just shared those files for everybody and it’s files that I use quite often. So the community aspect in figma itself is fantastic, you can download plugins, you can follow people see what people have created.

That aspect is good on its own, but the the meat of it really comes in Twitter when we talk about figma themselves, interacting with a lot of the users, they actually implemented something where if you actually tweet figma a certain feature, if it gets enough likes on it, they will actually implement the feature, which I feel like there could be some cons to that. Obviously, they’re not going to do anything. That’s crazy but there have been some

3:44:48 pm – You:

Is this like Elon musk’s investments? You know, that you you two interview gets enough likes and then eventually they’ll put it. Yeah, I know, no matter how crazy.

3:44:56 pm – Alex Shaw:

It. Yes, actually. That’s now that you mentioned it reminds me of that because I, I know people have have tweeted elon musk of. I want this feature on the Tesla and he’s like, okay, we’ll implement it tomorrow. Not that they’re that famous with implementing stuff, but there are certain features in figma or even certain like quality of life changes that, you know, people have requested and they’ve allowed that to be implemented on on figma.

So they really do listen to their customers, which is something that It tracks me to certain companies. I know there are some companies that are just wall you know? And they don’t listen to the customers at all but Figma really seems to be engaging into it and it’s a really nice to see especially in the design community.

3:45:47 pm – You:

That’s cool. Well you touched on plugins too just a little bit and certainly I know that’s another kind of big highlight you know not necessarily of the program in and of itself but obviously the extensions of it, you know? And the plugins can do. So many different things. Like a ridiculous amount of plugins that can be added to figma in order to, you know. Yeah. Whether it be like prototyping, but I mean like, Yeah. The list is vast. But I think if you could hone in on. Yeah, just a few of like your favorites. What? What are those

3:46:21 pm – Alex Shaw:

oh, so like you mentioned, there are tons of plugins and I think what’s really nice is that people anybody can really create a plug-in for any reason at all. I mean, they’re plugins for if you wanted to add lorem ipsum text, and so the design, there’s a plugin for that. But the three that really stand out to me is femur is one of them, which I have previously used at my last job at Claire’s and it kind of has you know the intent in the name in that you can easily create a theme and apply it to your designs.

And I think these easiest example of this is, Let’s just say we’re talking about like a light mode in a dark mode if you’re creating an app. For instance, if you create the styles like you know when you actually name the styles and save them to Figma, Let’s just say you wanted to create the style of font color or background color and you save those styles as maybe white as the background color and black. As, you know, the font color.

Obviously, if you had a ridiculous amount of app designs going through and changing all that to a dark mode, would take a long time with this plugin, you can actually Apply a dark mode style and it will automatically switch out all the colors and change them from white to dark mode. And it has saved to me a lot of time, especially if I am working with the same design, but obviously, different brand colors is really where that feature comes into play and the plugin is actually built by a figma employee.

So essentially that they promise that it would always be updated because that is a common thing with plugins is that if you get to attached to a plug-in, you don’t know how long it’s going to be, you know, updated for and so at least with a lot of these plugins They are built by prominent you know community leaders in figma or interest in the design community but I think femur is a really good plugin if you need to quickly change styles.

3:48:38 pm – You:

That’s awesome, okay? Well, as far as plugins, the really, you know, that that you know That’s awesome. Well as far as plugins, the really you know that that you know kind of sets the bar, but I think you know That’s awesome. Okay? you know that that you know kind of sets the bar, but I think you know That’s awesome, okay? Okay? you know that that you know kind of sets the bar, but I think you know sets the bar but I think you know you would touch on a couple others like you know maybe fig motion and Automator.

3:49:00 pm – Alex Shaw:

Yeah. So fig motion, like I touched on before, you know, you can prototype in Figma but there are Yeah, so fig motion, like I touched on before, you know, you can prototype in figma, but there are certain limits. Obviously a lot of people use Adobe After Effects for a lot of the prototype prototyping and even some other software that specifically touches Yeah. on before, you know, you can prototype in figma, but there are certain limits.

Obviously, a lot of people use Adobe After Effects for a lot of the prototype prototyping and even some other software that specifically touches on prototyping, but fig motion brings in a lot of the cool elements such as like keyframes and Bezier curves that you can utilize in figma and then export that out. As a JSON file that can be used for coding, which is really nice.

But also you can use that to save out and show a client what a particular, you know, APP interaction would be and so it does enhance the prototyping a little bit. Of course, if you’re somebody who is used to After Effects, Probably should keep you know using After Effects. There are still some limitations but it kind of just adds on to that.

The bigger one though is Automator, and I left this one for last because this is probably the most exciting plugin that I’ve ever ran into, and it was actually so exciting. That I bought the full license for it. Myself, for, you know, personal use. So essentially, Automator allows you to create automated systems using if-then statements. I’m not sure if you’re familiar with like Ifttt or US.

3:50:32 pm – You:

Of course. Oh yeah.

3:50:34 pm – Alex Shaw:

Yes. So it uses that kind of same idea but then applies, it’s a figma. So you can set certain elements like if this happens do this and The stuff I’ve seen being able to create out of this is endless. I’ve seen simple things such as like you know, quickly creating a component out of, you know certain frames all the way to you can actually import either an API or you can actually import.

Let’s just say in Excel sheets that has information. Like if we were talking about shoes, you know, you could have the shoe name, the shoe price, and maybe the size, all that implemented in an Excel sheet, you can put it into this plugin and it will automatically add in the photo and all that information directly into the design without having to type anything.

3:51:33 pm – You:

That is awesome.

3:51:35 pm – Alex Shaw:

um, yeah, so that that is some of the the crazy things that you can do with it and the Creator once again, Um, yeah. the crazy things that you can do with crazy things that you can do with it And the Creator once again, has been big in the Figma community and they have promised that Automator is actually going to be updated for.

As long as they are in the community. And so it seems like it’s probably not gonna, you know, get any, it’s not going to stop updates anytime soon but as of right now, the free version you can only do two Automations and then you’re restricted. Whereas I believe it is $80 and you can actually have unlimited lifetime Automations so,

3:52:19 pm – You:

That that’s awesome. You know, it kind of brings, you know, into that like, you know, bigger topic of like thinking about like, you know, design almost in a programmatic sense, but not to make it, you know, kind of banal or washed out or too repeated. But it’s literally the consistency that, you know, people are looking for want to see in design to where, you know, and and not to mention, it’s the efficiency. So you’re not repeating every step, you know, and and having to yeah, manually.

Fill in content. Maybe where you wouldn’t have to, but I definitely I see a lot of potential value to that. I know that obviously we’ve been, you know, really big on glowing about all the wonderful things that figma can do. But you know do you see any downsides to figma, you know, or using it in general? Like in anything that you Like is just maybe, you know, not wonderful.

3:53:07 pm – Alex Shaw:

Yeah, so even going back to what we talked about, like, sketch being a native app. The pro to that is a native app, whereas Figma is a chromium based web app, and so the parts of that is obviously, it can be used in the browser, which we have, I have talked personally, with some of our team members, which they absolutely love being able to use and just being able to save it in their browser and being able to open it anytime. The downside of that is because it is chromebase and is because it is browser based. It does eat up a lot of memory, which is something that I, I sort of ran into at a previous job where we had an insane amount of components in a figma file.

And at the time Figma hadn’t released certain features that would allow us to create variants of certain components. So we had to make a separate component for each variance of. Let’s just say a button that we wanted to create. And so will we ran into is that eventually when the file got so big? And we’re talking about thousand plus components in the file. That there’s actually a memory limit that figma implements because it is a chromium based app. And so, when we realize that we had to actually separate certain components out into a separate figma file.

Now, Figma has introduced a lot of features like I said, with the variance to kind of minimize that, but if you’re somebody, that would potentially have thousands of components in a single figma file. That’s probably not the best way to go about it and you probably will hit some kind of memory cap.

3:54:53 pm – You:

Yeah, certainly definitely, you know, understand software limitations, but at the same time can be potentially, you know, problematic. That is definitely not Yeah. understand software limitations, but understand software limitations, but at the same time can be potentially, you know, problematic. That is definitely not

3:55:19 pm – Alex Shaw:

oh,

3:55:20 pm – You:

Yeah, but anyway, I guess all that being said that, you know, certainly there’s there’s still, you know, can only downsides to everything but for the most part, you know, we’ve certainly enjoyed, you know, all the, you know, kind of major upsides that we’ve had to it. So anyway, I guess that kind of brings us to, you know, maybe one of the last, you know, things which is really the, the Dev team.

I know that. Obviously, you introduced this to them as being a big kind of improvement, potentially universes sketch as to how they could. Interact with it exporting, You know, assets out of it. And and I know there definitely again, some similarities there, you know, but at the same time, you know, we’ve certainly gotten our Dev team on board with it. They seem to love it as well. So yeah. Anything else that you feel like is super important to note about Dev teams, you know, kind of using or leveraging figma files.

3:56:12 pm – Alex Shaw:

Yeah, so I’ll say that. While Sketch does have the collaboration aspect to it which actually they just release like about a year ago so they’re very late to the party for that regard. But also I realized that there are certain limitations for sketch in that regard. So because figma is browser-based and is chromium based. Anybody can access the file at any time because you don’t need to be on necessarily a Mac or Windows computer or Linux, really, anything that has a browser, you can access a figma file in which has been amazing especially when we send it to clients whereas sketch.

You actually need to have the latest native app downloaded and everybody working in the file needs to have that same version or else they can’t collaborate on there. Whereas because Figma doesn’t really necessarily have native updates in that regard. Anybody can jump in the file and you can see them working. Of course, we we have a limited amount of editors, but when it comes to our developers or anybody else on the team or even clients, they’re able to go in there, see us working in real time and be able to pull out assets. Whether that is actual design assets?

Or even the code they can pull from figma, You know? It’s, it’s always nerve-racking when you talk to developers about switching completely switching to a different program. I think people get used to the workflow of a certain program and you really do have to convince them on being able to switch. And I think even them just diving into figma and seeing everybody in there. A real-time being able to comment on the files and comment on the designs.

I didn’t have to do much work to sell them on that and as far as I know, they’ve been overjoyed by being in Figma and I don’t think anybody is sad necessarily for moving from sketch to figma.

3:58:28 pm – You:

I’m definitely. Yeah, I I know also too personally with some of those interactions of just increased, documentation. Definitely the ability to make comments and stuff on the back end, it has. It’s been, it’s been really nice, you know, sort of like the workflow and stuff that we’ve established between design development in order to, you know, make sure that.

Yeah, not only was it a smooth transition, but it’s still, you know, kind of had lasting benefits and stuff for us too. So you know, all in all obviously. Yeah, I guess you give it your resounding endorsement, huh?

3:59:00 pm – Alex Shaw:

Idea, I do and I know there is an internal joke of the last two teams I have been on. I have actually convinced everybody to switch from sketch to figma. Not that I obviously just wholeheartedly think that Skip or Figma is the best thing in the world, but I think at the end of the day, it

3:59:32 pm – You:

Mm-hmm.

4:00:11 pm – You:

That’s awesome. Well, cool. Well Alex, I have to tell you, thank you so much. I know obviously, not only introducing this, you know, to our team but also for telling, you know, everybody else a little bit about it too. And so just for, you know, in general, this is the first of hopefully many podcasts and kind of video podcasts that we’ll basically do for our company. Not only exposing some of the tools that we use, but just about, you know, agency life, all sorts of stuff, can’t wait to bring more content to you. Only thank you. Again. My name is Brent Feldman. Alex, thank you.

4:00:48 pm – Alex Shaw:

Thank you.

4:00:49 pm – You:

Yeah. All right. Have a good one. Bye.

---