Bring developers and designers together with Framer X Playground

Disconnects between design and development can bring production to a grinding halt. Low-code dev platform Framer things it has the answer in its new Playground platform.

Framer, makers of the low-code development platform Framer X, have announced a new tool to help designers and developers meet in the middle: Framer X Playground.

Playground is "the first creative coding environment built specifically with designers in mind," said Koen Bok, co-founder and CEO of Framer.

Playground was designed with the idea of helping designers become more familiar with code, and adds in-line code examples to its visual interface, live previews of changes, and code feedback.

Making it easier for devs and design to create a cohesive product

One need not look far to discover a common problem inherent to web and product development: Tension between designers and developers. TechRepublic has been writing about the issue for over a decade, and in that time not much has changed.

Low-code development tools developed in recent years have made the disconnect easier to deal with, as they allow designers and developers to work more closely on a project by giving designers a less code-heavy interface that they can better understand. What Framer hopes it can do is further bridge that gap by building an all-in-one development tool with both a code backend and a designer-focused low code environment.

SEE: Implementing DevOps: A guide for IT pros (free PDF) (TechRepublic)

Framer X itself is a low-code tool with a plethora of design elements that can be automatically added to projects. It features things like multi-platform UI kits, live maps, media players, layout tools, and other elements that can all be imported into projects and tweaked to meet individual needs.

Must-read Developer content

One of the key components of Framer X is its built-in store of actual production components, which developers can add for designers to manipulate however they see fit. By keeping the store stocked with production components developers and designers aren't disconnected: They're working with the same tools, one via code and the other visually.

Playground is a supplement to Framer X that Framer believes makes it even better at helping "product teams around the world understand how to collaborate in new ways, to shorten and refine their product's lifecycle," Framer's Addison Schultz said.

Schultz said that Playground is adding three major elements that change how designers will interact with it:

  • The Framer library is being made open source, which makes frames and stacks easier to implement,
  • Playground is adding a massive collection of documents to help explain developer elements to designers,
  • There's also a new library of React-compatible animations that are just as production ready as other library elements.

Framer X Playground is built on JavaScript ES6 and React, and can also be combined with any other JavaScript framework, so it should be usable for a wide variety of projects. Bad news for those not operating a Mac-based shop: Framer's software is only available for macOS.

For those that use Apple hardware Framer X could be an essential tool in connecting developers and design teams, and Playground can make it even moreso.

If you're interested in trying out Framer X and Playground you can download the latest beta version of Framer X (which includes Playground) and give it a try.

If you decide to stick with Framer X, it will cost you: Individual plans start at $12 USD/month (billed annually), and a group license for five seats is $79 USD/month, also billed annually.

If development/design disconnects have been hampering your release cycle that price may very well be worth it, or at least worth giving the beta a try to see if it would suit your needs.

For more on low-code development, learn about the benefits low-code platforms can bring to businesses, why 100+ universities adopting low-code curriculum to fill enterprise gaps, how to stop low-code platforms from becoming an IT nightmare, and how to choose a low code platform: 3 tips.

Also see

istock-629285904taskbar.jpg

monsitj, Getty Images/iStockphoto

Post a Comment

0 Comments