TECHNICAL WORKSHOPS
Prototyping in Figma
Andrew Hulin Instructor
Project Manager | Fall'18

For design, Figma is one of the most powerful tools in terms of real-time collaboration, design systems, and developer hand-off. Projects in Figma are stored in the cloud and edited in the cloud: think of it like an ultimate Google Drive for design.

In LavaLab, we strive to build a collaborative environment to encourage engagement and connection for our cohorts every semester. Tools like Figma enable our designers, project managers, and developers to better communicate with each other and improve team productivity overall. As we'll see later, Figma is a tool for everyone.

A Closer Look

In his LavaLab semester, Figma Fellow Andrew Hulin was the project manager of his team. Figma became a valuable platform for their early-stage concepts and visualization. In our walkthrough, Andrew covers the most valuable aspects of Figma and goes over quick prototyping skills for wire-framing with his past LavaLab project.

Full TranscriptPowered by Otter.ai
Collaboration
0:00:32 There's a lot of existing design apps, tools, and they all have different properties and workflows. Figma is really great at bringing them all together no matter what tool you use.
Why Figma Winshttps://kwokchain.com/2020/06/19/why-figma-wins/
Workshop
0:05:32 I'm going to show off some of the fun things that Figma can do through creating a wireframe of our project that we made in LavaLab my year.
0:06:26 This is Google's design language: it is open source and has a lot of detail and versatility. And the beauty of this is that it has [every component] you could possibly think of that exists within the functionality of an app.
Material Design 2.0 Theming kithttps://www.figma.com/resources/assets/material-design-themeing-ui-kit/
0:10:11 Navigation App Bar

The interface element Andrew explains here appears at the top of an app screen to enable navigation through a series of hierarchical screens. Excellent UI makes navigation easy and creates accessible open roads for users.

Navigation Designhttps://usabilitygeek.com/app-navigation-design-mistakes/
0:13:12 Auto Layout Feature (shift + a) adds a set of rules or constraints that allows you to work with the elements that you design in really interesting ways. Figma has a bunch of tools that makes sure everything is aligned and creates these complex scalable systems through styles and components.
Auto Layouthttps://www.figma.com/blog/announcing-auto-layout/
0:18:14 Image Icons
0:22:52 Scrolling Feature

Overflow behavior controls how users interact with content that extends beyond the frame/device’s dimensions.

Scrolling Featurehttps://help.figma.com/hc/en-us/articles/
0:24:23 Preview Mode: If we've set everything up right, we should be able to view what we've created and use the features we’ve added.
Figma Shortcutshttps://shortcuts.design/toolspage-figma.html
Andrew Hulin was in the Fall’18 cohort of LavaLab and is also a Figma student design fellow. He is currently a senior at USC studying The Arts, Technology & The Business of Innovation. Learn more at https://andrewhulin.com/