#StopWarInUkraine Save the children
ENGLISH

The awards of design, creativity and innovation on the internet

Magazine for designers and web developers
08 Collect

Best Tools for No Code in 2022

Article by Arnau Ros in Web Design -

No Code tools are great for one simple reason: they reduce barriers to success. Many of us have had business ideas, which have been met with one barrier that’s stopped us from going forward: knowing the specific coding tool necessary to bring that project to life. It’s not perfect yet, and there are still many limitations caused by not knowing how to code in 2022. However, some of these tools allow users to finally make the steps to develop the project they’ve been thinking about for some time.

Design Tools

The first step of building your project begins with research. Research can take many forms, often without using a computer. However, if you want to have all of your explorations organized in an efficient, digital format, then I recommend the industry standard and use Figjam for all of your whiteboard needs. You can perform simple UX tests, collate screenshots, map user flows, diagrams, and more. One of the important parts of using something like Figjam as opposed to other online whiteboard tools is that you have a direct connection to the best design tool for web design, app design, and anything in between, Figma. Using a tool like Figma will allow you to collaborate with other people involved in your project, whether that's a cofounder, a developer, a manager, or even an intern. Figma is the best collaboration design software out there, however, even without needing to collaborate with anyone, it's also the best design software, used by nearly every professional designer in the field.

Web Builders

Web builders are what you use to bring your designs and ideas to life. They serve as your main platform, your app, your online saas, your web app, and so on. There are many services out there that allow you to build a website without code, such as WordPress, one of the original players in the game. However, newer tools like Webflow & Bubble are primarily built to give you more customization of your designs, and allow integration with other services, taking your simple website to the next level.

If your focus is more on building mobile applications, some designers use Bravo Studio, which is relatively new, and came on the market in mid-2019. However, over 71K projects have been created using Bravo studio, which allows designers to create industry-standard apps without code.

Less design-focused platforms such as Carrd have also appeared recently. Carrd allows users to create websites in a standardized manner. Carrd sites are limited to one-page builds and do not include any integrations with databases. Primarily Carrd sites are used to create a fast, minimal portfolio without much hassle.

The industry standard for website no-code builders as of 2022 is Webflow. Webflow gives you complete control of what you’re doing using specific CSS and HTML controls without relying on external plugins and integrations in order to simply run. This is an example of how you can use Webflow to design any type of website without the need for Code:

Webflow allows users to integrate with other applications to elevate the capability of their website.

Integrations

The integration options available for platforms like Webflow are infinite, so to make the process easier for you, we listed the best integrations used by designers worldwide to get your no-code idea off the ground.

No-Code Tools

FinSweet

This Webflow addition allows users to extend the capabilities of the platform. Using their Attributes styling FinSweet gives Webflow users the power to add filters to their CMS collections, add a CMS slider, create smarter lightboxes within webflow, and so much more. In total, FinSweet gives developers the capability to extend the powers of Webflow.

Notion

The tool that all the cool kids use to stay organized. Notion gives users the power to organize design systems, create organization lists, kanban boards, timeline tasks, & more. It’s a minified version of a project admin without any of the hassle. I’ve also made a video on how designers can best use Notion to keep themselves organized.

Typeform

If you need to create a survey for your customers or audience, you can use something like Typeform, which allows for a seamless user experience. Typeform can also be used for user research.

Memberstack

Usually with SaaS or web apps, founders will want a way to monetize their users. As of writing this article, Webflow does not have a native way to charge a monthly subscription fee from users. Memberstack allows that integration to happen without a hitch. With their simple integrations you can be up and running charging a fee for your services, allowing user sign-ups and log in, and even a log-in dashboard without any code.

Airtable

If you need a database in the no-code world, you can’t really use something like Excel or Google sheets. Databases are used to hold data and organize them accordingly. One of the benefits of using something like Airtable to do that is you can connect their platform to whichever no-code platform you use. One example of using Airtable would be to create a CMS database of hundreds of types of cars based on their color, make, mileage, size, price, etc. Within that database, you can now connect to your no-code platform and properly display that information.

Zapier

One of the difficulties of having a no-code app is the need to have multiple apps talk to each other in a functional way. Zapier does just that; it connects applications to each other so they can relate data from one point to another. Classically, Zapier is used for automation such as when a user signs up you need to automate a welcome email. However, needing a tool to talk to other tools Zapier is used for just that. You can use this tool to collect data from your database in Airtable and send it to populate your CMS fields in Webflow. This important step allows automation to happen freely in your app, allowing you to not have to manually input every data point manually every time something happens.

Integromat

Integromat works in a similar function to Zapier, it’s used as an automation tool that has many advanced features. However, as Integromat is more advanced, it could take longer to become accustomed to their software and might need some low code in order to get things rolling.

Examples

To pinpoint a few successful examples of NoCode and how they are possibly built, we’ll start with Makerpad. Arguably one of the most successful examples built on a NoCode stack, Makerpad is completely built using Webflow, Airtable, MemberStack, and Zapier. Makerpad is a Zapier company, which helps and guides people on how to build their own NoCode applications. A marketplace of sorts, Airtable is used to host the database information. Webflow is used as the website builder, both to present the information in an accessible way, and also to be able to create individual pages and posts about each tool they describe, Zapier connects everything together, and MemberStack allows Makerpad to create a Sign In, Sign Up for their users.

Dwellito is another example of what can be achieved with NoCode tools. Dwellito is a marketplace to browse pre-built homes. Similar to Makerpad and many other No Code web apps and SaaS, Dwellito uses Webflow as the web builder of choice, Zapier to create new form submissions, and Airtable as their main database in sync with Webflow.

Other examples with a similar or identical tech stack is Unicorn Factory: a freelance marketplace and LegitCheck: a platform to see if your rare shoes are real or fake.

In conclusion, there is an endless ocean of no-code tools available, many of which have not been mentioned in this article. The movement of no-code will allow designers and dreamers to finally create the websites, web apps, and apps they’ve always dreamed about. With the growth of this movement comes a realization, however, as much as I believe no-code is the future of website and web app creations, we are still in need of developers to create these tools, to begin with. We’re still a long way away from a completely codeless world. As more no-code tools are created, the lines of code and no code will blur even more. Allowing designers to go from idea to production much faster than ever thought possible. I hope this quick guide to No Code tools was helpful to you and will allow you to finally get your business into gear without code!