Introduction to Figma

• Overview of User Experience Design (UX) vs User Interface Design (UI)

• What is Figma?

• Getting started with Figma

Working with Artboards

• Introducing frames

• Adding and deleting frames

• Navigating around frames

• Adapt layouts for mobile, desktop, tablet and different display sizes

Designing with Figma

• Type & fonts

• Importing Graphics and bitmap images

• The difference between frames and groups

• A brief overview of plugins

Drawing in Figma

• Rectangles, Circles and Buttons

• Drawing and combining simple shapes

• Setting Appearance attributes

• Controlling corner radius values

• Drawing with the Pen Tool

• Editing points and paths

• Working with color

• Strokes & color defaults

Testing and Prototyping

• Adding Interactivity

• Linking and unlinking artboards

• Setting screen transitions

• Adding interactions to elements

• Previewing a prototype

• Smart Animation & delays

Sharing and Exporting

• Exporting for review

• Exporting to a developer

• Sharing your prototype using links

• Exporting artboards as .png .svg and .pdf file

Questions & Answers