Hey guys, this is Ana with another Figma tip about how to apply wireframing in FigJam.
So how to approach wireframing in FigJam, is you can start by bringing in some wireframing
components into your FigJam file.
You can start out with, first, exploring Figma community and seeing what kinds of files currently
exist from other people that you can go ahead and duplicate or download into your own space.
Here's some different examples of just some files people already created that
have components that you can use.
Another things that you can do, is actually start from a library that you already have.
So here I have a file full of different web components that I use for my designs, but
now I want to make a wireframing version of it.
So I'm going to start out first by going ahead and duplicating my file, and then I'm going
to want to rename it to "Wireframe Web Components", so I don't get it mixed up with my actual
high-fidelity one that I want.
And then what I'm going to do to make it fill more wireframe-y or low-fidelity, is I'm going
to go in and convert all the colors to grayscale as well as get rid of any kinds of effects
like drop shadows to make it feel flatter and more two dimensional.
A quick way in which I like to quickly convert the colors, is by running a plugin called
Colorfilters and selecting "Grayscale".
And it went ahead and converted all of my buttons to grayscale.
So I'm going to go ahead and do that to all of my components.
If you do want to use this approach, one quick reminder on how you can quickly re-run a plugin,
is by using Option + Command + P and I will do that for all of my different components here, and
I'll be back in a second.
Alright so I just finished going through all of my different components and changing them
to grayscale and removing any kinds of effects that I have.
And I also made sure to publish my new library, so I can access to them in my FigJam file.
Now going into a FigJam file that I have opened, to access my new wireframe components, I'm
going to go to add your own library and click "Add to file".
And now, I'm going to go ahead and start dragging and dropping my components in.
So I have this template with already my header and footer for all of the different screens
I can be designing, and then I can also bring in different input fields, a button if I want to
I can also see if a component has any variants, and I can view those variants by clicking
on this dropdown, so I can see all the different kinds of buttons that I have access to.
And yeah, that's basically how you can start wireframing in FigJam.
So I'm going to fast forward to when I finish building out this screen's wireframe.
Alright.
So I just finished assembling my wireframe for a checkout screen just by using the components
I brought in from that library as well as text boxes.
Something else I want to point out as well, is because I'm using a library that I originally
had in Figma, and I applied Auto Layout to some of the components, those components
still retain that responsivity that comes with Auto Layout as I'm using them in FigJam.
So if I want to change the text here, you can see that the button responsively resizes
to accommodate that text.
Cool!
So one last thing that I just want to show you, is so maybe you created your wireframe
and now let's bring it into Figma.
So I'm going to copy and paste it into a Figma file.
And if I want to turn this back into high fidelity, because I created that wireframe
library from a high fidelity library, they have the exact same naming system and organization.
So, I can use swap library to go ahead and convert these components back into their high
fidelity version.
So just by selecting here, I select Web Components, and yeah.
It's gone ahead and changed them all into high fidelity.
So yeah!
That's just my tip today, and I hope it was helpful.
Thank you!