Friends on the frontend (Friends)

33:02you said you're coming off a high what did you build so we built the opine website tryopine.com uh in in framer and how many people were involved in this project uh i did all the the design on it we worked with a company fletch uh they're also based in texas on the homepage copy, but everything else I wrote or designed on the site. So everything you see at tryopine.com is you. That's right. Aside from copy. And I mean, you can see the sort of scroll animations and things like that. And we did, we did, it was really interesting. This is what I'm saying. It's hard to prototype interactions. we did actually more complicated animations in Framer.

33:53And as we were talking about it, the founders and I, we kind of backed away from it because we, it was feeling like we were hijacking the scroll bar. I don't know if you've ever been on a site where you scroll and like, it just, everything's like, you know, reacting to it. But, but that, I mean, I say that because you can go overboard with it. And I don't know how I would have articulated to a developer to build the site without having a lot of back and forth and iterations and things like that. And just being able to get that instant feedback of designing it in the tool. The other thing that's interesting there is they have an import from Figma.

34:45which is pretty good. And it basically turns all your Figma stuff into devs and with borders and a little bit of SVG code here and there. And what's really interesting about that is you can build responsive screenshots in a way that if you had screenshot them or exported them to PNG or even SVG, like you can't quite achieve um so on both of those sides like i'm pretty stoked about like what we were able to achieve without development in the tool so i mean just browsing the site i mean not that i'm trying to um say that framer or webflow or tools like this are bad but I can't tell that it's not a hand-coded kind of front-end marketing site.

35:44It's not easy to tell that it's something more simple, I suppose. Or maybe you can speak to the, in quotes, more simple that I'm suggesting. I'd imagine it's just as hard because you've got to put the design work into it. You probably have less control over everything. and so maybe it's actually slightly harder than hand rolling your own code to get to the result. Was there much code involved in building this slide out? This one, they have something called a behavior and there were a couple of little things that I had to work around.

36:24Framer stuff with like a, I don't know, a 10 line behavior. is um what's the language for that behavior it's it's javascript um obviously right it's kind of like um uh i think it's basically what do they call that uh it's uh in react where you compose components by like they call them higher order components so that's how you dedicate you decorate things if I'm using the right terms. This is what I'm saying. So I come to React and I enjoy using just React, the library. I've never used state management stuff, things like that. And I know JavaScript very well. And I love using just React on its own.

37:15It's such a beautiful little library. it feels like jQuery to me. And I have a lot of joy using it. There's so little code required to pull off interactive things. It's crazy with it. But then when you try and do it in Framer, you kind of have to learn the Framer way. And it does use some of the things that I'm less familiar with. So, yeah. But Framer has so much that's just available from drag and drop. sort of perspective. It's interesting too, like I run across designers that don't use auto layout in Figma, right? And auto layout is just like Figma's version of Flexbox, right? And Framer is built on auto layout, right?

38:08Because you're actually trying to build something responsive, essentially. So there is a little bit of a change to it when you go to the tool. But if you're not used to drawing in Figma with auto layout and building things in Figma with auto layout, then you'll have to change that as you learn how to use Framer. Framer does have absolute positioning. You can do that, but of course, you don't want to absolute position everything. Your website will be a nightmare to maintain, right? Right. See, this is where I think having that background in CSS makes sense. Somebody who doesn't come to a tool like Framer, like I actually came up in the day whenever you would absolutely position, you wouldn't absolutely position everything, but you would float everything.

38:59The whole layout was float-based. That's right. This is prior to the new tools these kids have these days, you know what I'm saying? Like the best era of CSS is today, in my opinion, but it's still hard. yeah it's still hard and i think it's a little more overwhelming than it was um i guess there was a lot of things in the beginning with css that it was the beginning you would come across somebody's site and you'd be like whoa how did they achieve that and then you'd look at it and it'd be like oh it's all floats everywhere this is weird why would they do that that's so gross and then you'd start doing it right i mean i remember reading the book who wrote the book There was a famous book, I want to say, pre-2010.

39:44I'll find it, and I'll put it in the show notes, because it's the oldest of old school books. Yeah, yeah. Are you talking about Mike Myers? No, not Mike Myers. It was like a black and white book. It read more like a novel than a CSS training tutorial book. I might even still have it in the library. Mike Myers. but Mike Myers I think you're talking about Eric Myers so Eric Myers was the godfather I think still might be of CSS and I think you and I both came up in the days whenever the industry was transitioning from tables literally from tables yeah so some of the first websites I did were in the new mindset right so using CSS for layout essentially that was unheard of it was just it It was just formatting, just decoration for a little while, if you use it at all.

40:38It was always in the head of the document. There wasn't a separate document that was strictly for the CSS. And then it became, well, no, tables is the old way. We have screen readers, so we have to, you know, screen readers can't read tables well. And you need to do all these different things. And then you had Web Standards and Jeffrey Zeldman and all these things that popped up. And then you had even things like, what was it called? Microformats. Remember Microformats? Yeah, microformats are still around. They're still around, yeah. Now you just sort of like, you know, expect that to be metadata that you, I don't even know how it gets there these days, honestly, maybe.

41:16Well, it should be by like your platform knows about it and spits it out, right? As a developer, you're not like hand coding those things anymore. Now you're putting in variables and you're plugging into a database and you're part of a front-end code to some sort of back-end and the CMS or the platform takes care of sprinkling in the goods. There's so many good things, though, now in CSS. The grid layout was kind of the biggest thing recently that has made it so much easier to build these things. But Flexbox, of course. And then there's all kinds of niches to get into, like the scrolling stuff in CSS to get the snapping and everything just right.

41:58Things like that. well I think we got there by talking about really framer but from the lens of having been steeped in building front ends yourself and I think having that those battle scars if you want to call them that going into a tool like framer one you can probably appreciate it more but then command it more because you literally know how the web should work if you were hand rolling the code Yeah, I mean, it certainly helps. I will say it's wonderful to see a tool like Framer taking an approach that's probably more for people like me, I guess you could say. I think there was a lot originally of envisioning the tool in a way that was maybe not that practical, right?

42:58Like, you know, I mean, just no one would argue over, like, using tables. But, like, when we first got started, you would export your fireworks image to a table. and then in Dreamweaver, you would tell it how to size it appropriately. It was crazy. But the way that the tools are built, like Framer is built on all that good layout stuff and everything that CSS has. And they have catered to designer terminology for that kind of stuff. I don't think it says Flexbox anywhere, but it supports the Flexbox stuff. So if you're already in that mindset, you can uh it does give you an edge uh for for using a tool like that um i also used a lot of youtube stuff to learn framer as i was doing it and i do i do more with youtube learning for for some of this stuff now than than i did in the past you know i'm i'm with you on that i feel that I waste a lot of time, especially on beginner content.

44:10I feel like almost everyone on YouTube assumes the person is new and novice, and that just drives me nuts. I was going to ask you, you know, in regards to that, because like if you're using YouTube, you're probably leveraging, you know, ChatGPT, for example, to say, okay, I'm using Framer, and I want to do this kind of thing that you could do in CSS. was the equivalent in X and XB. Yeah, so actually it's interesting that you say that because I did use ChatGPT from time to time. I found it had mixed results. And part of it is that Framer has different libraries that it knows about. So sometimes it couldn't discern whether I was asking about the application or about the programming APIs that they have.

45:00So that was a little interesting. One of the great things about Framer, I know I'm glowing about it a little bit, but there really is a large community and there's a large community on YouTube too. So, you know, in my most recent role, I was building a content management system, content management world, right? And there were a lot of things, it was called Unstack. There were a lot of things about it that were great. and we were building the component system and things like that. But we didn't have a ton of users in the way that Framer does. And so using a tool like Framer, now it does cater towards a more technical kind of person to be able to pull off a site in it than what we were doing with Unstack.

45:50Unstack was strictly for the business user, marketing people. but there's such a big community like learning the two different tools is a very different process like you can just go and they have beginner focused stuff but they also have a lot of niche stuff as well some of the things I was looking at was like how do I get my menus to be responsive so that was like one thing that I was consulting on YouTube and there were two or three videos that I looked at for that so you can get kind of niche and that's a really interesting spot to be in for a tool when you're on top, I guess you could say.

46:33Interesting. So what is this Unstack? What were you doing there again? Or you were building the CMS itself? You were doing the front end stuff? At Unstack, I was head of product and design. It was my first role doing both product and design. It's funny. so the company I was at before then we were going through this phase where they had a WordPress website and they brought me on as a designer. And I was again in a sort of like mixed marketing. I was helping marketing a lot role and doing product design. And we were looking at the website and it was something that the founders had stood up like six months ago before they had funding.

47:18and it was really just to begin to put content on the web about what they were doing. So the design was not great. And so I'm a designer, of course, I want to upgrade that. And so I was looking for tools and I stumbled across Unstack. And Unstack at the time was really focused on the sort of SaaS businesses. that was their heart to make it easy for SaaS businesses to have a website something that's not as complicated as WordPress to set up with a lot of pre-built components to do things and I was blown away because I built the first version of our homepage in about four hours on Unstack Unstack you have to design for the system but it was pretty good And it was pretty good in the sense that like the founders could use the tool as well to like build pages.

48:18And that was important to me. I love tools that you can be collaborative in with people and build content together and build things together. I still think Unstack is a great tool for this, but we did pivot more towards e-commerce. For a while, we were focused on Shopify. We were eventually acquired by this company, Elastic Path. and the tool is now called Studio and it's been integrated with Elastipath's core offering. So you can build Elastipath storefronts in Studio. Are you using AI a lot in your processes aside from this obvious one with Opal where you did the awesome sort of guide, I suppose.

49:07I imagine it was a PDF as well as maybe a web version of it potentially, but do you find yourself using a lot of, or even being open to tools that help you as a designer developer get further, faster, better? Yeah. You know, it's, it's one of those things that on the design side, sometimes it's easy to feel sort of conflicted about it because now it's my profession.

49:38The way that I think things are evolving and not just my opinion, but it seems like a lot of people's opinion is really more that people who use AI, like you'll become more. it's not that designers will disappear. It's that a lot of the designers work will be augmented by it. And the designer will be more of an operator of the, the AI's kind of thing in order to build, build things out. That's, that's kind of my view of it. And I think you'll see, you know, lightweight design being done by the, you know, there's things like for cells v0 right now, bolt.new, lovable, that are doing the full coding, one shot prompt kind of things.

50:32I think you'll see these things get better and better as things go by. So people with expertise in them will be able to do more and better. And they'll be, you won't even know they're using AI sometimes, but they know the right AI tool to reach for to do the job and get it done quickly. ChatGPT I've done a lot with. More recently, we did a logo for our swim club. And it's very interesting using it as a tool. I could generate like lots of different versions with different texts, get different ideas, and then you can mash up, right? And so your skills in Figma are still important because you're going to take the different ideas and put them together.

51:23But it's a different workflow in order to build these things. Figma is getting more and more AI as well. It's not quite to the point where it can use my design system to build screens. I think that's the killer application when you can give it your design system and say, hey, build a workflow for this. and then the hard part of design comes which is that like editing like what really needs to be on the screen and right now the work that we do as designers a lot of times we're like building up to that point where we can do editing right but imagine if you could spend that time that you would normally spend just building up to it like focusing on the you know the really important editing getting it just right dialed in sort of activities i think i think that's the near future i think you're right i think in a lot of applications which are you're on the edge of like and what i think will happen is it's already happening is you have a lot of entrepreneurs who have a vision or a big idea or a direction and they don't necessarily need to camp out and let me learn how to build the best xyz in figma specifically it's more like what does my user need communicated to you know and so that might be ab testing laney page that might be ab testing or like even just iterating on the design of and the editing as you said of a home page what really captivates the essence of our brand and what we offer and what we aim to offer Sometimes you call that working on the business versus in the business.

53:19And that kind of reminds me of that. It's like, do I want to be working on the business, which is vision, systems, people, direction, product, customer, analysts, analysis, capital raising? or do I want to be, you know, do I want to work in the business, which is moving this from here to there, literally hammering if it's a physical thing or literally coding it if it's a digital thing. And obviously we're talking about digital here. But I feel like this is like this era where that line begins to blend because you've got a lot more possibility for the non, I don't want to say non-talented necessarily, but someone who doesn't really need to gain the talents in a particular area just to achieve their outcome.

54:06You know what I mean? And that might seem like a shortcut, but it's sort of this weird world where that's more real than it has ever been before or more possible. Yeah. I mean, let me give you an analogy. When I was a kid growing up, I was homeschooled in high school, interestingly enough, and I can remember having this argument with my mom. that I didn't need to keep doing spelling. She had me doing spelling in high school because I was bad at it. Because Microsoft Word can spell check my work. Why do I need to learn it kind of thing?

54:47And I still, I didn't get me out of my vocabulary. I still had to learn the spelling of all these things. But later on in life, I really looked back on that and came to value it because there were so many, it's getting better, but there's so many applications where if you don't know how to spell, it just shows up in your work, right? Like, you know, whether you're hand coding a webpage or some component or doing something in Figma, Figma's finally got some spell checking there. So for much of my professional career, it's been valuable to like know how to spell, know when words are spelled wrong, right?

55:27I think it's going to be similar for us in the future. We're probably going to have arguments with our kids about, like, why do I need to learn how to do this? The AI can do it, right? But the people that are going to be, like, the true craftsmen in the trades of what we're doing are the people that are going to understand, like, how to do it at the very lowest level kind of thing. And that's sort of always been true in this type of work, right? Yeah. That's what gives you an edge because you're able to quickly jump down to the point where, I mean, playing around with GPTs today, right, in code, they can get pretty far, but they tend to get stuck.

56:13And if you don't know how to code, you don't know how to give them the instructions to tell them what's wrong, right? So it can be, there will be a lot of sort of lightweight applications of this where I'm a marketing person, I need to have a tool to collect email addresses for some event or something that I'm doing. I want it to be done a certain way and to feed it into this spreadsheet on Google. Like, ChatGPT can do that stuff all day kind of thing, right? But you're not going to see those people transitioning into the full-on development stuff until they learn a little bit more as well. And I think these things will get better.

57:02ChatGPT will be able to do more complicated applications. But there's always that little bit that it's not quite good at yet that's left over, I guess you could say. And then for the practitioners, like the people that like are doing design or doing development, they're going to be a benefit because, again, they can spend more time focusing on what really matters. But they're still going to know their stuff to do it well. Right. Mm-hmm. When you look at your, the stack you use and your, your process, you know, your, I think you got a new job. Did you get a new job? I did, yeah, just over the weekend.

57:43So over the weekend you accepted something. Can you mention that yet or is it still? Well, I'm going to Geard. I'll be head of design at Geard. Geard is another startup in the e-commerce space. So it's kind of my background right now. And what they do is they help brands like AT &T with a lot of refurbished cell phones, for instance, be able to list them on platforms like eBay and Amazon. So we're building a product that does that. And so, yeah. How do you spell geared? Is it just geared? G-I-E-R-D.com. G-I-E-R-D.com. Well, first I would start with like, gosh, let's spell that a way that. It's a short domain name, right?

58:41I mean, it's awesome, short domain name. But you have to ask, you know, don't make me think. Yeah. It's old, but Steve Krug had it best. Don't make me think, you know, when it comes to web UX or brand UX. It's true. But I mean, there's trade-offs. like i think once you know it you'll you'll know how to spell it and yeah you can get there every time you know what i mean g-i-e-r-d.com it is just her domain name so you're starting there soon what role you fault you what's your role there same so i'll be head of design there head of design so is there an existing design system that you're aware of or designer yeah yeah so i'll be the first designer okay and yeah we'll ultimately build out a team um but yeah i mean right right now it's still relatively small i think geared is like i haven't actually asked the exact number but i think it's around 60 people at the moment they are really interesting because uh they have kind of built the relationship with customers and have done the effort manually and now they're building the product that will replace a lot of the manual effort of their processes right now.

59:59So the website looks good. I mean, I'm on geared.com, G-I-E-R-D.com. Not a bad website. I mean, you couldn't tell that they don't have a designer or haven't traditionally hired one. I'm sure they've probably outsourced or consulted. Yeah, they've worked with the agency. Right. I guess what I'm trying to drive towards really is when you, not that you know your marching orders already, but if you had to choose your stack, when it comes to rethinking or implementing something new, what will you do? Will you sketch something out on paper first? Will you begin literally directly in Framer? How will you go about it?

1:00:36Will you do some market analysis with a GPT or an LLM or some sort of inference model? How will you approach what your next role will be here and apply your skill set there? Well, it sort of depends on what the ask would be right um so at geared i will be supporting the marketing team right so i think there will be some things that we like collaborate on um essentially i i think i will have a relationship with the the agency as well some of these details we still gotta kind of work out let's let's maybe zoom out instead of let's instead of literally what's gonna happen let's Yeah, yeah, yeah. Let's make an assumption.

1:01:18Well, let me go to – I think what the question you're asking is, if I'm a startup today and – Right, that's what I want to figure out. How will you approach this? What would you do? So, like, some of these questions are, like, what your objective is. So, for me, I would probably go with Framer because it's a tool that I know right now. And I know it can get us, like, really far. it does all the standard startup stuff that I'm going to want. I might compare it with a tool like Webflow because I haven't used it yet in earnest. So I might look at that. There's other options that are more technical.

1:02:04One of the ones that we were exploring for Opine was just doing it with Next.js. Even in the next six months, depending on how the LLMs do, like there's been talk of the idea that like perhaps marketing people in the future just ask the llm to code the page right and bypass the coding side of things um maybe maybe but in this moment like i think framer is the perfect choice for a sass based startup if you have design talent in one of your founders or your early people so you're not going to paper how are you thinking about this you're going in framer you're just gonna start building a website you got artifacts in figma you got artifacts and are using illustrator still yet like what other tool are you using i'm still enough of a designer where i would have to start in figma on this stuff but the interesting thing about the opine site is that it the way it came together was I left Figma a lot earlier than I normally would have.

1:03:10So the conceptual side of it started in Figma with the development of the brand, I guess you could say, and the implementation of the brand on the website started in Figma. But after I had kind of done the homepage, basically gotten it figured out, then it was pulled into Framer, right? And I got it all set up, I got header, footer, and then just iterated. And it's iterated to the point where what's in Framer, it resembles what was in Figma, but like there's a lot of little changes. And most of the other pages were just built out in Framer without any work in Figma. I tend to have to go back to Figma if I need to do illustration of some kind.

1:03:58But when you kind of build your brand assets and get them set up inside of Framer, if you're just reusing, you can build up full pages without ever touching Figma. So Figma and Framer. Figma is your blank page beginner spot, right? I mean, back in a different day, you may have used Illustrator. You may have used potentially even Photoshop. Yeah. I mean, I think Illustrator has its edge on some things still. Photoshop as well, of course, if you need it for photo editing. For a lot of things, I think people tend to be using other tools, and it's only for very specific things. So in my last role, speaking of AI, I did use Photoshop for the AI features, which is interesting.

1:04:55So combining it with MidJourney, MidJourney could do the initial conceptual work, and then you could get Photoshop to replace this part of the picture that MidJourney couldn't quite get right. So combining the tools together, that was a really nice workflow. But I personally, I try to stay out of the Adobe landscape. It's funny because I don't know if I have any legitimate reason to not like Adobe these days. But there was a point where it felt like they took over your computer. In order to use it, you had to have their little thing sitting in your taskbar that ran all the apps and updated all the apps.

1:05:48And I remember any time I installed Adobe products, all of a sudden my computer ran slowly. With Figma running in the browser now, it seems like everything runs in the browser. it just feels so much more native than some of their tools. But Adobe has also been a kind of like acquirer of good software. And killer, potentially. And sometimes killer. So, yeah, I mean, they killed Fireworks, which was my first love in design tools, right? So many people love it, yeah. And then there was a short period of using Illustrator and then Sketch came along and then it was Figma. So even with like Zest icons, that was all in Sketch?

1:06:34No, I did Zest in Figma from the beginning. Really? I would say from what I understand, you should probably compare Illustrator to Figma if you're doing icon work. But I'm such a lover of Figma at this point. And Figma has something called Vector Networks is what they call them, which is a fancy way of saying that you can join any point to any point in, in Figma, which was a novel concept at the time that they invented it. I'm not sure if it's supported by illustrator. Now it might be, but essentially like you can build shapes that are all connected and then tell it where you want the fill to be in, in Figma inside that shape.

1:07:27And that is a nice sort of upgrade for doing icons. I'm not convinced that Figma is the ultimate tool for icons. I feel like something native to SVG probably is. And I say that because I often have to export from Figma to SVG, and at least historically, I'm not sure if they would prove this, but it would convert the paths to filled shapes, which is interesting, because Figma has slightly different rules for the way that it curves paths than SVG. So there's some things where it feels like, Figma, why did you go the other direction? Why did you choose to be a non-web tool technology? From what I understand, the originally implemented or an early version of Figma was SVG, but they went away from it because the webgl was so much faster than svg svg has a hard time rendering in browsers or it did i don't know if it still does massive svgs are very hard to render but for icons like you your your output you want is svg so if you could have a tool that was there probably is one out there uh that spoke pure svg and was kind of tailored to the icon workflow that would be awesome well friends i'm here with samar abbas co-founder and ceo of Temporal.

1:09:21Temporal is the platform developers use to build invincible applications. So Samar, I want you to tell me the story of Snapchat. I know they're one of your big customers, well-known, obviously operating at scale, but how did they find you? Did they start with open source? They moved to cloud? What's their story? Yes, Snapchat has a very interesting story. So first of all, the thing which attracted them to the platform was the awesome developer experience it brings in for building reliable applications. One of the use cases for Snap was Snap Discover Team, where every time you post a Snap story, there is a lot of background processing that needs to happen before that story starts showing up in other people's timelines.

1:10:04And all of that architecture was built, composing, using queues, databases, timers, and all sorts of other glue that people kind of deal with while building these large-scale asynchronous applications. and with temporal the developer model the programming model is what attracted them to the technology so they start using our open source first but then eventually start running into issues because you can imagine how many snap stories are being posted every second especially let's say on a new year's eve so this is where temporal cloud was a differentiated place for them to power those core mission critical workloads which has very very high scalability needs although they started with open source, but then very quickly move to Temporal Cloud and then start leveraging our cloud platform.

1:10:52And they've been running on top of Temporal Cloud for the last two, three years, and then a pretty happy customer. Okay. So maybe your application doesn't require the scale and resilience that Snapchat requires, but there are certain things that your application may need. And that's where Temporal can come in. So if you're ready to leave the nineties and develop like it's 2025, and you're ready to learn why companies like Netflix, DoorDash, and Stripe trust Temporal as their secure, scalable way to build invincible applications. Go to Temporal.io. Once again, Temporal.io. You can try their cloud for free or get started with open source.

1:11:28It all starts at Temporal.io.

1:11:35I can speak to your sentiment about Figma. I had to go recently to help somebody out with something. and I was messing with Figma. And I happen to have two computers. I'm like that kind of person where I've got a laptop and I've got an older machine that I still use every once in a while. And I actually retire it and I bring it back and I retire it and I bring it back sometimes. But it's an older iMac Pro that still has so much firepower in it that I just can't in good conscience get rid of it. And so I'll use it. And so I've had my studio, which I'm in now, and then my home office, which is about to merge.

1:12:16You know, I'm about to start producing my version, my side of the show from a different location. But it's been a while. And so I've been a two location person for almost three years now. And so I've had to embrace this mobility requirement to my flows. And so I don't do a lot of front end stuff in terms of design. and I had to be in Figma for some things recently. And I was like, wow, this is kind of cool because I can be on my laptop, Figma, cool. Then I'm on my desktop, you know, in air quotes, desktop, this iMac Pro, different machine, Figma. Everything's still there. Extensions are still there.

1:13:03All the things are still there. It's the dream, man. I didn't have to like install the application. I didn't have to make sure plugins were enabled. I didn't have to do anything besides just log into Figma and Figma was, and like it was the first time I'd personally experienced it. And I was like, that's pretty crazy. That's pretty crazy. Like the thing I need to use is a web-based tool, which means it's not operating, you know, operating specific, operating system specific. I could probably even hop on a Windows machine and open up Figma. And Figma is still Figma. Is that true? That's true, yeah.

1:13:43I mean, I feel like an idiot even asking, is that true? I mean, like, obviously it's true, right? Yeah. So that's true. And this was true, let's see, six years ago. So this is a six-year-old thing. This is not new news to anybody. Yeah. So this was, the funny part about this is I was at a company at the time and I was leading the design team. We had about eight designers working for us. And the team had just grown from three to eight. And the new guys were all sketch people. And they were like, we got to switch back to sketch. So we had reviewed tools and we decided to go with Figma when there were just three of us.

1:14:22But the new people all wanted to do sketch. And I was pushing against it, pushing against it. Well, I eventually left that company and the team adopted Sketch, right? And at the time, the only thing Sketch had going for it was the plugin system. And there were a lot of designers that were dependent on the plugin system for certain workflows, things like that. and Figma was like new and different, but it could do almost everything Sketch could do except for the plugin system. So that was sort of the big, big beef. I think they eventually switched back to Figma. I can't see how they wouldn't at this point.

1:15:05But it was funny to me that like, I got in on it a little too early with that team. And then Figma introduced its plugin system, which is great. and yeah it seems like that was the point where a lot of design teams started choosing Figma and it really is because of that collaboration the the crazy part is doing any kind of design review now with other people you want to do it in the tool if you can like give them that Figma link don't share your video I mean you can if you want but do it in the tool click on that person's face and follow them around the tool as they are presenting. And you get it so much clearer.

1:15:53You can have the window as big as you want on your screen. You can zoom in on a particular detail. It's the way. It's so much fun. It seems like your stack is pretty simple then. Figma is where you begin. Yeah. Framer, because, yeah. Yeah, framer for marketing. Maybe some mid-journey. Yeah. If you need to do some image generation, some finishing touches in Photoshop, progressionally, reluctantly, inside of Adobe tools. So using MidJourney and Photoshop, what I was doing was generating a product catalog for a fake store, right? And it was an amazing experience. Like you could do different things with it.

1:16:40We also used, so we had two different ones. One was a furniture store and the other was apparel. And we used a tool called humans.ai for humans, generating humans. And that one's pretty incredible. But you would end up sometimes with something not quite being right. And in either case, like furniture or people, you could just quickly pull that into Photoshop, select the area, have it regenerate it. But Photoshop can upscale pretty easily with AI and it can generate more of the background. So one of the things sometimes that's hard about Mid Journey would be that it's not zoomed in quite right for you.

1:17:28And you can do some of this with Mid Journey. They've added more and more tools on that. But you have to send it off to the server to regenerate and it's kind of slow. So when you get it pretty close to what you want, just jumping into Photoshop, it can be a time saver. I'm on the humans AI website. So this will do what? What does humans do? Human AI, generated.photos. That's the one I use. Sorry, I gave you the wrong thing. Generated? Dot photos. Dot photos. Well, we just gave humans.ai a little bit of promotion. A little bit of barsting. Well, maybe they should be promoted. I don't know. The tool I used was generated.photos.

1:18:11Human generator. This is crazy. So unique real-time face generator. The future is here. You can create a unique person with your parameters in one click. Skin tone, hair color, emotion, age, head pose, gender. the last time i used this my one critique of the tool is that it tends to generate really beautiful people only really beautiful people so try and generate an average programmer in it and they're either like too heavy or they are like really skinny right like there's it doesn't uh a profession no i'm just saying like try to generate someone who looks like a programmer like you pick their clothes well that's biased come on john what are you trying to say no no i'm i'm like an average human like i know what you're saying this is so it's a joke come on one of my sometimes one of my criteria for this type of stuff is i don't want it to look too i should read it even though i'm using an angel right so if they're too pretty if they're too pretty then like you just like oh these are all fake people right uh so but it's it's pretty good It's pretty good at what it does.

1:19:27And one of the things that's cool about it, in that particular use case, was you can use basically the same model in different poses, different clothing, whatever. And that's useful for generating fake storefronts because you need multiple images of the same person wearing the clothes from different angles. So that tool has a lot of promise, and it's already very, very good. okay so generated that photos framer obviously figma mid-journey here and there if you really need to photoshop for the final touch if you really need to like go and replace something in the image what else is in your stack well chat gpt uh for copy and then it tends to do because they've got Dolly built into it now.

1:20:21It tends to do better line art sometimes. You have to compare with mid-journey. But if you're doing a logo, I like ChatGPT. Okay. Let's go there then. So what do you do? You just log into your own ChatGPT. You open up a new chat. Are you wordsmithing for a bit there? You're kind of getting some emotion, some words? Or do you go right into? I'm probably the worst at this in some ways. Like I know that I know the idea of prompt engineering, but I'll just be like, generate a logo for my swim club competition named, you know, Terry City Swim Me, because that's, that's what we were doing. And then it'll do it.

1:21:09A lot of times I'll forget to say, oh, I want line art or, oh, I want a particular style. I want hand letter. You can say things like that. What's the swim club named? It's Cary Swim Club. How do you spell that? Cary is our town. C-A-R-Y. C-A-R-Y, okay. Cary, North Carolina. It is juggling referred to as the containment area for relocated Yankees. Because we have a lot of us that have come down to North Carolina. So Carry Swim Club is what it's called? Yes, Carry Swim Club. So we have a meet every two years called Carry City. And we did a logo just this week. We were playing around with it. I found a Figma plugin, speaking of plugins, that I could take that generated text and vectorize it.

1:22:03And it vectorized it for me. and it's funny you'll find that when it generates logos so the one that we really liked it said sari city uh swim club instead of carry for some reason it changed the c into an s so you have to do touch-ups on it right now but i think it's a great way to get inspiration uh and you might just get lucky with a one shot did the right thing for you it can do icons as well i think it does pretty good at icons. But, I mean, if you really need icons, you should check Zest out first, right? But after that chat, GPT. Last time I checked, Zest was a little dated, though, wasn't it?

1:22:47Is it dated? I mean, it's been a few years. I mean, you know, it's not as on the up as some of these other ones, you know? Oh, I don't know. At the time, I still do a lot of custom icons. That's part of my job. If you want two pixel stroke, Zest is... Zest, I think, was leading the pack at the time. I found another one. There's an untitled UI that has the two pixel strokes. Why is it important to have two pixels? So if you're an icon nerd like I am, the great thing about two pixel strokes is that it's bolder than one pixel, which people tend to want a little bit bolder. and you can align it perfectly to pixels, right?

1:23:37Because one is uneven, right? It'll be sharper as long as it's not curved. Now, curved icons are going to look great at whatever resolution. Are you familiar with Iconic.app, Bonnie Chance? Iconic, I think I have played with this one. Is this what you use these days? I really don't use much but I pay attention to Orman Clark he started dunked.com I think he's done some design at Stripe I've just generally followed some of his work over the years I would say like literally probably 15 years or more and I've always enjoyed it I've always enjoyed his style and his attention to detail and I know he has Iconic out there which is like free icons for designers and developers and so there's got like a mix of free ones there but i'm not an icon nerd like you are where i'm like well there's two pixels here i just i guess i never thought about it it just depends i mean i can't quite tell i'm looking at it right now i think he is he using 20 pixels or at least 20 by 20 20 not this is 24 by 24 you got some free ones in there so if you go to the free ones you can at least, let's say, use the airplay to TV option or the archive option because that's something you can use everywhere.

1:25:00I think it's at different sizes. You can do it different sizes, obviously. Yeah, I think if I'm looking at this, so if I'm looking at the airplay to TV one in particular, you'll notice that it's sort of blurry around the inside of it. So this is the challenge when you choose like a 1.5, which is probably what he's done. pixel stroke, it means that you have to sort of, when you do straight lines, you have to decide like, is it going to be right in between two pixels or is it going to be aligned to one pixel? So it'll be darker on one edge and the inside in this case is fuzzier essentially because it's using gray, right?

1:25:39Cause it doesn't any alias. So yeah, as a nerd, um, I love it when my lines can line up with the pixels so that it's as crisp as it can be. So that was what I did. The one that, if you like a little bit lighter touch, I've been using on projects lately is Heroicons. Have you played with that one? No. Heroicons is the Tailwind guys. And some of this is a style thing, but they seem to mostly make the same stylistic choices uh like they're in the same family see it says here's the outline when it says 24 by 24 1.5 pixel stroke yeah so they use 1.5 pixel strokes um so you tell you what's interesting is you can scale up i think to 32 pixels yeah 32 pixels and it'll align all right see what i did there math is fun but um yeah um i mean there's there's differences i have thought for a long while that i might want to do a zest medium and a zest light um but it's finding the time to kind of kind of pull it off so have you abandoned zest completely in in your in your updating or is it is it active it's um how active is it if it is active i think it's been about two years since i did an update on it so that's pretty inactive john yeah yeah but this in this day and age you got to be you know here's what i like about icon uh iconic at least is they're frequently adding things to the library and there's a business model here they're frequently adding things to it and you can i believe get the pro what is i even i'm not trying to advertise for them but i think their model is kind of cool let me see if i can go back there so i can speak eloquently about it okay what is their pro okay so if you go pro oh wait hang on it says it up here 24 24 by 24 bounding box 1.5 pixel stroke so you're right that uh that one is a little blurred so you're a fan of two pixel because it's even okay so the iconic Pro package.

1:28:02Hey, Orman, if you like this, pay us. But listeners, just check it out. Don't buy this. Don't go and buy this. I'm kidding. You do what you want. Solo is$99 a year and Team is$249 a year. And you get access to all the icons. There's new icons every week. So I think if you revisited this as your passive income plan, John, steal their model. Borrow their model. Yeah, it's interesting. I think it takes me about four hours to do an icon update, right? And so when I do it, so that's just to do a release. And it could be faster. Don't be wrong with like automating all the steps. AI can make it faster, John.

1:28:46I believe AI can speed up at least one hour. Maybe it could. Maybe it could at this point. But the last time I did it, it took four hours. and some of that's that like there's not an easy way to automate sketch output to automate Figma output so there's a number of manual steps that are in the way of it but yeah I so where I am as a dad right now is that I've got a side project that I'm working on that's kind of that takes my time and And so once a week, I meet together with my friend who we're working on it together. And that's where I'm spending my time. Zest is interesting. I think I make a sale at this point every couple of months.

1:29:40So it's not doing great.

1:29:46But, you know, if I was to pitch it to you, it's a one-time price. It's now only$30. I've sold it at different price points. It's over 600 icons and they are pixel aligned for 24 pixels. So, yeah, it's a baby. I want to get back to it at some point, Adam. Well, I'm here to encourage. I'm not here to make you feel bad. And you know what? When it comes to children, man, I'm the first person to say family comes first. I think you have to have some things to keep you creatively alive. Let's just say. Yeah, that's right. So if your job doesn't do it for you, then you're going to have some version of a hobby, whether it's a project, money making or not to sort of like keep your own personal creative juices going and flowing.

1:30:33Yeah. Because it's how it is as a creative, you know. Well, I mean, it's interesting, too. it's cool putting stuff out because it's going to eventually become dated and you can kind of track your own progress by like seeing and so I would make different choices today like particularly on the landing page for Zest like I'd love to do some different things there but I'm also pretty proud that like it's got some staying power it's lasted it's still in style Adam it hasn't gone out of style uh maybe maybe let's say you uh let's say you took your 30 bucks and you turn it to 29 bucks a year because you sold it once for the license and let's say you started updating it yeah somewhat frequently let's whatever you would define that as somewhat frequently enough to make it valuable to somebody to pay you yearly roughly 30 bucks 29 bucks a month and let's say you had 500 sales in a year that's 15 000 rounded up of course it's 14 yeah it's funny though like i don't know if i'm too much too close to it like as a customer but like that's not how i want to pay for icons i like i i want to pay once and be done with it like the subscription gives you a chance to keep them involved oh i understand as a seller but i'm saying as a person who purchases and i also sort of i like i want people that are buying it so i did structure it so that it's not a multi-use license it's it's purchased for your work on a project if you are a agency you would need to buy a new license for each site that you did for a customer kind of thing but partly the reason is like i wanted to have that purchase once uh and you can use as much as you want and you get the updates uh sort of model as a user like that's the way i want to want to purchase icons i get i get it i get that there are people that are playing around with those models and and you know particularly on the i would say like there's other sites that have thousands and thousands of icons on them that use that subscription model yeah it's almost too much yeah it does it does almost overwhelming too too much but for like picking it for a project to me like i i wouldn't i wouldn't want to use a site like that because i don't want to just like i have to negotiate with my boss like to purchase a new icon set like that's the last thing i want to do but if i can say like hey it's 30 bucks it's like great do it like that's 600 icons you don't have to design well if it's any consolation i am not an iconic pro purchaser oh so oh oh i'm not saying this as a as a buyer i'm saying this as a as somebody who pays it i mean i don't even pay attention to that many yeah icon sets out there i mean i could i didn't even no hero icons from the tailwind folks but i think the table stakes though in this game is you have to offer a figma file you have to offer react and view type components or some sort of integrations because that's the way yeah that is the front end world we live in uh you still get svg and png of course and i think that i don't know how is hero icons is it free yeah i think it's how do you say it's heroic it's like comes from like hero hero icon heroic fine heroic yeah heroic cons yes free this is free but by the way it's it's it's zest icons not zesticons okay did i call it zesticons No, I'm just, if you read the domain name, people sometimes say it.

1:34:32Did I call it Zesticons, John? No, you did not. You did not. All right. Zest icons. I mean, Heroicons, Heroicons. Like, I think this is a problem with icon sets. I like it. Heroicons. That's weird, but whatever. I'm going to call them Heroicons. So he did a set that was much larger originally. They were called Heroicons, right? And then they developed this smaller set, which I think is ended up being the more popular. It's the default sort of Tailwind-y. So if you're in the Tailwind world, you're aware of it. Yeah. You know, it's really hard to compete with icons out there. There's so many of them out there.

1:35:18Free, not free. Paid, not paid. Subscription, not subscription. you know it's it's like unless you're unless you're in it to win it it's kind of hard to compete you know that's the that's the thing i like i think it's great that there there are people doing this i have an itch i have i was in between jobs uh at the time i and i did most of the icons during that short window while i was searching for a job um so you know and one of the things that to me, I still benefit from Zest. Even today, I was pulling an icon over and making it look like the Heroicon 1.5 because I'm using Heroicons on another project because Zest has things that Heroicons doesn't have.

1:36:07So it's great for me personally to just have a library of things that I can pull from and build from. It's better than starting from zero, right? Yeah. That's cool though. So as one note of feedback, Maybe I'm just so used to this 1.5 world these designers force us into. But when I go from iconic to heroic to zest, zest feels bold and thick. Yeah, man. A little heavy. That's the branding. That's the branding. That's by design, huh? Bold and refreshing. Look at this. There's even a SAS logo in here, John. Oh, yeah, man. And I'm deep on certain areas. I'm pretty proud of... So Zest comes in three flavors.

1:36:56You can have social, which is like what you need for a website. And it's got stuff like SaaS in there and other things that you might want. But it's got Instagram and all the different types of logos that you want for a website. And those are pretty juicy. I haven't seen, and I'm a nerd, but I haven't seen a set that has as many and feels current and all that. So there's that. And then there's free, which is 200 free icons. And I actually tried to put my best icons in Zest Free. But when you're ready to pay for it, you'll get all the extensions of the best icons, and that's what Zest Pro is. There you go.

1:37:42There you go. Well, you know, as a word of encouragement, I think if you want to be seen as not dated, and I don't want to say that's necessarily true, but it's been two years. You got to update the brand marks at least. Twitter's now X. That's true. Right? I'm not sure Google's that rounded. GitHub's Octocat is not that anymore. It's more a different silhouette version of it. Less of a caricature. No, no, no. These are my take on the best version of the most. But you are right. You're right. I do need to get X in there. I've actually have the icon designed. I just haven't done the four hours.

1:38:30Just got to put it in there. Shit that update, John. Yeah. So they queue up, and I've got about 20 right now that I need to do another update. Well, need to and have time to do different things. Always choose children and your wife over Zest, you know, or your friend in this side project or whatever you're doing. Why make it a choice if it doesn't have to be a choice? Any final things to share? Any final, you know, wisdom pieces? I think one thing you may have that not a lot of people have is this ability to be both a designer and a developer, and you speak development as well as design. We have a lot of developers in this audience, and so I'm hoping some of them come to this conversation with the curiosity of what a designer thinks of when they choose their stack, when they choose how to leverage these AI tools to get their job done in different things.

1:39:28And so I thought we'd have a grab bag of a conversation here, but any words of wisdom for a designer slash developer working with developers? What developers should know about a designer? Anything on that front? I mean, probably my biggest thing for developers would be like, hey, do a Figma course. It's easier than you think. And focus, like learn how to draw with it. but also focus on how to get the development stuff that you want out of it. Because there are plugins that are written that will write half the code for you when you export it from Figma. So it's well worth spending a little bit of time on the Figma side, like doing that if you haven't.

1:40:19For designers, I mean, again, it's probably a challenge to spend some time on the other side of the fence. I think the AI coding tools are pretty impressive, but it is nice to just sit down and learn a little bit about CSS, learn a little bit about JavaScript, you know, the basics of these things. But I don't know. On the design side, I think sharing what you know and what you've learned, maybe teach some developers how to use Figma kind of thing. Any particular courses you know of that you've seen or recommended for Figma or they have some of their own educational content? Figma is interesting.

1:41:04I haven't really explored that because I haven't been learning Figma in a while. But when people ask me about it, I generally say go to the Figma website. They do have a lot of resources and they've invested in that for teaching people how to use Figma. so you can kind of go down the outline on figma.com um and and learn it um you know my experience recently with framer would say hey go to youtube as well uh and you'd probably find uh some good people there maybe you can do a figma crash course you know revisit figma as a from a lens of a developer and say well but i want to know yeah and in all my 10 minutes or less all your free time I love it actually you know I used to sit down with every developer that joined the company my goal was to just walk through Figma give them an introduction but even in just 30 minutes it's not quite possible to pull out like how to get the most as a developer so that's why like doing some exploration like it will pay dividends If your designers are asking you to look at Figma, then spend some time learning it and it'll be easier for you.

1:42:27And you might, the other thing that's interesting is that Figma has recently gotten things like variables and things like that. So as a developer, you should be getting all your design system stuff into Figma. And a lot of your designers don't know how to do that. so you may end up having to educate them on how to do that but the world is better when the systems that we're working in are very similar and I see a lot of teams that don't seem to quite understand how to use figment yet from either design or the development side so yeah well this episode as you may know listeners was not brought to you by Framer although we did talk about framer.com quite a bit I would happily have them as a sponsor so if you're from framer say hello I'm down for that I like framer though we've been sponsored by Wix we've been sponsored by what was the other one you mentioned before?

1:43:33Webflow I think Webflow sponsored us before but I like framer if you like framer I like framer John I trust your judgment that's why I joined the show So, well, John, it's been a pleasure catching up. It's been a while since you and I have spoken face-to-face. I think probably years, right? You think it's been years? Yeah, it's been a while. I think my last conversation was on Radiant. The last time I talked to you, you may have been pre-kids. Yes, that was pre-kids. So, I mean, you've got three now. So it's been almost a decade, John? Yeah, I was unmarried as well the last time you talked to me.

1:44:12I think you were engaged. I think you're right. I think you were engaged. Okay. Now you're hopefully happily married. It's a podcast. Transcribe. Don't say it if you're not. Yeah. No, it is. And if you are, boast, of course. Yeah. Yes. So it's been fun. Yeah. For the listeners, I guess in this little extended outro, John and I have known each other for many, many years. We started the SaaS way together. what else do we do together John how did I meet you where did I meet you at I think we were aware of each other so there was a time where we were going to similar conferences yeah probably less conf did you do Rails conf Stephen Bristol did you do Rails conf back in the day I think I've done one I did not meet you there I've only done one and it was in Portland I believe okay 2008 2008.

1:45:05Yeah, I might have done that one. Yes, I think I did. Maybe you did. Maybe I met you there. I know Steve and Alan were there. Yeah. I remember being with Steve in the trolley tram thing that goes around the town. I don't know. Yeah. It's cool stuff. Cool days. The less guys are cool. Did you see Alan is running for mayor? Mayor. In Panama City. Vote for him if you're in Panama City. I mean, I would like to become a resident just to vote for Alan. I would vote for Alan for anything pretty much. Miss Alan. Love Alan. obviously miss Steve as well. But don't make me cry on the show, man. John, it's been fun, man.

1:45:41Catching up. It's been fun. Stay cool. Always a pleasure. Okay. It's been a couple of years since I've talked to John. I want to say, gosh, John and I spent a few minutes after the show, actually catching up on some family stuff and some other things. and it's been, I think, a decade is what we said. A decade since John and I last talked. He wasn't married. He was engaged. He had no children. Now he has children. You know, it's just a different time then. So this show was a fun catch up with John and I've always loved John's front end and design eye. And I've been really curious about his tools and stack and choices over the years because I've always appreciated his taste when it comes to front-end work and design work.

1:46:31If there's one thing worth taking away from me from this conversation, it is two pixel lines when it comes to icons because John clearly believes in that. But I would say Framer. Framer got a big shout out on this show and I think it's probably worth checking out. You know, I'd love to get somebody on the show from the Framer team. And if you know somebody, let them know. We'll have them on the show. It'll be fun. Okay, big thank you to our friends. over at retool, retool.com, augmentcode.com, and our friends over at Temporal, temporal.io. And of course, to our friends and our partners over at fly, fly.io.

1:47:12And those beats are banging the best beats in the business, brake master cylinder, so good. Okay, friends, we'll see you on Monday.

1:47:28Thank you.