Regular Memory

Drawing and Animating with Figma

Posted at — Feb 29, 2020

For those interested and for myself in the future, this post contains the steps necessary to create – and animate – an SVG document using Figma and clipPaths!

Figma: A cross-platform online and offline vector graphics editor.

SVG: A markup language for layout and rendering of graphics. Widely used on the web.

clipPath: An invisible shape layer that will hide a separate part of the visible image.

Open Figma

Visit Figma.com or download the application and open it. Create a new document. Check out this video for a quick overview of the basic controls.

Draw Vector Graphics

Let’s keep it simple ;) I’m going to draw three circles, one on top of the other, and three small rectangles to the left. This drawing will allow us to explore three different styles of clip-path animation. Create the layout shown below with Figma. The red and green rectangles are not touching their respective circles, but the blue rectangle is partially overlapping the blue circle.

Give the Figma layers clear names, these names will be preserved and used as identifiers for the shapes in our SVG markup.

Export to SVG

Note, placing a pure white rectangle behind our Figma drawing will help us export the drawing to the correct size. (We will later delete the white rectangle from the SVG document effectively making the background of our SVG transparent). When exporting check the 'Include "id" Attribute' option to ensure our shapes are easily identifiable in code.

Inspecting the SVG

Upon exporting and opening the SVG, it looks like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<svg width="400" height="700" viewBox="0 0 400 700" fill="none" <svg width="400" height="700" viewBox="0 0 400 700" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect width="400" height="700" fill="#E5E5E5"/>
    <rect id="background" width="400" height="700" fill="white"/>
    <circle id="red-circle" cx="270" cy="127" r="100" fill="#E08181"/>
    <circle id="green-circle" cx="270" cy="350" r="100" fill="#8CE494"/>
    <circle id="blue-circle" cx="270" cy="573" r="100" fill="#52B6D5"/>
    <rect id="red-rect" x="57" y="77" width="100" height="100" fill="#E08181"/>
    <rect id="green-rect" x="57" y="300" width="100" height="100" fill="#8CE494"/>
    <rect id="blue-rect" x="122.5" y="525.5" width="95" height="95" fill="#52B6D5" stroke="#28829E" stroke-width="5"/>
</svg>

Open the SVG document with an editor and a browser to view both the code and rendered drawing. Copy the markup above into a .svg file if your drawing didn’t work-out, and you’ll have everything you need to follow along.

Adding ClipPaths

Here I modify the SVG markup to make certain shapes into clipPaths. Here’s a summary of the changes:

Adding the clip-path to an enclosing g tag allows the clip-path to remain static while the rect is animated. Unlike the clip-path for the blue rect which will animate along with the shape as will be shown below.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<svg width="400" height="700" viewBox="0 0 400 700" fill="none" xmlns="http://www.w3.org/2000/svg">

    <defs>
      <clipPath id="red-clip">
          <circle id="red-circle" cx="270" cy="127" r="100" fill="#E08181"/>
      </clipPath>
      <clipPath id="green-clip">
          <circle id="green-circle" cx="270" cy="350" r="100" fill="#8CE494"/>
      </clipPath>
      <clipPath id="blue-clip">
          <circle id="blue-circle" cx="270" cy="573" r="100" fill="#52B6D5"/>
      </clipPath>
    </defs>

    <g clip-path="url(#red-clip)">
        <rect id="red-rect" x="57" y="77" width="100" height="100" fill="#E08181"/>
    </g>
    <g clip-path="url(#green-clip)">
        <rect id="green-rect" x="57" y="300" width="100" height="100" fill="#8CE494"/>
    </g>
    <rect id="blue-rect" x="122.5" y="525.5" width="95" height="95" fill="#52B6D5" stroke="#28829E" stroke-width="5" clip-path="url(#blue-clip)"/>
</svg>

The Image so Far

If you open the above SVG code in a browser. You’ll see that the three circles are gone because they are now invisible clip-paths. Also the red and green rects are gone because they are currently outside their clip-path regions. Only when parts of the red and green rects intersect with their respective clip-path regions will they show up. The blue rect is partially showing as it is partially intersecting with its clip-path (shown below).

Animation

Add the following line of code as the first line in the SVG file and create a style sheet called svg-style.css in the same directory as your SVG drawing.

1
<?xml-stylesheet type="text/css" href="svg-style.css" ?>

Learn more about CSS Animations over at CSS tricks. We’re going to keep things fairly simple here. Add the following code in svg-style.css.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
@keyframes red {
  0% {
      transform: translateX(0px);
  }
  50% {
      transform: translateX(300px);
  }
  100% {
      transform: translateX(0px);
  }
}
@keyframes green {
  0% {
      transform: translateX(0px);
  }
  50% {
      transform: translateX(-300px);
  }
  100% {
      transform: translateX(0px);
  }
}
@keyframes blue {
  0% {
      transform: rotate(0deg);
  }
  100% {
      transform: rotate(360deg);
  }
}
#red-rect {
    animation: red;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
#green-circle {
    animation: green;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
#blue-rect {
    animation: blue;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    transform-origin: 170px 573px;
}

The animation code above has the following effects on the drawing.

Below is the final animation. The red and green rects are only rendered when they intersect with their clipPaths, and the blue rect is permanently cut by its clipPath regardless of its dynamic movement.

Conclusion

So we’ve learnt how to draw an SVG graphic in Figma and animate the graphic with CSS3. Keep in mind the differing behavior of clipPaths when placed directly on the element vs. on an enclosing g tag when you’re trying to create a specific effect, and feel free to reach out with any questions @StrawStackRH!

comments powered by Disqus