Magnify for precision

The magnifier lets you zoom in pixel-level and thoroughly validate your UI implementation.

Enabling the magnifier

  1. Open the Simulator
  1. Select the Magnifier tab
  1. Hold ⇧ shift and move the mouse to change the magnifier position
  1. Use a two-finger drag to adjust the zoom level while moving the mouse up and down
    1. Notion image

Copying the color code

Once hovering over a specific color, you can copy the color as code using the Copy as code button:

Notion image

The above color resulted in the following code:

Color(red: 0.32, green: 0.32, blue: 0.32)
UIColor(red: 0.32, green: 0.32, blue: 0.32, alpha: 1.0)
NSColor(red: 0.32, green: 0.32, blue: 0.32, alpha: 1.0)

Adjusting the Magnifier settings

Toggle using Shift

Enable or disable the Shift-based toggling of the magnifier.

Bound to device

If enabled, your mouse will be bound to the screen of the Simulator. You can disable this option to use the magnifier anywhere on your desktop, which can be great for picking a color from apps like Figma or Sketch and copying it directly as code.

Did this answer your question?