menu

Product Design

Are you a product designer working in tech? This community is for you.

Channels
Team

Prototyping in production

April 29, 2018 at 12:45pm

Prototyping in production

April 29, 2018 at 12:45pm (Edited 1 year ago)

Heres a sneak peek at a new design tool I’ve been working on for prototyping changes in production apps. Would love your thoughts! 👂🙏

https://twitter.com/patrickt010/status/990571429212008448


April 29, 2018 at 2:58pm

I love this idea...I use in production editing all the time and it can be a pain (using inspect without ability to save or share). Would love to test when ready...

  • reply
  • like

Very cool!

  • reply
  • like

Looking great. Reminds me of Deco (now at Airbnb).

  • reply
  • like

🙏Thanks! If you are interested in being in the alpha you can sign up at https://iterative.ly/. We are looking to build this with the design community and would love early feedback.

like-fill
1
  • reply
  • like

April 30, 2018 at 8:25am

Hey Patrick! Great to see your new pivot from the browser inspector you mentioned last time. Did you see https://pagedraw.io/? What would you say is different about your tool?

  • reply
  • like

Hey Tom! Yep, we are super excited about what Pagedraw is doing. We see ourselves sitting farther down the design workflow. A designer can design a component in Sketch or Figma, generate a React component with Pagedraw, import the component into Iterative.ly and swap out an existing component with the new one or stub out a new flow entirely. Designers have the ability to test out how that component would work in their production app without have to push any code changes. I hope that was helpful!

  • reply
  • like

Hmm. What do you mean by "without have to push any code changes"? Does it mean that as a designer I don't save my work? Also, how do you deal with state management in flows and interactions?

  • reply
  • like

We generate a unique URL and apply the changes at run time. So a designer can share a live prototype built on top of their production app to validate their changes using real data. Designers are using real React components so state management and interactions are managed at the component level. For example, a designer who is working on an app that uses React Router can add a new route to their app by dragging the route component into the React tree view within Iterative.ly.

  • reply
  • like