React Prototypes using Figma and Pagedraw: Part 1

By Dennis Muthuri
DevCraft
  Published 27 Aug 2018
Share this Article

I was a bit skeptical in joining the Figma design band wagon given the fact that it was a design tool which was primarily web based thus implying internet connectivity as a pre-requisite to work. Sketch and Adobe desktop apps had me so used to offline support so I benched it until I came across the following Tweet:

Officially launching @figmadesign support today! Speed up the time from design to production by using Pagedraw. As of today, you can turn UI mockups made with Figma into @reactjs code

@PagedrawIO

I’m thinking, “Wait, I can really go straight to React code without having to manually layout the design at all?” A claim that bold deserved a test to end the skepticism, so I decided to give the tool a go and figure out how much quality it holds and which prototyping scenarios the tool would be best suited for.

Brief likes from Figma:

1. Sketch imports are supported

Immediately you sign up for the service, you are prompted to import your Sketch files and carry on the design in Figma. This makes switching to the service quite the breeze. I imported the following art board which contained mockups from a re-design I had done on a social networking concept to test the import quality.

Figma Import vs Original Sketch Render. Figma Import vs Original Sketch Render.

All the art boards and layers are laid out in a near similar format. To be honest I was quite worried the page order may get lost or importing may miss an art board but everything was shipped in proper order.

If you look closely though, you’ll see that it’s done an 85% import of the Sketch file I had. A custom shape I had created hasn’t been imported and a couple of styling on some buttons are missing in action. Maybe there’s a way my Sketch files need to have been designed in order to be 100% imported but as for now, that’s this is the case.

I tried out the Figma desktop app as well and it managed to sort out the local font issue but proved quite unreliable when producing a blur effect I had on my Login page and replicating the custom shapes.

Figma Desktop Import vs Original Sketch Render. Figma Desktop Import vs Original Sketch Render.

I also noted the import on the browser took about 4 minutes + a browser refresh to complete but I’ll blame the size of my Sketch file and not my internet speed ;)

2. Great Layout Code Info within the Design

It displays detailed information regarding the styling of elements which is a really cool feature since it eases the designer developer handoff process. You don’t need to open designs elsewhere to get details like Font Sizes, Colours or Nuances like positioning, padding, letter spacing or alignment. Figma gives me the CSS information I love Sketch for, but amplifies it as well because it’s web based and works for quality collaboration.

3. An extensible API

This is always a good thing for any platform. Extensibility gives power to the power users and builds tools around common tasks as well as introducing new possibilities such as the ability to convert the design into something else entirely. You can checkout the Figma developer docs for more of this https://www.figma.com/developers.

This is where the React Conversion and Pagedraw come in.

Pagedraw

This is a project integrates with the Figma API as well as Sketch and allows you turn your figma creations into React Code. You can checkout their post announcing this integration here

Getting our hands dirtier

I tried importing the Figma project I had created after creating an account at https://pagedraw.io/. Direct conversion wasn’t a pretty first experience.

Not quiet the looker Not quiet the looker

I decided to import a file directly from Sketch to Pagedraw with hopes that the result would be quite different. It was a bit better but still not pixel perfect as you can see..

A bit better but still not yet there A bit better but still not yet there

Way Forward

Embarking on a fresh design in Figma and having it imported directly into Pagedraw seems to be the only way out due to the native format support.

I’ll write about my experience on this in the part 2 of this article which you may have to wait a week and a half for.

Or…. you can attend the Craftsmanship series at the iHub event space this Thursday, 30th Aug where I’ll be demonstrating how to:

  • Improve their prototyping with React and avoid pitfalls of creating live(non image based) prototypes.
  • Work with a Figma Designed prototype in PageDraw and making it React Compliant.
  • Optimise the PageDraw prototype which will be created.
  • Take advantage of PageDraw tools such as the creation of React component libraries.
  • Learn the best use cases for both tools.

See you then.

iHub Software Consulting is a design-led company that offers best-in-class software development and design consultancy. Our services include user experience research, design thinking facilitation and software development. Interested in learning more about our work? Talk to us on [email protected]

comments powered by Disqus