Figma + Tableau - How to Use Frames

sigma plus tableau i'm lindsay betzendoll tableau zen master and consultant design specialist at healthdataviz and i'm gonna bring to you today um some tips and tricks on how to use figma and tableau together now i want to start off by saying yes i've been using tableau for many years seven or eight to be exact and i've been using figma for about maybe a year and a half however i think a lot of times we see figma being used specifically to make kind of images and background shapes background images and shapes that folks are using in tableau but i want to give you guys all not just that but also more information about how to use figma with tableau from doing that that kind of informat you know skills like making those images but also how to use all of what figma can offer so you can even do prototyping for your tableau dashboards infigma which is what i do on a regular basis for clients at healthdataviz so today we are going to talk about frames this is something that i actually didn't start using until probably six months into my sigma game and they are invaluable so we're going to start there because i think you need to learn some of these basics when you start to use sigma and before we get started i'm going to share just a little uh information about myself i encourage you to do one of these little baseball cards figma provides this in their figma community you can get the template and kind of make your own so as i mentioned lindsey betsendahl table zen master and uh consultant at healthdataviz my work superpower i uh i'm generally flooded with new ideas fast talker and thinker um and highly organized but my weaknesses i have adhd like nobody's business and i'm easily distracted so i can sometimes sit there into space for 20 minutes and forget what the hell i was doing my favorite tool in figma is the frame tool which is why it's the one we're going to talk about today on my introvert extrovert scale i am an extreme extrovert i love connecting with people i love being around a lot of people with high energy and i really feed off the social interactions that's not to say i don't like being alone i work remotely at home and i pretty much talk to myself all day so being an extrovert doesn't mean you don't like alone time because i do best time of day or place for me to be productive is in my office my quiet office between ten and two i tend to peter out by three o'clock and sometimes i struggle to get started before nine so there you have it um things i want to be good at illustration minimalist design and saying no a bit more to things so i can get a little bit more control back in my life and i don't want to be good at coding i don't know sql i don't care to know that kind of stuff i really like to use tableau in the tool uh that things that it does really well and that i can do in the tool versus um some of the things outside of that and my favorite part of the design process is designing and development which is kind of that big circle in the beginning of your um diverging diamond um design process framework and then that feedback and iterating part in the middle when you converge with say a client you go back over that feedback your redesign you push those pixels to make something beautiful so i like those those beginning steps um in my design process now this was obviously developed in sigma we are in the sigma frame right now and uh if you want more information on that i can put a link to where to obtain this in the figma community all right so let's get started a couple things just to talk about about figma once you're just in the software now this is the desktop version there's also an online version they both are web-based in the sense it's saving up until to figma's cloud or what have you uh you have to use the internet to use it i tried using it on the plane the other day and that failed miserably so keep that in mind um so this is your canvas it is enormous in fact um i can just put a little circle here for you and you'll see it's already 900 pixels wide i can go out pretty far and this is how big your screen is and obviously you can zoom in all the way until you see each individual pixel i know you can't see that i'm kind of scrolling but i am um so here's my little shape i can glue that so this is your canvas um similar to any other illustration tools like adobe illustrator um you have a pretty large area to work with and then you can get down to that kind of pixel pushing of what you want to create in here uh on your top left we have um our kind of our figma button that gives us a bunch of a bunch of options kind of plugins all these other things you want to create but really what you're going to be using is these tools right here and particularly probably this these first five we have our move tool we have our frame tool which we're going to talk about today these are all of our shapes that have very simple um shortcuts as well our pen and pencil tool text tool and this is just you know to pick things up and move and comments is if you're using this tool in um in like say a work environment or with a group of people people can comment and share prototypes make comments etc so let me put out a rectangle here to start because i want to show you what i used to do okay this is like really big so let's let's make this go back to like 1200 800 all right here's like a typical dashboard size i'm like so zoomed out apparently so let me zoom back in all right so when i first started using sigma i would create a shape and say hey this is my background and you know i can color it you know it was going to be white and i'll start like designing within this shape or not within on top of i should say so let's say i was going to put in you know some kind of title here you know and then i might make some example of a chart here let's say all right so let's oops let's say this is what i was going to do i'm making a quick bar chart what i came to realize pretty quickly is if you look on the left this is where you have all of your layers and all these things are individual in the sense that they're not um a collection they're not within something they're just kind of floating out here in our canvas so this background shape is just a shape what i used to do not really realizing how to use frames is you can take this entire area and you can just right click click and group the selection and now i have something that is a group and on my right hand side down here i can export that group and say yeah i'm gonna export group one and now i have my image that totally works just fine um you know it works it is not the best way to use it and i'll share why so let's get rid of this group because i don't want that let's go to frames so when i create a frame this is essentially uh similar to like in tableau like your tableau dashboard you have created a frame to put all of your objects within them right and even in tableau you'll notice um that you can't put things outside of the frame outside of the dashboard space even though there's a gray space on the side side note there is a trick to do that um you can move things off onto the side space but they're not no longer within the dashboard when the dashboard is up you're not seeing those things this is sort of similar so here you know in sigma they give you some predetermined frames essentially sizes of a dashboard kind of right like let's think of it that way or you can just draw your own so i tend to just draw a box and once you have a frame out here you'll see on the side here it'll tell me you know where it's located on my canvas which really doesn't matter um for the most part and then how big it is now i always make this exactly the same size that i want in tableau if i'm going to use a background image or if i'm prototyping i'll make it the same size that my client wants their dashboard to be or something that i expect to be so i know the limits that i am going to be using or that i'm going to be constrained to so now that i have this frame you'll see it's frame one i can rename this and say you know this is going to be my landing page and i can keep creating other frames as i work through kind of a prototype um so now that i have a frame in this case it has a background color which means again if i were to use it as an image this background color does show up you can turn off this background now it's hard to see because the background of my canvas is this gray you know i can always change this background color as well you know we can change that and we could um you know add a fill to this or what have you alright let's just go back to having it colored so here's my frame so as i said you can um [Music] you can modify this frame you know you can add effects and strokes to it kind of like you would a shape but what i really like about frames is the ability to put other objects within here and um they only show up within the frame here is an example so i can say let's here's a circle i now have a circle let's just make it another color for some whatever reason i have this circle if i move it off the frame you'll see how i don't see the other parts of it it only maintains it's kind of like a sort of like masking where um i'm only gonna see it once it's in the frame if it comes out of it it's out and you'll see on the side this ellipse is no longer within my frame now i can even from here drag it in and say be part of it let's go and get it in there there we go but i can't see it so it is technically a part of this frame but i can't see it because actually outside of the scope or the window of the frame let's see i can drag it back in so there's two ways to get things out you can just pull them out they end up out you pull them in they end up in you can also move them from this left-hand window so this is really useful particularly if you're creating things that might um end up a little bit outside of a frame or particularly like shapes so here is another example so i wanted to create this nice kind of and i'll go over how to make shapes in another video but let's just say for purposes of illustration i'm going to create i don't know what colors i want to be this shape it's going to kind of go outside of my my frame and you'll see right now this is actually isn't even in the frame but i will get it in there don't you worry i'm just messing with these colors let's do another oop uh another one and we'll make this these colors are totally not gonna match i don't know i'm just picking what i got here let's see let's try something different um all right and we'll do whoops like so okay so now i have these uh shapes that i created i'm gonna group them together and i'm gonna put them in my frame so now you'll see i have i've created something that i didn't have to worry about the edges and making these all line up really well i've made something in this background that extends you can see you know outside of the frame but i only see what's within it and so this can be pretty useful when you're creating particularly like shapes that um are going to have a better effect if they go outside of it or you don't have to worry as much about some of the extensions beyond it and so i really like using this so for example here we have something where i can create kind of this background um and use this as my you know default background and then layer in things within um tableau for example now as i mentioned these are all now within my frame i can close my frame and see they're all together when i hold the frame everything moves with it i don't have to select everything because already within my frame same goes for sporting down on my export button i can now export this frame as an image and it's much quicker than grouping things together and like um um creating shapes that have an exact edge to them to fit into some other shape so this is how i use frames i also again when i'm building actual prototyping let's say this is my background image i would never really have a background image like this um in a dashboard but i can quickly um you know option drag and duplicate these things and let's say i'm prototyping so this one has you know some trend charts in it this one has bar charts in it like i now have two landing pages i can rename this as like dashboard one and prototype within that so that is how i use frames and there are infinite ways to do them they're also really great for things like icons if you're building icons you can use a frame and essentially let's say i have a little white one here if i put an icon in this one and i put another an icon in this one the way let's just uh um let's make a polygon real quick just for illustration purposes so let's say um let's say i have an icon like this and then i have another icon that is like this what you'll notice is their sizes are or let's say like maybe for whatever reason this one is got some other things to it i'm totally making this up and it looks like this so this shape you know is 158x158 this shape now is different right than this one and if i were to export these two shapes as they are they are just going to be that blue box the frame allows me to more specifically say i want my icons to have the same shape knowing that sometimes there are icons or shapes that have a different dimension within in them think of like a microscope they may like go this way and so its overall dimension is going to be different than something that is very symmetrical and you can use frames then to make sure when you export icons or shapes that you're going to use in tableau that they have the same size so they're rendering the same when you're putting them into tableau so that's another quick way to use frames it's really just to provide that constraints and and size of something that you might be exporting all right and that is my quick little tutorial on frames um please hit me up if you have any questions hope that was useful thanks so much

Channel: Lindsay Betzendahl

Views: 913

Rating: 5 out of 5

Keywords:

Id: Lx_N1khOU5M

Length: 17min 0sec (1020 seconds)

Published: Tue Jun 29 2021