Making Friends with AI
While everyone debates whether AI will steal our jobs or tries to count how many careers Figma AI will eliminate in the next few months, I won’t encourage you to join an anti-AI movement. Instead, I will share a list of nifty tools with built-in AI to speed up your designer workflows.
I believe that AI is just another tool, and if we want to grow, we need to learn how to leverage it. AI can make our lives easier and work better.
Ready to make friends with AI?
Let’s roll!
But first… an announcement!
Portfolio Done Right is a comprehensive guide to help you build a portfolio and resume. This ebook provides practical tips on crafting a compelling cover letter and preparing for your next design job interview. You’ll also learn how to be strategic about applying to entry-level jobs and how to gain more experience outside work.
The ebook will be available FREE for all subscribers throughout August.
How do you get it for FREE?
➡️ Subscribe to Fundament
➡️ Receive the link to the ebook on Friday, 2 August
➡️ Download and enjoy the ebook!
How Claude changed my view on AI
I must admit that until a few weeks ago, I was a little hesitant about AI. When ChatGPT 3.5 was released, and everyone talked about it, I tried it several times but didn’t find it particularly useful. Also, the fact that everyone spoke about GPT and the literal blooming of AI experts on social media made me sick. For long months, I stayed away from it.
Lately, I discovered a new model called Claude from Antrophic through this post on LinkedIn, and it blew my mind. Peter pulled off a simple web application for party check-ins and ran the code inside Claude. He described his problem and the functionalities he needed. Then, he pasted the list of party guests into the prompt. Claude built and ran the code inside the mobile app in no more than two minutes.
I had to try it!
This is not an advertisement or endorsement, but here are more exciting examples of what people are making using Claude:
An SVG generator (link),
Another SVG pattern generator (link),
VC liquidation preference simulation (link),
A flappy chicken game (link),
A compound interest calculator (link).
I’ve been using the model for work and personal stuff for the past few weeks. As I wanted to lose a few kilos, I asked Claude for ideas for a healthier weekly meal plan. I used it to translate a few pages of text. I also discussed a lean marketing strategy for our upcoming ebook. It gave me pretty good results, but it’s not like I trusted it blindly and immediately implemented everything.
AI assistants and generative AI tools should be used to render drafts you can take and develop by yourself. They are here to assist you in kick-off but won’t do all the work.
In the next few weeks, I will explore whether Claude is practical at rapid prototyping for my needs, as so-called Artifacts (the code Claude writes for you) are now sharable. Imagine that you can create an interactive prototype using a React components library like shadcn in no time, demonstrate it to your team, and validate it with users.
Well, it’s happening already. Look at the examples above.
Tools and plugins with built-in AI
LLMs help people build awesome things quickly. Dominik Pacholczyk used ChatGPT to create a whole suite of Figma plugins. He designed and developed four fully functional plugins in a few evenings. What would have taken hundreds of hours for a beginner just two or three years ago is now possible to build in a fraction of the time using AI. ChatGPT explained the basics of TypeScript and provided the code foundation, which needed just a few tweaks to become production-ready.
Here’s what Dominik has built:
➡️ Name by Layers - give containers names based on their contents
➡️ Copy & Flatten - duplicate a container and flatten their child elements into single vectors
➡️ Vec2Raster - duplicate and rasterize multiple vector files
➡️ Vec2Raster Advanced - duplicate and rasterize but also set scale and fill mode if you want to go fancy
If you are already missing Figma AI (or have never tried it like me), plenty of cool generative UI tools are out there. Creatie Wizard was built by a small team. The tool allows you to generate a wireframe quickly based on your prompt. Like Figma AI, Creatie Wizard isn’t meant to create polished designs that you’d immediately hand off to your engineering team but rather to help you beat the blank canvas syndrome or boost idea generation for sections you struggle with coming up to for your existing designs.
On the other end of the AI-based tools landscape, you can find gems like Locofy.ai, which I stumbled upon in one of the latest posts from Jakob Nielsen–by the way, the godfather of UX design is a true admirer of AI-based tools and AI for designers, so if you want to be up to date go and subscribe to his newsletter.
Locofy might not grab your attention immediately as they market themselves primarily as a tool for front-end developers. However, I can see at least one strong use case for designers: rapid prototyping, which is way more advanced than what Figma offers. Locofy can export your Figma designs into clean HTML5, Vue, or React code, extract components, send everything to GitHub, and, more importantly, let you set interactions in their builder. Everything is based on their authored technology, a so-called Large Design Model. What’s this? Find out more in the whitepaper.
Share your feedback
Did you find this article helpful or entertaining? Or perhaps you didn’t like the subject we covered in this episode? Either way, let us know: