VisBug
Open Source
Browser Design Tools
Open Source
Welcome!
You've arrived at the "try before you buy" sandbox and playground.
Each artboard is tailor made to provoke your design brain and teach you a feature.
Click Me 😏
Tab & Shift + Tab traverse laterally
Enter & Shift + Enter traverse lineage
Hold shift to manually multi-select
Click 1, then click a class in the label for that element: ".cmd-e" in this case!
Press cmd+e to expand your selection
Press cmd+shift+e to expand to all matches
Click one of these squares, then click a color icon under the toolbar to get a picker!
This
is
rad
Try the
Keyboard Trainers
Press ? with any tool
Hotkey m
Delete this 😤 thing! 👇
Ad
Redlines & distance coming soon!
Am I in the center?
#1 rule
Have some fun!
- Inbox
- Star
- Send
- Drafts
Press cmd+d
Copy the circle from the left box cmd+c
Paste it in the right box cmd+v
Did I mention it works across tabs!
Copy styles with cmd+opt+c
Paste copied styles with cmd+opt+v
For fun: copy the styles of a dark artboard and paste it over some light artboards
Select all 4 images and drag in some new ones
OR just drag a new image onto any one of these
Hotkey f
The font in this artboard is the system font. It has lots of weights and is very elegant at large or small sizes. Can you make it look better?
Multiselect these headings and edit the ramp with the font tool, what ramp styles do you like?
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Fix the order of the circles below
Tip: left and right are safe, up and down are difficult
3
5
4
1
2
Flow direction can make left/right be up/down 🤔
Fix the order of the stop light below
I'm worth $100 /hr
How much are you worth? Edit the text to specify your rate.Break
This
Site
#tangiblelearning
Delete, copy, paste, & duplicate svg!
Change color, move x/y, & inspect svg!
Hotkey p
Hotkey d
press
?
for help
Hotkey l
Click to select, then click hold and drag anything around
Move this artboard to somewhere wierd!
Hotkey a
No undo..
yet!
BUT
You can unstyle
Hotkey s
Select me by searching ".search-title"
Press opt+del to remove inline styles
Ew, get rid of these terrible edits someone (me) did! 👇Fix Me!
Hotkey [ or ] to switch between foreground/background
Try multi-selecting all these circles and changing their hue contextually, it makes a pretty light show
1
2
3
4