Using symbols for faster web design – Webflow tutorial


Symbols turn any element (including its children)
into a reusable component. Any time you change one instance of a Symbol,
the other instances will update, too. This is a big deal for recurring elements
like navigation, or footers, or signup sections where adding and configuring all 47 of your
project pages would take over an hour. Of course, after you complete that, the email
comes in from your client. Turns out she wants to rename each of these. A Symbol turns 47 pages of work into a single
action. In this video lesson, we’re going to cover
creating a Symbol, reusing a Symbol, editing a Symbol, and finally unlinking from a Symbol
so changes won’t affect other instances. Creating a Symbol is straightforward. You can create a Symbol out of anything. With this navbar selected, we can go to Add
Elements, and visit our Symbols Panel. All we have to do is press Create new Symbol. We can give it a name — we can name it anything
we want, and then press Create Symbol. And once we’ve created this Symbol, we can
reuse it anywhere. Here’s a different page. And we know it’s different because this one
has flowers. And if we go back and visit our Symbols Panel,
it’s right there. We can drag and drop it onto the Canvas, or
of course we can drop it in the Navigator. And when we select this instance of the Symbol,
we’ll notice the selection color is now green and we’ll see the instance count — how many
times it’s been used in the project — off to the right here. That’s reusing a Symbol. Here comes the fun part. Let’s double-click to edit our Symbol. And we can see content outside the Symbol
has faded out, so we know we’re focusing on this Symbol specifically. And all we’re going to do is doubleclick to
change About to Learn More. And once we’re done editing our Symbol, we
can press the X on the top-left, or simply click out or even press escape on the keyboard. If we go back to our other page where we created
the Symbol, we can see that it’s been updated perfectly. It says Learn More. Let’s make another change on this page. Double click to edit, let’s change our text
from Contact to Contact Us. We’ll click out since we’re done editing. And what happens if we go back to the other
page again? We can see the change has been made there, too. You can edit a Symbol from any instance. Let’s go back to our Symbols Panel for a moment,
because down the road, we might find it necessary to rename or delete a Symbol. And if we want, we can just click the pencil
icon to rename or delete. Keep in mind we can only delete a Symbol that’s
not currently being used in our project. That’s editing a Symbol. Finally, let’s briefly cover unlinking from
a Symbol. If we’ve decided to unlink an instance, that
means changes to this content won’t affect the Symbol anymore. It makes this instance of the content once
again independent, but it doesn’t delete or in any way affect the Symbol we created. If it’s an element we can select on the Canvas,
we can unlink by right clicking on the label and choosing Unlink from Symbol. Of course, if it’s one of those tricky-to-select
elements, we can select the element from the Navigator and do the same: right click the
label on the Canvas. If we go back to our other page, we can see
that this instance is still linked to our Symbol. And if we double-click to edit, and change
Contact Us to Free Donuts with Purchase, it won’t affect our unlinked instance. Let’s verify that. We’ll go back to the other page. And as we might expect, this content is completely
unplugged from our Symbol. We can do anything we want with this content,
and it will no longer affect our Symbol. (Unless, of course, you’re making a style
change on a class that’s also affecting this element). So, let’s review. We can create a Symbol to turn any element
(and any of its children) into a reusable component. We reuse Symbols anywhere we want throughout
our project. We can edit one instance and all other instances
will update, too. And finally, we can unlink any instance from
the Symbol we created so it can function independently of other instances. And that’s…a Symbol.

, , , , , , , , ,

Post navigation

4 thoughts on “Using symbols for faster web design – Webflow tutorial

  1. bad idea to change master component through an instance. This is mistake.
    You should have possibility to reuse component through different projects and change the content inside of it without touching master component. Take a look how figma doing it.

  2. This is good but why I cannot overwrite instances without detaching them from their symbol. If we could have components like in figma, sketch, atomic.io, etc Webflow could really unleash the power to be the tool we need to create a Design System. Just a thought…

  3. Agreed; I'd love to see the ability to place changeable content within a symbol. For instance, you could create a symbol as it stands right now, then drop a certain element into it and the content within that element would not be shown across all of the symbols. That way you could change elements of the symbol (which would affect all the other symbols), but maintain your content which could differ depending on which page you're viewing.

Leave a Reply

Your email address will not be published. Required fields are marked *