No-code design 101 🧑💻

Welcome back. Last week, Dann Petty shared a tweet that got the design community talking. His take? The most hirable designers are those who can learn how to step up and create anything.

Some might argue that this stance expects too much from the design role. And to that, I’d say they’re expecting too little of the tools we have access to. Today, designers don’t need to choose between specializing and generalizing. T-shaped is turning into M-shaped.

—Tommy (@DesignerTom)

The Wireframe:

• Your full breakdown of low- and no-code tools
• How to monetize your no-code skills
• Should designers run no-code agencies?

What You Need to Know About No-Code Tools

Could no-code tools flip the design process on its head?

Let’s back up: Low- and no-code tools have been around for more than a decade, helping designers streamline workflows, manage user research, and build design portfolios. These days, new tools are getting closer to redefining the role of the designer.

Today, let’s talk about the best ways to use no-code tools to your advantage in your everyday work…plus the no-code toolkit I predict will change the “designer” job description permanently.

The best no-code tools for improving your everyday workflow:

• Notion is my tool of choice for creating swipe files and collaborating with partners—it’s the best for knowledge management. I love that I never have to start from scratch: UXers build Notion templates for everything, from usability tests to SaaS customer onboarding.
• Airtable and Coda are both great for UX research. You can create forms or surveys within Airtable—then conduct data analysis right in the platform. And Coda is great for complex calculations and data transformations. Try these five simple formulas to automatically categorize, count, or extract key information from user research.

Pro tip: When it comes to knowledge management, pick one tool and stick to it.

Now…it’s time to get to the juicy stuff. You know how I said that no-code tools will change the designer’s role? This is how:

Low- and no-code design tools are democratizing development. Designers with no technical capabilities can see their web or app ideas through to full production—plus get feedback sooner, iterate better, and get products to market faster. Now, “it’s possible for building an MVP to be a solo sport,” said freelance designer Megan Ng.

You can become a true “full stack designer” once you open up the no/low-code dev toolkit:

For web development, try Webflow and Framer. Both tools build production-ready websites without a single line of code—and you can’t go wrong with either. You can also use either tool to build your design portfolio:

• Because Framer is based on code (React), you can build custom components, interactions, and advanced prototypes to show off your front-end skills in a portfolio. Here's how I built my own portfolio in Framer.
• You can use Webflow’s built-in SEO optimization to build a discoverable portfolio. Try these four templates (cloneables) to build your Webflow portfolio.

Whichever tool you use, plug into its ecosystem. Follow creators and subreddits dedicated to your tool of choice:

• For Framer: Check out Framer University, Ryan Hayward, Framer Toolbox, and r/Framer.
• For Webflow: Check out Flux Academy, Webflow University, Dann Petty, Finsweet’s community, and r/Webflow.

One more thing: I'm hosting a Framer Portfolio Challenge (and prizes include a new MacBook Air M3 and a Work Louder Creator Micro Keyboard). Don't miss it! Winners announced soon.

For app development, try Bubble.io or FlutterFlow. Bubble can help you create complex web applications—such as SaaS apps, social networks, marketplaces, dashboards, and CRMs. FlutterFlow—which is built on Flutter code—focuses on mobile app development.

• Designer Megan Ng used Bubble to build out her entire app, TutorRoll.
• In this super comprehensive tutorial, creator JamesNoCode builds a delivery app from scratch in FlutterFlow.

One tip: Prepare for a learning curve with app development tools. While using them is easier than learning a full language, they’re nuanced and still require some light coding knowledge.

The next era of no-code tools

The next era of no-code tools is taking a more holistic no-code approach to help you visually develop complete, multi-platform applications:

Builder.io is a no-code platform that started as an engineering tool. It combines visual dev capabilities with a headless CMS, so non-technical users can create websites and web apps without coding.

Henosia is building a canvas that lets users visually build full-stack applications across multiple platforms without any coding involved. It provides a visual IDE to build data models, logic, APIs, and integrations beyond just the UI.

The takeaway: Yes, the design role is changing—but don’t fear the change. Learn the tools, experiment with them in your workflow, and let them empower you to become a full-stack designer…without ever learning a line of code.

Poll: Are you interested in a course that teaches you to use Framer?

Spend Time on Web Design—Not Web Development

If you want to go from website concept to live site in minutes, Framer’s Saas Website Kit is the tool for you.

A no-code web design platform, Framer lets you and your team do what you do best: design. Features like a freeform design canvas, a CMS, SEO optimization, and localization let you focus on creativity and efficiency instead of pushing code. By providing the tools, Framer allows you to create, collaborate, and publish a visually stunning website—no web development necessary.

To see how quickly you can get up and running, check out Framer’s brand new SaaS website UI Kit.

News, Tools, and Resources: No-code 101

• In this awesome livestream, design creator Jesse Showalters breaks down no-code tools for designers.
• 14 copy-paste Framer overrides to uplevel your web projects.
• Looking to monetize your Webflow skills? Take a look at this Webflow job board.
• Try this Framer plugin to go from Figma to HTML.
• Want to use Notion to build a portfolio website? Watch this video to learn how.
• Check out these 10 ways you can make money with Framer.

Got a great tool, podcast episode, idea, or something else? Comment below and tell me what’s up.

Ask DesignerTom: No-Code Agencies

Question: “Can designers run a low-/no-code web development agency?” —Josh K.

Answer: Short answer? Absolutely.

Long answer? Fourteen years ago, I built an entire freelance business around WordPress—and today’s tools are so much more robust. Tools like the ones I talked about today (especially Webflow and Framer) deliver everything you need to build fully-functioning websites. Plus, they introduce a streamlined approach to freelancing with copy-paste UI design kits, AI functionality, templates, and community assets.

If you’re interested in starting your own no-code agency, I recommend:

1. Hone in on a specific demographic. For example, can you be the website agency for Denver microbreweries? Niche down to stand out.
2. Know your limitations. If you can’t offer custom animations, for instance, communicate that clearly to your clients.
3. Consider adding another revenue stream to your agency, especially as you grow your no-code skills. For example, you could build and sell Framer templates on the side.

The takeaway: There’s never been a lower barrier to entry for designers to start their own agencies. Take advantage.

Thanks for reading! Have you used no- or low-code tools for an exciting project recently? Comment below and let me know.

See you next week!

Enjoying this newsletter? Let us know here.