3rd Party Plugins & Apps ⚙️

Here are some really great plugins and apps that work really well with our framework.

Lunacy 8

Although Sketch2React was built for Sketch it actually also works well together with Icon8's free design software. How neat is that!? 🤖💟

DropPages

DropPages is an awesome way to really quickly publish and host your Sketch2React exported HTML pages 100% for free to your own Dropbox. Here's a demo, and here's a tutorial on how to get this working.

Flaticon

Flaticon is a great service of top notch high quality icons that work for many occasions. We use them for all of our branding imagery actually 😄👍They have something totally amazeballs - the ability to create packs and download these as a font icon. This gives you an amazing advantage of collecting all of your most used icons inside a font that you can share amongst your team mates.

Rocket

Once you get used to autocomplete it's freaking amazeballs

Using emoji Mac app Rocket you can actually add something similar to the autocomplete function you have in all major code editors today. Here's how 👍

3MB

S2RLovesRocket.mp4

Open

How to add autocomplete to Sketch2React

Sitecake CMS

Ahhh yeah sweeeeet as 🍬🍬🍬🍬🍬🍬🍬

Sitecake is a brilliantly simple CMS that's actually really easy to setup to work with the exported HTML5 from our framework. A proper tutorial will come someday!

Easing Gradient

Easing Gradient let's you edit gradients in Sketch like a super (gradient) pro

Everybody loves gradients (or they should) and this little gem comes packed with some editing powers that puts Superman to shame. Our favorite is the Step editor (seen above).

Just remember to take away the autogenerated text that the plugin adds to your layer name. Rename {BG} or {rectangle} or {oval} and you’re done! 💥 📕

Automate Sketch

Automate Sketch plugin together with Sketch Runner is an amazing time saver

For our framework to do its black magic, layers and groups inside the layer list in Sketch need to be in the reverse Y order for them to show up correctly in code.

Anyway! Automate Sketch does that and many many other things. It’s a really quick way of experimenting with things inside of Sketch. Use it together with Spotlight-For-Sketch plugin Sketch Runner and you have a killer combo.

Felipe

We love you Felipe plugin

Felipe is an intention based plugin for Sketch that will totally blow your mind. Draw a rectangle roughly the shape of a medium sized button, fire away the shortcut for Wireframes to UI (⌥⌘K) and like magic it auto-replaces your rectangle with the symbol that you associated it with. It works super well with our framework and it will speed up your design to code process so many times we don't even have a number for it. 😆

It's like working with Framer but in Sketch. 💪 💠

Here's a demo Sketch project where we have our components working with Felipe

Anima App

Using Anima's Stacks works really well

Anima is a set of totally awesome plugins for Sketch that takes care of really tedious things such as making sure you have same padding and margins everywhere. Best thing, it works really well with our framework. The new feature Group Padding works great with our buttons and Stacks is perfect for keeping things neat inside of Sketch. Here's a simple tutorial.

Download this button to see how this needs to be setup.

Important! Using Anima does not take care of the actual settings in code, you still need to set everything up accordingly to our framework requirements. But it saves tons of time inside of Sketch, giving you a faster workflow.

Anima Group Padding in action working with our buttons

Rename it

Naming layers correctly is a huge part of making sure our framework outputs code at all. Use Rename it to batch rename things like text nodes into {text} components.

Rename It saves you time!

Notes​

We use Notes for pasting in code snippets, url:s to external assets like Google fonts or just copy+pasting a useful {col} setting you want to reuse elsewhere. We love the old school Post-it© look and the plugin comes with a couple of different neat color styles. Notes is useful for ... hmm .. notes 😅

Notes is useful for ... hmm .. notes 😅

Midnight​

The Midnight plugin for Sketch is one of our favourite ones, specially since you can color code layers and groups. Plus you get amazing Indent Guides system which makes it easy to identify how Groups and Layers are nested. Mind blown.

Midnight gives you Indent Guides and Color Tags

IconJar

Use IconJar for all of those custom made icons that you don't have as a icon font.

IconJar works swell not only for organizing but for exporting with the correct naming convention