Course Objective & Scope
Using Figma like a static drawing board leads to layouts that break when text changes, hundreds of duplicated layers and messy files that frustrate developers. This course teaches how to build flexible, maintainable, code-aligned interfaces with Figma's modern production features.
Frames and layout grids, nested Auto Layout with min/max sizing, Component Properties (Boolean, Instance Swap, Text) and Variants, Variables for colour/spacing tokens and Light/Dark modes, FigJam collaboration and developer handoff in Dev Mode are practised hands-on. Participants rebuild a set of enterprise screens using Auto Layout, components and variables.
Who Should Attend?
- UI/UX and product designers looking to speed up production and clean up file architecture
- Frontend and mobile developers translating Figma specs into code
- Product managers and business analysts reviewing flows and design specifications
- Prerequisite: basic familiarity with interface design concepts
Key Takeaways
- Build responsive screens that adapt to content and viewport size using Auto Layout and constraints
- Create lean component libraries with Variants and Component Properties instead of duplicate frames
- Define colour, number and string Variables to switch themes (Light/Dark) and densities instantly
- Organise multi-page Figma files, version history and team libraries cleanly
- Streamline developer handoff using Dev Mode, annotations, specs and code connect conventions
Curriculum
Figma Workspace, Frames, Grids and Constraints
- File/project organisation, Frames versus Groups and responsive Layout Grids
- Constraints, vector networks and Boolean operations
Responsive Screens with Advanced Auto Layout
- Hug, Fill and Fixed sizing, absolute positioning and auto-wrapping
- Min/max width and height rules for cards, data tables and full-page layouts
Components, Variants and Component Properties
- Main components, instances and managing overrides
- State/size matrices with Variants; Boolean, Text and Instance Swap properties
Styles, Variables and Multi-Mode (Light/Dark) Systems
- Typography and effect styles; Color, Number, String and Boolean Variables
- Primitive and semantic collections for Light/Dark and mobile/desktop modes
Collaboration, Team Libraries and Dev Mode Handoff
- Publishing Team Libraries, version history and review workflows
- Ready-for-Dev statuses, annotations, asset export and Dev Mode inspection
Other Courses in This Category
-
Scalable Design System architecture: W3C design tokens, atomic component structure, accessibility standards, syncing Figma with code (Storybook/React/Web), documentation, versioning and cross-team governance.
- Live Course
- 5 modules
-
Interactive prototyping for digital product validation: from paper and lo-fi flows to hi-fi prototypes, Smart Animate and micro-interactions, realistic forms/carts with variables and conditional logic, and usability test readiness.
- Live Course
- 5 modules
-
Practical User Research for product and design decisions: research planning and hypotheses, in-depth user interviews, moderated and unmoderated usability testing, card sorting, synthesis and actionable insight reporting.
- Live Course
- 5 modules
-
Dual AI mastery for product designers: accelerating research synthesis, wireframing/UI generation (Figma AI, v0, Relume) and UX writing with AI; plus UX design patterns for copilot, agentic and generative AI products.
- Live Course
- 5 modules
-
End-to-end digital marketing strategy and channel execution: customer journey and funnel design, SEO and content, Google Ads and paid social, email/CRM lifecycle automation, conversion rate optimisation (CRO) and ROAS/CAC measurement.
- Live Course
- 5 modules
-
Strategic content marketing for B2B and B2C brands: buyer journey and search intent mapping, topic clusters and pillar pages, brand storytelling, multi-channel distribution and repurposing, and content ROI measurement.
- Live Course
- 5 modules
Get in touch
