Three examples of programmatic no-code

By Mason Poe

In this article, we'll look at the different programmatic no-code tools are and how they help to redistribute the time spent on building vs. testing and iterating on a website.

Three examples of programmatic no-code

By Mason Poe

In my last article, we discussed the exciting possibilities of programmatic no-code, namely, that new AI-powered tools have the potential to vastly accelerate – and improve – how we craft digital experiences for customers.

So what are these tools, and how exactly do they work?

‍

First, a recap

At Edgar Allan, we believe that the future of web development looks vastly different than today’s status quo. (In fact, thanks to the rapid advancements in AI technology, we’re not even sure what a “website” will look like in 10 years or so.)

The path to creating web experiences is already transforming – and shortening – thanks to programmatic no-code tools. These tools take the principle of no-code and apply automation rooted in technologies like AI and ML to make it easier for even non-technical users to rapidly prototype web pages. Then teams can focus more attention on testing and tweaking those pages according to user feedback.

Today, we might spend as much as 90% of our effort on planning, designing, and developing a website – leaving just 10% of the timeline to make adjustments. What if that division of tasks switched? Here are three examples of programmatic no-code tools that redistribute the time spent on building vs. testing and iterating on a website.

‍

Figma to Webflow

Webflow development typically starts with a static design in an interface tool like Figma. And while Figma offers some great collaborative features, it can’t magically turn your files into a website. Once edits have been perfected and client approvals have rolled in, the team has to take those designs and translate them into code. That’s where the Figma to Webflow plugin comes in.

This plugin allows teams to set up Figma files, create designs, then copy/paste those pages directly into Webflow without having to individually build those items. You can choose from pre-built structures or layouts, then convert them into clean HTML and CSS in a matter of clicks. It’s not a perfect process, but the ability to transition more seamlessly from visual design to site build points to a world in which we’re able to spend more time on ideas and testing—and less on individual programming.

‍

Finsweet table

If you’ve spent any time in Webflow, you’re probably aware that it lacks a native table element. But, no fear, Finsweet Table makes quick work of filling said gap. All you have to do is select the number of cells, the styling you want, and bring it all over into Webflow.

Finsweet Table is a pretty flexible tool that allows you to pull data from any spreadsheet app directly into the app. It then reads that data and imports it to Webflow for you. Once you’ve imported the table to Webflow, you can edit it just as you would any other native Webflow element. Easy peasy.

‍

MAT (Migration automation tool)

Here at Edgar Allan, we’ve also been working on a tool of our own to speed up the development process. In the spirit of facilitating a more rapid test-and-learn approach to websites, we’ve been testing and learning ourselves, moving from “hello world” to real-world prototype. The result is MAT, short for migration automation tool, which helps you move easily from HTML pages to Webflow. All you have to do is copy a webpage using MAT, then paste that page into Webflow. (Note that any existing issues with CSS and HTML will carry through to Webflow.)

For teams looking to move quickly with authoring capabilities, MAT shortens the distance, turning a five to eight week process of migrating sites to Webflow into a one to two- week ordeal at the most.

‍

Think “more”

The central idea of all these tools is to take manual, repeatable tasks and subsume them into companion apps that streamline the development process. On the no-code side of things, websites will still require maintenance and updates. You won’t be able to automate the task 100%, but with 70-80% fast-tracked by new technologies, you have ample room to make final refinements, quickly pivot according to user feedback, and more easily manage the site over time.

The bottom line with programmatic no-code?

Test more, learn more, publish more.

And repeat.

‍

Did you enjoy this article? Read more like it on the Edgar Allan blog.

‍