Jennifer Smith
Co-founder at American Graphics Institute
Jennifer Smith is co-founder of American Graphics Institute (agiraining.com) and has worked in the field of user experience for more than 15 years. She designs solutions for mobile, desktop, and IoT devices. Jennifer has served as a Designer in Residence at Microsoft, assisting third-party app developers to improve their design solutions and create successful user experiences. She has experience teaching professionals how to use tools designed to create interactive experiences. Jennifer has an M.S. in Human Factors from Bentley University, a BFA in Communication Design, and holds the UXQB-F certification from the User Experience Qualification Board.
This session is for those who have some basic knowledge using Figma and want to learn more about reusable components and styles. This session will take you through building and organizing nested components organization in a mini-design system. Naming and component organization will be discussed, as well as creating and using variables and exposing component properties.
Building objects in Figma
- Building a basic object using auto-layout features
- Naming and hierarchy
Saving components in Figma
- Managing components
- Applying instances
Creating variables
- Creating variables
- Exposing properties
Exporting
- Using dev mode
- Exporting assets
Figma is an incredible tool with many functions and features that may baffle or excite you. This half-day session introduces you to the hierarchical method of creating designs for prototypes in Figma. You’ll learn the difference between grouping, frames, and auto layout; and how to control positioning with constraints. You’ll also see how to import graphics and create styles and components. We will walk through a simple prototype built from start to finish.
Introducing the Figma workspace
- Overview of tools and menu items
- Naming frames and objects
Understanding layers
- Working with object hierarchy and position
- Assigning object properties, size, color, etc.
- Importing images and other formats into Figma
Frame fundamentals
- Frame vs auto-frame
- Padding and margins
- Working with size and position in Auto-layout
- Understanding constraints and resizing
Working with type
- Creating, editing, and saving type styles
- Locating and copying css for text
Working with components
- Creating
- Saving
- Variants
- Applying interactivity
Saving and exporting from Figma
- Exporting layers
- Auto version control
- Reverting to a version
Dev mode
- Viewing and copying code
- Exporting assets
- Measuring
- Annotating
- Marking as ready for dev
Commenting
- Sharing and replying to comments
- Working with sections