Courses > Design > UI/UX Motion

UI/UX Design & Micro-Animation

Design premium interfaces in Figma, create custom vectors, build user flow prototypes, program smooth CSS transitions, and craft motion timelines for production web apps.

5-Week Intensive Program Beginner to Advanced Digital Arts
4.8
★ ★ ★ ★ ★
(510 ratings) 1,420 students enrolled
Created by Cognito Insights Academy Design Team
Last updated 06/2026 English

Course at a Glance

5 Weeks Duration
12.0+ Hours Video Content
100+ Videos Total Lessons
10+ Tools Key Tools
40+ Labs Practical Tasks
Beginner-Adv Skill Level
Digital Cert On Completion
Lifetime Access

What you'll learn

Master digital color principles, layout grids, spacing rules, and typography hierarchies.
Design screen components, wireframe templates, and prototypes in Figma.
Create vector illustrations and icon curves using Adobe Illustrator pen tools.
Program interactive web micro-animations using custom CSS properties and transitions.
Export SVG vector tracks and embed motion JSON packages (Lottie) into web systems.
Structure professional portfolio assets to present to design agencies and tech firms.

About this course

Great applications stand out because of their visual execution, clear user flows, and smooth micro-interactions. This intensive UI/UX Design and Animation course is engineered to transition you from core canvas concepts to mastering visual interfaces and production motion timelines.

You will explore visual styling: layout grids, type scales, accessibility ratios, transitions, and keyframe offsets. Through 40+ practical labs, you will wireframe templates, design component libraries, edit vector curves, program CSS animations, embed Lottie vectors, and assemble a complete placement portfolio using our dedicated cloud system.

What is Included

  • 100+ video lectures covering layout design, Figma prototyping, vectors, and CSS motion.
  • 40+ design labs creating component UI assets and animation curves.
  • 10+ Design Tools: Figma, Adobe Illustrator, SVG Edit, CSS Animation Editor, Lottie, Git.
  • 1-on-1 Portfolio Reviews with senior product designers.
  • Cognito Insights Digital Certification of UI/UX Design & Animation mastery.

Course Content

5 Weeks • 5 Chapters • 100+ Lectures • 12.0+ Hours total length

WEEK 01 — Visual Principles & Typography

  • ▶ Declaring spacing hierarchies & grid alignments Preview 10:00
  • ▶ Understanding color theory & contrast accessibility standards Preview 10:00
  • ▶ Typography scales & matching font styles 10:00

WEEK 02 — UI/UX Interfaces in Figma

  • ▶ Creating wireframes and components in Figma 12:00
  • ▶ Designing component variants & auto-layout spacing 13:00
  • ▶ Connecting screens to map interactive user flows 10:00

WEEK 03 — Vector Art & Icon design

  • ▶ Mastering Pen tools & vector anchor manipulations 12:00
  • ▶ Creating SVG assets and clean custom icon packs 10:00
  • ▶ Exporting vector assets for web structures 10:00

WEEK 04 — Micro-Interactions & CSS Animation

  • ▶ Declaring CSS transforms, keyframe timelines, & easing rules 12:00
  • ▶ Structuring hover transitions and interactive menu cards 13:00
  • ▶ Parsing Lottie JSON animations inside web pages 13:00

WEEK 05 — Capstone Design Showcase

Build a comprehensive personal UI/UX portfolio containing interactive screens, icons, vectors, and micro-animations.

  • Create Figma prototypes of a mobile utility
  • Design custom vector illustrations
  • Compile micro-interactions using CSS keyframes
  • Export case studies for agency reviews