Visual Design Fundamentals: Anatomy of a Component
This module on components is part of the learning track "Visual Design Fundamentals".
Content
- Components: atomic design, the component as a contract, the eight interactive states
- Variants vs complexity; composition vs configuration
- Hands-on exercises and open critique using a shared design vocabulary
Learning Outcomes
At the end of the training, learners will be able to…
- build a component with all interactive states, variants, and a clear design-to-code spec
- critique visual design using a precise, shared vocabulary rather than personal taste
Training Method
Lecture, real-world scenarious / examples, practical exercises, group work
Certification
Certificate of ParticipationPrerequisites
Basic familiarity with Figma (frames, layers, components) and an active interest in digital design. Suitable for UX designers building their visual craft and graphic designers moving into digital. No coding experience is required.
Planning and location
09:00 - 17:00
Learning Track
This course is part of the following learning track(s) and can be booked as a stand-alone training or as part of a whole:
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.