VisBug - Visual Prototyping in Browser
A hands-on guide to Visbug, a browser extension that will help you prototype in the browser visually.
A hands-on guide to Visbug, a browser extension that will help you prototype in the browser visually as if you were working with a design tool like Figma or Photoshop. VisBug makes it much easier for you to verify design details in production and give feedback to developers.
VisBug was created by Adam Argyle.
Chapters
- 00:00 Intro
- 00:38 What is VisBug
- 01:57 Install VisBug Chrome extension
- 02:43 VisBug playground
- 03:16 Verify alignment using Guides tool
- 03:51 Navigate elements using keyboard
- 04:35 Peek into element styes using Inspect tool
- 05:13 View contrast info using Accessibility tool
- 05:43 Rearrange elements using Move tool
- 06:19 Hide outlines and guides on the fly
- 06:35 Tweak margin & padding
- 07:02 Select multiple elements
- 07:56 Quick overview of other VisBug tools
- 08:40 Find elements using Search tool
- 09:11 Practical example — Tweaking masteringlinting.com
- 10:39 View local style modifications & inline styles
- 10:59 How to work with images in VisBug
- 11:50 Mastering Prettier & Stylelint
- 12:27 Conclusion — Why should you use VisBug
