Figma Workshop
I had the pleasure of teaching a beginner's Figma workshop at the Peregian Digital Hub. The workshop was designed around the concept of "Be Dangerous: a new series aimed at helping people learn the new tools and skills that are extremely valuable in early stage startups" The goal was to equip participants with the skills to walk away knowing how to create a functional prototype they can demo on web or mobile, empowering them to bring their own ideas to life.
The workshop covered essential tools and techniques for UI/UX design and provided hands-on experience by creating a small design and prototype for a fictitious project management SaaS application.
The workshop covered essential tools and techniques for UI/UX design and provided hands-on experience by creating a small design and prototype for a fictitious project management SaaS application.
Objectives
- Introduce Basic Figma Use: Familiarize participants with Figma’s interface, tools, and basic functionalities.
- Teach Design System Libraries: Show participants how to leverage pre-created components for quick design and prototyping, ensuring consistency, especially for non-designers.
- Basics of Prototyping: Demonstrate how to create interactive prototypes to simulate user experiences,
Workshop Structure
Basic Figma Use
The workshop began with an introduction to Figma, explaining its importance in modern UI/UX design. Participants were guided through the Figma interface, learning how to navigate the workspace, use basic tools, and create simple shapes and frames. This foundation was crucial for the hands-on activities that followed.
Key Learnings:
- Navigating the Figma interface
- Creating and managing frames and layers
- Using basic shapes and tools for design
- Using Auto-layout to position elements perfectly and make designs responsive
Design System Libraries
Next, we delved into design system libraries. I demonstrated how to use existing libraries and create custom components. Participants learned how leveraging pre-created components can streamline the design process and maintain visual consistency. This is particularly useful for non-designers who may need to create designs or prototypes quickly without extensive design knowledge.
Key Learnings:
- Understanding design system libraries
- Leveraging existing components for quick design and prototyping
- Maintaining design consistency with reusable element
Hands on Project
To reinforce the concepts learned, participants worked on a small design for a fictitious project management SaaS application. This project involved:
- Designing the main dashboard, project overview, and task detail screens
- Using the design system components to build consistent and reusable elements
Basics of Prototyping
The final section of the workshop focused on prototyping. Participants were shown how to link frames and create interactions to simulate user flows. This hands-on session involved creating a simple prototype for a fictitious project management SaaS application. Participants linked various screens to demonstrate basic user interactions, such as navigating between pages and performing actions like adding tasks and viewing project details.
Key Learnings:
- Creating interactive prototypes
- Linking frames and adding interactions
- Simulating user experiences