#60 Selecting time – learnings from Material Design time picker

So here is Material Design time picker. (below right)

Screenshots of Material Design time picker and date picker.

It’s typically paired with a date picker, which is a calendar-based (above left). The date picker works very well. But it’s the time picker that has problems.

Here’s how it works.

  1. You first pick an hour.
  2. As soon as you are done, the UI jumps to show minutes.
  3. You pick minutes, then you are done.

Here are the problems.

  • Circular analog clock representation is visually interesting, but does not work well, especially because hour and minute are separated.
A visual showing Material Design timer picker separates hour and minute.
  • An automatic transition from hour to minute feels forced, and you get confused especially at the first time.
An illustration showing that there's an automatic transition as soon as an hour is selected in Material Design timer picker.
  • As a result, it does not fully represent a clock with a long and short needles anymore that it initially took a queue from.
An illustration showing that a guy and a clock thinking that Material Design time picker is "clock-ish".
  • When you switch between hour and minute by clicking the number, “a clock needle” animates from 9 hour to 29 minute, but this animation does not mean anything.
An illustration showing that there's an animated effects when Material Design time picker shows selected hour and transitions to show a minute.

It could have been better if hour and minute are both represented simultaneously in the “clock”, so that it resembles how a real analog clock will look like on that time.

A prototype of Material Design time picker with a slight adjustment where hour and minute are shown simultaneously.

When you compare this to iOS calendar time input UI, I have to say iOS is much better. It allows a user to swipe up/down hour/min, or use 10-key to enter hour and minute altogether.

A screenshot of iOS time picker with a scroll wheel control.
iOS time picker with 10-key input.

Now, Material Design also has a different mobile time picker that you can directly type in, which is better than clock-like version.

A screenshot of Material Design time picker mobile, that allows a user to type in hour and minute.

So what is the lesson from these?

Entering time is such a basic, common things to do in various products and services.

  • The experience should be as straightforward and crystal-clear as possible.
  • The UI should use a metaphor that people are already familiar with.
  • It should not confuse a user. 

From this perspective, using a calendar for selecting a date is perfect. We are all used to using a calendar.

An illustration and a caption showing a calendar is something that people are familiar with.

But for time, it would be best if hour and minute are not too separated.

And for faster input, direct typing would probably be the fastest and easiest.

I think a scroll wheel for hour and minute separately is fine too. An hour only has 1-12, or 1-24, and minute only has 0-59, which is manageable.

An illustrative diagram of how hour and minute scroll wheel work.

Someone mentioned that Material Design time picker with a circular design is very “designery”.

An illustration showing a woman making a remark about Material Design time picker as "designery".

It’s an interesting remark.

I think it’s fair to say that many designers tend to get attracted to a circle as one of the most beautiful geometric shapes.

Analog clock is a manifestation of that as a symbolic representation of time.

An illustration of an analog clock shown as a symbolic representation of time, compared to digital clocks.

While it makes perfect sense to make time picker using an analog clock metaphor because it’s about time, ironically the result feels wonky.

This illustrates an interesting aspect of user experience. How you feel is what ultimately matters, rather than the pure logic that brought you to your design solution in the first place.

An illustration and a caption saying "how you feel is what ultimately matters, rather than the pure logic that brought you to your design solution in the first place.

I respect the designer who created this, that she or he, or the team had a courage to try this type of design.

But at the end of the day, this is not the most intuitive, easy to use design, even though it may look interesting and unique on its surface.


Check out YouTube version too!

#28 Prototype Resource Map: Comprehensive guide to today’s 8 popular UX prototyping tools

A diagram of “stitch screens with wires” interaction model and transition dropdown menu, with name of 8 prototyping tools.

Although tools are not the most important things to learn as a UX designer, inevitably you need to use it in order to achieve your more important goals, to solve user’s problems. This article covers today’s 8 most popular UX prototyping tools including Sketch, Craft, Axure, Adobe XD, InVision Studio, Principle, Framer X, and Figma. First, it compares key aspects such as price, basic prototyping features, Sketch compatibility. Then it covers a high-level overview of each software program in terms of pros and cons and uniquenesses.

I understand there are many more tools out there, and other people may have different opinions. I also acknowledge that I am not familiar with every single tool available. I chose these 8 tools based on a combination of popularity and how these tools played key roles in the modern history of prototyping tools, and likely to take part in the future.

When Adobe Flash started going down, Axure took over in Web 2.0 Era, then Sketch came along to become a de facto standard. But lack of prototyping and cloud features in its early days opened up other new tools to emerge around Sketch, such as InVisionPrincipleCraft plugin for Sketch, and Adobe XD with a new voice capability. Framer X is tackling a challenging developer handoff problem, which could be the future of prototyping. Figma is getting more tractions lately because it was built for cloud-based collaboration, which is becoming a norm in today’s accelerated remote work situation.

Trends in today’s prototyping tools

Today’s trends in prototyping tools are ”stitch screens with wires” interaction model, accompanied by auto-animate transitions that smartly animate transitions between two screens connected. This makes prototyping super-fast and intuitive for non-tech-savvy UX designers.

Left: a diagram of how "stitch screens with wires" interaction model works, Right: an example dropdown menu for transitions with auto-animate highlighted.
Left: “Stitch screens with wires” interaction model, Right: Auto-animate transition smartly look for same objects between two screens and create animations based on parameter changes on size, position, opacity level/etc.

Currently, Sketch is the most popular prototyping tool. However, Sketch is very limited when it comes to creating transitions and micro-interactions with animated effects. This is where other tools have strengths, and all of them have some sort of compatibility with Sketch. Let’s dive in to comparisons of 8 popular prototyping tools.


Section divider title graphics including the title, Comparison of 8 popular UX prototyping tools.

Comparison of 8 most popular prototyping tools

Price

A pricing table of all the 8 UX prototyping tools. It includes notes and free trial period.
Price comparison of 8 prototyping tools
  • Sketch one time price is $99 which includes 1 year of software updates and Sketch Cloud usage. Optional renewal is available for $79/year for software updates and cloud.
  • Adobe XD is free.
  • Axure is $495 for its perpetual license, or $29/month subscription.
  • InVision Studio and Craft are free, but are limited to only 1 prototype in InVision Cloud for free.
  • Principle is $129 (one time fee).
  • Framer X is $15/month or $144/year, based on 1 year subscription.
  • Figma is free with a Starter plan, up to 3 prototypes.

Basic prototyping features


Comparison of basic prototyping features:
Based on data as of April 2020. information is all subject to change, whenever listed companies make any changes on their end. The author of this article does not have affiliations with any companies listed.

Legends for diagrams shown in a table above, interaction models and artboard structure.

Because the whole point of prototyping is to quickly test concepts, ease of use and speed are critical. In most real world situations, time is very limited, so ability to quickly create a basic prototype just by connecting screens together is super convenient, and that’s all you need in most cases.

From this perspective, Sketch, Craft, InVision Studio, Principle, Figma, Adobe XD, Framer X all do great jobs with similar “stitch screens via wires” interaction models.

Principle creates all the transitions automatically, allowing some controls via timeline UI. This is great for creating a nice animation instantly. But it doesn’t offer the most basic “preset transitions” such as slide, push or dissolve like other tools. For this reason, Principle is positioned slightly to the right in the chart compared to others (except Axure).

InVision Studio also provides a timeline UI similar to Principle, but it also provides basic preset transitions, which makes it a bit easier when it comes to basic prototyping.

Axure uses a very different interaction model. A user has to specify and add every single interaction via Interaction Editor. Interaction Editor is a very powerful tool for building complex interactions, but lacks speed and glance-ability for basic prototyping.

A matrix of 8 UX prototyping tools plotted on a price vs. ease of use plane.
Chart 1: Price vs. ease of use — basic prototyping: Ease of use is evaluated based on the author’s perspective, especially in terms of how easy to build a basic prototype by connecting multiple screens together via transitions.

Above chart shows how 8 tools are positioned on a price vs. ease of use plane. As you can see all the tools except Axure fall under bottom-left quadrant.


Basic prototyping features — animation adjustments

A table showing ability to adjust animations in basic prototyping feature across 8 UX prototyping tools.
Based on data as of April 2020. information is all subject to change, whenever listed companies make any changes on their end. The author of this article does not have affiliations with any companies listed.
A matrix of 8 UX prototyping tools plotted on a ease of use and fine-tuning capability plane.
Chart 2: Ease vs. fine-tuning capability — basic prototyping: Ease of use and fine-tuning capability are evaluated based on the author’s perspective, especially in terms of how easy to build a basic prototype by connecting multiple screens together, and how much controls you have in terms of sequences, timing and ease in/out.

This chart illustrates how much controls you have when creating a basic prototype, when it comes to sequence of multiple animations, timing and duration of animations, and ease in/out effects. Software programs are broken down into 3 groups.

The group in the top-left quadrant have a good balance of an overall ease of use and ability to fine-tune transitions and animations without too much work. These include InVision Studio, Principle and Adobe XD. All three do pretty good job in creating auto-animate transitions. Although similar, Principle seems to create the smoothest animations in most cases.

Figma recently added Smart-Animate feature, but currently it’s lagging compared to above three programs. Framer X can do fine-tuning but only via code. Sketch and Craft does not support fine-tuning. They only support basic preset transitions.

Axure can do many complex interactions, but only via Interaction Editor, which is not the simplest way from basic prototyping perspective.


Sketch compatibility

A table showing Sketch compatibility across 8 UX prototyping tools.
Based on data as of April 2020. information is all subject to change, whenever listed companies make any changes on their end.

Currently, InVision Studio is the most Sketch-compatible program, which supports opening Sketch file directly as well as copy & paste objects and symbols from Sketch.

Adobe XD supports opening Sketch file directly, but copy & paste from Sketch doesn’t work. Principle can import Sketch file almost the same way as opening, but copy & paste does not work. Figma can import Sketch file but takes time. Copy & pasting a Sketch object does not work. Framer X accepts copy & pasting a Sketch object, but cannot directly open or import Sketch file. Axure can take copy & pasted Sketch object, but only via Axure plugin installed to Sketch.

A matrix showing 8 UX prototyping tools on a price vs. Sketch compatibility matrix.
Chart 3: Price vs. Sketch compatibility: Based on data as of April 2020. information is all subject to change, whenever listed companies make any changes on their end.

Advanced prototyping

A table showing advanced prototyping capability such has ability to build full interaction, micro-interactions, and voice interaction.
Based on data as of April 2020. information is all subject to change, whenever listed companies make any changes on their end.
A matrix showing 8 UX prototyping tools on a price vs. advanced prototyping capability plane.
Chart 4: Price vs. advanced prototyping capability: Evaluated based on the author’s perspective.

When it comes to advanced prototyping capability, Axure covers pretty much any interactions possible to simulate how the actual product is going to feel like via Interaction Editor except voice interaction. But Axure does not support videos. (Axure supports GIF animations)

Framer X is another tool that has a potential to add a lot of advanced interactivity to a prototype. One of the unique advantages of Framer X is that it supports video and audio. You can even embed YouTube video and run it inside your prototype, which is pretty powerful. While Framer X has a store to download many useful components, many of advanced interactivity need to be added via code.

Principle has an interesting and unique feature called Drivers, which can add various micro-interactions quickly to make the prototype look real.

Adobe XD allows you to create voice interaction, which stands out from competition in this area as no other tools support that.

Sketch, Craft and Figma are fairly basic, so does not support advanced interactivity at this point.


Running a prototype on mobile

A table showing capability of running a prototype on mobile across 8 UX prototyping tools.
Based on data as of April 2020. information is all subject to change, whenever listed companies make any changes on their end.

All the software programs have mobile apps to run a prototype except Framer X. Framer X is lagging in this area, where a prototype can only run inside a mobile web browser via QR Code.


Sharing a prototype online

A table showing ability to share a prototype online across 8 UX prototyping tools.
Capability of sharing a prototype online across 8 prototyping tools

Principle falls short in this area as it does not have a cloud. In order to share a prototype in Principle, you need to either send a Principle file and have it open from Principle mobile app, or export a prototype as a Mac Desktop app to be viewed on a Mac that doesn’t have Principle app installed. This means you cannot share a prototype with Windows users.


3rd-party ecosystem

A table showing 3rd party ecosystem of 8 UX prototyping tools such as plugins, store and others.
Based on data as of April 2020. information is all subject to change, whenever listed companies make any changes on their end.

While Sketch remains strong in this area with its abundant plugins, Adobe XD and Figma are catching up. Framer X has a unique approach with its Store, which is super-easy to browse and download functional components such as YouTube Player. Moving forward, Adobe may have a powerhouse advantage in a near future, as seen in innovative new feature such as voice interaction. Many of popular Sketch plugins are already getting ported to Adobe XD too.


Collaboration capability

A table showing collaboration capability and price across 8 UX prototyping tools.
Based on data as of April 2020. information is all subject to change, whenever listed companies make any changes on their end.

As for collaboration within a team, Principle falls short. Adobe XD and Figma offers free collaboration feature. Sketch offers a separate subscription for Team feature. Axure has a separate software that supports Team feature called Axure RP9 TeamInVision Studio offers additional subscription for Team feature. Craft uses InVision Cloud. Framer X has Small Teams plan that allows access to Team Store.


Section divider graphic with a title "overview of each tool".
Sketch logo as a section divider for Sketch section.

1. Sketch (based on version 63.1)

Sketch UI showing 3 screens connected using prototype feature.
Sketch UI showing 3 screens connected using prototype feature.

Sketch is the most popular tool, a de facto standard with various 3rd party plugins. But the default transitions are minimum, animate from right, bottom, left, top only.

Sketch UI with a blow-up of Prototyping animation options.
Sketch prototype feature, 5 animation options
  • Pricing: $99  (includes 1 year updates, 1 year Sketch Cloud. Optional renewal is available for $79/year for software updates and cloud. )
  • Free trial: 30 day
  • Mac only

Pros:

  • Abundant plugins
  • De facto standard
  • Strong symbol features
  • Smart Layout

Cons:

  • Limited transition animation options
  • No fine-tuning capability for animations
  • No micro-interaction support

Running a prototype locally, on mobile and in the cloud

https://youtu.be/xI0w4xdk9Ww
  • Clicking a preview icon on the top right corner allows you to run a prototype locally.
  • Sketch Mirror app can mirror an open Sketch file on your Mac through the same wifi connection. To mirror a prototype on a mobile app, click Notifications on the top right of the desktop app window, and select a mobile phone running Sketch Mirror app.
  • Uploading to a cloud allows you to share a prototype with others via a link. This is a great way to share a prototype with others and get feedback.

Smart Layout, plugins

  • Smart Layout allows automatic resizing of buttons and layouts based on the text lengths.
  • Abundant plugins are one of Sketch’s biggest strengths compared to its competitors. All the installed plugins appear under Plugins menu, and can be disabled via Preferences/Plugins.
  • Rename It, one of Sketch plugins lets you rename selected layers or artboards in bulk with numbered names. Adding “%N” in Name field after your desired text string (e.g., rectangle, square, thumbnail) results in layer names with your [desired text string]+number.

Collaboration – Team  feature

  • Sketch has a Team feature which allows you to collaborate. You can access this feature by logging in to your Sketch Cloud, then select Create New Team.
  • Adding team members cost $9/month per contributor, or $99/year per contributor.

Sketch related useful inks


Craft logo as as section divider for Craft section.

2. Craft plugin for Sketch (Based on version 1.0.94) 

Craft toolbar embedded inside Sketch. Craft-based prototype links shown in blue.
Craft toolbar embedded inside Sketch. Craft-based prototype links shown in blue.

InVision’s Craft plugin enables a slightly better prototyping capability directly within Sketch. These include gestures such as tap, swipe, and transitions such as dissolve, push, slide.

  • Pricing: free
  • Mac only (as it’s a Sketch plugin)

Pros:

  • Free (if you already have Sketch)
  • More transition controls than Sketch
  • Smart Duplicate, Data features

Cons:

  • You need Sketch
  • Transition options are still limited
  • Sticky header not supported
A blue arrow appears from a selected layer, and shows an option to link back/close, external URL, or artboard to link to.
Pressing “C” while a layer is selected brings up a blue arrow to link to another artboard, link back, or external URL.

Prototype menu and toolbar are embedded in Sketch

Because Craft is a Sketch plugin, Craft menu appears as an embedded toolbar on the right side of the screen. Clicking on a circular head of a blue link arrow brings up prototype menu. Prototype options that Craft has are slightly more than Sketch’s options as below.

Prototype menu appears when a start of the blue arrow is clicked. Craft toolbar appears embedded in Sketch UI. on the right.

Running Craft prototype locally, in the cloud, on mobile

  • Craft prototype is very similar to Sketch prototype. Currently a “sticky header” feature is not available.
  • A prototype uploaded to InVision Cloud can be opened in InVision mobile app to run on mobile. Only one prototype is allowed on a cloud with a free InVision account.
https://youtu.be/b1k5Pvp3epc
Craft prototype running on mobile via InVision mobile app.

Data, Stock

  • Data pulls real content from a range of sources and place it directly in your design.
  • Stock allows you to find and place high-resolution imagery from Getty and iStock to your design.

Collaboration

Once a prototype is uploaded to InVision Cloud, clicking on “+” icon allows you to invite a person to collaborate. 

InVision Cloud UI showing that clicking on "+" opens a popup to enter email to invite people.
Clicking on “+” opens a popup to enter email to invite people.

Craft related useful inks


Axure logo as a section divider for Axure section.

3. Axure (Based on version 9.0.0.3687)

A screenshot of Axure user interface
Axure user interface

Axure has established its own unique place as a go to prototype tool to build a more robust, complex prototype with various interactions, not just screen-to-screen click throughs.

Many experienced UX designers still use Axure because you can do more, but the trend is more towards software programs with “connect screens with wires” interaction model, because that’s much faster to create simple prototypes.

  • Pricing: $495 (perpetual) or $29/month
  • Free trial: 30 day
  • Both Mac and Windows

Pros:

  • Advanced prototyping capability
  • Can build almost any interactions (except voice interaction)
  • Unlimited cloud

Cons:

  • Most expensive — $495 perpetual, or $29/month.
  • Does not use popular “connect screens with wires” interaction model
  • Font Awesome not supported in mobile app
  • Least Sketch compatibility

Interaction Editor and Condition Builder

  • Interaction Editor allows you to add various complex interactions. Various list of events, actions and tiggers are available in Axure’s Interaction Editor to be able to create complex interactions.
List of available events, actions and triggers available in Axure’s Interaction Editor
  • In Interaction EditorCondition Builder allows conditional branching of interactions. This is basically If statement in code done visually.
An example of creating conditions with logic in Condition Builder.

Running a prototype locally, in the cloud, on mobile

  • Clicking Preview button opens a browser window and runs a prototype.
  • Publishing to a cloud allows you to share a prototype easily with others to collect feedback.
  • Axure Cloud mobile app can open a project published on a cloud. Font Awesome did not render.
https://youtu.be/NatQKa2AlEU

Sketch plugin, widget libraries


Axure RP9 Team

  • Axure offers team (collaboration) feature as a separate product.
  • Subscription is $49/month per user, which is more expensive than regular license.
  • Perpetual license is $895 per user.

Adobe XD logo as a section divider for Adobe XD section.

4. Adobe XD (Based on version 28.4.12.3)

Adobe XD user interface in Design Mode.

While Adobe XD entered the market late, it has a unique voice interaction feature, which no other competitors support.

Its Auto-Animate feature is pretty strong and simple, however, there’s no timeline UI like Principle or InVision Studio to make adjustments.

It can directly bring in Photoshop files, Illustrator files. It can also open Sketch file directly.

  • Pricing: free
  • Both Mac and Windows

Pros:

  • Voice interaction capability
  • Can open Photoshop/Illustrator files
  • Free

Cons:

  • Mobile app requires uploading a file to the cloud first
  • It takes long to open a file in a mobile app
  • Font Awesome not supported in mobile app

Prototype mode — trigger and action

  • Adobe XD separates Design Mode and Prototype Mode. Below screenshot shows Prototype Mode.
  • AmongTriggersTime allows a timer function. Voice is the most unique feature of XD, which is one of triggers.
  • Among transitions, Auto-Animate is a pretty powerful feature that can smartly animate a transition between screens.

Running a prototype locally, in the cloud, on mobile

  • Clicking a Play button runs a prototype locally.
  • A file needs to be saved to a cloud in order to run a prototype on Adobe XD mobile app.
  • An XD file saved on Adobe Cloud becomes accessible from Adobe XD mobile app. Font Awesome didn’t render.
https://youtu.be/w4VMd5yq5WM

Repeat Grid and voice interaction

  • Repeat Grid auto-copies what’s selected as you drag a handle. You can bulk-adjust margins too. It’s a smart productivity tool that works great when creating tables or lists.
  • Voice interaction capability is the most unique and advanced feature that Adobe XD has. Below you can see the voice prototype in action. Note that you need to hold down a screen while speaking up your voice command that you specified in Speech Playback.
You can type in a voice command that you want to use in Command field after selecting Voice from Trigger.
For a Speech Playback, you can select different voice, then enter what you want that voice to speak up.
https://youtu.be/DYgYs7VlF_4

Coediting

  • To enable Coediting, you first need to save the document to the cloud. Once the document is saved to the cloud, Invite to Document icon gets activated. After clicking Invite to Document, enable Coediting, then send an invite.
  • Once fellow designers are added, you see them as color-coded avatars and bounding boxes.
Adobe XD website showing how Coedit works

Adobe XD related useful inks


InVision Studio logo as a section divider for InVision Studio section.

5. InVision Studio (Based on version 1.26.1)

A screenshot of InVIsion Studio user interface.
InVision Studio user interface showing three artboards linked with its interaction feature.

InVision Studio can open Sketch file, or can take objects and symbols copy-&-pasted from Sketch, and can create a more sophisticated prototype via its timeline-based transition capability.

When opening Sketch files, there are a few things to keep in mind. Link layers in Edit timeline doesn’t support Sketch symbols currently. In order to achieve a smooth animation, a file may need to be optimized accordingly.

  • Pricing: free
  • Both Mac & Windows

In order to publish more than one prototype to share online, you need subscription to InVision Cloud.

Pros:

  • Free
  • Best compatibility with Sketch
  • Transition adjustments via timeline

Cons:

  • Sometimes buggy and sluggish
  • Cloud only allows one prototype for free
  • Sync layers does not work for Sketch symbols

Interactions panel

  • Selecting a layer displays Interactions panel on the right.
  • Timer, one of triggers, allows certain interaction to happen automatically after a specified number of seconds.
Showing available triggers of 4 different groups: desktop, mobile, keyboard and Timer, and preset transitions.
Interactions panel: available triggers and preset transitions
  • Timeline allows sequencing multiple animations in a particular order to make the overall animation easier to understand.
InVision Studio's timeline interface. You can also adjust a velocity curve.
InVision Studio’s timeline opens when Edit Timeline is clicked from Interactions panel.

Running a prototype locally, in the cloud, on mobile

  • Clicking a Play button on the top right runs a prototype locally.
  • A prototype uploaded to the cloud becomes sharable with the link generated.
  • Prototype on a cloud can easily be shared with others to collect feedback.
  • A prototype uploaded to the cloud becomes accessible from InVision mobile app.
  • A prototype can be mirrored to a mobile app via QR Code without cloud, but it’s sometimes buggy.
https://youtu.be/4FkqgjUHnyQ
Screenshots of InVision Studio UI showing QR code, and InVision mobile app showing scan QR code screen.
Clicking on mobile icon displays a QR code, which you can scan from InVision mobile app.

Team

To use Team feature to collaborate with other designers, you need to purchase Team plan, which is $89/month for 5 team members.

InVision Cloud pricing on InVision website, showing 4 options: Starters, Professional, Team, and Enterprise.
InVision Cloud pricing on InVision website.

InVision Studio related useful inks


Principle logo as a section divider for Principle section.

6. Principle (Based on version 5.10)

Principle user interface showing 3 artboards with a prototype preview window open by default.
Principle user interface opens a prototype preview screen by default.

Principle can import Sketch file directly, and can create a more sophisticated prototype.

Its animation is very smooth, with powerful auto-animate feature, which looks for same layer names between two screens.

Components and Drivers feature allow you to quickly create various micro-interactions.

However, there are a few things to keep in mind with auto-animate feature. It could automatically animate many unwanted elements in a screen depending on how layers are named between two screens. To avoid that, your may need to prepare a file in Sketch first by renaming all the layer names carefully.

  • Pricing: $129 (one time fee)
  • Free trial: 14 day
  • Mac only

Pros:

  • Auto-animate is very smooth
  • Easy to make micro-interactions with Drivers
  • Works very well with Sketch

Cons:

  • Costs $129
  • Auto-animate sometimes creates unintended animations
  • Mobile app requires USB connection
  • No cloud service

Triggers, Timeline and velocity control

  • Auto option in Triggers works similar to Timer InVision Studio has, which allows things like a toast appears automatically after an action completes.
  • Timeline allows you to control duration, ease and sequence of certain animations, or freeze those.
Screenshots of Principle's triggers dropdown menu and Principle UI showing interaction arrows between artboards.
Available triggers and interaction arrows
Principle's timeline UI, showing velocity control popup.
Principle’s timeline UI.

Prototype running locally, on mobile

  • Prototype preview is always open, so super-convenient to test.
  • Connecting an iOS device running Principle Mirror app to Mac via USB cable mirrors a prototype on mobile from desktop.
https://youtu.be/9fqCzWqPmI0

Drivers

Below shows a dynamic header that shrinks when a scroll starts, created with Drivers. As shown below, Drivers is a powerful and useful feature to build various micro-interactions.

https://youtu.be/QNmVGDLygPo

Principle related useful inks


Framer X logo as a section divider for Framer X section.

7. Framer X (Based on v50)

A screenshot of Framer X user interface.
Framer X user interface

Framer X is some of newer tools. You can copy & paste Sketch symbols and elements into Framer X artboard, but you cannot directly open Sketch file. Prototyping features for average users are fairly basic, and does not have auto-animate capability. But for code-savvy users, you can use code to do more advanced prototyping.

  • Price: $12/month (pay annually) or $15/month
  • Trial: 14 day
  • Mac only

Pros:

  • Store for easy component downloads
  • Stack is a smart, powerful feature
  • Code extensibility, code handoff
  • Supports videos

Cons:

  • Limited Sketch compatibility (copy & paste only)
  • Basic transitions are limited
  • No mobile app
  • Monthly subscription ($12/month)

Transitions

Preset transitions are fairly basic.

A screenshot of Preset transitions of Framer X.
Preset transitions in Framer X is fairly basic.

Running a prototype locally, on mobile

  • Clicking on Play icon opens up a window to run a prototype locally.
  • Framer X does not have a mobile app. Scanning a QR code opens up a browser for to run a prototype.
Clicking a mobile icon displays a QR code so that you can scan it from your mobile phone to open a prototype in a mobile browser.

Stack, Store, Motion API

Framer X Store
  • Stack is a powerful feature for creating lists and grids. Objects dropped into a Stack becomes auto-adjustable elements. Stack can be nested.
  • Store allows you to search and download various useful components. Video Player and YouTube Player components from the Store are super-convenient.
  • For a code-savvy users, Motion API opens up various advanced prototyping possibilities via code.
  • Web version is work in progress as below.

Team

Small Teams allows members to share components via secure Team Store.

Framer X website showing pricing for Individual, Small Teams, Company.
Framer X pricing including Individual, Small Team, and Company

Framer X related useful links


Figma logo as a section divider for Figma section.

8. Figma (Based on Figma Desktop App release 85 Build 10)

Screenshot of Figma user interface (desktop version)
Figma user interface (desktop version)

Figma is unique in a way that it was built primarily as a web application saving it’s files to the cloud by default, even in their desktop version. Figma can import Sketch file, but could take quite some time to complete the import. Prototyping feature is fairly basic.

  • Pricing: Free
  • Starter: Free for up to 2 Editors and 3 projects
  • Professional: $12 per editor/month billed annually or $15 month-to-month
  • Both Mac and Windows

Pros:

  • Files are saved to the cloud by default
  • Free up to three projects, two editors (collaborators)
  • Well-designed user interface

Cons:

  • Limited transition options
  • Cannot copy & paste objects from Sketch (import only)
  • Free version limited to 3 prototypes

Home screen, prototype mode, prototype panel

  • Figma has a home screen called Drafts that displays all of your projects. Files are saved to the cloud by default.
  • Figma has Design mode and Prototype mode, similar to Adobe XD.
  • Smart Animate was added in 2019 to catch up with the competition.
Figma's various controls in prototyping: trigger, transition and action shown in screenshots.
Figma’s various controls in prototyping: trigger, transition, action

Running a prototype locally, in the cloud, on mobile

  • Clicking on Play button opens up a new tab and runs a prototype locally.
  • Clicking on Share Prototype creates a link to share with others.
  • People who received the prototype link can view the prototype via a web browser.
  • While a project is open on your computer AND an artboard is selected, Figma Mirror app can mirror the prototype on mobile.
https://youtu.be/53lQQhnVAi8

Importing a Sketch file, plugins

  • Importing a Sketch file may take some time to complete.
  • Plugins are available from Figma website.
Clicking on Import file on the top left allows you to import Sketch file, shown in Figma UI.
Clicking on Import file on the top left allows you to import Sketch file.

Collaboration — Share an individual file, create a Team

  • You can easily share your individual file with edit permission.
  • You can create a Team from Figma web UI then invite members. Team feature is free for up to 2 editors and 3 projects.
  • You can easily move your file from Drafts to a Project within a Team to collaborate.
  • Team feature is free for up to 2 editors and 3 projects. Beyond that, Figma offers 2 types of paid subscription plans for more robust feature supports, Professional with $12 per editor/month, or Organization with $45 per editor/month.
A screenshot of Figma web UI showing a Team with members and projects
Figma web UI showing a Team with members and projects

Figma related useful inks


Section divider graphic with section title: Recommendations for beginners.

So what is recommended for beginners?

There are three options depending on what’s important to you.

1: Sketch + InVision Studio

Given the de facto standard status of Sketch, Sketch with InVision Studio to animate prototypes makes a good choice. InVision Studio is free, but sharing a prototype requires cloud upload, which is limited to 1 prototype in a free account. And Sketch is not free.

2: Figma

Figma is free and gaining tractions these days because of its strengths in cloud-based collaboration feature. If realtime collaboration is a high priority for you, Figma is the way to go.

3: Adobe XD

Currently, Adobe XD is the only tool that allows you to create voice interaction prototypes. XD also has Coediting for realtime collaboration. If you want to pursue voice interaction and collaboration is important for you, XD should be the choice, and it’s free.


Thank you for reading. Best wishes to your success!


This article was published on Medium in UX Collective.

#13 Can a $6 stylus + trackpad replace an expensive stylus?

Wacom stylus is great for hand drawing sketches if you can afford it.

iPad with Apple Pencil is nice too.

But Wacom top-of-the-line products with a large display could cost a few thousand dollars. And Apple Pencil plus iPad Pro are almost $1000.

If you already have MacBook Pro, it has a fairly large trackpad.

And surprisingly, any affordable capacitive stylus works on a trackpad. Some of capacitive styluses are under 10 dollars, which is very affordable compared to Wacom or Apple Pencil.

Now a capacitive stylus on a trackpad is definitely not perfect. In fact you need to get used to three things:

1) pressure, 2) angle, and 3) registration.

You have to get used to applying light but enough pressure on a trackpad to make the stylus register its relative position on screen with relatively up-right angle.

This is quite different compared to when using your own finger. With your own finger, you hardly apply any pressure to the trackpad. It just works without you noticing it as soon as you put your finger on the surface of a trackpad.

But with a capacitive stylus, you need to consistently apply a light pressure to move around a cursor on screen. Then, once you want to draw a line, you apply more pressure to make the trackpad “click”.

For example, when you draw a circle with a stylus, as long as you are drawing a continuous line, everything is fine, the line keeps get drawn as you move the stylus with a firm pressure.

Now once you finish a stroke, and want to draw the second stroke, that’s when you need to register your stylus’s starting position.

When using a trackpad, you are actually doing this by moving around your index finger to find out where your cursor is on a screen. But while we are used to this behavior with a mouse or a trackpad, doing the same thing by applying a light pressure to a stylus feels quite different.

So basically with a capacitive stylus on a trackpad, you end up drawing on a trackpad continuously, sometimes drawing with light pressure, other times drawing with firm pressure. The only thing is that when you are drawing with light pressure, you are actually not drawing, but just moving around the cursor.

This is where more expensive solutions like Wacom and Apple Pencil on iPad provide better experience, so that you don’t need to worry about registering a new position of a stylus on a screen.

With Wacom stylus, it continuously registers the pen position even when a pen is off screen.

With Apple Pencil + iPad, you don’t have this problem because it’s a touch screen.

So if a precise control is super important for you and you can afford it, it’s definitely better to get Wacom or Apple Pencil.

But for more casual users, a capacitive stylus on a trackpad is a good affordable solution once you get used to it.

Check out YouTube version too!