Combining Tableau and Figma

good afternoon everyone and welcome to today's webinar with irene dyomi about combining tableau and figure my name i'm figma my name is sophie sparks i'm the community manager here at the information lab and it is absolutely lovely to have so many of you joining us today from all around the world irene and i are both based in london so from us a good afternoon but i see we've got people dialing in from nigeria from the us and from all around the world so i hope you're having a lovely morning or afternoon depending on where you're dialing in from uh i'll hand over to irene in just a second but i'll let you know how today's webinars will run this webinar has been recorded and i will upload the recording in about um this evening for this webinar and send everyone out a link to the recording um through meetup on email tomorrow so keep your eye out for that email and if you do have any questions for irene please drop them into the chat or the q a i'll be adding any links irene talks about and and answering any questions along the way you might have about other events we're running but irene will um answer all your questions at the end of today's talk so without further ado i'd like to hand over to irene our fantastic tableau ambassador who can talk tell us all about combining tableau and figma irene do you want to take over the screen share hi thank you so much sophie for the introductions um i'm gonna share my screen just one moment brilliant irene i can see your screen i can hear you loud and clear as well great perfect okay so uh combining tableau and sigma so again my name is irene i am a tableau ambassador and i also work at the information lab as a tableau and alteryx consultant so for our agenda today we're gonna see how we can first we're gonna start with building a chart in tableau then we're gonna go through the interface of sigma we'll then build a template and finally we'll see how we can combine figma and tableau so why did i decide to use fingba and what should you so figma allows you to enhance your design to add more ui elements to it there are also multiple ways in which you can use figma you can create templates adding buttons shading rounding corner and you can explore many new ways of sharing your data so personally i use figma because of the flexibility that it offers and also i'm able to shine away from generic designs and in term of business dashboards you're also able to incorporate a website field to your designs and this gives the user a sense of familiarity and it makes it more intuitive and can speed up the understanding of your insights so i've asked the destefam i've asked saverio if i could share his opinion on tableau and figma and he allowed me to do it so we have i asked on twitter why do you combine tableau and figma and so sarah as i said he's a brilliant visualizator and so that's why i decided to include it and use figma quite a lot so check him out um so what he said is it fascinates me because i can give him even more space to my imagination then i also ask shinji about his opinion on figma and so he said i found figma is great for exploring custom design and making dashboard components it gives opportunity to be creative producing pieces closer to how they might have been imagined by the creator it also seems to shorten production time in my experience hope that helps so we can see we find um a lot of people agree that figma is really able to enhance your design and we're gonna see today how we can do that so in today's session we'll recreate one of my dashboard that i created earlier this year and this was based on the prices of renewables and it's a dataset from our arena dot co and we'll see how we can redesign the dashboard i created also i want to take you through the process because i think it's quite important to understand how i've done it and the first thing i did is i started my data exploration in tableau so first i created some charts in tableau but then i wanted to enhance the design so i did most of my design for this dashboard was done in figma but the exploration stage started in tableau and so then i decided at the end to combine the two to add more interactivity so i'm gonna first show you how the the data looks like so don't worry i'll share at some point i'll share a workbook where i've already done the uh the graphs but i just want to show you how the daylight looks like before we dive into it and also how i would typically start my process so this is the data so we have some questions so we have for example uh the change in cost of electricity from 2017 and 2018. and we have some um some measures so we have some type of a different type of energy essentially solar bioenergy entro and we have different values for it so when i start the process what i will first do typically when we have a data set like this because it's wider usually tableau prefer longer formats when working with data so the first thing i'm going to do is just change my um my format for my data and to do that so you don't have to don't worry i'll share the workbook with the end results but for now i'm just going to pivot my data i'm just going to highlight my different fields okay here we go then i want to pivot i want to add i don't need those i'm just going to hide them okay i have my different so i'm just going to rename it this energy [Music] type and also i'm gonna rename let's call it values [Music] that's fine and my f1 those are my questions just gonna call it question okay now i think it will be much more easier to work with my data so we can open a new sheet then we have our data and i want to try when i first think about my data set i want to think okay what kind of graph can i use and in this case because i have categorical data i'm going to try out a bar chart so i have my different energies i'm just going to put them in columns and i'm going to put values into the rows i'm going to go a bit fast because most of our session is going to be on figma so i just want to show you the quickly the process i'll go through typically then i want to highlight a specific question and i want to see the change in costs of 2017 and 2018 then i want to order my bar charts okay also i want to be able to see the values so i'm just going to drop them maybe change them to uh percentage really quickly yeah percentage [Music] yeah like that okay then i'm gonna make it bigger and i'm gonna hide my head [Music] up okay so now i have my bar chart that is showing the change um in the cost of electricity in terms of uh those different energy types and so what i want to do because i like this this graph but i want to be able to have a nice design for it and sometimes it's a blue for example if i wanted to hide some shading or i wanted to have rounded corners i can do that but it'll be not as quick if i was using figma so this is why we're gonna we're not gonna recreate this chart in figma and because we already have the um the values for it we found it out in tableau we're just going to based on those values we're gonna recreate the graph okay so now uh let's go back to let's go to figma i'm just gonna share the link to the chat okay find it finally okay so if you could all go to figma and just uh quickly you can just quickly create an account is really easy is if you go to sign up you can just use your google account like so so i'm just going to use my personal then you have the option to create tell us about yourself what kind of work do you do okay then once you've done that you just create an account okay i'm gonna let you some i'm gonna wait 10 seconds for everyone to get to this point and then i'll i'll create an account [Music] so i've put the link on the chat if you click on it and just go where we have sign up then you can create an account okay okay so for me it looks like this because i already have my account and you can see so in here we have i have my last um projects that i can see here i've done a lot of projects in sigma and to start a new one so if we want to start a new project so i have um i have my project here that we're going to use today but to start a new one if i remember um let's see it again because they changed a little bit the interface if i click on my project here it waits back [Music] oh yeah it's here sorry yeah because you change it so we can create here if we click on new design at the top where it's blue you just want to click on your design like that okay so i'm not going to do that i'm going to click on my already created template so if you could click on your design for me but i'm gonna click on my project okay so um this is where i i did i created my visualization and the thing is we have my first my first draft where i had really large bars and then i made some iterations that's why i also like to work in figma because you're able to quickly see improve your design just by creating a frame next to it so you're able to compare what you had and what you have right now so i like also the fact that you can just integrate your design uh the more you work on it okay so let's have first look at the um interface so at the top here i have my arrow that allows me to move i can move within the world here i could use my finger if you have a mac to just if you pinch you can um zoom in you can also use the plus button within your tabs you can use the plus button to zoom in or the minus to zoom out within the world here then you want to start when using figma we always want to start with a frame so it's a bit like our dashboard so if i were to so you don't have to follow along for this i'm just going to introduce you to the interface so if we were to add a new frame so within the frame we can also so i have my frame here then i can i can add elements on top of it i could add a rectangle for example and then i can see i have my um my layout for it so i have my euro key that appears for this particular frame and i have also the option to have a line a circle and i could move around also my hierarchy now my rectangle is before my um circle i also have uh if i wanted to draw i could draw like that or use the pen option and draw vectors as well then we have the option to write on text here then we have this and that allows us to move a world we can add comments as well this is where i think when you want to collaborate with other people you can add comments and they'll be able to see it okay so next if i wanted to change for example the color for my frame i'll see here i have all my different formatting options i could change my the size of my frame like so i could change the um the format of it and also i could change the color here and i could change also the colors different colors uh within my frame so that means it's really easy to uh modify your dashboard um your frame pretty quickly then uh if i were to click on a rectangle i could add some effects to it drop shadows inner shadows and so on okay so now that we had a quick intro onto the sigma interface let's see how we can rebuild this uh dashboard okay so we want to recreate this essentially so the first thing i'll have to do is to uh bring in a frame and my frame is on the left corner of my screen left top of my screen here and i'm just gonna drag it i could also um so when i had my screen up so when i i could also pick a specific frame so if i have i wanted to have desktop imac or for phone as well i already have the sizing for it but i'm just gonna do it myself i just want to drag a frame and the sizing i had i'm just gonna check i had the width was 800 and the height was 900 i'm just gonna change my my width to 800 so feel free to follow along for this part so what we did we draw our frame we change the width and the height as well now next um my the color is a bit bright for me so i just want to make it less intense because i find to me it looks better when it's less bright so i'm just going to change my color to like a gray um color and to do that so i'm just gonna do it again so i click where i have fill you see where i have the fill option i just click on it then i change you can change your um [Music] the color to f3 f3 f5 and you have the same gray as me okay okay so that's done next i want to recreate those lines and to do that i'm just going to bring in my lines so i went at the top where i have my rectangle here and i'm just going to click on line and what i want to do is just draw some lines just going to draw my line my first line then i'm just going to duplicate it and to duplicate it if you are on a mac like me it will be ctrl d and if you're on a window i believe it's con it will be ctrl d and on the mac it's command d so then you just drag it oops so it might duplicate just wanna move it forward like that then i want to duplicate again and now i just want to duplicate duplicate duplicate duplicate duplicate again and again just to make that nice um design [Music] okay that's enough so next uh what allows you to just change the shape and the color of my lines i'm going to click where i have my frame here i could actually rename my frame so if i double click i can rename and i can call it my my desktop or i could call it my dashboard let's call it dashboard like that okay and what i want you to do now is just highlight all my lines using shift then i'll have the option again i can change the the width of my lines i can make them longer and i can move them around as well so let's see i can make them longer like that i could also change the angle so it looks a bit more like my reference like so so let's go for maybe something like like so and for the angle let's put minus one 80 or maybe less yeah it's good enough okay um i'm just gonna move it as well so we just want to um get the same kind of feel so i'm just gonna make it longer yeah okay then i can change the color to change the color i can go where i have my strokes here and i can click on the color then the color i want is this light yellow and i'm just going to make it 100 percent actually 60 60 so i want the code is e b c 0 to a and 60 okay then again i want to duplicate my lines just duplicate my lines i'm just going to add them [Music] and to make them a little bit longer as well and just move them i just want to highlight all of them change to width okay like that we can also group them so if we select our lines here you can select them one by one by clicking on shift and then clicking on them and we can group them by clicking on double click and group selection and now they will move as one group like that okay so i'm just gonna check if it's gonna work i'm gonna do that again for my lines in the bottom okay change the width and move them a bit further like that yeah and do the same for this one i'm gonna make it wider again oops okay then again i'm gonna duplicate this it's fun even if it doesn't look nice so perfect right now okay i had some white space here i'm just gonna move it a bit further up like that and move it okay so next um to add some white space what we will do is bring in some rectangles so i'm just gonna um where i have my rectangles is here at the top you just want to bring in some rectangles and what i'm going to do i'm just going to bring them over my lines and change the color as well so the fill is there i just want to click and change the color so it's going to be the same f3 f3 f5 okay then i'm going to duplicate my rectangle again and bring it down then i'm going to drag a new rectangle on the sides like so change the color again to f3 f3 f5 then i'm going to duplicate so command d and here we go we have that um effect of having those lines you could also make uh maybe our on the right our rectangle a little bit thinner i'm just going to change the width you could actually move it oops okay so if i come closer i can just click on one of the corner and maybe 80. maybe [Music] let's go for 60 actually so we click on the corner and change it to 16. okay so now that we have our lines uh it looks similar to what we had um so the idea is if we were to start with our bars so let's start with that so i'm just going to bring in a rectangle and i'm going to bring it here and i'm just going to check what size i used here um so let's put a width of 35 and the height we're gonna use is gonna be 20. okay so this represents minus one percent and we know that if we go back to our uh graph we have one minus one percent for our of us sure we also have minus one percent for our geothermal so i'm gonna do the same here if we go back we want to again duplicate this shape so ctrl or command d just gonna click like that so what we're gonna build is those are rounded shapes but i'm gonna show you how we can actually run them so the rounding we use is 25 so let's change this to 35 then we also i want to um change the color so i'm just going to click on color again and the color we want is here so it's f2 6e 6c that's the color we want okay then we're gonna add some effect to it if i go where i have my fx just gonna click on plus and i'm gonna add a drop shadow so i'm just gonna click where i have this little sun next to my drop shadow and i'm gonna change the the color for it again so i click on the rectangle and the color i'm going to use is this one here which is 9e3d8f [Music] okay so i have my shadow as well i could change the blur if i wanted to i'm gonna put maybe [Music] 10 like that and so what i did here to have this effect i duplicated my rectangle so again we want to ctrl d and then we want to change it to inner shadow like that okay so we have our first bar rounded bar we can delete this one and we want to duplicate it so again we click on ctrl d and we move it further like that again i'm gonna click on ctrl d ctrl d ctrl d or if you're using a mac command d and how many do i have one two three four five six seven one two three four five six i need another one you can just add it like that okay um and i think i need to add my um drop down shadow effect but i'm not going to worry about it now so now what i want you to do is [Music] because when i have my my final dashboard i want to be able to overlay um my graph here with the the dashboard i have in sigma and so i have to make sure that the size the sizes are matching and so to make sure it's matching for example here i have minus 11. so i'm gonna respect the proportions so for example for the next one so i know that one equals 20. so this time for 11 i know it's gonna be 11 times 20 and 11 times 20 it's gonna be 200 [Music] like that so that's my second value then next i have i have uh 13 percent so i'm gonna go back to figma and change it to again 260. then next it's again minus 13 so i'm going to put again 260. then if i go back i have um 14 percent so it's 14 so it's gonna be 280 and finally i have my it's going to be -26 and i know it's going to be 520. i'm just going to change it to 520 for my height and here we go so we just want to add this drop down effect so i'm going to duplicate my rectangle i'm just going to duplicate it and change it to drop down and okay so it's nice and i think what i have to do now is bring bring it forward so i just want to make sure that i have where it says inner shadow needs to be forwards before where i have my drop down so i have that nice looking effect okay so next again i'm just gonna duplicate my different i'm just gonna duplicate it again and change it to drop down and make sure that it's before the other one like that then again the same process we first duplicate it and change it to drop down and make sure it's at the top so we duplicate it then change it to drop down and we make sure that it's on top and so we want to do this for all of them so we duplicate change to drop down and make sure that t1 is at the top duplicate and drop down and make sure that the one beneath it at the top like that okay nice um so it's starting to get where we want um but i think something important as well we're gonna group our different um rectangle together and to do that so we want to select for example i selected my my bar here and i would just want to make sure i group them so i'm just going to group so to do that i just highlighted both of them and i want to group the selection i'm going to do the same thing again i just group the selection and again click the selection so for the one beneath and the one above okay hopefully i've managed to group all of them okay so now i just want to select demo like that so i highlight it i clicked on the first one then i highlight it i want to make sure i select all of them and i want to change the distance between them like that let's put maybe 58 like so okay now we we're sure that is going to be the same distance between those different parts okay nice so next we just want to add the text but essentially the idea was to recreate that bar chart but with a nicer design so we did so now we're just gonna add the text so i'm just gonna copy this text and just copy i'm also going to send it into the chat so you don't have to you can just paste it as well so if we bring in a text you could click on your keyboard you could click on t if you wanted to bring in the text or here we have the option for a text like that and i'm just gonna paste it and the the font i'm using so to change the font you just want to highlight like that and you want to select both pins that's the font i'm using looks like that and i've also changed for just renewable i've changed the the format to light italic so you can also do that then to have this nice effect here with the rectangle what i did i just bring a rectangle so let's do that then we want to change the fill and this time instead of having solids we want to change it to linear and we also want to change how it's looking so like that like so then the color i used is i used a light i think it was light so i used 9 e 3 d 8 f the color and we can change you can play around with the color a little bit actually yeah we could do that so i have on one side i have um my pink color which is f2 6e 6c and on the other side i used the same um purple color so 9e3d8f at 20 percent this one is on twenty four percent i think we can make it as well maybe like a three percent something like that okay so yeah it looks pretty similar so next i'm just gonna hide my different energies and i can just copy i can just duplicate them here but i'm just gonna just send it to you via the chat so you don't have to type them out just gonna copy them okay so i've pasted them all into the chat so just feel free to copy them and pasted them as text so i'm just gonna do that as well oops i'm just going to compete and bring like text paste and again i want to click on my text i can click on my um i have my dashboard frame to move it yeah so my first one is geothermal then next i have my offshore wind i'm just gonna move it there in the middle as well oh and to change how my text is looking i can make my rectangle um a little bit bigger like that i can just move it so it matches the other one okay so next let's type in each rule as well we're just adding the headers for each of them okay and for this one we can change the um this formatting so if i just highlight i can make it a semi-bolt like that okay so next i'm just going to make sure that my my um my headers are looking good so i'm just gonna move them around where i have my text just move just doing some formatting for them so i have my each row here next i have my what's for wind let's just move it and also i'm gonna make it bigger like that then i have my solar this one i'm gonna make it bigger as well and i have my bio energy here and i can move my solder like so okay nice um yeah so next i want to add my different uh values so i can just again uh we can copy them but what i want to show you um just in the interest of time so you we can finish up we'll just have to write the numbers but what i want to highlight is so if we were to export this dashboard so let's export it so at the bottom here we have the option to export our dashboard i'm just going to click on export and now it's saved as an image and i've also prepared a workbook so if i'm gonna share it into the chat so if you download this workbook for me i'm gonna download as well okay so within this workbook we have a transparent bar chart so it looks exactly um similar to the voucher we created originally and so now this time we just want to bring in our image from our dashboards that we created with figma so we just click on the image and we find where we have saved our image so my recent downloads i have it here and i can just open it like that and now what i could do is i could drag my transparent bar chart hide my tattoo make it bigger and longer i make sure it's matching and we will see that is actually matching our bars because we respected the same proportions and it looks nice and so now we have our bar chart but we have it with a nice design and if we have more time it will look like like this okay um is there any questions about the webinar hi irene thank you so much for that great uh great webinar i know some people um were trying to follow along and be assured that i will send the recording out um tomorrow so you can go back if you missed any of the steps irene went over just i know it takes a few moments for people to type in questions um into the chat box so irene i've got one for you after watching that how long did it take you to get started using figma was it a steep learning curve or is it quite easy um i don't think it takes that long because you just need to get used to the interface and it's pretty similar to um i've never used adobe but i've been told that it's pretty similar to that and yeah i think it's pretty intuitive because you have you have your frame where you could build your um the dashboard then you can add elements to it it's a bit similar in some way with what we have in tableau but just you have more flexibility and you can copy and paste elements which is interesting cool thank you so much uh we've got a few questions um come through i'll read them out just in case you don't have the uh the chat window open um mark says um he think he thinks he might be missing something um he's unfamiliar with a transparent bar chart um is your image actually linked to it now um so how it works if we go back to the um let me just go through it so what i did here i just removed the color from the bar chart we created at the beginning i just removed the color you could remove the opacity and if you wanted to as well something to add you could move the let's say the energy type to color and if you have you can also add the transparent color so if i were to assign yeah so now when i click on my chart what happened here oh yeah i i forgot to because i i don't have my energy on my field now okay like that so if i click now wait what happened here guess it's not sorted let's add some color so we can see yeah it's not sorted let's sort it yep okay now it's white yeah so um basically what i did i just removed the opacity to zero so you have now a transparent bar chart but if you let's say if you had some color now we can see our bar chart like that i just made them transparent so i can have i can match them to my figma like so and with this technique you can do many things so if i have another example if i go back to my tableau so for example this vase i created i used the same technique so i first did the data exploration in tableau then i design most of it in figma and then i use the same technique to match them so i can have the interactivity so you could do that as well but there are many ways in which you could um combine tableau and figma you could just use the background um as a template like that just so have to have a nice background and you can have your balls your floating boards at the top if you wanted to okay thanks irene um got a few more questions so hopefully uh that answered uh i've got to have another question from uh susannah about um the transparent bar chat over the photo as well so i hope that answered your question as well i've got a question through from ed studdard um he's wondering if you will do another talk on background design like for your hospitality dashboard uh is it the hospitality dashboard is it this one yeah um i could do that but essentially it's the same principle so what i did i designed the background then i just added some floating birds on top of it great thank you and we've got a question from uh dan he wants to know when the values when the data values change will you have to redo the bars in figma or does it update automatically so figma is static so essentially what i'm i did i um [Music] i just recreated the bar but it's a static bar so you would have to um yeah it works best if you're doing something static i guess cool thank you so much we just got another question through about images work for automatic view dashboards sorry from google how does figma how do figma images work for automatic view dashboards so dashboard sizes that change automatically any tips i think what you could do um so for automatic i've never actually tried but i think it it's not gonna work that well yeah because it's it's an image um but what you could have if if for example you you have your business dashboards and you don't want floating elements to it you could add [Music] containers so for example i can i can have an example if we look at my profile let's see i'm just gonna download quickly this workbook okay so uh within this workbook what i did i designed most of it in figma again then added the image at the end but i have my uh bars here that are floating bars but what i could do actually i could make them um [Music] instead of having them as floating i could make them in towel and just add some um blanks so that it's for example uh let's see if i were to remove them all then i could for example add some blanks first at the top not so i'll have to yeah it's not yeah but um what you could do you could have your first your dashboard from figma you could have it as floating and matching the size of your dashboard then you could add some blanks and then you could have some tile containers so that when even if you're afraid that you're because it's floating it might move um you could make a mix of floating and a towel and blanks to solve that i don't know if it makes sense it doesn't really make sense right now but i think that's something i could illustrate in the future maybe [Music] perfect thank you so much irene um a few more questions uh um one from uh sharron um they're asked uh asking uh using figma is very manual and especially for a simple bar chart and it doesn't automatically update so what would be this specific use case for using figma opposed to just using tableau straight out um i think it depends like if you're working and it's if it's for business purposes and you want to get like a quick bar chart and you don't really have the time for design then you don't have to use figma but i don't think something like i've created here this chart i don't think um you could recreate it just using tableau you still need some to have this kind of design where you have the colors and you want if you want to play with design i think that's where you want to use figma as well it's just something to add onto your designs essentially perfect thank you so much um another question from um hamad how can we make sure the colors um scene and elements in the dashboard um to make it user friendly sorry i think i i gobbled that one across um how can uh how can you make the color elements in the dashboard more user-friendly um i think it depends on the the color i don't know if i'm understanding the question right but i think you have to think about design best practices so how you want to use color what meaning does the color convey and also [Music] yeah i think it comes down to best practices then in that sense i don't know if that responds to the question um perfect thank you so much uh looking at time we've run over uh time a little bit so i'm sure if anyone has any other questions for you about figma i will redrop your twitter and linkedin details um into the chat so people can um connect with you offline and please look out for the recording for this coming out i'm sorry somebody else said a good use case using figure mobile a mock-up before designing the dashboard properly when there's no data available um enrique that's another great use case for figma yeah so thank you everyone for joining us and if you do have any more questions for irene please do reach out to her on twitter or linkedin and from us i hope you have a lovely morning or afternoon and we will look to be running more design themed um talks in the future so do keep your eyes peeled thank you so much for coming along today and irene thank you so much for this great talk and looks like you might have been roped into giving another talk about some of your other dashboards and how you design them in the future thank you so much for attending and uh i hope that was useful and yeah that's all for me perfect thank you so much everyone for joining and i hope you have a lovely morning evening or afternoon thanks

Channel: The Information Lab

Views: 1,069

Keywords: salesforce, tableau, lets talk data, data, business intelligence, figma, tableau and figma, dashboard design

Id: cGUB8KgBKIc

Length: 67min 9sec (4029 seconds)

Published: Wed Oct 27 2021