How do I prepare a sketch web app to transform into react webapp?


#1

Hi there,

I bought a web app theme from creativemarket, it comes as a Sketch file. How do I transform it into a React based web app frontend code using React Studio and the Sketch Transfer to React Studio Plugin?

I have already created a custom project inside React Studio using 1280x720 settings, but I still see the base format under the App Settings as using iPhone and iPad


#2

Hi!

Base format is just a global setting which applies to the project’s Responsive screens. If you create a Custom-Size Web App -project it’ll create one Fixed Screen to the project by default which has the size you defined in the project creation window but the same project can have Responsive screens as well (you can create both types of screens in Project Map).


#3

I see. Thank you. I have a separate question which is that I am going through your tutorial here https://hackernoon.com/transform-your-sketch-based-design-system-into-real-code-using-react-studio-35b89e67ce79

I like to do the same steps as the tutorial except with a web app sketch file I buy from creativemarket.

I am done with the tutorial more or less.

My question is does the tutorial mean that for sketch to transfer successfully to react studio, the sketch file I buy needs to follow certain conventions?

e.g. using artboards for single views and symbols to convert to components?


#4

Hi,

Usually Sketch files are bloated with elements and it may be even easier to just build the UI from the scratch in Studio.

Studio will automatically create a component from each symbol. You can also create component by adding “c:” prefix to element group in Sketch file. One artboard is always translated into one screen in Studio.