Adventures in Figma

Overview

This is going to be a page where I gradually add neat Figma things that I built for projects and why I built it the way I did.

Animation Panel

This was a component I built for a startup. It wasn’t supposed to be fleshed out but was something that we could throw into a larger Figma file or just show on it’s own to get feedback on the look and feel of component.

Without talking about the startups product is, let’s say for the purpose of this breakdown that this panel is for video production but the videos can span many days.

Requirements

This panel needed to allow the user the ability to see every object that was in a scene, add a keyframe at a specific date and time, add animation between keyframes if needed, and have playback controls.

Thought process

For this project I knew there were 2 different types of user, someone who just views an end product and someone who is building the product. These two people would open the same file, but if you never wanted to see the complexity of a video production timeline and only play the video back then you could.

I knew I wanted 3 possible states

• Collapsed - A view that takes up the least amount of space on the screen when there is no need for the rest of the panel
• Simple - This view only contains playback controls for the scene as well as a date selector so that you can navigate through scenes that span multiple days.
• Full - You can see everything here, it’s your full view of everything that you would need to see in a video production animation pane.

Idea Phase

During this phase I throw a lot of ideas at the wall that the customer will probably never see. Some people do this on paper and sometimes I do too but for this component I found that I could quickly iterate inside of figma itself. Since I already had components built that I cound turn into playback controls, text boxes, and item cards I would insert a version of each onto my canvas and then copy and paste anything I needed to start feeling out the panel layout. Any layout idea that I come up with gets it’s own quick mockup, each idea takes me maybe 5-10 minutes each and are mockups of the full panel with everything. My idea behind mocking up the full panel is that if I can get the most complicated part feeling good, then I can take pieces away to build the simpliflied version of the panel.

After making 5-10 quick mockups I sent my favorite 2-3 to the client and got their feedback. I did this pretty early on for a few reasons. First, I was a contractor brought on to help out with design, I’m not integrated into their product team and don’t know all the ins and outs of thier product to make sure I was on the right track on what they wanted the user to see. Second, sometimes the client doesn’t know what they really want. Multiple times I have found that a client whether it’s a founder or someone on their team don’t know how to put what they want into words, If they can see something even if it’s super basic on the screen then they can start to play off of that and give direction telling me if I’m on to something or way off base and they had a different idea in their head. Keyframes and animation for example on this project came from me building the initial mockups to their requirements and then asking some user flow questions when showing my initial mockup to the client. Depending on the feeback I recieve this is the loop until it’s decided that the basic mockup I built looks and feels right.

Prototype Phase

This phase generally goes pretty smoothly because I’ve already talked through the design with the client, I only need to figure out small interactions like filtering, adding keyframes, and adding animations. Since my idea phase focuses on the full layout that is what I built first, figuring out what each button does. Once I have a pretty fleshed out layout design and everything is it’s own broken down component I will duplicate the full layout and start removing items to build out the Simple layout and finally do the same again removing everything so that I can have a collaped version that has all the same base components.

Figma Make

Figma Make has helped a lot with the prototype phase in my workflow. For these projects I’m not utilizing Make to just build the component itself, I’m using it as a tool to enhance and build out my prototypes. For this project I sent my Full and Simple designs to Make and told it that these were two states of a panel and told it what button triggered the state changes. This is all something that I can do in regular Figma, but what I couldn’t do what building out the features that when you click on the timeline it added a keyframe, deleted it when you double clicked, and when you shift clicked multiple keyframes a little popup appeared to connect all the keyframes as if you were creating an animation.

Make is just another tool for me to give the client a more complete vision of their final product. It’s not perfect though, one of the unfortunate things is that I can’t take all the functionality I built in Make back to Figma Design only the layout. I haven’t had this be an issue yet, if there is something that I build out more fully in Make I’ll pop over to that project when the time comes to talk about that component.