Code snippets 👩‍💻
Here's a collection of great code snippets that we have found on the internets that work great with Sketch2React.

How to apply these

In Sketch2React v2021.2.7 and earlier

Creating the file

  1. 1.
    Copy the code to a blank new text document, we usually use Visual Studio Code or Sublime Text
  2. 2.
    You can use all of these snippets in the same document just don't forget when saving to add .css or .js to the name of the document e.g. mycustomcode.css or mycustomcode.js
  3. 3.
    Use the class name e.g .link and enter it like this [link] on any of our components 👇
Here we're using our custom .link CSS attached to a reusable component aka symbol [link]

Linking to the external asset inside Sketch

  1. 1.
    Drag the newly created .css or .js file to the Macs Terminal app, you will need the correct file path for linking this inside Sketch
  2. 2.
    Copy the file entire file path to clipboard, it usually starts with /Users/…
  3. 3.
    In Sketch use the Text tool and copy the file path from clipboard into your artboard
  4. 4.
    Add file:// just before /Users/etcetc ending up with file:///Users/etcetc…
  5. 5.
    In the Side Panel name the text layer {externalasset.css} or {externalasset.js}
  6. 6.
    Make sure to copy the text layer to all of the artboards using your custom code
  7. 7.
    You can add as many {externalasset} layers as you need
Here we dragged the gradienta.css document onto Terminal to get the correct file path
You can add both local and remote {externalasset} files

CSS snippets

Text Hover Animate Bottom Border

1
.link::after {
2
content: '';
3
display: block;
4
width: 0;
5
height: 8px;
6
margin-top:5px;
7
background: #0b76ff;
8
transition: width .3s ease-out;
9
}
10
.link:hover::after {
11
width: 100%;
12
}
13
a:link {
14
text-decoration: none;
15
}
Copied!

What it does

Creates a simple animated line under any component that uses our {link} component. Feel free to change the height, color animation or anything else.
Last modified 1mo ago