Figma for Developers: Bridging Design and Code

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

Register for this Training.