How to (quickly) convert a Affinity Designer file to a Sketch design

on macOS (that’s what the cool kids use to do the design thingy)

When it comes to web design, Sketch is my weapon of choice : it is lightweight , has a fantastic integration of web icons and web fonts and doesn’t get in the way of my front end development workflow.

I’ve also bought Affinity Designer last year : it is cheap, yet efficient alternative to illustrator . It also comes out of the box with the Grade UI kit, which I like to use it to design web interfaces, even though it has no css export.

Here is a way to convert a design made on Affinity designer to a sketch compatible design.

  1. Open the design in affinity Designer. Once opened, select the artboards you want to export to Sketch

2. Open Sketch, and paste the Artboards. Please be patient…depending on the complexity of your desig (.i.e the number of layers used) , the process might take some time.

That’s it. You can now go and get the css code corresponding to the elements of your design.