Resources
Free files for existing students
General:

A list with links to helpers & inspirations
UX/UI Basics

UX Principles Exercise in Figma (.fig)

UI Principles Exercise in Figma (.fig)
UI Design with Figma

Getting Started with Figma V1 (.fig)
March 8th 2022
Beginners class

Variables: Getting Started, Setup, use, Collections, Aliasing and Modes
moonlearning.io exclusiveĀ

Components, Variants, Properties, Organizing, Sharing & Documenting
moonlearning.io exclusiveĀ

Responsive Design with Figma V3 (.fig)
July 4th 2023
Auto Layout, Constraints & Breakpoints

Figma Prototyping Deep Dive Course V3 (.fig)
July 4th 2023
Beginners to pro

Prototyping with Figma Variables V1 (.fig)
June 29th 2023
Part of the Figma variables and Prototyping class

Documenting & Collaborating with Figma. Design to Development Handoff
moonlearning.io exclusive
Colour and Typography in UI Design

Colour Stylesheet (.fig)

Typography Stylesheet 8/4pt Approach (.fig)

Typography Stylesheet Ratio Approach (.fig)
Grids & Responsive UI Design

Responsive & Adaptive Grids in Figma (.fig)

CSS Grid Figma Playground (.fig)

Course Project: Responsive Portfolio in Figma (.fig)

Bootstrap Playground (HTML & CSS)

CSS Grid Playground (HTML & CSS)

Figma Bootstrap Grid Template (.fig)
Outdated: Design Handoff to Development Course

Pdf Cheatsheet: Asset Export the right way

Design Handoff to development course Figma file (.fig)
Join the Newsletter
Sign up and be the first to know about new releases, workshops, and articles.