- Today, I'm gonna give you a basic introduction to Figjam
so you can start using it for brainstorming,
for mapping user flows, and doing whiteboard exercises
with your team. (relaxing low beat music)
So Figjam is accessed through Figma,
and as you can see here,
there are a bunch of different templates available.
There's even more than what you can see here.
And I do highly recommend you explore these
'cause you can get good ideas for ways
that you might be able to use the tool.
This gives you some good starting points.
I can just click use template to select one of these.
And then it's all set up for me in the file
with like a layout of structure for how I can go
about using this template to get value from it.
Once you're in, you can move everything around though,
and basically do whatever you want.
But for the purposes of today's video,
we're actually gonna start with a blank file instead.
So this right here is our giant, unlimited,
infinite blank canvas that is Figjam.
And if you've used Figma before,
something you might be wondering is actually
what makes a Figjam file different
from a regular Figma file.
And the big difference is this set of tools
we have down the bottom here.
Figjam has been especially built to help you ideate
and brainstorm, rather than to be designing UI,
which is what Figma is for.
So we have unlimited tool set that really helps us
to focus and get into those tasks.
So let me just walk you through our options.
We have the marker pen here,
which you can use to draw anywhere on the canvas.
And this is a bit janky when I do it with my track pad,
but it works really nicely on Figjam on iPad.
I've got a highlighter as well, of course,
as well as an eraser.
Which you can just click on anything
to get rid of what you drew.
I actually really like using Figjam
for wire framing websites.
That's the first stage of my design process.
And I do that now in Figjam on iPad.
So stay tuned, I'll have a separate video coming all
about my process for that specifically.
You don't have to rely on your ability
to draw a shape though.
We can also pull in a shape here from this panel.
We have a bunch of different options,
and if I select a different shape,
that's gonna be the one that sort
of stays waiting for me in the toolbar for next time.
So it remembers what your last selection was.
We can change the color of our shape here
in this newly expanded color palette,
which is very exciting.
And if you want one that's just an outline
of a shape instead, you can just turn off the fill,
and it'll only show you a border.
You'll see as well is that the shape is set up
that it's easy to just click into it and add some text.
But if you don't wanna add text,
the add text prompt disappears
as soon as you click off the shape.
You can, of course, add text that isn't
within a shape as well just by clicking
on this little T icon here.
We'll type heading.
Then we can use this little font size picker here.
I personally never bother to set something in actual pixels.
I always just use the very handy preset sizing
that they have here.
I think these preset options make it really easy and fast
to have hierarchy in your type,
and just to like get the thoughts out on page.
Now something that I often use Figjam for is flows,
or in my case, a site map.
And a really great way you can do this is
by connecting two shapes together.
See as I just hover over the shape here,
it will automatically highlight
and suggest that I can add another one to the side.
So I can just click there, and I get another shape
to flow on in this flow I'm creating.
Or if I wanted, I could connect these two shapes together
by clicking here and just dragging out,
dragging an arrow to connect it to this shape beside it.
And this doesn't just add a visual connection
with the arrow, but if I move the shape around as well,
the arrows are gonna stay with it,
and it'll continue to connect to those shapes
that I set up connections with.
If you want to, you can also draw an arrow just by, yeah,
clicking on this little arrow icon.
And then we have a few different options
for the end point of the arrow as well.
Here's an actual example of a site map flow
that we have set up.
This is us planning the new hierarchy of convertkit.com.
So I've used different color shapes
to indicate different sections.
And I put that in a little key here as well.
This is just something that I built
by dragging in a shape and adding text.
And yeah, all of these little bubbles
are connected to each other as well.
This site map here has been so useful for myself
and the rest of the site squad,
the people who work on convertkit.com to get
on the same page about where we're going with it.
And because it's in Figjam, it's all collaborative.
So this is like a live file that I can be in,
that the team can be in in the same time,
and everyone can see what's happening, what's changing.
Everyone can add to it if you have those permissions set,
and you can comment on it as well.
So as you can see here, there's a little conversation
between me and Colin, our SEO manager.
Going back to our tools though,
another really great use of Figjam
is the sticky note feature.
So this little square down here,
as you can tell from the little turned up corner,
isn't just another shape.
This is actually a sticky note that if I drag it out,
I can type my thoughts into.
This is really great for using
when you're doing a team brainstorming exercise.
The sticky note will automatically have your name on it
so you can tell who it was, who added each idea.
Or if you want, you can turn off that by clicking
on this little quill icon.
And you can pick from lots of different colors
for your sticky notes as well.
Me and my team tend to pick one color per person
so that even if we have the signature on the sticky note,
is really easy visually just to see who added what.
And of course I always pick the purple one.
Why this digital sticky note is great,
is not only does it work for brainstorming exercises
with a remote team, but you can also like
make your sticky note bigger if you have more to say.
So I could expand it to the side,
and it becomes like a wider sticky note.
And also if I just add more to it,
it'll automatically extend the more that I type.
I really love using these for group activities.
Here is an example of one that we worked
on together as a brand team.
We did a SWAT analysis of our brand,
and everyone added their own little sticky notes
for their ideas of our strengths, weaknesses,
opportunities, threats.
This little set up here is using
another fairly new feature of Figjam, which is sections.
I'll just show you what that looks like here.
If I added a section around all of this,
not only does it give like a space on the screen
to add certain thoughts to, like you saw in this one here.
Everyone knew which square to add the weaknesses to,
which square to add the opportunities to.
But also I can now pick this up and move it around,
and everything else will come with it.
Which is nice and easy.
I can rename the section if I can spell correctly,
which apparently I can't.
And of course I can change the color of it as well,
which is very helpful for color coding things,
differentiating sections from each other.
And if you wanna keep things really on brand,
you can always use this option here,
which lets you type in hex code.
The set of options is great though,
because again Figjam is encouraging you to move quickly
and not worry too much about the tool getting in the way
of getting your idea out.
So if you can just pick a random color
that fits closest to what you need,
then it'll save you time and save the hassle,
and you can keep the train of thought moving.
The sticky note in particular is just one
of the many reasons why it does feel
like Figjam has been created for designers,
for product teams, to work together and collaborate.
It mimics a lot of the things that we often do in real life,
in person together in a room.
Putting sticky notes up on a wall.
And another thing that they have that is similar to that
is this stamp option here,
where you can add a little dot
to like vote on sticky notes in a way.
Add, say like, yes, I agree with this one.
This is something we often do in real life design sprints
and things like that.
There's a few other things here.
Like if you have a question about a certain part,
then that could be added.
You'll also see a dot of your own avatar, which you can use.
That way, it's really clear who is voting for what, I guess.
If I go back to our site map,
you'll see we used the stamp tool to indicate the status,
or like future path of some of the different parts
of our site map.
So in my key here, anything in orange
is just getting like a visual update.
Anything without is getting a full redesign.
Anything with the thumbs down is actually being excluded
from our first pass of the site.
Some of the other ways you can collaborate in Figjam
are with the emoji here.
If someone else is in the file at the same time,
I can select this and then click somewhere on the screen,
and they will see these little shocked faces scrolling up.
You can also use cursor chat,
just type a back slash, and then type in here.
It'll follow around your cursor.
And the other people in the file,
we are able to see what you've typed.
Then if I go ahead and actually save this file
to our library, then because at Convertkit,
we're on like a team account,
we also see this audio chat option.
Which means that you don't have to get
on a separate Zoom call or a site call or anything.
You can just talk to each other right in the file.
And it's audio only, which I really like.
Or, of course, like you saw in my site map file,
you could also click on the comment icon,
and leave a comment anywhere on screen.
And then unlike the cursor chat,
this one will actually remain on screen.
So this is definitely good for asynchronous communication
with your team.
So those are the basics of how Figjam works,
what the tools are, some ways you could use it.
But if you wanna get more complicated,
you can click on this little fun icon here.
You'll see a bunch of stickers and things.
And because Figjam is inside of Figma,
you'll be able to access all of the components
that you have saved into your design system as well,
into shared libraries.
To do that, we just come in here, we click add your own.
And then we will select
to add the Convertkit marketing design system to the file.
Then I get to see that right in here.
I can come in and use the call out bubble
that we have somewhere on our site,
and all of this functions as well.
So I could click in here and type something new,
which is very fun.
Definitely check this out.
There's a lot of cool stuff in here.
A lot of shared libraries of stickers,
of plugins, of widgets, as well as the templates
that I showed you earlier.
But I hope that this video gave you a good overview
of the basics.
So at least when you get into the tool,
you know what you're doing,
and vaguely know what to click on.
As you can see, it's really powerful for something
that on the surface looks so simple,
and it has become a vital part of my own design process
through the wire framing, but also in the way
that I work with my team on brainstorms, site maps,
all of that sort of stuff.
Check it out.
It's linked in the description below,
and I'll see you next time.
Bye. (upbeat music)