KENT: Hi my name is Kent
I'm the creative specialist on the Google 
Web Designer team
and I'd like to show how to use the
Outliner panel
In the default workspace
I see the outliner on the right
and I'll rearranged to make it a little easier to see
The Outliner gives you a quick look
at your document structure
for example this file has three pages
and you can easily switch between them
and get a quick look at their contents
the nested
structure can be expanded and collapsed
by clicking these triangle icons
and command click or double click expands the entire node
which makes it easier to quickly select a deeply nested item
like this text element
You can also select items directly
that can't be selected on stage
without hiding or locking a
covering element
like this button
if I try that on stage it's covered
so I need
to hide or lock this top layer
before I can select it
The Outliner selections
are mirrored on stage
so anything selected in one is also highlighted in the other
For example at the root of this page
I can select any one of the
seven children
by clicking in the Outliner
the layer name or on stage
and all three are synced
I can also command click to select
or deselect multiple
elements of the same parent
and shift-click for a range
When selecting an element
it's indicated with a light grey background
and you also navigate directly
to its parent element highlighted yellow
if I select this text
I see the container div is yellow
now I can use the breadcrumbs to move up the DOM tree
and see this reflected in the Outliner
now the button component is
highlighted
and now the page root is highlighted
Let's talk about interactions
You can reorder elements in your file
by drag and drop in the
Outliner
and you'll see a yellow line
indicating the new stacking order
You can also change the DOM nesting
and you'll see an element highlighted and
expanded
when it's a valid drop target
Now my logo is inside the button
and command Z will undo this
You can also cut copy and paste elements
using the usual keyboard shortcuts command + C, V, or X
For example I'll repeat the last
change by selecting the logo
press command C in my keyboard
then navigate inside the button text container
and command V paste the copy
then command X or the
Delete key removes the element
Another convenient feature is being able to
right-click elements in the Outliner
just like the stage
I'll get that logo image and right-click
to see the full context menu
where I can create a mask, add an event
or any other regular action
Double-clicking in the
outliner
is the same as double-clicking on stage
In this case, that opens the
components dialog
By now you've probably noticed all the different icons
Each element has an icon denoting its type
and these are just a few
An element status is also shown
which can be locked, hidden, or a guide layer
Hover over any item
and click these icons to toggle the state
Also dynamic elements are
indicated with a diamond icon
like this logo image which has a dynamic binding
and this helps to quickly spot dynamic elements in a complex file
And last we have some toolbar icons
which are used to filter the elements shown
For example just Images
which shows all the parents and ancestors
so you may have to expand
to find the actual image
or just Components
Text
or Shapes
or combine to
see both Text and Shapes
You can also filter on a text string
for example logo
In this case the Swipe Gallery component is shown
because I have a logo set as
one of the six images it displays
I can also combine this with a type icon like Shape
One final thing is that elements are listed
in the same order as the
Timeline
I see the Outliner order matches the layer order
This is actually
opposite of the DOM order
seen in Code view but it can be changed
Edit, Preferences, Design view, Outliner
sort elements in DOM order
and save
Now when I select the top element
I see it's the bottom layer in the Timeline
That does it for the Outliner panel in Google Web Designer
Thanks for watching!
