We all know Webflow as a flexible and highly-customizable website builder perfect for building simple web projects, including blogs, directories, marketing sites, digital experiences, and Content Management Systems (CMS). However, it has taken a big step towards large and much more complex web applications and stunning websites. They’ve just released a new Devlink tool that allows you to build complex components for React projects directly in the Webflow Designer platform.
Devlink aims to bring developers and designers closer together, mitigating the complexities of tricky User Interface (UI) Design. Does that sound too good to be true? Well, it turns out it’s just the tip of the iceberg. Devlink brings many more advantages to the vast world of web design. That’s what you'll learn here in this blog post.
What is Devlink?
Devlink is a complete game changer for UI design and advanced Front-End Development. Here’s how! Translating UI designs that involve complex features like awesome animations and interactions can be one of the most frustrating tasks in front-end development. I haven’t encountered a front-end developer who hasn’t complained about it at least once.
Devlink allows you to design complex UI elements in Webflow, giving you the code to move these components to your React.js project. Believe it or not, this code is precise and clean enough to ensure the UI elements behave and respond as they should. Front-end developers will only have to focus on implementing the code in the project, ensuring that the components do what they want them to.
As you can see, Devlink has a strong potential to streamline the development process to a large degree. After all, it’s more practical to have developers focus on functionalities and logic than replicating designs. It’s worth mentioning that this tool is in its early stages, so there’re some caveats you should consider. Before we go into that, let’s dive deeper into how Devlink works.
How does Devlink Work?
You can start by logging into your Webflow account and enabling Devlink. The process is as easy as filling in a form. The next step is to create the designs you want your React.js app to consume and use Devlink to turn them into reusable components.
You can name them as you wish, for example, "navbar," "menu," "hamburger icon," and "testimonials." Once your design components are ready, you must configure Devlink into your existing React.js project. Believe me, the setup process can’t get any simpler.
Devlink gives you an npm package and several commands to access your Webflow project using the terminal. Plus, these commands can sync your Webflow project with your local React.js project. The best part is that any changes the design team makes in Webflow will update your local files. You just have to run the update command every time they update the components in Webflow.
All the components you export will appear in your project in a folder called Devlink as CSS, JavaScript, and Typescript files. Thus, the last step is to import the desired components into your existing files and position them as you wish. That’s all there is to it.
React Components with WebflowDevlink
First, you must understand that Webflow is a tool that gears toward marketing processes, and Devlink is yet to grow. Therefore, there are quite a few limitations if you’re building something different from a marketing website, like a Software-as-a-Service (SaaS) app. Yet, they equipped Devlink with two powerful tools to let designers add some extra complexity to their components.
1. Devlink Runtime
As I was saying, Webflow gives designers plenty of solutions out of the box. If they want to add a specific property not supported by Webflow, they can still add it as the so-called runtime props. Then, developers can use the runtime properties to trigger functions so that the component does or behaves the way they want. Some common use cases include customizing component appearance (such as buttons), conditional rendering, and browser alerts.
2. Devlink Slots
Devlink also allows designers to combine multiple components in the Webflow editor. A slot works as a placeholder for a Devlink-specific property that receives another component instead of a function. That’s how you can use slot property for nesting components within other Webflow components.
Slots are handy when you want to add a component that does something Webflow doesn’t support. Developers can use them with any third-party library to extend Webflow’s component functionality.
Webflow Devlink Pros and Cons
Final Thoughts
Webflow’s development team talks about Devlink as a superpower that acts as a bridge between designers and developers. A superpower that empowers designers to take more responsibilities and involvement in the development process. As it is, the cliché phrase “with great power comes great responsibility” fits perfectly with Webflow’s new golden and powerful feature. Devlink takes some of the developers’ work from their plate, simplifies it, and gives it to the design team. That can only boost productivity if they build components properly and meticulously test their quality before pushing them to production. On the other hand, it’s worth noting that there’s h*ll of a lot more to React.js than creating product components to create intuitive interfaces.
