- Yooo! - What's up? I'm Adam.
- And I'm Sekou. - And Sekou's here to help
us understand a lot of things about wireframing in Figma and how that can help
with Power BI dashboards. I did a video not too long ago with Mara where she mentioned Figma. Sekou I had to call
you and just figure out what this was all about 'cause I don't know anything about it. But before we get into that, Sekou, tell us a little bit about yourself and what you do. Well, hey, thanks for the call, Adam. I appreciate it. You know, here to save the day with Figma and all things reported. But I'm Sekou Tyler, one of
the directors at Lovelytics, and really excited to show
you all how to use Figma to enhance your reporting. - So where do we begin? Like, tell me about what
this wireframing process is and. - Yeah, so Figma is a great tool. It's a third-party tool. The concept of wireframing
is a UX UI process. So basically what you
would do, you know what? Actually before we do all that, you know how we do.
- All right. - We gotta head over to the machine. - [Adam] Let's go. - [Sekou] So now I'm in Figma right now, and this is what it looks like. It's a blank canvas to
where you can start doing your wireframing process. - [Adam] I talk about
blank pages all the time, so this excites me. - So you have your blank canvas and what you really want to do is one, you want to design to what you'll be
building out in Power BI. So we go into Power BI itself. What you want to do is go
into your Canvas settings and look at your width and height, or the type that you selected. So if you're doing 16 by 9, that translates to 1280 and 720 in Figma. So if we were to come back in the Figma. And typically in Figma,
you wanna create a frame. So there's two ways you could do it. If I select the frame button up here, you'll see a lot of prebuilt
selections to your right. So if you're developing for
a phone, a tablet, a desktop, whatever it is, they have
pre-built functionality. So if I were to come in
here and select 16 by 9, it would have that pre-built for me. And so if I wanted to adjust my specs to say 1285, 720, I could do that. And now I have a frame selected. And if you come in here and you
could change the name of it. Another way to do that is
if you just wanted to use a rectangle, you can come in here and select your objects here. And I can select a rectangle and create that blank frame on here again. Using the same specs, 1290 by 720, we now have our blank canvas
that would be the same size of our Power BI report. And if our right click on here
and select Frame selection, now we see that we have a new frame. And so the importance of creating a frame is that now as you add more objects, they're all grouped
together within your frame. So if I want to come in here and start building out additional
context or information, I could come in here and
bring a rectangle in here. I could bring in a text box, or a star, or whatever it is I wanna pull in. I could bring that in here. And then if you look at the left side, you see you have all the
attributes in your frame. So it gives you flexibility
to understand your grouping and what it's that you're bringing in. But now we're gonna walk
through the wireframe or process of.
- All right. - Starting from a blank canvas to actually building out a wireframe that you can give your stakeholders and for them to get approval. - And this is automatically gonna get me a beautiful report, right? - [Sekou] Yeah, automatically, you know. (indistinct) - I keep hearing about
all this AI stuff, right? This is just this, that's
not, no, that's not this. Okay.
- Yeah. No, no, no, not what
we're doing right now. But they could be working
on something to type it out. All right, so we have our blank canvas, we have our blank frame. So we scroll down. In here, let's zoom in a little bit. Before we just had our blank canvas, there was a white screen. And now we have different attributes. We're starting to really
work on the dashboard itself, where the report itself, and how it's that we wanna
place different things. So if we look at our
elements that are on here, we have our logos, we
also have any text fields. We kind of have our box,
we have text information, and we kind of have a layout of where we want our visuals to go. And so now we're starting to process like, all right, how do we iterate
and continue on this? So if we scroll down, now we wanna start adding
data-driven elements onto our wireframe. So what we wanna do is
add any type of data. So if there's a refresh date on here, we can add that as a text area. So we're saying here's our data. Now, if there's any filters, we have a lot of (indistinct) on here. And then now we want to build this, and start iterating on this, and make this more of a
high fidelity wireframe. And what that looks like is
now we want to actually start adding visualizations
to show what our report will visually look like. There are different ways you can do that. Like I mentioned earlier,
there are different elements that you can have added on here. And this one we brought
in our actual bar charts. We're just using a rectangle, and we're doing some coloring, and then we're having text builds, and then just bringing
in different information. So now we can start visually showing what our report will look like. - [Adam] You basically are adding shapes to visually represent the
data that's gonna be there. So there's no real data here. We're just mocking this up. Kind of sell the end product without having to do all the
work to get the end product. - Exactly, exactly. We're building out these mockups with fake data, not realistic data, but to get the visual buy-in
from the stakeholders, or the clients to say, "Hey, visually does this
represent what you want?" And then it makes
everybody happy in the end. - Yeah.
- Right? The stakeholders sign off, the developers know
what they're developing. - And it's easier to iterate on this than like the final product
where we gotta re-engineer a whole bunch of stuff. - [Sekou] Yes. Also, another thing at Figma is you can have particular libraries of colors that you can use. Let's say I don't like
these colors at all, I can select on a single
element that I want, and go to Fill, and I can
change the color that I want. So if there's a color scheme that your organization is using, you can automatically
embed that in the Figma, and you can have that as your core colors. And another thing that you can do as well, that's right, we're copy and paste. We know we want these four
charts across the board. If you're used to the
selection panel in Power BI, you'll see that these are the
items that have been selected. So if I come in here, right click, and select Group selection, we'll see that a group has been created based on my selection. Now, I can copy and paste that group and paste it right here. And now that group is done. So, you know, in five seconds, if I wanted to across the board, I could literally have, you know, copy and paste my visual,
change the colors, and I have a working product that I could potentially
pass out to our stakeholders. - Nice.
- Here's an example of what a finished
product could look like. We have our information filled out, we have the colors quickly filled in, and then we have a map. This is a jpeg, an image. So if you have any images or anything that you wanna put in place,
you could also do that. But again, we could pass this. Now, we could download this and give this to our
clients and stakeholders. And easier to iterate on this, like you said, Adam, than
it is on a finished product. - Absolutely. I was gonna ask about that
map 'cause I was like, man, your drawing skills are great, but no, you just-
(Sekou laughing) - You just copying and pasting. And that's fine. Like on Guy in a Cube, man, we're not lazy, we're just efficient, so. - Exactly, exactly.
- I love it, I love it. So we've got buy-in,
we've got these items, then like how do we take this wireframe and go to like the actual report? - [Sekou] Yeah, so once
we have all the buy-in, now what we wanna do is
actually start developing towards it. So what we can do is go to our
frame that we have built out. And if you click on your frame,
you can export that frame. There are different options. We're gonna export this as a ASVG. And we're gonna export that
frame and have it saved locally. And so now once you go back into Power BI, if you were to come in here and create your canvas
background with that frame, come in here and select it, now you have the frame
that you have built out with everything agreed upon. And then now as you create your visuals, you have a guideline of
where your visuals can go in your Power BI report. So I already built out one of the maps, I have it here in the
place that it should be at. But as you can see now it's built out and everything is great. And now I can just iterate on here. I can build my bar charts that I have. I can put my text driven
attributes up here and everything that we agreed
upon amongst the wireframe. And it just helps with the process of getting a finished product out there. - That's bananas. One thing I will call out though, I noticed you had text
in the background image. So folks watching, just be careful about that from an
accessibility standpoint. Some screen readers won't
be able to read that because it's just part of the image. So that's something to consider
if you're building reports. So now, like, we're talking about Figma, it's a tool that's out there. I believe they have a
free option that's there. - Yeah, yeah. So there is a free option
where you can try it out as a personal user. You can go out there and
if you want to scale it, they do have licensing
options for you as well. - Yeah, Patrick did
this video a while back of how to do, like, a background
image with PowerPoint. So PowerPoint's definitely something you can do this with as well. I would say Figma is probably meant for this kind of thing though, so it's a little easier to,
like the options that it has, and the capabilities it has go way beyond what PowerPoint can do. So I definitely recommend
checking out Figma and seeing if this helps with
your report design needs. Awesome Sekou, I appreciate
you going through this. Where can people find you, like, for stuff that you're creating to
learn more about what you do? - Yeah, follow me on YouTube, SQLSekou, S-Q-L S-E-K-O-U. I have a blog as well
and I'm on social media. I even have a TikTok, but I
barely do anything on TikTok, but feel free to follow me on there. - Awesome. And we'll have links down
in the description below for all of those items. So Sekou, thanks for being here. And folks, if you're watching and you want more great
content about Power BI, check out some recommended video
that's sitting up above me. Thanks for watching. Keep being awesome and we'll
see you in the next video.
