NoteThis article only scratches the surface of Figma. For a deeper dive, check out the Chinese documentation here.
What is Figma?
"Figma is the world's first collaborative design tool. You can design and prototype in Figma, turning ideas into products faster." Not long ago I needed to make a UI animation to share with a friend. My first thoughts were AE and Blender, but AE was too unfamiliar, and after an afternoon with Blender it felt too cumbersome. Wanting a bit of interactivity, I turned to Figma. From zero to finished animation took only two or three hours, saving me a ton of time for gaming. Below, a few words plus some GIFs will walk you through a simple UI interaction animation.
Getting Started
First, register an account here, then download the client for your system here, and finally log in—step one is done.
Interface
Figma's interface is similar to most design tools, consisting of the toolbar, layers panel, canvas, and properties panel.
Figma Interface
Toolbar
The toolbar includes the Main menu, Move and Scale tools, Region tools, Shape Tools, Drawing Tools, Text, Hand Tool, Add/Show Comments, Create Component, Use as Mask, Boolean Groups, Share, Present, and Zoom/View Options.
| Tool Name | Purpose |
|---|---|
| Move & Scale Tools | As the names suggest, used to move (Move) and scale (Scale) elements |
| Region Tools | Create something like an artboard |
| Shape Tools | Create basic elements: Rectangles, Lines, Arrows, Ellipses, Polygons, Stars, Place image |
| Drawing Tools | Pen for polylines and smooth curves, Pencil for freehand drawing |
| Text Tool | For writing text |
| Hand Tool | Move the canvas |
| Add/Show Comments | Exactly that—add and display comments |
| Create Component | Turn elements into reusable components |
| Use as Mask | Show the skeleton of an element, like X-ray view |
| Boolean Groups | For boolean operations |
| Share | Share with others |
| Present | View the final effect |
| View | Adjust the view |
Layers Panel
Composed of the Layers Panel, Assets Panel, and Pages List. We’ll only use the Layers Panel here.
Properties Panel
Made up of Design, Prototype, and Inspect.
| Properties Panel | Purpose |
|---|---|
| Design - Effects | Includes Inner shadow, Drop shadow, Layer blur, Background blur. Background blur uses CSS backdrop-filter for a frosted-glass effect |
| Prototype | Mainly for UI interactions and animations; details coming soon |
| Inspect | Detailed element data and implementation in CSS, iOS, and Android |
Try Building a UI
In Figma, building a UI is so simple you don’t even need coding knowledge—just hands. Below, I’ll reference my blog UI to build a simple interface.
Draw a Header Image
Use Frame under Region tools to create a frame; here I’ll demo with the familiar iPhone 8 Plus. Then, under Shape Tools, use Rectangles to create an element and tweak its color, size, etc.
Draw a Rectangle
Add Some Polish
Use Rectangles again to add post date, word count, and other polish to the header image.
Add Some Polish
Please ignore the color loss from GIF compression.
Add More Articles
Select all the elements you just created, press Ctrl + G to group them, rename the group "Article Frame" in the layers panel, so you can manipulate it as a whole. Duplicate the article frame and place it appropriately.
Give the Blog a Background
Under Shape Tools choose Place image, pick an image, click the empty area of the frame to apply it, then adjust the image. Since the image is currently on top, covering everything, just drag it to the bottom of the frame in the layers panel.
Give the Blog a Background
NoteWhen adjusting the layers panel, don’t drag the image outside the frame.
Simple, right? Now let’s add some interactivity
Sample
We now have a drawer menu and want it to slide in from left to right and dim the background when the top-left menu icon is clicked. Time to use the Prototype tab in the properties panel.
First, select the menu icon in the layers panel. In the Prototype tab on the right, you’ll see Interactions; click the plus to add an interaction.
Here’s a quick intro to Figma’s triggers and actions:
Triggers
| Trigger | Purpose |
|---|---|
| On tap | Click event, like HTML onclick. Tap to trigger |
| On drag | Drag event, like HTML ondrag. Drag the element to trigger |
| While hovering | Hover event, like CSS :hover. Mouse over triggers; moving away cancels |
| While pressing | Press event, like HTML onmousedown. Mouse down triggers; releasing cancels |
| Key/gamepad | Keyboard input, like HTML onkeydown. Press the assigned key |
| Mouse enter | Mouse-over event, like HTML onmouseover. Mouse over triggers; moving away does not cancel |
| Mouse leave | Mouse-out event, like HTML onmouseout. Mouse leaving triggers |
| Touch down | Mouse down or finger touch triggers |
| Touch up | Mouse up or finger lift triggers |
Actions
| Action | Purpose |
|---|---|
| None | No action on trigger |
| Navigate to | Switch from one frame to another |
| Open overlay | Overlay another frame on top |
| Scroll to | Scroll to a specific spot in the frame |
| Swap overlay | Replace this overlay with another |
| Back | Return to the previous frame |
| Close overlay | Close the overlay |
| Open link | Open a link |
With the above, it’s easy to see that On tap triggering Open overlay gives us what we want. In the Overlay section, check "Close when clicking outside" and "Add background behind overlay", then under Animation choose Move in, left-to-right direction, and Ease in and out transition.
Add Overlay Interaction
Want scrolling?
Content wants out
The blog overlay contains so much info that content overflows the frame. Can we give the overlay vertical scroll to show more? Easy: in the layers panel select the frame, then in Prototype set Overflow behavior to Vertical scrolling.
Wrap-up
And there you have it—a simple interactive animation. Add a few more interactions and polish with the steps above and you’ll get a nice result. Below are the final demo and related resources:
Final Demo