Turning Figma Into an AI-Powered Workstation: Clint Sutherland

Hello, Clint. How you going?

Hey, I'm good. Hang on. Let me just adjust my screen a little bit there. Yeah, I'm good. I'm good. I'm pretty nervous and excited with the Dockers playing tomorrow. So, there'll be a lot of pacing through the house today for me. But.

Yeah, halfway through the pod, you're going to get up and walk around.

I just think about it, but then I look at the scarf. I might need.

You got to rep it, mate. Love it. Firstly, thanks for coming on the show.

Thank you.

I want to tell viewers and listeners a little bit about you. So, could you give us a bit of a background of your design history, where you've come from, the types of work that you've done, and what kind of design you focus on today?

Cool. Yeah. So, I studied at Curtin except I studied creative advertising, not graphic design. I largely taught myself graphic design. Didn't even do any of the kind of small parts at Curtin. I was very focused on in both advertising and photography when I was at uni. But it was probably towards the latter part of uni that I started to fall in love with design and craft and execution more so than some of the more creative ideas associated with advertising. And from there, my first job was actually at Juicebox, which is where we met. And I was there for just under a year, I think, before I moved to Melbourne. and Melbourne works started off at a studio called Raft where we did branding a few websites and that at that point we were doing websites in InDesign and that was frowned upon by me.

Showing our age now.

I remember that was pretty frowned upon most people saying it should be in Photoshop and I was just like my speed in InDesign was like infinitely faster than Yeah. But yeah, from there it was quite multidisciplinary. Started doing more and more websites. Worked at an agency called We Are Digital for a while with Carson and the team there. That was really cool cuz I worked on some big scale stuff. I did the Cbus Super site there, T2. That was really cool. And that was my first taste at like large scale digital design systems. And at that point, I was doing that all in Illustrator. And yeah, that was kind of before XD as well. I think XD might have just come out, but I was pretty sure-footed in Illustrator to do all of it. And it covered all of the bases. We still used the same theories associated with templates and ratios and all that kinds of stuff. And then I started freelancing and bouncing around a few other studios around Melbourne before going over to London where I started off in an agency called Addison primarily there as the like the AIO designer working on lots of the big what was it like the vodka and Johnny Walker rum and all that kinds of stuff and that was cool. kind of half agency, half internal to the Diageo business and then I got an amazing opportunity with a studio called exposure in London and they that was a experiential role. So no not really branding, not really digital and primarily designing environments, spaces and activations. It was a lengthy onboarding or like just to get the job. I think there was like four or five interviews and I needed to make a really extensive piece. They gave me a brief that was one of their briefs for Tanqueray gin and it was basically like what would you do as the activation for this gin and I made this really extravagant deck and have this huge idea for it and but had to talk through it as if it was a real presentation and then they gave me feedback and actually had two rounds of feedback on this fake deck and that kind of gave me insight into kind of I thought it was weird but like that's also London like it's so competitive over there and you do stuff at that level but got to do some incredible work over there. One of our budgets was nearly a million pounds on an activation for Simba mattresses. We called it the Simba sleep museum and we in the Hard Rock in Ibiza we actually created a mini museum with complete walls and everything. There was a sound to do with the effect of sound on sleep there. So we use these like content factories basically. So there was like the effect of sound on sleep of plants of lights. So some of the rooms we had like suspended sheets that were lit up in different ways. So kind of stuff was just crazy for me. and what was another one? Another cool thing that we did was working with the British Heart Foundation whilst we were there. And one of the insights that we discovered whilst talking to the British Heart Foundation was that your heartbeat is as unique to you as your fingerprint. and then we talked with the tech team. I wasn't in the digital team for exposure. I was in the experiential team, but we were able to kind of team up with the digital team and talk to them about an idea we had that was could we make a digital representation of a heartbeat and then generate them on the spot as like a traveling road show to encourage awareness for British Heart Foundation. we did that and what was Yeah. really cool cuz we worked with an artist called Rik Oostenbroek.

I know Rick. He's amazing.

His color work is just incredible. I think it was about like 10 different data points that he could map to the different parts of people's heartbeat and then person came up to the stand. It's called Heartbeat and yeah then we generated these posters and people posted them on their Instagrams and that kinds of stuff. It was a really.

Incredible.

Interesting use.

There's been such a broad such a broad range of design that you've done over your career and that's not even half of it. That's when you're London. You you've come back, but start from identity to digital and experiential.

Yeah. So, and I think that's probably I've got ADHD and I'm someone who just loves learning new things and I get bored just doing the same thing over and over, which I guess is why freelancing has suited my career. Not because I get bored in any given agency, but I just am constantly looking for new things, new environments, new ideas and that kinds of stuff, which is one of the things that is exciting about AI as well in that space. But guess before I move on too quickly, came back to Melbourne and had a definite want to and desire to focus more on digital knowing that was Things were going. I think also experiential and events is like crazy stressful and I was just like I cannot because in comparison to a website where you can have a soft launch and if there's anything wrong with any of the data or there's anything wrong with any of the copy or imagery you can always have a hard deadline.

Has to work.

Everything is on this day and some of the people who used to plan it I remember seeing like some of Alice's she was the lead PM that I was working with for a while there and they'd have stuff planned down to the minute and then like backups like if this doesn't happen we do this and if this doesn't happen we do this. It's just like what do they call it? All eventualities and it's pretty amazing the level of.

Goes into those things.

But it's so tense you know like things can go wrong and it's very stressful and it's a lot of time,.

Effort, money for one moment that gets thrown away.

Essentially. That's that's why there's always got to be these takeaways of what's going to be the thing that people remember this by. Some take a selfie in this moment or to post or to make it something that has virality. And yeah, it was fun. It's a good kind of mix of my advertising degree background. Some of my Digital skills like I did work on an app for Heartbeat and yeah the website and that kind of stuff but my digital touch whilst I was there was always kept pretty raw because there was a digital arm that did that stuff anyway.

But did you get more into that when you came back to Melbourne? So after London you started cuz you did People don't probably don't know this about you but you did the Officeworks app.

That's right. Yeah. So I started on that at another agency and then only did the homepage and then just over a year later they contacted me again and said like let's have you on board to do like lead the whole like full regeneration of the app. It was an interesting project because they couldn't overhaul it. So we could only do bits and pieces and sporadically as small pushes and sprints in updates. So it's like in comparison to how I like to work with systems where like one component will update everywhere. Everything was separated in the back end and you couldn't necessarily fully start from scratch cuz you'd need to take the entire app down. So I started basically building a system from the ground up starting again with the homepage how sheets work and all of that kinds of stuff until eventually we had a really consistent brand language. And it was just me working with their working with their development team and then the wider Officeworks team holders involved there.

That's really impressive. Really big. Yeah, that's great work. So, how has that changed now? that way of working versus the new. Let's segue into how you discovered this technology and how you're kind of using it. I think people are going to be quite impressed with your approach. Tell me about your journey so far.

Yeah. Wow. Like I guess it all like probably started just from the pressure of when it came out and knowing that it kind of was coming from my job. That saying that started percolating like it won't be AI won't take your job. Someone using AI will. And I started being like oh no I'll be fine kind of thing. And then eventually I'm like look I've just got to be the guy that's using AI and how can it how can it help me versus like well instead of someone taking my job basically. So I started looking into especially some of the system stuff and some of the ways that it could simplify and help me with things like note-taking especially I'm not the most amazing note-taker. I usually do notes even after a meeting because if I start writing during meetings then I can't keep up. So usually my habit in the past with meetings is to walk away and take quite an extensive voice note. And the cool thing about that is that was the perfect workflow already for just tailing that straight into AI because you could get your transcript out of out of the phone in the Apple Voice Memos. That's the way I still do it. Just record and hit copy transcript, paste that in. And then it was the kind of contextual awareness of AI that really struck me. So once I knew that it could remember all these past meetings and then hook it up to my emails, it could go through this email said exactly this these are your actions. That side of the workflow was the first thing that struck me in massively helping my efficiency. Yeah. Not to drive home the ADHD thing, but those kinds of things that I've just forgetful with staff attempting to read really long form emails. That's one of the really difficult parts of being a designer is sometimes you get emails from five, six, seven stakeholders all at different lengths, different things. Purifying that into what's like actually your job list that you need to do or even reflecting that back to the client to say right so I think this is what you want me to do. That's always been like really hard in the past and probably the thing that I still love the most about AI to be honest. workflow,.

Ability to summarize and assist with those sorts of things. And I actually find if you if you when you're speaking with like say Claude, Claude likes to spit out long verbose amounts of text. If you just say explain this to me like I have ADHD, you get a brilliant response. It's very concise. And it's really easy to follow. So I can definitely see the benefit of that. But you so you started with like so it's like administration. So you're you're you know your weaknesses. You've been using it in ways that help you with all the work that you don't want to do. How did you go from that to some of the things you're about to show us, which is using it creatively building systems around your work? Was it just a natural progression?

Yeah, it was more it can do this, can it do this? And then yeah, lots of playing around with certain things. And I will say that another thing that's happened over this process is it hasn't been it's hallucinated a lot. It's put stuff in emails that I haven't read properly. that come back and clients are like, "What are you even talking about? What is this?" So, look, I've been bitten by it enough now and scarred enough that I'm much harder on myself to review what it what it really want to drive that home to everyone that you have to read this stuff. And I think that I saw something on Instagram recently that was actually saying how much we're being overwhelmed by having to review the amount of data that AI spits out at us. And that's also A battle for me. But to go back to your point, I just started experimenting and then it started being really good at a lot of these things and I and I started hating all of the copy pasting. Previously, I went writing things myself and being stuck on a blank slide and then trying to think of ways to make it better using apps like even Grammarly had like a thing in it for a while that could help to then suddenly I could use it to write proposals and decks especially helping with rationale. That's something that I hate. It's like pulling hair out, writing rationale for things or like the what a mood board should look like. I could always get close and I used to write in dot points but some of my favorite agencies out there and my old creative director exposure always wrote in like paragraph sentence form and just felt more poetic and more creative and that was never something I do and now I can do that thanks to the AI where it goes in and then I'll I'll tweak it. So I've become such a better writer as a result of working with AI to even hone.

Interesting.

Tone and voice and I do have.

And is that just because it's when you say you're a better writer, it's not that it's doing the work specifically for you. You're you're working with it to become a better writer. So, you're you're getting more of an understanding of what to write based on what it writes and then it becomes easier for you.

Exactly. And then it even corrects me. So, one of the things I'm about to show you is I've been working on these agentic brand systems and there's two parts to those. There's one that's the verbal part and there's one that's the visual part. We'll we'll primarily look at the verbal part today, but within that you've got like your brand language, your audience's tone of voice. There's a set of infrastructure and rule documents that once you put them into Claude, the more that you're working on that project or if it's I've got one for studio that's that's my studio and every time I'm typing into it, if it sees something that's like a tone element, it'll say, "Do you want me to update your brand language with this?" and then I'll say yes. And it's basically learning my style, my tone of voice, the way that I write. Like one of the things with AI that I see all the time is the em dash is really popular, which like is a classic AI tell. So one of my rules is to remove the em dash and try to write in sentences, not this like Full stop, full stop, full stop.

So you've built your own system and that's in Claude, right? So you primarily use Claude, so just the desktop app just for people watching. Yeah. I want to I want to you've just said a few key magic words there. Agentic brand systems. And I when I talk to creatives about AI, they the natural inclination is to think it's going to design me a logo or I'm going to use it to design something. When I've actually found all of these tooling to be quite poor at that, they're getting better with context. You give them more of a structure, but that's the key word, structure. And I think what you're doing is the right way to go is to create a system around your work based on all of your experience and then it becomes really useful. So do you want to just tell listeners what an agentic brand system is in your own in your own words?

Yeah, sure. I mean I'm probably going to stuff this up. I've read a few articles on it that have much better worded but essentially agentic just gives us the ability to reach for a series of rule books or infrastructure. They can be MD files which are the markdown files natively read by AIs. The YML files or the YAML it's more like a coded infrastructure. I use those for audiences. They're really good because it's just very simple data, simple structure, easy for the system to read and edit. And yeah, from those you have like the visual side and then you have the verbal side. The visual side will help you generate things from tokens. They can be things like color type, corner radiuses, line weight, all of these all of the elements that it's come from atomic design systems essentially tokenize and then build into series of components. So a an atomic design system is the idea of molecules into atoms in sorry atoms into molecules that then become patterns that can become components that can become templates. And if you edit the atom at the base, let's say my accent color is blue and then I change that to yellow, that will roll out rapidly across all of my system at scale in click.

And traditionally, previously those sorts of systems were done in Figma, right? So you have a quite a large design system in Figma. You might hand that over to a client and then that get translated into some sort of coded representation of that. How does it change now within a an agentic brand system? What is the handover? because it seems like it's moving beyond just a Figma file.

Well, it can still be a centralized Figma file, but it does also need to be something like a DAM, a data asset management system, or there's also a number of other like brand platforms that do it. You can generate them directly out of Claude as well, but essentially for it to be hosted, it needs to be an HTML file or on another platform coded online that's linking to code that sees and reads things. Whereas Figma is set up in layers that does have dev mode and that kinds of stuff, but if you try to generate directly from it, you're just going to get lots of hallucinations. So with a an agentic system on the visual side, it's the tokens and the way that the system is built that then helps you be able to generate new pages from website,.

So that so when you're working on a brand, that's a key thing that you deliver is here's a system that potentially even the customers agents could use to create other assets and things, right? Is that how it works?

If it was a digital-based brand, I would I will preface. So like if I was working with a tech startup or with a business who you usually wouldn't build an agentic brand system for website output for a business that has a website worth probably anything less than say 60 grand because it's so expensive as an upfront cost and the chance of then adding pages outside of say their blog or their news that are detailed and need something like an agentic system that's more so for your like big health apps, large websites that have complex components and they want to be able to generate things really quickly through an AI. That's probably more the market for it. What I've started building it more is building it into Figma so that the so that the AI then generates components and pages from an atomic system built into Figma. And so that can be anything from a deck to a website, a social media asset. They're all set up. Anything digital is essentially set up in the same way. you can have all of your visual rules and then you can also have motion rules as well. which is.

Because it does have a motion editor now. It's quite good, isn't it? Yeah. All right. Well, have you got an example of that? Can can we do a deep dive on something you've created?

Let's jump in and we'll have a little look at this. we're going to do this infinity screen thing, I think, here. cool. I'll just minimize this. Minimize this. yeah. So, this is a deck that I've been working on for brand positioning. and the way that this works is I have my headings over here. And so this com this is a set of variants, component variants. And then I have the heading for like that's my studio. that's who I'm working with and that's the project. And if I change this here, then that just changes in here. So every time I need to update a like a brand positioning or whatever my deck is, I have a menu structure. The index is then prototyped to hook up to the index down here. And then all of these then link to the cover pages. the way that I work in these is also always left to right up and down. but essentially where this gets more interesting is that I've set this up to be all machine readable. So the template over here we can see all of these name here are all like weird cody things and then as we.

Technical term.

Yeah in our brackets this is also the difference between a developer and someone like me that's just a Figma tinkerer more how I describe myself than a developer. I've like yeah more hacked my way to this sort of point than anything. But this step that we have here, what I did was essentially went through a funnel within Claude and got it to ask me a series of questions that I've built from I'll just bring the Claude up like so. We can close that one. if I go back to the workflow. brand positioning. This is to build the deck for the Bathys system itself. So Bathys is the name of the deck template that I'm doing. And I'm here I've kind of put in some samples of sort of like the raffer deck. I've gone to the deck.lides thing and pulled out some references. and it's given me like my sprints. So from here Bathys sprint number one deck system power and it's told me kind of what I need to build and then the fact that after that then I need deck creator to then read the template essentially.

So you're just iterating with it. It's it's sort of telling you what you need to do based on your outcome.

Yeah. most of the time that's how I've got there or if I can't work something out and I say I don't understand what else do I need to do and it'll tell me exactly that and that's a big way of working with AI is don't you don't need to know you asked it how to do whatever the thing is regardless of howated like I've done some more complicated things so then from here it's like tokenize the file emit this addendum and then from Here if I come into Bathys over here I have within our context here we have the files that are the agentic files so that's different concepts voice positioning brand language audience and messaging.

And that structure is something that is it's not just come out of Claude like that's your experience to know what's needed in a brand system right.

That's it if I just deleted I mean, I just delayed the key.

I do. so you're sort of working through, hey, these are all the components that I need for a brand system. Help me create.

That's right.

System. Yeah.

Yeah. The cool things about So once you've got these your differentiation concepts, positioning, brand language, then Claude can update these on the fly as it's learning. So this is something that I'm looking to sell for around 35 bucks US. It's a it's so differentiation is like where this product will sit within the market and what I plan on Concepts is like organizing idea creative intention visual intention all of this stuff and as I move through my positioning flow this dynamically updates in the back as I go. So things like brand pillars I got here from if I go back to Figma. this is the structure that I use on any Brand positioning structure. So vision which is the world we want to manifest. I'll just go into theation file for this mission. This is what we do every day to bring our vision to life. Brand pillars. These are the foundations on which our business will grow. Values, these are the principles we don't compromise on. Personality, this is how brands should feel to others. And key messaging, this is what we want to say to our audiences. So from this infrastructure I've then generated a series of questions associated with each one of these that people can use on if I go to if I start a new project for example project new and I go to like new let's say we're doing it for OVRFLO I can go forward slash brand positioning deck And then I can say my new client is OVRFLO and then put your URL and then create a workshop for me and that will then pull all of the architecture from that deck and the entire way that this is built. So every single one of these pages, every single one of these components is machine readable. it knows that the objective of this task of this workshop is to fill all of these.

So that skill is connected to that Figma file. Is that is that what you're saying? It's it's.

So I would.

But it's just got it's got a it's got a markdown YAML representation of what it is.

That there's a coded representation of every single page. and then things like the imagery that is all user-defined. so that's like a big part of what I'm saying here is this is not going to do a brand strategy for you. It's just purely providing you the architecture and you need to go through that funnel. You need to go through that process. All it's doing for you is creating all of this beautiful infrastructure and a well-designed design system that you can populate.

Yeah. So you mentioned before like atoms as well, right? The atomic design system. So this is these are slides. You've got a breakdown of all the smaller components that you've created.

Yeah. So I guess if we're talking variables are probably where I would start with that because your variable system are your atoms. So I have a sheet for color which I've created this as a in modes as well just in case I do want to create light mode, dark mode. But for now, it's all in one system. but if you are creating a big template like this, it's a good idea to create your modes from the get- go and the system can then read all of these.

But now, are you doing all of this? Are you using AI to help you generate these? I always remember with this system when this came out, it was for me, it was like, oh, that's really cool, but that's going to take a long time to do.

Absolutely stupid amount of time. So I think the benefit of my understanding of Figma was that I knew what needed to exist. And I think that's a big part of this idea of oh like AI is going to take your job once you have advanced understanding of what a semantic design system is. You couldn't get a design system to this point just by saying just create it to the best of my knowledge like it keeps updating every day. basically I said I want color and from the colors I want primitives and then I also want the semantics which is semantics is purposebased usage. So for example Background Surfaces. Yeah. We only have the surface color. So there's only there's only In different ways. So all of this writing here this is all being generated by Claude MCP.

So you're working to do so to do this, you're in Claude connected to Figma via MCP and you're prompting Claude to generate this.

That's right. And then the same sort of thing happens with type. So, one of the big things I've found starting any project is always start with primitives for your type. Pretty much any brand will have shouldn't have any more than three fonts. So, and then they use them for set purposes. So there's like display fonts, heading fonts, body fonts, labels or some people call it technical. I've used Satoshi in this for every one of those. But in this scenario that I wanted to make that PP Right Grotesk for example, I could just change that here. And because it's a primitive, if I go back to the file, you can see it's automatically changed all of these. Adjustment, but.

The you're I guess what I'm getting at I'm seeing here is you are you're not using it to generate you're not opening Claude and saying generate me a deck. you are using the tooling to create the system around the work so that you never have to do all of the manual work again.

Yes. So what like one of my kind of taglines for this is like get in the mud so the system does the work for you. So the idea is that A system like this frees up a lot of your time to be more creative and more adventurous because you've you know that when it comes down to populating a deck like this populate this entire deck in like a couple of hours whereas this usually would take a week to do something like that. So now I know my job in creating a brand strategy like this. and I'm happy to share this one for the for the viewers as well as an example.

We'll put it in the show notes.

What we can do. yeah, the idea here is that all of these pages and the animations and everything that's in here, that's all pre-made. We're just updating our brand pillars and this kinds of stuff as we go. And then the menu here still works.

And sorry to jump in. When you say animations are pre-made, what do you mean?

So, one of the problems I've had is that every time I start a deck, I like to Oh, look, there's a bug for all of our viewers at home. It happens to all of us, except that for Phil. I like to prototype decks. So, there's really manual. So, every time I need to do something, I need to click and drag into there. So this is going to here. So and then gets to the end and there's a slight difference in this one. So if I click this one, I set every end slide to move in and But the transition between all my internal slides is either dissolve or instant. And that's a global rule that I that I do everywhere. But often my problem in the past was I'd get all these and then I need to go through and once I've added a few slides here and there, suddenly all the prototyping's out. And a big mistake that I have made before is that if you're in a rush, suddenly this slide doesn't go to that one anymore and put you down here and we miss a whole section unintentionally. So, I'm presenting and then I go straight from brand pillars to personality and then I realize, hang on, I haven't shown them the brand values and I need to come back into the page, do the prototyping in front of the client and that's all like a big no.

Not great.

Yeah. So, yeah, a good thing of this is all of this crazy prototyping that's Yeah. pretty wild. I've just got set now and I know that this is my deck structure and that's all I need to do. yeah, like another one of my things that I love doing is like a personal sort of a audience on a page, their profile characteristics, motivations, pain points, communities, so channels, who wins them, message and primary pathway. So again, the AI knows all of these audience channels. And they've all been mapped. And so since it knows the questions to ask for, then it can use the infrastructure that I built into the skill to know that it only needs to generate four for each one of these. keep them short and the language to use for this specific environment. Whereas in the past I've had a lot of trouble with AI for some it will create six and for another it'll create three and some of them are much long-winded and some of them are dot pointy all of those kinds of.

Consistency is a real challenge with the tooling isn't it?

Yeah exactly and that consistency that you build in into your infrastructure which is like the into these guys here because every time it's generating anything it's pulling from those. So I think that creating those files on any project is the is the thing.

Start with the plan.

Exactly. Always spend a lot of time. This is looking to do and like this is my infrastructure. Populate this and update this as you build.

Yeah. I find that works really well as well. You're not just bashing out a prompt saying make me this. You're you're saying let's come up with a plan to deliver this outcome. And it's a lot of back and forth to get that right. And once you have it, you're basically Creating tooling for the outcome. It's not Creating the outcome itself. You mentioned previously that you've been you've been creating plug custom plugins as well in Figma.

That's definitely a fun bit. So like I'll show you the if I go to image layouts. Yeah. So there's a bunch of them here. So, what I was doing here was creating like a series of image slides that people could use. But one of the new things that came out in Figma was the ability to build your own plugins. And I've created a few of them. I've created one that's like a bokeh grain for example. So, like if I get this and do a bokeh grain, I can create my own like textural pattern. Let it just run here. and so you might need to zoom in on this for some users. I can change the blob count. I can make this like more or less organic. I can set it to different parts of this gradient. But it's cool because like I can actually set certain and then if I want say more blobs or whatever and then there's thousands of different ways that we can generate. So I mean that has created probably one of the ugliest emission you can go for. But the idea is that it can create Interesting textures. And so those ones are actually called shaders not necessarily plugins. These this is done by so I'll bring these up cuz these are fun. and each one of these is created by So this is a film strip and it's stuck them all and then there's a hover for the caption for each one.

And it generated this on the fly.

These sorts of like Animations in between things which is like there's lots of platforms selling these animations after effects and these kinds of things. but now you can do it in Figma and it looks like really cool and it's just like one click.

It's great.

And it's got lots of things that works. So, basically, I'll just grab all of my images here. And if I just pull them over here, I can then go dynamic image layouts and go run. And I did this via prompt, by the way, which I'll show you in a in a minute. you've got kind of your different options here. Grid, mosaic, film strip. I really like the radial one. So, we'll do that radial. the frame size. So, I've got it 1920 x 1080 if it's the scenario of a deck, but you could inverse it if you were doing a slide for social media or something like that. adjust our corner radius however we want. Let's just keep it like a tight one like four. lock aspect ratio which means keep the ratio of the images that are there which I want. and then show caption or not. So I would just want to probably remove the caption there and then animate entrances. So now it's going to animate that as well. I can hit arrange. Hang on. These are all in slide.

Live demo.

Yeah, live demo. I've got to pull them out of the components. All right.

This is.

Now they should.

This is really impressive. Oh, yeah. Okay, let's let's Okay,.

So there you go. It's just done it. And then grab the master one. So, that's just done it there. And see how they're in weird positions. We can then just adjust it. But this has done all that animation within Figma Motion. So, that part is really cool cuz we can work within this and then once I click it and open Figma Motion.

Timeline.

No, it's not. It hasn't worked for the live demo. Would you look at that? Let me just see.

It's always the way. So this is this is really interesting cuz I bunch of people I've spoken to with this sort of technology. they are every designer that I speak to is building some form of tooling and a lot of them are you know building custom artifacts in you know Claude or whatever and maybe they're building their own sort of hosted web experiments but you're doing something different it's the same approach but you're using Figma as a work surface for everything and you're obviously because you're comfortable in it you you know what you're doing you're using Claude to extend the capability of Figma and that's where your work is happening I think it's Fantastic.

Well, yeah, and the live these are not working for me this time, Jarrad. But essentially, it should it should do these and it should generate Yeah. live images at each point. I did them for the deck that I was working on as well. Like if we go back to here and we go to the brand positioning deck, this is because if I Pull them all off, you can see how it's built into. So I didn't do any of this. This is what the plugin did. And if we're going through a mood board setup, let's just go from here.

And did you create the plugin in Figma's AI agent or in Claude to push to Figma?

This was done within the Figma agent.

Oh, great. That's impressive.

Just a set. And yeah, so you can see the way that they all came then. It just adds like loads more sophistication to a to a And is done in like literally two clicks. and is something just I can even provide the prompt to everyone how to how to do it. like if I go to tool be great.

That's right. I'll put that in the show notes as well. yeah, Have you have you had much experimentation with tooling to help?

I'll provide the It hasn't. It deletes it after you build it obviously.

That's okay.

With chat log, but yeah, I'll just do it quickly now for you. I'll show you because it's super simple. Come into here and you go build plugin. build a plugin that. adds a series of different animation entrances to images and gives us the opportunity to lock the position or create new layouts. That's it. And then it will basically generate your plugin here and you can.

Back and forth with it.

On those things. And that's how I created yeah the other ones that are that are in there now. It takes it takes a minute but image entrances and if I hover over add staggered entrance animation to selected images without changing their layout. So yeah, I think things like that just make such a big difference in creating a more sophisticated deck. this is something that I'm looking to make public. But to your point, what this is is a system that in which you work with the AI to workshop kind of strategy, behind the scenes work, lots of rationale, tone of voice stuff, and then it's populating into these fields for you rather than you have copy paste from Claude or ChatGPT in whichever platform you're using back into the deck. It's basically auto-populating decks. and further to that, it also works for templates. So, for example, one of the things that sucks as a designer, especially a freelancer, can chew up a lot of time is quoting things and quote need to look professional. So, the system will also read these ones. So, this is the template. And if we look at the files here, you can see how well named all of the layers are here. I haven't named any of these. All of this stuff has all been done by like copyrum by system and then it will basically generate me so what's included workstream one deliverable TON Studio does this studio does this process stages so then like a series of examples of how these could work these are these are fake just created the number all of this dynamic data it's populated in here And I've done a number of quotes now and they've taken me all of say half an hour to an hour and it will also spit out complex statement of work documents like these ones.

And did you supply it a lot of your own for reference or did you work with it on defining what a statement of work should look like?

Yeah, I worked with it on as from a series that I've made in the past. and then it from here it then has basically a document structure that it understands. And so these aren't even components, but it knows that this is like heading three. And then that these items supports and it can add as many of these as it needs to. and then I've also set rules around not overflowing pages. So it knows basically once it gets to here to run to new pages. and yeah, so all of this stuff here in terms of like the build, All the pricing even everything it can auto-populate into a document that would normally take weeks. So.

Basically a long time. It's a massive time saver. And are you so sorry if you already answered this, but when you're creating this system again, are you are you in Claude telling it to push it into here or are you creating a plugin within your file with the Figma agent to achieve this?

No, it runs through the MCP. So maybe.

Oh, yeah.

So there.

And so this is this Bathys system. This is something that you've created for TON to take out all of the manual effort that used to take you along. So basically it's an admin destroyer. and is this something that you're looking to release? You're saying?

Yeah. Yeah. So eventually the idea is that I just keep building rules and skills to populate this and then I'm going to sell this so to agencies or freelancers, whoever wants to use it. so I'll just do template and cuz I was doing one before that was called one this one that we were doing it. Yeah. So this was one that I was as just like a sample. for example, this is what Claude had generated within its own architecture natively which all looks very AI, right? I think a lot of AI stuff looks aptly like this.

Horrible. Yeah,.

A lot of this data then I've then componentized to say right so we need charts we need tables hero slides so it's still pulling from the infrastructure that I've given it and that I like to write decks but it's just done it natively and so this is a good comparison but I mean Claude's pretty amazing with these decks that these can be playable and zoomable and that one's and this sorts of stuff is editable now But I just feel like you're pushing uphill to be honest with working with the Claude design versus Figma. Figma is like just much more manual and craft driven and that's why I love it. But.

You have the creative control, right? So as a as an expert in your field, you don't want a prompt that spits something out. You need that control, but you can still layer AI efficiency over it, which is what I'm seeing you doing a lot of. I think it's brilliant.

I think it's great. use the deck creator to build this into our deck template. This is a interesting live text. So then I just placed a link and.

Figma MCP.

To then jump into Bathys. And so that deck creator skill create a whole new deck genre but like from the Bathys foundation. So that's going to pull from all of these that I've made That are all readable. which again, this has all been partly generated or mostly generated by the system based on needs and requirements,.

Layouts and yep,.

Mark the deck.

Like you say, it's got the atomic system, so it can it can generate other layouts within a strict system already,.

Right? Yeah. So this it does easy like no problem at all because it's document structure and really quite simple. but the I've mostly had fails with this so far. So it'll be interesting. Maybe we'll need to come back to it. But thinking about it, usually it takes about 5 minutes for it to do something. Yeah, it.

Yeah, I find when an agent uses MCP, you see nothing and then all of a sudden you see everything. So it does a lot behind the scenes and then all of a sudden bang just.

Suddenly appears. right.

Yeah. Okay. Well, so whilst that's kind of doing its thing, why don't we pivot? you're using it a lot and so I've been speaking to you for a while around this stuff and you were probably one of the earliest adopters of Claude in the design space that I know of. Where do you see this going? Because every day I wake up there's a new advancement, there's some new capability, new ability. give us 6 months a year based on your experience. Where do you see all this ending up?

Very good question and it is pretty scary to be honest. I think the advancements of MCP hookups with companies like Runway and Higgsfield and their ability to generate like content infinitely is probably the scariest part because we're just going to start a massive flood of just awful work that is because there's all these I've saw one recently where a guy created his own fake simul simulation basically a basically his own matrix and he had like an overlord and then spaces that people worked within and then each one of those spaces had people with real businesses. So one was an Etsy store generating stuff that printed on m you know like the live life love sort of things and it was just generating this infinitely working up through the Higgsfield plugin and it's got you know 50 grand a month or something from all of these businesses that were all just generated directly from all of these hookups and they're getting better and better. So I think in the film world we'll start to see films that have been created from AI bots to one another think asking themselves what's going to be created and then equally you'll probably have clients that could step into a platform pretty soon. Relume's doing some amazing stuff in this space that's working in a similar way where it's like just put your workshop notes in and it will populate your site map and then your website. And I think it's going to take a huge amount of small business work out of out of like my fields. I'm pretty worried about it in that sense cuz clients could come and start doing it. But they still need to get their hands dirty. And I think that this is the thing that clients usually quit with is doesn't matter how good AI gets for a good strategy for a good design system. It needs to know your business, ask questions that take elaborate answers from clients and then iterate on creativity. And it's that process that I don't think clients are willing to go through on their own. And the ones that do usually it comes back to the taste idea as to whether they do have good taste or or not and whether they know their audience and what their audience wants because that's also a separate thing is I've met a number of founders and worked with business people before who think that their audience wants a certain style of design but then I have to them that no that's not that's not it. Their audience is different to their taste. So yes, You don't know what you don't know. And.

That's a really good take. I think the business owners are busy and you know the amount of I mean you would have seen this the slop apocalypse of like gig posters and menu designs and they all look the same and they look awful. and actually I my belief is there's a negative brand impact and you know I might put a few up on the screen and it takes someone who's got a lot of experience in design to say no you got to kind of zig when everyone zags and you have to be unique and that still comes with experience and I don't think AI is going to be able to get to a point where it's it might be able to show people different variations but at the end of the day people are using it if to to create things right it's like when Canva came out or Squarespace came out. If you're a business owner, you're going to use these tools to create things and you're going to look at it if you don't know any better and say that looks pretty good, but you need a rich experience to know, no, it's awful and here's all the reasons why. And I just agrees with you. So, yeah,.

I think it's a really good point you think it's like it's still generative design absolutely still has its place and I think it's what we where the creativity comes into it. Like if you look at something like the Officeworks app for example that as a systems-based thing is very well suited to an agentic workflow because it has lots of utilitarian pages that are not highly creative. You're not using unique design. It's not like designing a poster. This is like a receipt page and once you have your receipt language you need to generate say 10 different variations of receipts based on what platform they've used and they used a voucher or like then there's other things like aisle location and things like this that's relatively utilitarian styles of UI design which I absolutely love and should be custom done from the beginning but it should be consistent language across the app and if that one card that is say the aisle location style that should be a repeating design. So once AI has these libraries to feed off with things like that, agentic systems are really powerful. But it's creating say the more story or narrative driven pages that will be the real human involvement. And I think that digital design is largely that this kind of mix of utilitarian design systems based pages that are just purely relaying information that's needed and then other pages that are much more beautified if that's a word much like interesting use of engagement and motion design custom illustrations like beautiful photography all of that style of stuff. But it's it's like kind of pick your wins and say these are the pages that we want to be incredible and just in this system to generate the rest.

Yep. And the systems are good for maintaining things at scale as well if you've give it strict rules. It'll generally stick to that. Yeah, I kind of agree with that. I also think that you said, you know, generative UI has its place, generative design. And I think you're right in terms of again if you create a system around a brand, the image models are actually very capable now. And so you can you can iterate really quickly. You know, you can generate 50 variations of illustration styles and image things and then you can you can hone in on something as a creative rather than having to do all the manual research and spend all the time. You can quite quickly hone in on what you think is different and works and and I just love that about it. I think it's a fantastic tool.

Yeah, I love that about it, too. I think it's like the im using it for customizing imagery and testing that feel is super powerful, but then obviously it takes photographer that you might have employed to do that. There's two sides to it because sometimes it's like I've art directed shoots before and you think a certain style is going to work and then you get the imagery back and then it turns out once you see it and it's real that it doesn't actually work as well as the brand maybe referenced if you did reference something too closely or like that inspiration and that mood board suddenly it didn't work as well. So I think that style like especially using Nano Banana to just switch in your product, your subject matter into an environment and say does my brand work in this way really powerful to test new styles and I think that is a really quickly evolving space and I love that. But it's interesting watching the people at the top, Apple being probably the pre the people doing this best where they're still using humans to shoot and still using all these analog textures like that new Apple animation.

It was the I think it was the Mac Mini advert, wasn't it? It was all stop motion.

That's right. Yeah.

Yeah. Yeah. Incredible amount of work. Yeah. It's interesting. You see, you see after that advert, I remember seeing all the AI bros, you know, generate an AI version of that ad. And they're like, look, I did this in a minute and it cost, you know, a dollar. It's like, you know, you just created a very poor knockoff of something which was crafted by hand and wouldn't have existed otherwise. Yeah. You know, so there's definitely some downsides to the tooling and I think you can't create yet very new things as unique as that. Like I I wouldn't suggest right now the tooling could have created that ad by itself. You know, it required a lot of foresight and creativity and human effort, right? There's a time and a place.

Yeah, 100%. And I think that's and that goes across like digital design as well is that there's going to be these studios out there releasing websites that are absolutely amazing and reimagine the way that a card stack works. And then soon after you'll now see one of the platforms everywhere Is details. And then suddenly that exact pattern is on the details webs and I can click on that and copy the AI prompt and bring that in which is really cool but at the same time it's this it's this race of something new and creative then gets riffed so quickly after it's been launched that you don't know who the original was.

Yeah. It's like there's no moat anymore. You know, if you if you're someone that's a I guess it's it kind of pivots you to have to be a net creator, not a net consumer. So, if you're if you're the kind of person that's going to browse for effects and point your agent at the effect and say, "Copy that effect," you yes, you might get a result, but you're not going to stand out. If you're the type of person that spends the time thinking through new ways of creating experiences, yes, you're using the tooling to create the experience, right, at a rapid pace, but it's new and interesting. You're going to stand out more. So, you know, I think it's just a good way to think about it is like try to be a net creator, not a net consumer.

Clearly, right? Yeah. And it's like it does mean like these platforms are also great to and it's the core of creative influence in a way is saying like, well, I love the way that this drawer pops out in this way, but instead of using as a hero nav, I'm going to use it as an anchor nav. And and so suddenly you've you've taken something that was pre-existing on another site but utilized it in and riffed on it in a new way. It's like that whole remix culture.

Which has been this true for as long as we can remember. There's just new ways to do it.

That's not a thing. That's that's that riffing culture. And I love that. But you're still going to see the top agencies that are doing the most creative stuff. No one's coming for them. like and I think the businesses still want those kind of websites that want to stand out and want to look better than their competitors. They're still going to pay that those big dollars. I think it's going to be the small businesses that are like I can prompt my way or I can get something that's like still incredible in the industry and delivers the information it needs to.

And that's all I need. Which is fine because that's been the same forever. You know, like I said before, you Squarespace came out and a lot of digital agencies started to get concerned. My customers will just make their own. And to an extent that was true, but it just takes the bottom end of the market out. You know, those that were not prepared to create something unique anyway or they don't need it, you know, they don't. So, you just have to adapt. I think.

I think that like this accessibility thing is also a big factor in this. Like giving everyone the accessibility to make a website themselves Isn't isn't a great thing. Like I've got a client and I talked to her about she made her own site in the Squarespace and it looks great, but when I talk to her about the grief that she went through in learning the platform and doing it all by herself and she was up from she's got yeah two kids and was up 10 till 2 a.m. every night for you know months doing this thing.

Sure pay for that and it will Just right shortcut it. Just pay an expert.

It it's not just this one-shot thing. And I think that's probably the thing that frustrates me the most on a lot of the rhetoric online coming from AI creators is like designers are dead. Like Figma's dead. It's the stupidest one that I.

It is stupid, isn't it?

Yeah. See, and it's just like these things aren't dead. It just means that like some more people are going to try to do it themselves and probably realize that it's not as easy and doesn't back something that's as incredible think it is.

Yeah. Every single one of those posts I see where they say this, you know, designer is dead. That person is not a designer. I say, "Look at what I created." And.

You need a designer. Creating like not even real websites for.

So that's all just engagement posting. Cool. Well, look, do you want to jump back and see if that proposal Has finished?

Yeah, we can jump back into that in a sec. So, look, this is a this is a first pass pulling completely from the library and not from my brand positioning deck. So, this one's really beautiful and where I want to get it to and then I plan on componentizing this into the slide styles and then it will it will generate at speed. But if you look purely at the content, it's populated the date, the client, and then each one of these slides is then the brief. So, and it's given like everything back to us, Core principles, approach. So, even if this is just generating, let's say, raw data, this is still enough for lots of designers to come through and, And change. But it's also like once you get the template and you've got your style, at least all of these are in styles here. So the system is powerful in that once you update all of your type, let's say you want that to actually be like size 40 or whatever, then it will rapidly start rolling out across all of your components in here and then out here and then eventually for whatever your output is when you use the skill. but then it's like so this is the site map and it's generated on the fly and then also given the template that it's using. So event detail template learn that's a content template exhibitions is a listing exhibition detail. So it's provided the templates that are there. The only thing that's missing is Is the legend on the side. So when I go back and edit this what I'll do is this site map here. If I go to right click and I go to say go to component, this is the template for that. And the reason that it hasn't populated the legend is cuz I never actually included it in the design. So all I need to do is have one of these and I'll pop out here somewhere and set my legend up on the side so that then it says these are the total templates of your site and then tell the AI about that and it will then become machine readable. So then once it goes to generate these in the future, it'll always make sure it populates a legend.

Yeah, that's brilliant.

Yeah. Collection data, what it collect connects to all the CMS, all of this kinds of stuff. budget 100k. It's it's generated a dreamy client for me in.

Sounds great.

In this. But look, the design finesse of this is not even close to what I produce for my decks.

But but I think that's fine though. I think it's important for viewers to understand is this is it just spitting something out and saving you a lot of time. People think it's a magic machine And you just punch in something and you get this perfect response out. That's not the case. You you've set this up so it's going to spit it out in the work surface that you are very competent in. So if it spits it out in this, you have the ability to really quickly change it. It's not creating a HTML website where you have to screenshot and stick in Claude, make this, change this text, do that. Is doing it in Figma because that's your preference, Right? I think that's that's that's brilliant. And and I just going to say I think that's it's great because that's how you work. You're using the tools to amplify the way that you work. exactly. Really, really cool.

Because one of the big things I've had with Figma, I mean they've they've changed with sorry Claude is they have changed this recently with this Claude slides introduction can actually edit type in here and then and then send like a link. So I think here I can still share this. But if I'm honest, when clients get a Claude link, if they see Claude or the fact that it's a Claude generated slide, Your credibility immediately goes down.

There is a sense of using these tools devalues the work that you do for clients. And Which is interesting to me. I think I I know what you say. I know what you mean. and it feel that client I feel like some clients think that they're being short changed. You know, oh, you're just bashing this out in a in a Claude prompt. but the feeling is only there if you are just bashing it out in a Claude prompt and you're not really crafting the work and spending the time to refine it and do something unique. You know, you can create incredible work with these tools. Just care and spend the time to do it.

Exactly. And I think that's also the part of it is like so here for example one of the things is like mapping calls I've made and then it's also realized there was a problem with the calculator and this kind of stuff but after it's done gone through this test it's then up to skill.

Yeah. Oh great. It's a self-improving system, right?

Exactly. And that's built into the kind of architecture of what we do is that I generate more and more of these and I iteratively go through the design system, fix it up, fix it up, fix it up until by the time I launch this, someone can use the deck creator skill to work with the brand positioning skill or whatever your task is. It could be like a statement of work skill, whatever it is where you use two whatever your task is a skill for that and then whatever you if you want it to populate into a deck or if you want to populate it into a document and then from there it's just all of that type setting work is all just sorted out and you can just out things.

And if you want to tweak something manually you can. You've got that surgical control because you know the tooling. This is great, Clint. Look, I think we might wrap it up there. It's a bit of an hour. So, look, I I genuinely appreciate your time. I think you're a phenomenal talent, as you know, and I love the way that you're using the tooling. So, thanks for your time. Is there is there a place that people can find you online if they want to connect?

Sure. Yeah, I'm on LinkedIn. I can provide you that one. My website's also ton-studio.xyz. Yeah, hit me up through there. I've got links to all that kind of stuff. open to everything. It's been great chatting.

Great. All right, mate. Well, look, thanks for your time and go Dockers.

Yeah, let's go.