DEV Community

Ashfaque Mohammed
Ashfaque Mohammed

Posted on

4 1

How to Convert Sketch design to UI with Angular/React framework

Top comments (4)

Collapse
 
iam_ashfaque profile image
Ashfaque Mohammed

How do I convert a design made out of Sketch/Adobe XD to a UI design with Angular/React framework? Is there any plugin/tool to convert them or by building it from scratch? Suggestions please.

Collapse
 
aturingmachine profile image
Vince

I don't know of any tools that would turn a sketch doc into a working angular component. I believe they have a plugin to make react components however.

Collapse
 
ridhoassuryadi profile image
Muhammad Ridho Assuryadi

Do you've try framer.com/ or xlayers.app/#/home

Collapse
 
kr4idle profile image
Pete Steven • Edited

You can try Desech Studio to import your sketch project file. This will not be a pixel perfect import. You will need to make slight changes to the margins and sizes.

Then you install the angular and/or react plugin in Desech Studio and then integrate with it. This will allow you to use Desech for managing your html/css, and your favorite code editor for the react/angular code.

Here are the github repositories for the angular and react plugins.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay