As a front-end engineer, there are always some deviations between the page and UI design draft, resulting in repeated mistakes (SI) and (BI) with UI classmates. This process is very frustrating, isn’t it? There’s a simple way to avoid this: a Chrome plugin can help engineers and designers do UI walkthrough. Its principle is to superimpose a layer of design on the current page, you can freely drag and stretch, adjust the transparency, etc., the difference between the page and the design is clear at a glance? In the convenience of their own at the same time also hope to facilitate more people, recommended to everyone to use together.

Without further ado, plug-in portal, Google Store, and domestic may need to climb the wall access

Method of use

Once the plugin is installed, this icon will appear in the plugin bar (if the icon is gray, please refresh the page, note that it does not work on the Google Store page, it should be disabled by Google itself).

Click the icon to insert the design draft, the inserted design draft can be dragged and stretched at will, after dragging to an appropriate position, you can click to freeze (or press the shortcut key: D), frozen design draft will not respond to drag and stretch operations, but can change the transparency. The main purpose here is to prevent the design draft from affecting the original interaction function of the page.

If you want to preserve the state of the design after the page is refreshed, you can check live.

Then for some design details that you want to contrast more clearly, it can sometimes be helpful to switch the blend mode.

Shortcut:

The plugin also supports the following keyboard shortcuts.

  • H key: show and hide pictures
  • F key: Show and hide the bottom toolbar
  • D key: Freeze and unfreeze pictures
  • Numeric keys (0-9) :Quickly set image transparency. For example, press 5 twice within 1 second to set 55% transparency of the picture. If you only press the number key once within 1 second, such as 5, 0 will be automatically added after 1 second, that is, set the transparency of the picture to 50%.
  • Arrow keys: Move the image 1px at a time. If you press bothShiftKey, will move 10px at a time.
  • A quick match
    • Alt + 0: reset
    • Alt + 1: original size
    • Alt + 2: double the original image
    • Alt + 3: half of the original image
    • Alt + 4: window width

If you find that a shortcut key is not working, you can check to see if the current page is focused on a browser control (input, Textarea, etc.), sometimes by simply clicking on the margin of the page or on the design.

tip:

At first, it was just for the convenience of doing UI comparison, but later, it was found that it could be used in the page development stage. After inserting the design draft, it was equivalent to having a design template on the blank page, so we could directly copy the page on the template, didn’t we feel that even measurement could be saved? With hot refresh, coding can be so easy?