Accessing the Export to code options

Are you searching for an easy way to turn your Sketch files into React code? Well, now you can — with Anima’s newest feature!

In this post, I’m going to walk you through all the options of this new feature.

Once your files is synced, a new window will open and you will be able to see the divs on the left-hand side, the selected screen, as well as the Generate React button on the right.

What I really like about this feature is that Anima has already created different DIVs without me having to do anything. Attention though: those DIVs are based on the folder structure of your Sketch file! So, if you tend to not organize your files this is bad news for you

In order to get started simply click on a Div and click on Generate React button.

Once you click on Genrate React. You will be able to see a screen similar to the one below. You will get the CSS code, the JavaScript code, you will see your design and depending on what you will select in the upper-left menu, more options can appear.

Let’s first turn our attention to the upper-right menu though: You have the following options: Share Code, Assets and Preferences.

Sharing the code simply allows you to share the entire project with a fellow coder, or with anyone who would want to see an automatically generated code. It’s pretty simple.

With a click of a button, you can select all assets which are automatically extracted from your Sketch file, or you can selectively download just the ones that are needed.

You can experiment with different options. For example, you can select the Javascript network: you can choose between React or VueJS. You can tweak the settings- using Auto Flexbox and whether or not to split the components into files. Last but not least, you have a bunch of options which you can tweak in order to adjust the exported code to your own coding style.

Unfortunately, every time you change one of the settings, you’d need to re-generate the code by clicking on the first tab on the left called Generate React. A bit clumsy, but it works.

One last thing. If we go back to Sketch then navigate to Anima> Export> Code and click on it, this will actually create the code for you, and you can export it as a zip file. So, if you don’t want to go through the process of sharing this project with your developers, sharing the link, you can just export it as a .zip file and then share it that way.

If you prefer to watch this blog post as a video tutorial then just click below 👇🏻

❤ LET’S CONNECT!

❤ MORE LINKS❤

Related posts:

Bitcoin combines two properties that form the basis of an independent monetary system. Firstly, Bitcoin is a currency or a digital value unit, and secondly, Bitcoin is a highly secure payment…

Sejumlah staf pengajar dan tenaga pendidikan di Program Pendidikan Vokasi Universitas Indonesia (UI) telah memulai VCoop Mart, sebuah unit usaha yang dikelola oleh Koperasi Jasa Trengginas Adhi…

Our lives are made of a steady stream of big and small events. Sometimes we are blessed with sweeping landmark moments like first days of school, births, landing dream jobs, graduations, weddings…