Figma for UX & UI Design
This intensive three-day programme covers the full design workflow professionals use today, from research to a published product. Shaped by direct feedback, it moves through collaborating and researching in FigJam, designing with reusable components and design tokens in Figma, preparing clean developer handoffs, accelerating work with AI and the Figma MCP, and optionally publishing a live responsive page in Framer.
Through hands-on activities built around one shared design brief that students carry across all three days, participants leave with a working design file, a live published URL, and an AI workflow they can reuse. It is aimed at young designers, developers, project managers etc. with a basic Figma experience who want to gain deeper knowledge of a design process from start to finish.
Important information: We recommend using your own computer. If that is not possible, you may use the computers provided by the Digital Learning Hub. The AI and Figma MCP modules require installing Claude Desktop, which is not possible on DLH kiosk machines; using a personal laptop also lets participants keep their MCP setup after the course.
Required accounts (free sign-up links shared before the course): Figma, Framer, and Claude.
Content
- FigJam for facilitation, research, and stakeholder collaboration
- Auto Layout and constraints for responsive design
- Design tokens and Figma Variables
- Components and variants for interactive states
- Dev Mode and developer handoff best practices
- AI as a design tool and prompting for UI (Claude, Cursor)
- Figma MCP: setup and use cases with Claude
- Optional: Building and publishing a responsive page in Framer
- Optional: AI media generation with Figma Weave
Learning Outcomes
At the end of the training, learners will be able to…
- build responsive layouts using Auto Layout, constraints, and design tokens in Figma
- create a reusable component kit with variants for interactive states
- prepare a dev-ready Figma file with annotations and exportable design tokens
- apply AI tools and the Figma MCP to generate and refine UI components
- Optionally: publish a live, responsive page from a design brief using Framer
Training Method
Lecture, real-world scenarios / examples, practical exercises, group work, project-based learning
Additional Information
We recommend using your own computer. If that is not possible, you may use the computers provided by the Digital Learning Hub. The AI and Figma MCP modules require installing Claude Desktop, which is not possible on DLH kiosk machines; using a personal laptop also lets participants keep their MCP setup after the course. Required accounts (free sign-up links shared before the course): Figma, Framer, and Claude.Certification
Certificate of ParticipationPrerequisites
Basic working knowledge of Figma (creating and editing frames, layers, and basic components) and familiarity with core UX/UI design concepts. No coding experience is required.
Planning and location
09:00 - 18:00
09:00 - 18:00
09:00 - 18:00
ESCO Skills
ESCO Occupations
Your trainer(s) for this course
Riccardo Perello
See trainer's courses.Riccardo Perello is a product and UX designer and trainer focused on Figma, design systems, and AI-assisted workflows. He helps designers modernise their practice with tools like Figma MCP, Framer, and AI, taking projects from research to shipped product.