Published in


Designer-Developer Handoff with Pagedraw

As a React developer, I receive a Sketch file from a designer at least once a week. Either with some requested changes to an existing screen or with an entirely new screen that I have to implement. This is one of the most common workflows Pagedraw was built to address, so here is a video showcasing how that handoff process works in Pagedraw.

Our component library has been previously imported into Pagedraw and tied to our codebase

In this case we are building a movie review app called Movietime. We assume our component library has already been previously imported into Pagedraw and tied into our codebase, so the components are already stateful and interactive. If you want to learn how to build the component library, check out this guide.

Here you can see the live app. If you wanna follow the tutorial you can also download the Sketch file here.

These steps can be done by anyone (designer, developer, etc):

  1. Import the Sketch file into Pagedraw
  2. Replace Sketch's visual-only symbols by the pre-built Pagedraw interactive components
  3. Click D to mark any data (text, images, etc) as dynamic.
  4. Use Pagedraw's stress tester to see how your design looks with different data and with different screen sizes
  5. Specify layout constraints until #4 looks right

These steps have to be done by a developer with knowledge of the React codebase:

  1. In Pagedraw, fill out the Code sidebar with the correct variable names that match the ones in your code
  2. Import the Pagedraw component from your code
  3. Write your state management logic in code, and pass everything down as props to the Pagedraw component

From now on, in order to maintain your app, you:

  1. Make design changes in Sketch, bring them into Pagedraw with our rebase from Sketch mechanism
  2. Make any business logic changes in code and update the Code sidebar in Pagedraw to reflect any props that changed
  3. Deploy

And done! Sketch to production in 10 minutes. =)




Making programming more powerful

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Gabriel Guimaraes

Gabriel Guimaraes

More from Medium

How our micro frontends help businesses big and small

Why I Want to Present at Axe-Con: A Developer’s Story

Beth Qiang headshot, axe-con logo

Axure Tutorial: Axure File Uploading and Subsequent interaction Settings with JavaScript

Why you need a design system(part 3)