Framer X lets designers create components with code, which can greatly increase the fidelity of a prototype—but creating these assets can be difficult if you’re not already familiar with coding.

There are a few great resources out there already, like this and this. But, this article serves as a quick start-to-finish walkthrough of a simple code component.

Check out the dribbble shot

Actually, we’ll be making two components, a Rating component which holds five Star components.


Illustration by Danielle Sylvan

While applying as a Product, Interaction, or UX designer, you might be asked to perform a design challenge. With just 20 minutes and a whiteboard, an interviewer can gauge exactly how you think as a designer.

I needed to be ready for this infamous step in my recent interview experience, so I’ll share with you how I practiced for it and the framework I created for myself. I also ran a workshop about the Design Challenge with students in the UX program at MICA.

Preparing

The best resource might be Solving Product Design Exercises, available on Amazon. This PDF guide walks…


Recreating Twitter Video’s “share from” feature with Framer

Practice

Practice is obviously crucial to becoming better at anything and when it comes to prototyping, creating fake prototypes is a great way to hone your skills. It’s got a few benefits:

  1. Increasing your skillset. You’ll be better prepared to find solutions when problems arise.
  2. Finding the easiest way. You’ll know of a couple of solutions to the problem, more importantly the one that’s lowest effort.
  3. Solidify the old. Sure, you’ll go back to the docs from time to time, but it’ll be much less painful the second, third, and fourth time around.

This article includes a few ways to start…


One prototype took less than an hour, the other took about three.

Warning: gifs incoming!

Speed is a crucial aspect to design. As designers, we need to rapidly produce and iterate through ideas. Technical chops are important, but knowing when to pull them out is the better skill to have. This comes from an understanding of what each tool provides, an understanding of what the problem is, and knowing exactly what needs to be communicated to your team.

I explored two ways to create the same design in order to see how much I could communicate in different amounts of time.


The dribbble shot

Warning: gifs incoming!

Almost all current design tools are aiming to bridge the gap between design, prototyping, and collaboration. InVision has entered into this space with Craft Sync, a Sketch plugin that links screens together which can be then uploaded to InVision’s web application. Sketch has rolled out an in-app prototyping feature and Framer has added their design tab. InVision Studio is like Sketch meets Principle and the ability to customize interactions is pretty robust.


An app interaction I prototyped with InVision Studio—check it out on dribbble

First, a disclaimer: InVision is a company that ships product updates often, so the images this article may not reflect the current state of the app.

InVision recently released their new design tool, InVision Studio. You can sign up for early access here—they’re inviting new users every week!

I found that it was pretty easy to make swipe-able interactions used in the apartment rental app prototype showcased above. When the user swipes across the device, we can animate the screen from one Artboard to another.

You’ll feel comfortable with Studio because it’s very similar to Sketch, and many other design…


In this post we’ll explain how to build a weather app, like this one we built. Matt and I decided to create this as our hello world to developing something and we think it’ll be helpful to explain this process, our process. It may not be the best way or the right way, but it’s a way, so we’re hoping it’ll help someone else who’s just getting started with React.

At the time we started this project, we had just finished the ReactJS Codecademy course and a good bit of Javascript Essential Training on Lynda. We suggest checking out the…


Quickly simulate VR experiences for testing and validation

The why

Prototyping is one of the most valuable tools that a designer can leverage throughout their design process. Creating something that can be used, tested, analyzed, and judged is how we decide if design decisions stay or go. And when done quickly, prototyping really becomes dangerous.

Prototyping is especially useful in virtual reality (VR). VR experiences can be extremely abstract, often hard to visualize, let alone explain to another person. A simple prototype can make sense of that mess.

Throughout my thesis project for my graduate UX program at MICA I created a series of prototypes to see if my VR…


Quickly simulate VR experiences for testing and validation

The why

Prototyping is one of the most valuable tools that a designer can leverage throughout their design process. Creating something that can be used, tested, analyzed, and judged is how we decide if design decisions stay or go. And when done quickly, prototyping really becomes dangerous.

Prototyping is especially useful in virtual reality (VR). VR experiences can be extremely abstract, often hard to visualize, let alone explain to another person. A simple prototype can make sense of that mess.

Throughout my thesis project for my graduate UX program at MICA I created a series of prototypes to see if my VR…


This is the 5th post in a series of posts recapping the courses in my UX Design graduate program at MICA.

Date: March 15th — April 19th

Thoughts so far

This program so far has been challenging and rewarding . All the classes have been taught by industry professionals and I’ve learned a lot about particular nuances of UX design processes.

I’ve noticed that many of the projects so far have tried to simulate the ‘real world’. In Prototyping, we were given real web analytic data and survey responses from players in a beach volleyball league. In my most recent class, we needed…

Nitin Sampathi

Motion and UX Designer. @Nitinsampathi

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store