Learn Prototyping

Bring your designs to life with interactive prototypes that allow you to test and refine your design ideas. These tutorials teach you everything you need to know.
Read moreRead less
All content
Courses
Tutorials

All Prototyping content:

  1. A Guide to Prototyping in Figma

    A Guide to Prototyping in Figma

    Course • Beginner

    Figma is a great tool for UI design, and among its greatest strengths are its prototyping features. In this short course, you’ll learn how to prototype with...

  2. Beyond the Basics: Figma

    Beyond the Basics: Figma

    Course • Intermediate

    Figma is quickly becoming a favorite tool for UI and UX designers worldwide, many of them coming over from Sketch and Adobe XD. Figma is a super powerful and...

  3. Prototyping in Design Thinking: Fail Fast, Fail Often

    Prototyping in Design Thinking: Fail Fast, Fail Often

    Tutorial • Beginner

    In this article we’ll take a look at the prototyping stage of design thinking. Failing is mandatory.

  4. Your First eCommerce Website Prototype With Adobe XD

    Your First eCommerce Website Prototype With Adobe XD

    Tutorial • Beginner

    A step-by-step tutorial for designing and prototyping an online store using Adobe Experience Design’s new features like overlay and repeat grid.

  5. A Walkthrough of the Prototyping Tools in Sketch

    A Walkthrough of the Prototyping Tools in Sketch

    Tutorial • Beginner

    In this walkthrough, I will go over everything you need to know about prototyping in Sketch, from must-know shortcuts, all the way through to getting...

  6. How to Quickly Add Microinteractions to Your Website

    How to Quickly Add Microinteractions to Your Website

    Tutorial • Beginner

    In today’s quick tip I’m going to show you how to add microinteractions to your website using a JavaScript library called micron.js.

  7. 15 Time-Saving Shortcuts for Adobe XD

    15 Time-Saving Shortcuts for Adobe XD

    Course • Beginner

    In this course, we’re going to cover 15 time-saving shortcuts and tips to help improve your workflow in Adobe XD. We’ll look at things such as floating...

  8. CSS Scroll Snap: What Is It? Do We Need It?

    CSS Scroll Snap: What Is It? Do We Need It?

    Tutorial • Intermediate

    It can be difficult for web developers to guarantee a well-controlled scrolling experience, but luckily a CSS module titled Scroll Snap will help to enforce...

  9. Spirit App: Easy Realtime Animation For the Web

    Spirit App: Easy Realtime Animation For the Web

    Tutorial • Beginner

    In this article we’ll take a look at the newest tool available for web animators called “Spirit” by Patrick Brouwer. We’ll learn how it can change the way...

  10. 3 Meaningful Motion Design Goals (With Examples)

    3 Meaningful Motion Design Goals (With Examples)

    Tutorial • Beginner

    Pairing motion with key user goals can make sure your designs are meaningful and don’t just add cognitive load for your users. Here are a few goals, with...

  11. A First Look at “GSDevTools” by GreenSock

    A First Look at “GSDevTools” by GreenSock

    Tutorial • Intermediate

    For this article I’m pleased to present a wonderful addition to the GSAP platform titled “GSDevTools”. This is a collection of tools that will certainly...

  12. 10 Recommended GitHub Repos for Motion on the Web

    10 Recommended GitHub Repos for Motion on the Web

    Tutorial • Beginner

    In this article I’ll bring to light some fantastic projects freely available on GItHub that have a strong focus on helping animators building motion for the...

Related Categories

CSS
HTML/CSS
UI Design
Sketch
Unlimited Downloads
From $16.50/month
Get access to over one million creative assets on Envato.
Over 9 Million Digital Assets
Everything you need for your next creative project.
Create Beautiful Logos, Designs
& Mockups in Seconds
Design like a professional without Photoshop.
Join the Community
Share ideas. Host meetups. Lead discussions. Collaborate.