Subscribe
Share
Share
Embed
Get a seat at the table and build the design career you want. This podcast is for designers looking to break in, level up, and take control of their careers—whether you're freelancing, climbing the corporate ladder, or just trying to get noticed. Every two weeks, we dive into career fundamentals, design best practices, and the hottest topics in the design community.
GATGBT, here's the one thing I why I use it over the others is because it has a audio input. So you can enable voice prompting. So, like, I'll hit record. I'll speak out. Instead of typing something out, I'll just I'll yell at it to do what I want.
Tyler:And I find it it's more convenient than kind of typing something out.
Nick:Yeah. Are you a a multitasker in a way that while speaking to it, 're you doing something else. In the meantime, you're answering an email or working at Figma or whatever.
Tyler:Yes. Here's here's my convoluted like workflow. So I have I use ChatGPT in combination. We
Nick:are kind of live now. This is what I always wanted to say. We are live. And we're officially live. We are officially live.
Nick:Exactly. I mean, this is just an experiment. I'm curious about, again, like most people, about AI and how you use it, Tyler, specifically. You know, all we talk about is the beginning of a project. You know, use AI to prototype, help product managers sketch things, and deliver them to you just to start better.
Nick:But how about the second half of a project? I don't think we even talk about it, and I don't think I've ever used any AI help when I just have to produce screens. Am I am I a dinosaur? Am I getting old?
Tyler:No. I think I think you're on you're you're there. I think the majority of the AI work might be done in discovery phase. Though, at least at least for me, it still continues a bit into kind of the later stages of design into two areas. One is copywriting.
Tyler:So, like, you're doing wireframing, but that might not be the copy that you end up with. I use AI to kind of massage my copy, maybe shorten some text if there's, like, a character limit. So copywriting is something is a tool that I use throughout the project, not in just discovery. And also for additional prototyping when edge cases come up. So oftentimes, you're you've done the design, now it's designed to dev handover.
Tyler:So they start their sprint. They're starting to work on the project. And then inevitably, edge cases pop up that we didn't kind of foresee. So Mhmm. For example, in a recent project, there was an error state that we weren't handling, and there was no design system kind of structure for that specific error state.
Tyler:And so I had to then jump into FigmaMake and then vibe code a solution. And instead of just manually kind of designing that out, I kind of five coded three or four different iterations, met with the engineering team saying, okay. Our scope is tight. Which one of these five options are are the best? It's like, well, this one is the quickest to do, and then we're back and forth from a UX perspective.
Tyler:This is the best from a UX perspective, and then we met in the middle and then came up with a solution based on that kind of AI five coded thing. Even though it's mid project or, like, later stage, there are things that you can leverage AI for. So those are two things that are kind of top of mind for me.
Nick:Right. Right. So sounds like you you mentioned scope, but also the deaf guys were in a rush, I guess, and you had to have a solution for its error stays, like, on the spot the same day.
Tyler:It was it was it was next day, but it was close to it. So yeah. Because we're it's end of the year. We're trying to get our our stuff out the door for our clients. So, usually, when design is done, the dev team has an allotted, whatever, two or three sprints to get that feature out.
Tyler:So anything that comes up comes up along the way might either push something we wanted to get done. But if we if we can shorten that kind of that cycle to get that design solution done quickly, we're not stopping the project, full stop. Right.
Nick:And let's say you didn't have a tight deadline. Like, you know, you had the rest of your sprint to fix that that edge case. Would you have used Figma Make as well?
Tyler:I think probably. I think it's really good for iterations. I can design I could have probably designed all those five different experiences. It would have taken me longer. But because I can get it done quickly, I can probably if I had more allotted time, I could have pushed one or two more more to high fidelity instead of having it more more high level.
Tyler:Mhmm. I'd still I for this experimentation and trying a thing, because you can animate it, you can prompt it to give animations, transitions, connect pages together within a single prompt. And because it's connected to your design system, it looks and feels the same. So there might not be a different long term if I'm kind of envisioning where FigmaMake is going, how I design versus how it designs via my prompting.
Nick:Right. And it also sounds a bit about something I listened to earlier today. You remember the the Parkinson's law where they say that to complete something, it will just take the time that you have for it. So if you don't have the deadline, like I asked before, you will probably take your time and build a design system. And and with that in mind, I might wonder if you're doing this, would it be possible to complete a project, you know, AI driven, like that big chunky middle part, the way you just completed that, you know, that missed edge case?
Nick:Do you think that's possible?
Tyler:I think so. I think something that comes to mind, like, if you're vibe coding a thing, I I mean, let me circle back. I think I just treat it as, like, an assistant. So it's Mhmm. It only does what I tell it to do.
Tyler:So in the case of those different edge cases, what I could do during that series of prompts is say, hey. Pretend you're a QA engineer. What are the different edge cases that I'm not thinking of? And it'll list out 10 of the top ones. I'm like, okay.
Tyler:I didn't think of these these three. Let me kind of the the the latter five don't really matter, but I didn't think of this. So it's helping me, but in the end, I have to come up with the solution. It's not the other way around. I'm not looking for the solution from it, but I'm looking for ideas to kinda get my mind going so I'm not spinning my wheels.
Nick:Did it also work that way for that that error state that you mentioned?
Tyler:Not that error state. I had I had a couple ideas that I kind of mapped out. It's been it's been the case where I'll have it spit out some ideas, and I kind of took it in that specific use case. I had, like, couple ideas off off the cuff based on, like like, best practices, UX norms, etcetera. But it's really good at giving advice too.
Tyler:Nice. Yeah. But I get what mean. It's it's almost Yeah. Just be aware that, like, the person driving it should be senior enough to understand if the AI spitting stuff at you is not good advice.
Nick:Right. Yeah. It's it's like you have your your inexhaustible super buddy next to you at all times.
Tyler:Yeah. I do. And we all I think we all give I don't know if you give your AI a name or not.
Nick:I just call it Claude.
Tyler:Okay. You're not that far into your relationship yet, I guess.
Nick:No. No. Well, as at some point, I started saying him, and then I I correct myself to call it it again. So Okay. You know, we're we're we're humanizing it, I guess.
Nick:But listening to you, I I do realize that I have some outside help for my projects. You know, talking I I have my two screens, the one I'm looking at right now with you, and then to the left, now I have, you know, our episode scheduling overview. But, normally, I would have my LLM help there. And, you know, me being Dutch, working in English, sometimes, I don't know a certain word, you know, and then it's AI help. Like, AI what would I say here?
Nick:So that's the copy help you mentioned that I do as well. One thing I have to admit, and please don't hate me, but I have I have never used Figma Make yet.
Tyler:I mean, that's okay. No no shade.
Nick:You don't
Tyler:have to use it yet. I mean, to be fair, I've maybe used it a handful of times. I'll I'll most likely I don't know why. Like, FigureMaker's right there. It's a quick button away, but I my go to is usually Clot or ChatGBT for a quick thing.
Tyler:I think ChatGBT here's the one thing I why I use it over the others is because it has a audio input. So you can enable voice prompting. So, like, I'll hit record. I'll speak out. Instead of typing something out, I'll just I'll yell at it to do what I want.
Tyler:And I find it it's more convenient than kind of typing something out.
Nick:Yeah. Did are you a a multitasker in a way that while speaking to it, you're doing something else in the meantime? You know, answering an email or working at Figma or whatever?
Tyler:Yes. Here's here's my convoluted, like, workflow. So I have I use ChatGPT in combination with Speechify, if you've heard of it before. I haven't seen is is a text to voice. So anything you can have it kind of read any text on the screen.
Tyler:So like if I'm if I'm doing some design work, but I also wanna read the PRD, I'll just have it kind of I'll select text and hit play, and it'll kind of speak out loud what's being written in the PRD. Mhmm. What I also do with ChatGPT is I'll kind of I'll I'll yell at it to kind of tell me something if I'm using the desktop app, and then it'll read out its answer in real time while I can kind of do some design work on the side. Mhmm. Right.
Tyler:So it's so it's I haven't gotten the desktop app to work. I use the one in browser. So, like, the one in the phone, you can kind of start the voice chat, but I can't copy the text from it. So if I'm if I'm working with some copy and I wanna copy things from my left screen to your point to the right, that's my workflow there.
Nick:I'm I'm just envisioning how that's working. It's just like you have colleagues. You know, even if you're working from home, it's like you have colleagues, you know, around you. You know, that it's because you basically have two AI models speak to each
Tyler:other, essentially. Well Yeah. I have one AI model speaking on behalf of another.
Nick:On behalf of yeah. Yeah. Yeah. Wow. Of course.
Nick:Yeah. That that's true. That's true. I I I I do like the voice thing. I have I have Whisper Flow, and I noticed that I like it for prompting where formatting doesn't really matter, you know, because the the AI will just eat it up.
Nick:Yeah. But I don't use voice to text for, you know, let's say, an important message or an email because it tries to format it. It tries listening to my context, and then when I start to list something, it creates a list, but it doesn't put in the paragraph breaks where I want to, and then I'm editing it anyway. And, you know, so it's, you know, voice to text, I'm a bit in between. Like, I like it for some cases, but not yet.
Nick:Emphasis on yet everywhere. But it a bit of point that I have in mind, like, we have lots of assisting AI tools around our design work. But is there any, to your knowledge or to your in in your experience, any AI tool that's really, really, like, production level quality UI wise that can just create your screens for you?
Tyler:I think I haven't experimented yet. I have on my list for 2,026 to do some MCP work. So I have my website, sassifyos.com, and I just watched the video self promotion there.
Nick:Subtle. Yeah. Yeah.
Tyler:Subtle. Very subtle. You have the ability if you set up the tokens and then the structure properly, you can connect it to an m c c p and then, like, basically prompt from cursor content updates. So for example, if you really want to rank higher on Google and you wanna do some SEO work, you can run an analysis from Cursor that feeds to your Webflow website and then do updates on your behalf. And then if you have additionally, like, blog set up, you can prompt your way to creating a new blog straight from Cursor instead of going into the designer mode and actually manually putting it in.
Tyler:So caveat, I think, is that if you have a design system or, like, the components set up properly, I think there there is a way to kind of have AI create screens for you. But you have to have that design system in place or else it's just gonna hallucinate and create its own Yeah. Garbage for lack of better word.
Nick:Yeah. And garbage in garbage out is what they say. Yes. Yeah. So fun fun fact, by the way, is that I used to have all my websites in WordPress.
Tyler:Mhmm.
Nick:And it because, you know, it has a CMS, and then you have page builders in addition to it with templates and reusable components. But I felt stuck at some point. You know, I had a a website with close to 100 design related articles. And if I had to change one thing, it it wasn't really scalable, maybe because I didn't set it up well. So I started moving things to Webflow because they have their collections, which I think you build one template and then you go into your content mode, and then it's, in my experience, easier to replace.
Nick:There are pros and cons, of course, with pricing and system lock and all that kind of stuff. But that something is it took me a year to make all of that happen because I do that on top of my regular work. So I do not have a lot of time. It's mostly evenings and weekends. I was halfway finished when this year a lot of AI improvements came along.
Nick:So I had two out of three websites done, and then the third website, I canceled my Webflow subscription before I started working on the website. And now I'm taking that website from WordPress to PHP and Tailwind CSS.
Tyler:Oh, okay.
Nick:And Code assisted. So I'm cutting out Webflow, and I think that's something you could do potentially as well. Like, not I'm not saying you should throw away your Webflow work, but if you are thinking about starting a new website or migrating a website from a to b, I think it's possible if you have the knowledge, like you do, to, you know, cut out the middleman, and middleman being, in this case, the the no code builder, you know, the the WordPress Webflow framer or whatever.
Tyler:Curious how how that switches for you because I the reason I like Webflow is it has the visual builder. And then you're using Cloud Code, which seems like pricing wise, I imagine, like, probably a third of the price to kind of host your your website anywhere if you're gonna building it in PHP by hand. Webflow's prices are, like, whatever, 20. If you're doing the yearly plan or the monthly plans, like, $20 a month, give or take. Like, how is, like, how is that process from, like, desk local developing to, like, pushing live?
Nick:Well, I'm I'm I'm learning a lot, I have to admit, and and that's that's something I really like. So, you know, pricing wise, you know, I have the the Clotmax plan, but we can it is €90 a month. Sure how it translates to different currencies,
Tyler:but A thousand dollars Canadian.
Nick:Yeah. At least. But, you know, I cannot really put those €90 completely to the website because I use it for client work and design projects. So a portion of the 90 goes goes over there, and I pay €30 a year for the hosting and the domain. Okay.
Nick:That's that's just pricing, and then I do not need anything else. I don't need a CDN or, you know, WordPress optimize or a web flow this and that. You know, it's all just under my control. The reason I'm using PHP is because I can still create my included files. So I have my header, my footer, article intro, call to action things, and it's it works very well together.
Nick:Practically, like, when I would work on the website, I have a, you know, just not sure what the technical term is, but I have a a live server locally. So when I click save or when I ask Claude to do something and it does, and then it edits the file and it saves it, to the left of my screen, I see it refresh instantly. So it's not a visual builder in Webflow where you can click something and, you know, I want to change that thing and then here are my settings. But it's very close to it, and it's it's super fast and lots of fun. And it's connected to GitHub, and then GitHub is connected to my hosting.
Nick:So whenever I sync, it goes live right away. And I because I enjoy the tech side of it, I have a few scripts that I run just to sanity check my website. Like, do all images have alt texts, you know, and do all the links have a title? Is all the SEO stuff in place? Like, aren't am am I not missing anything?
Nick:Is the description not too long or too short? Yeah. So lots of fun, but also, you know, disclaimer, you have to enjoy that type of work. You have to be quite technical, and I really enjoy that work. And I'm now at a point where I feel like I'm faster while still enjoying myself.
Nick:So, yeah, that's how it works, but I'm not going to take away my my current Webflow websites because I really like Webflow. I only did this did this way because I didn't start the Webflow work yet, and I've I felt like I saw a gap, like, wait a minute. What if I do not use anything except just code? You know? So it's more an experiment that turned out to to work quite well.
Tyler:Interesting. And not to just nerd out here. I'm curious what your process is. Well, I mean to nerd out here.
Nick:Okay.
Tyler:I'm curious what your process is to go from Figma to to code. Is it are you doing everything by hand, or is there any kind of AI help translating designs to to Claude? I'm curious.
Nick:I have a a fun answer for you. There's no Figma in this project.
Tyler:Uh-huh. So you're straight into it? Yeah. Yeah.
Nick:You know, silence for dramatic effects. Hello? But no. But that that you know, just to be honest here, that's because it's a simple enough project that it doesn't like, I that it's more work to design it and then build it. So you can get away with it.
Nick:And also because, you know, I enjoy the code and the designing together. So for me, it's it's it's doable. If this would be a project with, you know, high stakes, no financials or health, you know, a health tech project or whatever with lots of stakeholder involvement and that kind of stuff, then I really want to have the the the boundless canvas to iterate and think and experiment and brainstorm. You know? But this is small enough that I can do it all in code directly.
Nick:If I would design in Webflow, I'm proficient enough with Webflow for a simple website at least to to continue directly in Webflow as well.
Tyler:Okay. Yeah. The reason I asked is just I'm very curious about that I'm gonna be getting into 2026 is, like, how do you import make one to one the variables in a different, like, colors across Figma to to the code and then getting that done so that you can prompt your way away from Figma to your point. Like, this particular project, you you didn't even use Figma, which is magic to
Nick:me. But,
Tyler:like, once you get to the point where you've defined the brand and the design system and the components to then code your like, just code the rest and not not having to to go back in Figma because you can just, like, you're doing stuff right in the code. Mhmm.
Nick:Yeah. I I mean, that's to to go back to the original point of of having AI help in, you know, in in the later stages of a design project. You know, when it's simple enough, you can do it maybe even without the design because you know you mentioned earlier, if you have design experience, you know how to validate the output of an AI. Like, you know if it's good enough, and you can see it. Like, if it's a live website or a Figma frame, like, it shouldn't matter for you.
Nick:You know, you you you can say if it's a good design or no or not. You know, you can validate, you can take it and validate it. But it's it's not my goal to to be Figma less. I really enjoy Figma. Sometimes you can.
Nick:And to to talk a bit more about your Figma to code thing, I tried this for projects, and it didn't work 100% correctly, but it did better than I expected, mostly because there was a gap between how we you know, what we call colors in Figma and what we called colors in in the code, for example. And then also the how you've set up Figma. I don't know about you, but after a while, I get auto layout bloating is what I would call it. So you have stuff clicked in a in a auto layout setup, whatever it might be. And then when you try something else, you get a quickly, get a mess.
Nick:You know, you delete one part. Let's say you have auto layout, two layers of text. You delete one layer of text, then you have an auto layout frame with inside of it one layer. You know? But you don't really notice if you're working very fast and you're like, let's drag this text to be part of another auto layout.
Nick:Then you have one auto layout with nest within it, the text layer, and another auto layout Within that auto layout, another text layer. I hope you can still follow.
Tyler:I'm with you.
Nick:And that happens, like, that keeps going, which because you don't really pay attention to it. I haven't at least. And then when you have some sort of MCP clawed or or cursor look at it, it just takes everything you see in Figma and copy it exactly. So you have this and this and this. So you have to be extremely clean in your design, and you have to be extremely aligned to your code.
Nick:So in that perfect scenario, it could work. And the benefits, and then I'll stop talking, the benefits was that we found those gaps, and because of it, we cleaned up the code base some more to use good scales for color. Yeah. And we cleaned up Figma to use the correct names for text, you know, text based, text LG, you know, the the Tailwind type naming to because funny enough, the code base had wrong colors compared to Figma, and Figma had the wrong text names compared to the code. And we blended them together that way.
Nick:And since then, it's been way easier to collaborate with developers and AI help and all that good stuff. So, yeah, it's a it's a net positive even though I didn't one shot it.
Tyler:Yeah. That's the that's the one thing that I think I find frustrating is that parity between, like, the Figma and the project For Webflow specifically, there's, like, the Figma to Webflow export, but you have to have everything set up perfectly to your point with, like, the auto layout. But as soon as you edit anything in Webflow, there's a disconnect between the two. Yeah. I'd pay a lot of money for someone to fix, like, have some kind of sync where if you change one thing in one place, it syncs it in in the other.
Tyler:So, like, they live together because that's you have to there's a lot of work, like, to your example of, like, tweaking and tweaking so that they're you're at a good point where they're they work seamlessly together.
Nick:Yeah. And I I think that's just the the human challenge that we have. How many how many designers and developers do you work with for any given projects?
Tyler:Yeah. I mean, I work with, like like, six, like, six developers on a constant basis. Yeah. So, like, and then on different projects, different features, so it's it's a lot of back and forth. Yeah.
Tyler:And not not everyone has the same context for one project than the other.
Nick:Yeah. So so that that's what I that's why I was hoping to hear because you have six developers. You have a designer, then you have a project manager, and maybe a few more stakeholders. They all have opinions, and they all are like, well, let's let's do just do it this way. And then they take a shortcut.
Nick:They don't tell do not tell anyone else, and then you're misaligned already. So just knowing how we work in practice, I'm wondering if it we could ever really have that perfect sync at all times or at least long enough that it's worth it. You know, we need to communicate also perfectly on top of it's being aligned perfectly.
Tyler:Yeah. I think it's I think the end goal is to have one tool and to rule them all. So have, like, one tool that's able to like, if there was a way to kind of craft the the design system in code or with this with this tool
Nick:Mhmm.
Tyler:And then the same way developers branch off of, like, the current state to kind of develop new features, designers can branch off the current state in some kind of visual editor like a Figma. So, like,
Nick:if you were to take
Tyler:a snapshot of, like, what the code looks like today, let me take this screen, let me edit it, and then I can push those changes visually instead of by by code. I think some kind of tool that does does that where there's a source of truth, but branching off looks different depending on the persona that's that's that
Nick:That's a good call. Maybe that's why they have branching to begin with, just to let people build safely within their bubble, and then when they're ready, come back to the main branch. And maybe that's also why we don't do not see that much, like, real AI slash UI tooling just because it's so difficult because of the things you just mentioned to connect it to all the right places and why we have a bunch of AI assists around us.
Tyler:Yeah. I think at the end of the day, we have to do the work until, like, the tool gets fed enough. We're gonna have to do some work, roll up our sleeves and get it done.
Nick:Yeah. Yeah. Well, I don't I don't mind, to be honest. I don't think it's too much of a problem. I do notice that whenever I I work somewhere or on something and I'm like and there's no AI help, I'm like, ugh.
Nick:Do I really have to do this by hand? You know? So we're we're moving the baseline, you know, with every Mhmm. New assist that we get. You know?
Nick:That's a good thing unless there's an outage. Yes. Scary days. Yeah. Alright.
Nick:Well, that's yeah. Well, you've helped me a lot at least because I was really a bit insecure. Like, am I missing something? You know? But it turns out it's okay the way it is.
Nick:Like, I'm I don't feel behind anymore.
Tyler:And it's I mean, to be fair, it's easy to catch up. Like, it's it's fine. Like Yeah. If you're if you're perfectly working fine without it Mhmm. More power to you.
Tyler:Yeah. And then once you find a tool that works best for you, it'll probably just help you out. Yeah. Again. Yeah.
Tyler:It's just a tool. I just whatever tool you're using in the moment.
Nick:Well, that's true. That's true. Yeah. I've you know, we we talked about this before. Like, I'm I'm very much of the belief of, you know, pick your tool and stick to it unless something is obviously better.
Nick:So, yeah, class code is still the way for me to go. And I think it's one of the best according to people in the know. So, yeah.
Tyler:Yep. I
Nick:think we'll be fine.
Tyler:That was a great episode. So if you like this content and wanna hear more, please like and subscribe.
Nick:Yeah. And if you want to see more, please go to designtablepodcast.com, Spotify, Apple Music, all the big players, and more.