Prototypes Triggers: After Delay (Time Interactions)

Topics covered in this Figma tutorial:

Adding a Drag Interaction, Adding a Time Interaction, Adding a Keystroke

Exercise Preview

Exercise Overview

In this exercise, you’ll design a “drag to delete” feature for a Messages app. You’ll use drag interactions, timed interactions, and define a keystroke.

Opening the File

1. In Figma, if you’re not on the homescreen (file browser), do the following:

   • In the Desktop app: Click the Home tab (Mac users can also choose File > Open File Browser).
   • In the Web app: At the top left, click the Main menu button and choose Back to files.
2. To open a local file, click Import file (may be an icon near the top right).

3. Navigate into Desktop > Class Files > Figma Class and double–click on Messages App.fig to choose it.

   Once the file has uploaded, click Done and double–click on the file to open it.

Getting Started

We’ve already created the layout and graphics for this design, so let’s focus on prototyping the functionality that will lets us swipe to delete the Erin Steed message. This functionality and animation can’t be built entirely into a component, so we’ll choose one message to show it off on. This will be good enough to show the client and developer how we want the feature to work.

1. Click on the red trash can graphic to select it.
2. Hold Shift and click on the Erin Steed message row behind it.
3. Hit Cmd–G (Mac) or Ctrl–G (Windows) to group them.

4. The red bar must start hidden off screen, so we’ll be able to swipe across and reveal the hidden red bar.

   Double–click on red trash can graphic to select it.

5. With the red trash can graphic selected, in the Design panel set X to 390 (the width of this frame), so it ends up outside the frame and hidden.
6. Click in an empty area to make sure nothing is selected.
7. At the top left of the frame, click on the name Messages to select the frame.
8. Duplicate it by hitting Cmd–D (Mac) or Ctrl–D (Windows).
9. Rename the new frame by double–clicking the Messages name at the top left and change it to Delete.

10. Drag the Delete frame down slightly (by dragging its name to move it).

    When things overlap in a moment this will make it easier to see what’s going on.

11. On the Delete frame, select the Erin Steed message row.

12. in the Design panel set X to -390 (don’t miss the minus!) to move the row over so you reveal the entire red bar.

    NOTE: The first frame shows the initial design. The second frame shows how it will look at the end of the drag.

Adding a Drag Interaction

1. In the right panel, at the top click on Prototype.
2. In the first frame Messages, select the Erin Steed message row.
3. A blue circle will appear to the right of the row (far outside the frame). Drag the blue circle to the Delete frame.

4. In the Interaction details panel that opens on the right:

   • Change On tap to On drag.
   • Under Animation, make sure Smart animate is selected.
5. At the top right of the window, click Present or hit Cmd–Option–Return (Mac) or Ctrl–Alt–Enter (Windows).
6. Drag right to left over the Erin Steed message row to reveal the red delete bar. If you don’t drag very far it will snap back to the initial appearance, but if you drag far enough it will snap so the full red bar is shown.

7. Close the presentation tab/window.

Adding a Time Interaction (After Delay)

We need the red delete row to disappear without us doing any additional interaction. How do we tell Figma to do something automatically? With a time interaction!

1. Click on the Delete frame’s name to select it.
2. Duplicate it by hitting Cmd–D (Mac) or Ctrl–D (Windows).
3. Double–click on the new frame’s name Delete and change it to Done.
4. In the Done frame, select the red delete row.

5. In the Design panel:

   • Set H (height) to 0
   • Under Layer, change the Opacity from 100% to 0%
6. The lower messages must be moved up to fill the empty space. We’ve grouped all those messages, so drag them up (hold Shift as you drag up) to fill the gap.
7. In the right panel, at the top click on Prototype.
8. Select the Delete frame by clicking its name.
9. Hover over any side of the frame and a blue circle will appear. Drag the blue circle to the Done frame.

10. In the Interaction details panel that opens on the right:

    • Change On tap to After delay.
    • Change 800ms to 1ms (that’s the shortest delay Figma allows, which is virtually instantaneous).
    • Under Animation, change Instant to Smart animate.
11. Click in an empty area of the canvas to make sure nothing is selected.
12. At the top right of the window, click the Present button .
13. Drag right to left over the Erin Steed message row and release to see the red bar appear and then animate away!

14. Close the presentation tab/window.

Adding a Keystroke

Finally, let’s add a keystroke to undo the message deletion.

1. Select the Done frame by clicking its name.
2. Hover over any side of the frame and a blue circle will appear. Drag the blue circle to the Messages frame.

3. In the Interaction details panel that opens on the right:

   • Change On tap to Key/gamepad.
   • Click on Click to select and press Cmd–Z (Mac) or Ctrl–Z (Windows).
   • Under Animation, make sure Smart animate is selected.
4. Click in an empty area of the canvas to make sure nothing is selected.
5. At the top right of the window, click the Present button .
6. Drag right to left over the Erin Steed message row to delete the message.
7. Hit Cmd–Z (Mac) or Ctrl–Z (Windows) to undo and the Erin Steed message should reappear!

8. Close the presentation tab/window.