# Tutorials 📼

## More tutorials

Check out all of our tutorials on our[ Youtube](https://www.youtube.com/c/Sketch2React/featured). 😺👍

## Tutorial👉From Sketch to Xcode using Capacitor.js

Did you know that you can start in Sketch + Sketch2React and then use something amazing called Capacitor to build cross-platform apps? Neither did we until a few weeks back. 

{% embed url="<https://sketch2react.io/blog/tutorial-from-sketch-to-xcode-using-capacitorjs/>" %}

## Tutorial👉From Sketch to Xcode using Cordova

{% embed url="<https://sketch2react.io/blog/tutorial-from-sketch-to-xcode-the-no-code-way/>" %}

## Beginner Tutorial - How to setup in Sketch and create your first Code Component

{% embed url="<https://youtu.be/Q1jKB5CMngY>" %}

## Beginner Tutorial Part 2 - How to create a container and how to set margin to components

{% embed url="<https://youtu.be/lzJ5YSkpVdI>" %}

## Sketch2React - Suggested Workflow for Designers

{% embed url="<https://youtu.be/7AjAkE3jZtU>" %}

## Best of our Sketch2React Pro Tips from our Twitter

{% embed url="<https://medium.com/sketch2react/best-of-twitter-pro-tips-part-1-2386b64924fd>" %}

## How to use Sketch2React for Quick Responsive Prototyping <a href="#id-089e" id="id-089e"></a>

{% embed url="<https://medium.com/sketch-app-sources/how-to-use-sketch2react-for-quick-responsive-prototyping-cf02bce4e5b0>" %}

## How to add CSS Plugins - Step by Step Tutorial <a href="#id-7b59" id="id-7b59"></a>

{% embed url="<https://medium.com/sketch2react/css-animations-inside-of-sketch-with-sketch2react-d5d248633ac0>" %}

## How To Add Custom CSS Plugins

{% embed url="<https://youtu.be/erHTK_dRD24>" %}

{% embed url="<https://www.youtube.com/watch?v=Hm6TvA8q9_c>" %}

## Images as Links with Hover Effects Tutorial

{% embed url="<https://youtu.be/U0tsqeKCgmw>" %}

## How to use our free Grids .sketchfile

{% embed url="<https://www.youtube.com/watch?v=o6W1tNFKbng>" %}

## What's new in Alpha 0.60

{% embed url="<https://youtu.be/rHK4Q3DIOnI>" %}

## Release Trailer Alpha

{% embed url="<https://youtu.be/k6OS2OgOaPU>" %}

## How to add margins between {col}umns

{% embed url="<https://youtu.be/6_BTuHVfRaA>" %}

\
How the Plugin Works
--------------------

{% embed url="<https://youtu.be/1JA2PUsJlN4>" %}

## Layer ordering

{% embed url="<https://youtu.be/EYD0zJh_0So>" %}

## How To Change Button Color

{% embed url="<https://youtu.be/iMTtfuEx1bQ>" %}

## Style Sheet Website Speedrun

{% embed url="<https://youtu.be/IyBQ48oJkkc>" %}

## How to add Haiku animations

{% embed url="<https://medium.com/sketch2react/how-to-add-haiku-animations-to-sketch2react-5b921c8ab11b>" %}

## How to create image links with hover effects <a href="#a549" id="a549"></a>

{% embed url="<https://medium.com/sketch2react/how-to-create-image-links-and-style-them-with-hover-effects-a02858f238ea>" %}

## How our Previewer Web App works <a href="#d106" id="d106"></a>

{% embed url="<https://medium.com/sketch2react/how-our-previewer-app-works-dc29ab80838e>" %}

## Work like Framer but in Sketch!

{% embed url="<https://youtu.be/slu9crvcBps>" %}

## React Export - How to

{% embed url="<https://youtu.be/MqF7fJ1XGMs>" %}

## React Export - Routing

{% embed url="<https://youtu.be/fp6RYhMvPmQ>" %}