ITLearning

UI/UX — Design Software Proficiency

Phase 1 — Foundation & Tools Mastery: Course 1.2 Design Software Proficiency
Phase 1 • Foundation & Tools Mastery

Course 1.2 — Design Software Proficiency

Master the essential UI/UX tools through guided labs and portfolio-ready mini-projects. We’ll cover Figma (Beginners→Intermediate), Adobe XD (Beginners), basic Photoshop for image editing, and Principle/ProtoPie for advanced micro-interactions.

Estimated self-study: 20–30 hours
Prerequisite: Design Fundamentals (Course 1.1)
Outcome: 4 portfolio pieces + 1 capstone prototype

Module B — Adobe XD (Beginners)

Goal: Quickly prototype user flows and test transitions.

Setup (15 min)

  1. Install XD and create a new mobile artboard (e.g., iPhone 14).
  2. Import SVG/PNG assets from your Figma exports.
  3. Switch to Prototype mode and connect screens.

Core Skills (2–3 hrs)

  • Use Artboards & Repeat Grid for quick layout
  • Create Component States (default, hover, tap)
  • Prototyping: Tap, Drag, Auto-Animate, overlays, timed transitions
  • Preview & record a click-through demo for review

Lab B1 — Onboarding Flow

  1. Design 3 screens: Welcome → Permissions → Success
  2. Use Auto-Animate between transitions
  3. Export a demo video (10–20s)
Note: Figma and XD overlap. This module shows you’re adaptable with tools.

Module C — Photoshop Basics for UI Assets

Goal: Produce clean, consistent, web-ready images

Core Skills (2–3 hrs)

  • Canvas vs Artboard
  • Masks & Background removal
  • Color correction (non-destructive)
  • Export PNG/JPG/SVG for web & mobile

Lab C1 — Hero Image Cleanup

  1. Select a product image. Use mask for clean background removal.
  2. Adjust vibrance/contrast for UI overlay readability
  3. Export @1x, @2x hero image, and PNG cutout
Deliverable: `/assets/` folder with images + short README of choices

Common Pitfalls

  • Using JPG for icons (use SVG or PNG instead)
  • Too much compression = image banding
  • No contrast layer behind overlaid text

Module D — Advanced Motion: Principle / ProtoPie

Goal: Create expressive micro-interactions with logic

Core Skills (3–4 hrs)

  • Import Figma components (keep layer names)
  • State transitions, easing, timing
  • Triggers (tap, drag, scroll), logic (ProtoPie)
  • Record short GIFs/MP4s for your portfolio

Lab D1 — Pull to Refresh

  1. Design list layout in Figma → import to Principle or ProtoPie
  2. Add drag-based animation for pull-to-refresh
  3. Use easing and bounce-back on release
💡 Interview Tip: Explain *why* the motion exists, not just what it does.

Capstone Project — 3-screen App Flow

Estimated Time: 6–8 hours

  1. Brief: Design a 3-screen flow for a mobile app called “Refill” — auto-reorders household supplies.
  2. Begin with lo-fi wireframes → Mid-fi UI → Build a mini design system
  3. Create interactive prototype (Figma/XD)
  4. Animate 2 interactions in Principle/ProtoPie (e.g. Add to cart, Confirm success)
  5. Record a 3-minute walkthrough: rationale, trade-offs, next steps

Portfolio Deliverables

  • Figma/XD file
  • Interactive prototype link
  • GIF or video of 2 motion examples
  • One-page case study

Reflection Prompts

  • What components/variants helped scale your work?
  • What did motion clarify that static couldn’t?
  • If given 2 more days, what would you improve?

Assessment Rubric

Design System (30%)

  • Consistent tokens (spacing, typography, color)
  • Reusable components with variants
  • Auto Layout & constraints for responsiveness

Prototyping & Motion (30%)

  • Interactions reflect user goals
  • Micro-interactions enhance feedback/clarity
  • Demo video or GIFs show polish

Asset Quality (20%)

  • Clean image exports; correct formats
  • Readable contrast & scalable icons

Communication (20%)

  • Clear rationale in case study
  • Reflection on decisions and trade-offs

Readiness Checklist

  • I can build responsive layouts with Auto Layout
  • I understand the difference between frames, groups, and constraints
  • I can create component variants and use them in prototypes
  • I can create micro-interactions in Principle or ProtoPie
  • I know how to export clean assets for web/mobile

FAQ

Do I need to master all 4 tools?

No. Focus on Figma as your daily driver. Use XD and others to demonstrate flexibility and explore motion.

Is Photoshop still relevant?

Yes—for quick edits, hero image prep, and visual polish. But it’s not your primary UI tool.

Which tool should I use for motion?

Use either Principle (timeline-based) or ProtoPie (logic-based). Start with the one that matches your app flow needs.

Credits

Developed by the UI/UX Curriculum Team — Phase 1, Course 1.2

  • Instructional Design: Jane L.
  • Content Authoring: Sam R., Priya M.
  • Illustrations: OpenDoodles & Figma community kits

Icons used under MIT license. Inspired by real-world product design workflows.