Here’s a very straight forward simple tutorial on how to create image links with Sketch and Sketch2React.
Step 1 — Convert your image into a symbol
Convert your {image} to a symbol. If you want to have several different hover effects for different images call it something like Images/ImageOrangeHover and then for the next one Images/ImageGreenHover.
Step 2 — Group the image and rename it correctly
Double-click the newly created symbol on your artboard. You are now inside the symbol on your Symbol page.
Select the image and group it. Name the group exactly like this: {button-primary} [p20] The [p20] stands for Padding 20px, you can adjust this to your liking. If you for example change this to [m20] your adding a margin of 20px all around the image.
Step 3 — Copy all interactive elements
Use our Primary Button template symbol that you’ll find in the demo document attached to this tutorial. Copy all the necessary files from the other image links with hover effects.
Step 4 — Styling is fun!
Now comes the fun part — styling! ??Apart from clean color fills we also support gradients. Change the border radius for a smoother look.
Awesome work!