Using the Vision Simulator + Generator

View your entire design in a variety of vision types to properly test

By helping you simulate what your designs might look like to those of us who see differently, Stark’s Vision Simulator lets you properly test for a variety of vision types.

Using the Vision Simulator + Generator with Figma and Sketch plugins

Download: Stark for Figma, Stark for Sketch

Using the Simulation Tab

The Stark Vision Simulator’s “simulation” tab displaying a preview of a design, with the options to select an artboard, the zoom level, and the type of simulation.

To use Vision Simulator + Generator, go to Plugins and choose Stark > Vision Simulator

On the Simulation tab, you have the option to choose which artboard to simulate, pick the zoom level, and select which simulation you’d like to view.

🗒️

Our (colorblind) lead designer, Tregg, wrote a blog on why simulations are perfectly imperfect.

Using the Generate Tab

After viewing the different simulations, you can switch over to the Generate tab, where Stark will generate the desired simulations as additional artboards.

The Stark Vision Simulator’s “generate” tab displaying the 5 available types of simulations, with the option to select an artboard.

You have the option to select one, many, or all of the simulation types that you’d like generated, and then click Generate. You should then see duplicated artboards (or frames, based on your platform) which are named based on the simulation applied. All of these are live artboards/frames, which means you can continue editing them in your design tool, auditing them with Starks other tools, and exporting them for presentations with your wider team.

An artboard that has been duplicated 3 times using the Vision Simulator’s generate” tab, and displaying 3 different types of colorblindness simulations.

Things to note

Stark will generate any gradients or colors, regardless if they're in a shape or text. However, the Vision Generator currently doesn’t work on images.
Sketch and Figma will put newly generated artboards to the left of the board it is simulating.

📌

A previous version of the Vision Simulator included simulations of protanomaly, deuteranomaly, tritanomaly, and achromatomaly. To learn why and how we chose to update the plugin for maximum efficiency, check out our blog post: How we updated our Vision Simulator with the help of our community.

Using the Vision Simulator in your browser

Download: Stark for Brave, Stark for Chrome, Stark for Edge

The Stark browser extension displaying Vision Simulator.

To get started using Vision Simulator, open Stark from your extension menu.

Viewing Simulations with Live Preview

Click the simulation you’d like to view and it will be applied to the entire page. You can choose one simulation at a time.

Stark’s browser extension displaying Live Preview for an existing website using Vision Simulator.

👉

Don’t worry—we didn’t actually edit your site. Refreshing the page will revert the changes.

Have any questions about using Vision Simulator + Generator? Don’t hesitate to reach out to us at support@getstark.co.

Go back to articles