00:00 Matt: Welcome to Podcast Awesome, where we chat about icons, design, tech, business, and nerdery with members of the Font Awesome team.

00:29 Matt: I'm your host, Matt Johnson. In this podcast, we catch up with Jory Raphael and Noah Jacobus, the design team here at Font Awesome.

00:38 Matt: We talk about how they started using Figma a couple years ago and how the switch has made their work easier.

00:47 MATT: Jory, what software have you used to design your icons and how has that changed over the years?

01:01 JORY: The first icons I ever designed were in Mac Paint, really, if we want to go that far back. But professionally, Adobe Illustrator was the primary design tool that I was using to design icons up until a few years ago. It's the powerhouse of vector editing software, really, out there. You can do a lot with it, just like all of Adobe's apps. You can do a ton with it. But icon design is kind of a niche field.

01:36 JORY: The simple answer is Adobe Illustrator is where I started and where I, for the majority of my design, icon design career, that's where icons lived for me.

01:48 MATT: You've made a change recently to Figma and it sounds like maybe Noah helped inform your thinking about that. How did that conversation come about?

01:59 JORY: Noah is entirely responsible for us moving to Figma. And then ultimately, because of that, now he's on the Font Awesome team. I was using Illustrator for everything and there were just some quirks with it that were hard to overcome as far as icon management went.

02:22 JORY: Font Awesome in particular, because we have so many icons, knowing where those icons lived or dividing them up into multiple categories started to become really, really cumbersome. Because in the early days of Illustrator, there was a 100 artboard limit and I was using artboards to kind of define a single icon. So I'd have an icon per artboard, which made it easier to export them ultimately into SVGs.

02:47 JORY: But when you have an icon set with thousands of icons in it, once you hit that 100 artboard limit, you have to make some decisions. And so are you going to categorize each file, have multiple files for the whole set? Or you're not going to use artboards or whatnot? And then I was actually a little while ago looking through some of my Twitter history and I have multiple tweets about that limit, that 100 artboard limit that I kept hitting up against it over and over and over again.

03:18 JORY: And then finally, Illustrator increased that number to a thousand, which was great. The issue with that was that I had already surpassed a thousand icons in my personal sets that I'd been designing and Font Awesome, etc. So those same decisions, it delayed some of the decisions we had to make as far as organization went, but kind of just kept struggling with it and knowing where something would live.

03:43 JORY: And throughout this, I started catching little drifts and whispers of people using Figma for icon design. And Noah was one of those and kind of one of the leaders in the field, I would say, as far as embracing Figma for icon design in particular. And it's a great program and it does a lot more than just icon design, but there's just something, there was something lovely about it.

04:09 JORY: And maybe I'll ask you the question, Noah, specifically, when did you start using Figma for icon design and what drew you to it? Because you're, yeah, because I started using Figma for icon design after watching you doing it and getting some tips and tricks from you and how it came about.

04: NOAH: Yeah. If I'm being honest, it actually was kind of born out of laziness to a degree because at the time that Figma was gaining a lot of traction and kind of becoming a big thing,  I was still doing a lot of my icon work in Illustrator, just like you were.

04:45 NOAH: But I was also doing a lot of product design in a kind of in concert with that craft. I hadn't fully moved over to being a specialist at my previous job yet. When it came time to actually place my work in context and test things out in terms of the icons, it became much easier to eventually just start doing all the work in Figma to kind of cut down on a lot of steps.

And that went through a few kind of rounds of testing initially to see if this would even be a feasible replacement for Illustrator for me.

05:21 NOAH: But yeah, a lot of the ease of the drawing tools and the vector networks and then a lot of the non-destructive aspects of shape creation that I'm sure we'll get into are what really made it stick for me.

05:38 NOAH: And the ability to easily test things in the context of digital products is kind of where it found its place for me.

05:47JORY: Yeah, I find it pretty interesting because there's a, you know, it's not about the tools,  right? I forget, what's the phrase that people use around that? The tools don't matter per se, but there's a, you get in the habit of using a particular  tool. And I was really in the habit of using Illustrator.I knew its in and outs and I knew its quirks and I had ways around those quirks and I had all my keyboard shortcuts done and I could press shift F5 and I would do a pathfinder command to merge things into a single shape. And I had kind of all those memorized and it was almost second nature to me as far as icon design went.

06:34 JORY: You know, I can design icons in Illustrator, I can design icons in Figma, I can design icons on a piece of paper, that's fine. But what started to become really appealing to me about Figma was, as Noah said, some of the, well, number one, the simplicity of collaboration, which is now super important because we have multiple icon designers at Font Awesome, but also some of their unique takes on doing things with vectors.

07:00 JORY: And Noah mentioned the Boolean groups and the other operations they have for merging things well. Kind of the most important thing is keeping them non-destructive. And by that, I mean that we can design something with strokes and subtractions and all these kind of complex shapes.

07:21 JORY: And then if we decide, we can export that and use it in SVG, and then if we decide to make any changes to it, we don't have to go back and recreate the original drawing, we don't have to redraw it. And I was finding that with Illustrator, I was having to do that.

07:36 JORY: Where like a great example is, in Illustrator when we started work on Font Awesome 6 and I was designing the Thin icons, I had all of our existing icons in Illustrator and I would go in and kind of duplicate layers and redraw every single icon. So I'd have to redraw every single stroke and it was a beast.

07:56 JORY: And then if I ever, you know, when you're designing multiple icons or huge groups of them, a choice you make early on in your design process may not, you may make a new one later after you've experienced the designing of multiple icons and you're like, oh, you know this type of element really needs a bit more of a corner radius.

08:18 JORY: So then you have to go back in and change that on every single icon you'd already created up to that point. Because Illustrator is destructive, and it's not destructive, you can do it however you want. You can kind of make a non-destructive thing and do a duplicate and blah blah blah.

08:32 JORY: But Figma, the, I don't know how I want to say this, the like end result icon, you can export it and it works just like a completely flattened SVG, but then you can go back in and make edits. I used Illustrator for the redesign of Font Awesome for Font Awesome 6, the first pass edit, the updated, some updates to the styles, adding the new thin style. I kind of completed everything within Illustrator and we shipped it. And all was right with the world.

09:07 JORY: We made a slight tactical mistake of announcing our new sharp icons before they were completely done.And I had kind of played around in Illustrator with some things we wanted to do the sharp icons, but I quickly realized that if we wanted to get these out the door in any timely fashion, I was going to need some help.

09:27 JORY: And so I put the call out to some icon designers that I knew and admired to see if they could help us with the project of getting the sharp icons out the door. At the time, Noah was way too busy to actually help me on that. But what he did do was say, hey, if I were to do this, here's how it might look and here's how I might do it. And he shared a Figma file. And in that Figma file were some of the icons I had done originally and some sharp variants of them that he had created in Figma. And he said, do with these what you will. I took them and I looked at them and it was so fun to be able to manipulate them and kind of see the choices Noah had made to create those versions of the icons. And honestly, that was one of my main impetuses for kind of jumping in and trying it out more, was the icons that Noah had handed me that first pass to the sharp ones.

10:22 JORY: And so, Matt, I don't know if you're on the team yet, but I put together a big old pitch and like convincing people that it was worth the time and effort to make the full switch to Figma. And so we started doing that and slowly started bringing the old icons in and redrawing them in Figma.

10:42 JORY: And then ultimately, I was able to trick Noah into spending some more time on the sharp icons. And then after that, you know, pulled the old one, two and got him, one, two, three, whatever the phrase is, and got him to join the team full time.

10:58 NOAH: Nice. Well, it actually felt a little bit like some sort of blockbuster movie where it was kind of like, you know, I was made for this. This is why I exist. Because just previous to that, I had been starting work on a personal project for myself that was Sharp-icon based.

11:15 NOAH: And so I'd already been getting in a little bit of practice kind of figuring out some

stylistic attributes around that sort of thing, and had been drawing those in Figma and had kind of released it kind of as a first step.

11:27 NOAH: And so I was already kind of very much ingrained in sharp, chunky icon world. And so that made that switch pretty smooth. And what's interesting too is like when I made this, this is a, you know, to talk about what's going on in the world right now.

11:58 NOAH: When I made the switch to Figma, it very much felt like, okay, I'm putting Illustrator behind me and I'm coming into a new company and a new software program, and we're working this now.

12:09 NOAH:And now Adobe owns Figma. So you know, who knows how the tools will merge in the future or if there's going to be, what changes are going to come about because of it.

12:23 MATT: And it seemed like on Twitter, you know, there were very strong opinions about that. What is your guys' take on that acquisition?

12:31 NOAH: I am usually a little bit wary of Adobe acquisitions of things. They've made some very smart ones and have supported them well. And there have also been some that have been killed because of the acquisition in some ways or left to kind of shrivel up and die on their own. I think that Figma is enough of a powerhouse kind of on its own that that's not going to happen with the employees there and the community, especially as such a huge force with a lot of momentum behind it that helps support the product and keeps it moving.

13:09 NOAH: So my gut would say that there are a lot of things that Figma does really well that are going to make their way into Creative Suite in some capacity rather than the other way around. I don't anticipate a ton of Adobe bloat coming into Figma, but I could be wrong. I would love to see some of the things that Illustrator does really well coming into Figma.

13:37 JORY: If we could get some of the more advanced drawing tools that are available in there, like a map on a path, all different kinds of things like that. At this stage, I'm cautiously optimistic about it.

14:12 MATT: Jory, you wrote a post a while back about the 10 reasons why we moved all of the icon design to Figma.And are there any key points that you would want to highlight from that article?

14:27 JORY: Sure, Matt, do you want me to just read it verbatim? Should that just be this podcast, me just going through 10 reasons we switched to Figma for icon design?

14:39 JORY: August 3rd, 2021. Well, we mentioned it a few times already, but the Boolean operations is probably the biggest reason I wanted to make this switch. And it's just a great, great feature in Figma.

14:57 NOAH: No, I'm going to put you on the spot and ask you to describe what a Boolean operation is.

5:02 NOAH: Sure. I'm pretty sure in like mathematics, there is a different definition that I am not aware of. But in Figma, at least Boolean operations allow you to control how two different nodes interact with each other. In the Figma sense, nodes are typically what we might think of as layers or separate vector objects or something like that.

15:24 NOAH: So you can use a Boolean group in a few different ways to determine how those two things interact with each other if they're touching or overlapping in some way. So you can choose to combine them together into one thing or knock out one shape from another shape or highlight the areas that they overlap and things like that.

15:46 NOAH: So it's basically determining how they're going to interact with each other. And one of the things that again makes Boolean operations in Figma so cool is that you can

make them and then you can undo them. We can go back and shift things about them. And you could do that in Illustrator at a certain level, but it was more difficult, number one. And I never knew what button to press to what rules it was following.

16:15 NOAH: Yeah, so Boolean operations are one of the biggest ones. And a really cool thing with that too specifically is that you can combine stroked paths with shapes. So you can have in the blog post there, I have a little graphic, but basically you could have a circle and you could cut out a stroked clock hand from the center of it to make a  little clock.

16:45 NOAh: And then if you decide, oh, you know what, that stroke should be thicker, you can go in and increase the width of that stroke and then the shape stays compound Boolean combined and all that.So it's kind of a unique way of treating stroked objects like their actual shapes at the same time. Which is not something I've seen done well in some other software.

Like even some more competitive stuff like I've visited Sketch again every now and then to see how it does.

17:21 NOAH: Because I know I have some icon designer friends who swear by it as well. And to your point, as Jory said.All the software is good and it's different in its own. All of these pieces of software are good in their own different ways. And they can do a lot of things that all the other ones can do too. But that is something that it can't do. And so that really hampered my flow when I was trying to recreate some things in it. So it's a nice more unique feature.

17:48 JORY: Yeah, it's a really unique feature. Another piece that's really nice about Figma is that again on the talking about strokes is that you can have different endpoints on a stroke.So like one side of the stroke you've drawn a little line. But like you got a single line, a line and on one end.

18:15 MATT: Jory is drawing a line in the sky right now listeners.

18:18 JORY: And on one end you can have a rounded cap. So the shape of the line kind of curves at one side. And then the other end you can have it a square cap and you just have a cut straight off. And being able to identify each of those, you know, every element of a stroke shape or path and make adjustments to it that way is pretty cool. And I don't see that in other vector editing programs either.

18:43 JORY: It's often either all or nothing. You got a line and it's going to be rounded corners or rounded end caps on either side and you got to live with it. You can kind of be very specific in Figma about tapping on a point and adjusting that one individually. Which is cool.

19:10 NOAh: Yeah, probably one of my favorite features, especially something that we've taken advantage of a lot as we've been working on Sharp.I mean, they've been very useful throughout the entirety of Font Awesome Classic.

But as we are essentially doubling the icon count these days and working on new stuff, the use of components and instances is one of the things that's really saved my bacon, especially working on Sharp and kind of in concert with this non-destructive boolean stuff because we can essentially take a component of some sort of a base icon, whether that's, you know, if we have some kind of a generic car or a house, something that's reused a lot in different icons, we can kind of take that foundation, that main icon, and then either subtract pieces from it or add more pieces to it, whether they be kind of one off pieces, like in the case of some of these visual examples from the piece that we referenced earlier, if you were making a car into a taxi and you wanted to add a little taxi sign on top of it, you could and then combine the component that you had of the car with that piece into a brand new boolean that is exportable as a flat object. So being able to easily create and edit a lot of these additional pieces that we can combine with kind of a foundation saves a ton of time.

20:45 JORY: Right. And then if you go in and you decide like, oh, this car, base car icon would be improved if it's, you know, the corner was a little bit more rounded here or the wheel was moved out or whatever, you could make that change to the base component and it would cascade through all the other icons that use that same component, which is really, yeah, saved a lot of time.That's lovely.

21:11 JORY: I mentioned commenting in the post, but I will just go a step farther and just say collaboration within Figma is pretty great. And the fact that Figma has become kind of the central place where we keep all of our designs and things versus a kind of static file that used to live on my computer or live, you know, in the cloud and Dropbox or something. And I would be editing it and I'd save it and then, you know, Noah would have to come in and open that same file and make changes to it or have his own duplicated version of it and drop things in.Figma is a central place where we can both work in the same file at the same time.

21:49 JORY: If I make a change, he sees it. There's a history so we can kind of undo things if we need to. One of the flows we have right now is Noah's been working on a lot of the Sharp icons and I can come in and leave little comments on them and, you know, without actually changing anything if I don't want. So that's been great. Just the collaborative aspect of that.

And then, you know, it also gives a place for people who aren't icon designers in the kind of pop in every now and then and kind of see what's going on.

22:25 MATT: And yeah, I love that function. I mean, I've created some really simple stuff. You know, you guys have created some templates for me and if I have to do some social images or something like that, I'll pop in there. And you know, I've had questions at times about how to make certain changes and the ability for you to just pop in there on the fly and actually show me in real time is pretty awesome.

22:51 JORY: Well, so we talk about plugins like there are a ton of developers out there who've created for Figma that enhances its functionality. And we talk about how many great things Figma can already do and how many cool things already kind of built in. But there are also all these little unique things that people can really easily build a plugin for. And that ecosystem is pretty great. For a while, we actually had our own plugin that we built. And we've made some promises that we'll release it to the community and hopefully we'll do that at some point.

23:38 JORY: But we built a plugin to aid in our process internally. And I use all sorts of other people's plugins to select layers, kind of batch rename a bunch of things, organize things in grids. There are just tons of things that are out there that if you run into an issue, someone run into it already and there's probably a plugin that exists to fix it or address it, which is awesome.

24:11 NOAH: Should I put you on the spot right now, Jory, and ask, are we going to make a Font Awesome plugin for people to be able to link to their pro accounts and pull in icons directly from there?

24:34 JORY: In however binding a podcast conversation can be, I will tentatively say, yes, I would love to. Yeah, I'll leave it at that. I'll say yes, I would love to. We actually, the way folks would need to link their pro accounts is, you know, we have this feature in Font Awesome called Kits, which is basically your like your own individual version of Font Awesome. And we are, we allow you to upload your own custom icons to it. And there's a lot of more, a lot more things coming to that soon. But the ability to kind of link that Kit up to all sorts of services is, you know, would be so awesome. So yeah, I'd love to do that. And I guess I guess we've committed to it on this podcast. So I'll say yes, I don't know when.

25:28 NOAH: It's the new Sharp. It's out there.

25:30 JORY: Oh, I walked right into that!

25:42 Jory: I'll say one final kind of nerdy thing about Figma and icon design is that kind of the core, how do I put this? We create SVGs ultimately. The base of our icons is an SVG file.

And that SVG file for Font Awesome anyway, is what we upload into our build system, which

then creates the icon fonts we use and then spits out the SVGs for our SVG thing. So the SVG is the core, it's like the kernel of the icon that we're creating. And Figma, whatever black magic they're doing, we need to get icons from Figma to a desktop file that we can then upload to the build system.

26:27 JORY: And ultimately, we're actually going to build a plugin that we can kind of shoot it directly from Figma to our build system without that intermediary step. But there is some black magic going on where you can export thousands of icons, SVGs from Figma in like the blink of an eye.It doesn't hang it like they're all there immediately. And it is … it has saved so much time versus the old way of doing things.

26:55 Matt: But black magic kind of creeps me out. I was kind of hoping for white magic.

27:00 NOAH: It's a little friendlier.

27:01 JORY: I'm going to go to rainbow magic then.

27:06 NOAH: Rainbow magic.

27:07 Matt: So Figma has rainbow magic.  It might go a little bit better with our brand anyway.

27:17 JORY: Keep Noah's snort in there too, please.

27:24 MATT: Thanks for listening in to Podcast Awesome. A special thank you to Jory and Noah for coming on the show. If you like what you've heard, please give us a rating and review and share this episode with your nerd friends. This episode was produced and edited by yours truly, Matt Johnson. The Font Awesome theme song was composed by Ronnie Martin and audio mastering was done by Chris Ems at Lemon Productions. The Font Awesome theme song was produced and edited by Ronnie Martin and audio mastering