Office Hours: Figma plugin showcase [Part 2]

and I still talk to you oh I can hear an echo I can hear myself talking back to me is that normal how do I mute the video I have it open maybe how long can you still hear me okay I'm good to go let's kick it off you yeah I can hear you you you sounds good to me all right hey everyone welcome to office hours I have our famed guest Tom Lowry designer advocate with figma who's also like me but better and I want him to reintroduce himself he's back for the plug-in showcase part two and it's probably a - it may be a 10 part series Tommy Turner's yourself with a factual piece of data but then and there may be a thoughtful piece of data and then also a non factual piece of data all right I'm Tom I'm a designer advocate here at figma I've been on the team for about I eat a little over a year and a half now excited to show you all plugins today I've built some plugins myself and found them tremendously useful of my own workflow so hats off to all those in the community that have made some really cool projects I guess a factual thing about myself I one of my side hobbies is I guess I'm not supposed to announce that it's a virtual thing because people are supposed to figure out which one is it's ridiculous so I'm not even gonna go into what I was going to say let's just say that one of my favorite things to do is eat super healthy during quarantine and I'm also really into woodworking and cycling so there you go that was awesome okay he's very good at woodworking and cycling I'm guessing I'm guessing you all I actually don't know how good you are at cycling so just to let you know Tom's only going to be available for half the show so if you apparently I'm calling it a show now so if you have any questions and you want to pick his beautiful mind you might want to go ahead and that in this first 30 minutes we are gonna go ahead and wrap it for our jump into this so Tom can pack our minds with delicious plug in facts and I'm gonna let just hand this on over to Tom let's go all right I'm in the figma community we're gonna start with some cool plugins that one of them was recently released it's called save selections by Aaron right and this is sort of one of those things that there's a number of different ways to do something in figure mode but this comes in hand and I'll give you a really good use case for it but basically it saves your selection so that you can come back to them and you don't have to keep you in the hunt in fact point click type thing so I've already got this one installed we're gonna throw some links to the to the plugins of the chat if you want to follow along and give them a try yourself but basically here's a perfect example I've got this illustration here from Sourav that are pre-mixed and the biggest thing that I've done is I've now sort of added a little bit of depth where these things are overlapping and there may be a point in time where you want to group things so that they're easier to access and so because I've got this depth I might want to group these leaves together and I could select them all and I could do that but the moment I group them you'll see that now it puts them all on that same hierarchical layer which I may not want because I've got def so let's just say I wanted to learn make selecting those things easier that's where this plugin comes in handy so if you haven't if you might already know the shortcut but command forward slash will allow you to search for a plugin that you've stalled and I'm just gonna search for save selections and it finds it and press ENTER and we launch our beautiful plugin and so in this case what I can now do is I can select all these leaves and then I can actually just hit save the selection and then now I've got this thing loaded and ready to go so when I'm working on this illustration if I ever want to come back to those leaves I just click on it and now I can adjust all those leaves and sort of keep the depth of those layers so this is really handy when you're doing illustration work you could also imagine some different types of using this you want to select all the headlines or something in your document or and you just want to have them really easy to go back to and you're sort of like iterating through this is like a really fun way of doing it and you have got another sort of use case for it up here maybe you sort of like got to a point where you want to sort of style these individually there's lots of different ways to use this this is sort of like a an easy way that you can kind of use two plugins in tandem I find myself doing this a lot where like one plug-in kind of segues into the workflow of another one so another one you've probably already seen this one but I'm gonna plug it again because I feel like every time I tell somebody about it it's handy for them and that's this one called simulator by Dave Williams and so simulator will allow you to select objects that all sort of share something I'm sure lots of you have already used this one but just to kind of demo how it works I'm gonna launched in the lair I'm gonna select an object and now it lets me select properties around that object so in this case what I actually want to do is select all of these circles which are all 59 pixels by 59 pixels and so what I could do is say select all with the same you know width and height and even fill color and then I could say select layers and then it selects all those now I could go in and I could configure that selection each time but being able to go back to my selection thing here and hit save selection and just call this you know like white knobs makes it a lot easier to come back to next time I need to modify those things so hopefully that helps y'all in your your work workflow somebody in the check yeah you're probably going right for what I'm going for it go for it yeah so somebody had said it sounds like grouping and it kinda is the same as grouping except going back down to this situation where you have depth and things that don't all live at the same depth or layer hierarchy or layer index in your design this is where it comes in handy because now if I launch save selections again and I want to grab these Leafs I can select them all but they don't all have to be at the same if I was to group them they're all gonna be the top bundled together and now I've lost that depth so this is sort of like think of like the ability to group things but when certain sort of Z&X aspects over the group get in the way so it's pretty handy I found myself wanting to do that and other design tools in the past when I've been doing more illustrative or I work and so this is super handy for me at any point in the selection process like if you change qualities about an object like let's say like for instance I know that with smart animate if you change the name of that layer in a subsequent frame it kind of breaks that smart animation so I'm wondering is there anything with same selections that breaks it or is it like based off of a note ID do you know anything about that yeah so I just renamed this leaf hello so it's you know and if I go if I select leaves again and still selects the same thing so there is a note idea behind the scene so like if you decide to like move this around or like change its name it's gonna still work now obviously this group has its own ID behind the scene so I imagine that if I was to like ungroup this so now I have these two shapes that are not grouped anymore and try to do it again it's not gonna capture that thing because that group no longer exists anymore but there is a feature where you can you can select those things like I'm just like for example here I'll select my leaves again and then what I can do is go back and select those things and you can actually refresh the selection so now it adds those two things back in so if we added more leaves we could add more to that thing awesome let's super cool down the road alright the next one that I wanted to show it's called Auto arrow now I think again this is a really popular one but it's a question that we get asked a lot and that is you know I'm you know I want to put together like a flow diagram between a bunch of screens and I want to be able to draw arrows so that I can export a diagram outside of figma and this one's really nice it has a couple of cool features that I think you'll find useful so it's called Auto arrow I feel like I remember the name of the the publisher for this one it used the person I think has a it's like what their actual name is not a shot B Singapore I think that's the company that published it so I wish I could give a shout out to the developer name but it's not coming to mine but anyways the way Auto arrow works is you we're gonna search for it in our plugin menu and we're going to go to our Eero and it looks like this and so all you have to do is select two frames and then click link and then it draws this arrow zoom a little bit to dress this nice arrow and you can change the color of them as well so like if you don't want to draw these ones you could just change the color here and you can also change the direction if this one is sort of like feeding back into this thing and so really quickly just by selecting a bunch of frames we can just you know create like a flow diagram that links all these things together and okay that's super fast yeah sometimes there are going to be situations where it doesn't work so well where like you're trying to go back through like a minefield of other frames so there are some sort of limitations to that but the other thing that is nice is there is an update function so let's just say you decided to sort of like get crazy and now you're moving some things around the canvas you could just hit update and then it'll redraw those those arrows back which is a really nice thing right it's tends to maintain a connection so to speak to like each of the frames even though we can't live update the canvas as soon as you hit update it knows what it's connected to exactly so I don't know what's going on behind the scenes but I imagine it's keeping track of what arrows connecting which nodes and sort of storing the previous you know x and y coordinates of each and then if they change it it knows to redraw the arrow so anyways that one is pretty handy there's some other plugins that are also worth checking out I think it's called Auto flow why am i drawing blanks on names yeah Auto flow it was just one word by you Tong and David Zhou it coinbase and so it does a really similar thing they both have like their their pros and cons but again definitely I check out both of these if you've ever had to do that again another one that I want to go into is called quantizer and Vadim has been a pretty prolific plug-in developer and he wrote a post that I should probably try to dig up a URL about his sort of thought process designing plugins it's really interesting for those that want to go down that road but this one that he built is used for arranging things into grids and has a couple of cool features so definitely check out quantizer I'll show you how it works in this scenario I've actually already got some things set up on a grid but they don't have to be like you could have some things that are like off the grid and this is great like if you have icons so let me just draw a white box around the seat you can see a nice frame and we're gonna run our quantizer plugin and it has a couple of cool options the first one is we can define the number of columns and then we can define the space between the columns so one thing to note is that it kind of seems a little bit arbitrary when you first run this plugin that it tells you that it wants to create 75 different columns and that's because one of the things that people often want to do is put everything on the same line and so in order to have that many columns you need to know how many objects that you have selected so to make that easier medium has Auto populated this with a number of options you'll see what happens if I just leave that and I hit change you'll see now it puts all these inside one big row I'm just gonna undo that and run the plug-in again and but in a more realistic use case meanwhile we might want to say like hey I want to have ten columns with 32 pixels between each and then we can just hit change and then it snaps those into a nice grid for us so you're just trying to do some cleanup or some organization this is a really good way to do it and then another thing this also comes in handy I just find that again there's a lot of these operations that I'm doing sort of back to back where sometimes I'll like arrange something or I imported my icons from sketch now I want to put them into a different arrangement and then I'm like oh I don't need to use this forward slash naming structure and my components anymore and then this is where like things like batch rename if you have to discover this and figure if come in handy where I could say like I don't want to tell everybody that these are 32 pixels because I don't want to organize them that like that way I could just type in 32 space space and it'll match that and replacing it with nothing I could replace it with like a prefix like icon or something and then rename and then those I'll rename in a nice grid and it only took me a few seconds so that one is on my list of plugins that I use all the time so so to debate them for a great plugin and a quick question about that Tom if you could like back up before it was organized yeah so a couple undo steps here okay in this scenario without that plug-in what would be the way that we might organize those things if we try to use like a figmas tidy what would that do yeah so if you use tidy up it will try to sort of like figure out what like what arrangement that you want but you don't have any way of like defining are controlling exactly how many rows that you want so like in this case that I demonstrated at the beginning I may want to have like all of these in one row which I've done more often than I'm not especially if I'm creating sprite sheets um I want I might wanna have everything in a line then duplicate them and then color the second line and then group it all and I don't know if anyone's ever done that before but like I've done it a few times and having plugins to help with those repetitive processes is really handy but yeah this just gives you a bit more control it still does work really well with smart selections because like after the fact like you could still go in here and change the spacing between these properties in two different directions and then if you're at a certain zoom level you got these little handles so if you decide that you want to like reorder these into a different order you can just drag the handle and move them around natively and figure out how to plug in yeah it seems to play wells like the native ecosystem that's why I asked the question because you ran the plug-in and then I noticed that that tidy and and those gap margins and gap controls were already available for you so you could then yeah I'm into knit and one thing to note too is that like you may have situations where like maybe you're calling your icons and you're like oh we don't need these two icons and now you have like these holes in here when you select it with smart selections all of these things are already aligned so it's not gonna like fill in that gap or as like you do you could launch in quantizer and say like okay one Harmon able throws big one two three four or five six seven if we get eight eight columns we got and then change oh yeah it's great I'll reorder them like that so hopefully that helps this one comes in handy a lot all right up next custom frame presets this one is by club definitely check out Gleb because Glenn has done a ton for the Figment community and he also not only has a lot of plugins he also has a lot of really interesting some very wonky files that I love this one here I know we're sort of talking about plugins but like just go check out the user input and figma plugin which allows you i'm sure you've checked in the setup you Rajee but basically it allows a prototype that allows you to sort of like type into like an input field and seeing how it's constructed it's just it's bonkers it is is it's bonkers and the reality for I think gloves just worth following on the Figment community and Twitter and all that just because Timmy clubs like a figma magician I remember throwing a challenge out a couple of weeks ago about hey how could we create an animation of a full arc like a loader like a loading arc and I was like I did it in like four frames and I thought I was a god and then Gleb did it in like two frames which I'm still trying to dig the the file apart and figure it out so yeah he's pretty damn good and I just realized I'm getting pulled away but but I'm going just due to a scheduling issue today but let me show you frame presets sounds great Tom custom frame presets so basically you can create your own collection of frames and so you have to have the frame drawn but once you've drawn that frame you can add the preset and just call it shape and then you can hit enter and keep adding additional ones and it mate remembers the size and then this will get saved to your local storage and I think there is a way that you can create a sharing key so that you can share your presets with other people on your team but the nice thing is next time you you need one of these you can just use them again so whoops I clicked on AG labs thing you can support gleb if you want as well and yeah better frame let me launch the plugin again so there's our frame did it resize the frame is this working for you Raji oh yeah it's it's working for you it's just the frame size that I put it in it's really small there it is there so yeah if you have a frame and click on it and hit shape ya it will create that and then of course if you have additional ones you can edit or add new ones so like let's make this another size we've had a lot of requests for stuff like this and it's not something that we've been able to integrate into the product in the past but like if you're like a company that's developing custom hardware with a really unique device size that you're using over and over again you could define these greater sharing can you share with your team and everyone else can be using the same devices so yeah I'll let you take it from here and yeah hopefully that gives some people a few ideas and I know you have a couple more in your sleeve that I would love to watch but yeah take it away all right tom thinks thanks for jumping in these things that much more than me we'll see you next time on office hours head off to your meeting love you dude I'm gonna share something next and it's gonna blow something you made oh there you go check it out any later get out of here all right all right so yeah Tom's awesome so Tom's also like the humblest dude and he wanted to share we I did I wanted to share his status annotations plug in and he was like I feel weird cuz I was like okay Tom I feel like you should share it because you know at best because you made it he's like I feel weird talking about my own plug in and then saying here's one for me I already missed Tom - absolutely so here's Tom's status annotations luggage now I know we talked about Gleb and having loves a great community memories publish lots of plugins an equally great community member if not if not well an equally great community member is Tom and Tom's not can never share that about themselves so let's go ahead and talk about that status status apparently I went southern there for a second status annotations plug-in alright so let's just come back to this bird example here with that plug-in if you go to the your plugins in the community here it's called status annotations I linked you there you can come in here and let's go ahead run out I'm gonna select this frame and I'm just gonna use that quick command of command a slash I'm going to type in status annotations all right so this is great I remember when I was working at dribble doing a lot of product design and there were lots of like we didn't know the current state of the design and so often what we would do is we would I don't know if any of y'all have done this we would do with this method I'm gonna use shift X just shift the fill to the stroke and then would we do this and we would put a big yellow rectangle around this thing and this was like these were the final ones and then people kept looking at the other ones so then we started doing this we started putting a big grey rectangle but we're like I don't want to you know obvious get it too much so we do is put a layer blur actually sorry a background blur effect on this one and this was like don't touch like these are not supposed to be used and then of course you could just turn it off or on to see it there's lots of creative uses of figma to be able to communicate hey this is ready well welcome to steena status on annotations my mouth would work today great so welcome to status annotations plugin so we can go ahead and just select that frame and hit in progress and you can see right here on that frame that it says in progress so we've got a little color and everything on that what if we need something to be reviewed okay let's go ahead and review it and then it says right here this one's ready for review let's go ahead and approve it or say this is ready for development or it's complete or if this one's archived this one's no longer there Tom designed this plugin he's got lots of little examples here I believe that if you move the frame you can go ahead and do something called refresh so this is using the plug-in API here the plug-in I believe it's called relaunch API and so what a plug-in relaunching API does is it plants some data on your document that's basically like hey take my file uh I I use this plug-in and so you can see here that I've also got some other helpers here for Google sheets Inc so if I hit refresh you can see that it moves this back to the frame so Tom knows how to like tied to the frame because you should be able to like rearrange your frames and then just hit this I don't even need to select my frames at that point that's a really helpful one it's got quite a bit of downloads I think people really loved it I think people also just really loved Tom and that is a that is not to be contested with I love Tom - okay I've heard so much about this plugin I I personally have recommended it I've used it only a little bit we're gonna talk about a Google sheet sync so let's go ahead and go into the community here Google sheets I think we can just type in Google sheets take a bunch of installs here I actually just recommended this one to a friend the other day so this is going to be Google sheets I'm doing double duty here Google sheets C plugin normally I'm sort of emceeing for Tom okay so what this basically does is allows you to be able to take a lot of repetitive data but these are all repetitive forms we've got these card views but we have different data on each one so we've got this Kings Canyon Sequoia bah-bah-bah well what if all of a sudden this copy changed and you needed to be able to update that copy now I wish that these were actually made an auto layout they kind of seem like they're but I'm not gonna even mess with it but we want to be able to just tie this data the title the location maybe the number of reviews just to make this mock-up seem more real and to simulate some data with it there's lots of other like JSON plugins there's a few other ones it'll actually like help you simulate simulate some data and different data we're gonna go ahead and showcase this one here so here's that spreadsheet right here if I could bring it in I would let's see here just kind of give you an idea yeah let's get this thing in here so that we can actually see what's going on here so this is basically what this data is now let's let's try to understand how this thing works so right here we have column names so we have part name location description and if we come over here we can see where the data kind of over here and the way that you make the data bind to this thing is that you're just gonna put this little hashtag symbol in front of it so let me see if I can adjust my pigment just a bit so that we can uh we can really do this thing side-by-side so that y'all can see what's going on all right yeah I think this is in the stream now I think it's working all right so this is how the bindings work you can notice park name here location here now we're gonna go to an old state I'm just gonna put in nothing here let's just pretend that this is just a random like it like this about here is just a random bit of text one thing that's kind of a cool trick if I just hit delete on this it will actually take on the title the name of this layer will be the content found that out the other day I love that okay so let's go ahead and run this plugin but let's just blank out some of the data here let's just say we had just started making this thing all right so let's just go to resync Google sheets data now I didn't select any frames I didn't do anything like that what I'm literally doing is it's just knowing that because of these names of these columns up here it syncs to this and you can see that it filled out all this information now let's go ahead and add our own here and see how that might work and I believe the way that it works is it takes top to bottom here and it reads through these sequentially and then it will go ahead and just do the natural figment order in the document much like you would with a presentation that just goes left to right top to bottom and that's how it knows to load the data in so I want the number of reviews and I've got that number right here reviews right here and I want this to be synced up so what I'm going to do is put in the header name here pound reviews hashtag creepy nobody says I don't anymore I've showed my age alright so now I've got reviews in here and I'm gonna go ahead and rethink that data so boom let's rethink it notice it said 2.5 k so I was thinking how can we get a little bit more creative with something like this and I thought why don't we do this why don't we take this put it next to this and with Auto layout I'm gonna select both a hit shift a for Auto layout and I'm just gonna put a space here and put reviews I don't need to I don't need to replicate this data here sure I could but I just kind of want the raw data there and then on this one here it says reviews good but this one here we don't want that to sink there that could that can be problematic here so when I just delete that out let's go ahead and sync this up I'm gonna go ahead and just do that but notice how it changes without a lab that's great so let's resync the data let's see how it works awesome okay now I think I already set this up here in that same way so if I just put in here let's put in two reviews and let's put in like 5,000 reviews all right so we're gonna zoom out a little bit here and we're just gonna resync that data boom awesome so you can see how it's all working Auto layouts working it's awesome it's working I keep saying awesome I keep saying working because it is cool okay so on these image ones I was actually trying to think like would this even work so yeah it does what I've done here with the images is that I put in the name image right here and let's see what we've got here image and all I did is just put the URL in Google sheets sync is smart enough to know that when you have a URL here and this is an image object that it'll put that fill in there I would love to mess around with it and be like well what if this was a color let's just give this a try well it just swap out a background color let's try red we're going we're going rogue here soku the heck knows if this will even work all right fingers crossed with me let's do this it totally didn't even work okay yeah it did not work let's detect that there's some kind of URL there let's let's Blake that out let's see if it just actually blinks out the image let's run it again nope doesn't know to get rid of it okay let's put in a new image so we're gonna put in Disneyland just because I love Disneyland and I would love to be able to see that image update just to prove it to you okay we're just gonna copy the image address we're gonna put it in here boom we're gonna say what is this part name it's Disneyland alright let's run it again oh there it is alright it's all in we're doing great alright so that's a super cool way to bring in like dynamic content love show in that Tia alright let's move on to the next also remember if you have any questions along the way or you want me to demonstrate something we're getting to sort of like the latter half of office hours and office hours is always about just hanging out in the office with us it's pretty candid experience we want to share some cool stuff with you so office hours will always talk about a topic but we always reserve some time at the end if you just want to jump into something cool like nerdy let's narrow out all right let's see what else I can share with you today oh ok I've been off more than I could chew I've heard a lot about Fig motion so if you are a let's just have another page here if you're familiar with a smart animate let's just put a frame here and we got a little cool red certainly certainly thing here I'm just gonna duplicate this and then I'm gonna move this over here now it's just let's do this let's just let's do something very simple so that we can keep our time on our time and get to lots of plugins okay so essentially this is the before frame and this is the after frame so in a prototype I can actually link the two and then I can say on click navigate to here and smart animate these values and I think I've got somebody watching me oh-ho Josiah you're the man he just noticed that it renamed my lair and if it renames your lair smart animate does not work so you got my back love it okay so let's just go ahead and test this out in present mode and let's see what this might look like so on click smart animate that's great I've seen a lot of amazing little smart animate experiments and I think I think they're super cool I think what is missing from smart animate is a lot of like timeline based stuff as well as easing so right now if we go in here and we look at this navigation we could see the easing so there's ease ease in ease out ease in and out and linear but if we ever want to get more complex and if you've ever been familiar with After Effects it's got a time light or flash it's got a timeline based attribute based animation and it's it's really really powerful it's a lot to wrap your head around but it's very powerful so the other thing that I think that people have struggled with is and all those creators that have made amazing smart animate animations is this let's say I'd like to capture this animation because this is perfect and this is exactly what I want to put on a blog or on Instagram or something like that what is it that I'm going to do to capture it well in figma natively there's no way to just capture video of something and so a lot of people end up having to do like some kind of screen sharing software I do want to do a plug for clean shot X not even affiliated with figma in any way but honestly is an amazing amazing piece of software so if you ever looking to sort of capture an area or record your screen that could be a really good way to do it but there's no way to capture it easily so a lot of people end up screen alike screen sharing our screen shooting alright enter fig motion now fig motion is pretty wild like I'm pretty impressed with it but I also don't even know anything about the about the the full capabilities of this so I just kind of want to intro it let's go ahead and select a frame I could have just selected a frame but it's asking me now so what I'm going to do is select the frame first use my quick command here command slash to get fig motion and for all those who think that that forward slash is actually a backward slash listen I feel passionately about it it's a forward slash also known as slash alright so I set up this little animation here we're going to move this like this I set this little animation to kind of demonstrate I put in a keyframe here and here for the X my values of this ellipse and if you actually run along the timeline you can see what's happening here now one thing that's very different about smart animating and prototypes is that it's all on the same frame which if you're me that's such a tremendous ease of burden because now I don't have a million different layers in a million different names so let's kind of poke around with this you can also see that there's a little bit of like a like a wind-up effect so as it goes back and forward you can do this what I love about this plug-in is the fact that like you can scrub through slow and kind of see the nitty-gritty things of what's happening in your animation whereas in present mode it's just playing at full speed you there's now a very easy way to fine-tune those things or to really get into the more granular time here but you can see that it winds up and then it comes back so let's just hit play and see what it looks like see how it like bounces back and then it kind of does that sort of a thing that's not possible or at least with a lot of frames in figma so you can see here when I click the line you can see what I did so instead of a linear easing and if we do that here let's go back you can see that this looks a lot like something producing smarter animate see just linear in a linear speed and fashion goes across the screen but if I go to custom I can then change and if I go outside these bounds on the Bezier here that's going to enable that kind of work that behavior where it goes outside of the x and y or x values in this case so that's where it winds up and kind of backs up a little bit and then goes the other end it's also got kind of a natural bounce behavior built in all right so this one I haven't got to try out yet but I'd love to try it with you all right so let's see how can we put a keyframe in here there I just click this little keyframe any After Effects fans of may realize that this is pretty similar alright and so the Y value I can go there and then maybe right here let's that should go halfway through and kind of create another value independently and so I've moved the timeline to this 400 milliseconds and added that there now I want to change that Y value so this seemed a little bit cryptic to me at first is that you would have to go in here and actually change this Y value like this and go up I found out the way to take care of this so let's not do this let's remove that let's add another point again I'm going to just move this to the desired Y value at this point right here so if I come back to here if you hit brush it's a very very weird thing but if you hit insert value it'll actually insert the Y value at that point so there I go let's preview this and I think I may have broken my x value here so let's move this over here and let's insert there now let's come back and see all right we may have jacked up something I didn't look at this plug-in too much but I apparently have done myself a non-service here all right well we're gonna go ahead and leave it at that just because I don't know much more but it is awesome what I really wanted to show you though once you get a hold of this tool there's lots of documentation on like how you can do these things so we can figure out what happened with that node value but we still have this animation now this is the cool thing hold on export export as CSS export as JSON so for those people I have a lot of people on Twitter this week going like hey these are cool animations but how do we get them out especially more complex animations you've got this thing here but what about render oh wait I can do like an mp4 at frame rates let's check this out I think that this is the single most thing that got me really on this plugin I have not yet figured out how to do complex animations yet as you very well see but this reminds me a lot of principle or After Effects I love a timeline based thing I'm gonna mess with it more if I have more to share on it I will absolutely do a live stream on that and we will learn together alright let's see it's processing now okay looks like we've got a view last render link here and there we go how rad is that all right let's move on we've talked much we've talked enough we've talked enough on that all right we're gonna do a couple of really small quick ones here just to figure out some really interesting plugins I like drawing in figma so I wanted to share a few of those we've got another one called wave and curve and I'll go ahead and just put that here wave and curve okay so let's just type this here our right wave and curve I'm gonna spell it right all right it's right here it's by Andrew Slavko Slav must be some kind of mathematical genius over here because you'll see what I mean here so let's just run it wave and curve yeah bitter-gourd pointed out that it's not quite after-effects I agree but for those that are offering a lot of illustration work and for those that are altering like wanting to do animations in there this is the best thing that I've seen to make animations that are close at least a little bit closer to that alright so the interesting thing about this plug-in is that if you've ever wanted to create patterns or you've wanted to create some of these like zig zag lines in Illustrator it's pretty easy but in figma it's been a little bit harder especially if you have things that have more sort of mathematically like sine wave type shapes right there we go all right so what this does is creates a vector line and puts it out there but there's all kinds of really interesting values and you can just preview here what it'll output so we can actually mess with these values and you can see that this wave and curve plugin is doing all sorts of funny things this is great for patterning maybe you want to create some like illustrative elements in your designs I think this is a fun little plugin not super super powerful in terms of like what it can do but if it's for you it's for you I would just come in here mess with these values there are some random values that you can put in there to get some more expressive shapes here and so we can just check out all sorts of things here skews anyway I'll leave it at that we can also put more waves in you can also put it in random values here so this just creates a dice roll kind of like what can we do with this and there's all kinds of funky little lines and shapes here let's say you really like this let's hit create boom here we go we've got all these fun silly lines we can do something with them if we look into this you can see that it is a vector object and so that we can edit it natively roots reggae says that wave and curve was very useful to him when he he or she was designing charts and dashboards cool and bittergourd actually added on top of this added some context to the fig motion plugin and said it is a very simple there's not shape to shape tweening there's not more between shapes thanks for pointing that up so think of it more for like a simple animation tool all right let's move on to the next plugin the next one I want to share with you was a pattern hero alright so here's the plugin pattern hero alright let's go ahead and go check it out want to make sure we get Q&A time in here as well we can do a little bit of shop Talk but here's pattern a hero by Nietzschean Gupta this one you can do exactly what you see here create patterns grids textures with ease so I'm just going to run it we're just gonna do a quick showcase much like we did with that wave and curve plugin right alright so what we're gonna do let's just start with this and see what we can do with this here so we're gonna select that object once again we can run it with command slash and let's just see what it does right out the box alright there we go so we've got a pattern so I think the best way that we can learn is just to mess around with this one I've been messing around with a little bit I think there's some pretty cool things you can do with it so let's say padding two let's create the pattern unfortunately what I did is I actually I did find stuff I had that uh I had the previous pattern selected and it got wild let's say um let's do a little simpler here and let's see how this works create the pattern cool and once again we've got this so we can space those apart move them negatively if we'd like to there's also this idea of shuffling nodes so let's see if we can create another shape here with a different color and see how that might work on this all right let's do that beautiful colors beautiful let's shuffle the nodes group the nodes all right let's give that a try all right awesome so you can imagine what this might do for you as you get multiple colors and things like that in multiple design elements you can start creating patterns with this it would be pretty great if we could do like a varying opacity or almost like a random notion to this let's see if there can be a random notion to this let's go ahead and turn on shuffle notes and see what that does for us oh yeah so that's a bit of a random moment so I'd imagine just as you try more and more and just kind of experiment with this you can get some really interesting effects out of this by shuffling nodes you could also potentially have like some that are partially transparent so let's just go back real quick we must have had group on - all right so let's go here let's take this let's take this here and let's just do a little bit of like perhaps you can put like on some kind of like multiply or soft light or overlay mode so let's put this here let's try overlay I don't even know we're doing with that try multiply actually that might give us a little bit better yeah that's good I like that okay let's take that and let's just create a pattern out of that and then if we ungroup it I don't really like the group selection thing I might actually do this and just see how all these objects start to play with each other so anyways something something to go ahead and something to think about some doubt some fun with I have not house says have you showcase looper already loopers really great I'll go ahead and jump in and do that actually I think it's already installed let's go in give it a try all right Lucas fun one of the biggest examples I've seen with this would be something like this say office hours the name of this little livestream I got a scale mode here just so I can scale that text up what's up let's choose something super duper fun which is not at that woohoo why not that lets go with that one alright one thing that's cool about this I just learned this one the other day if I double-click this frame the way that you would normally get this to not wrap like that because it's in it's in this sort of fixed size you would just use something like this just go to auto wit but you can also come to the edge of the frame double-click on it and it does that for you and I love that so much ok let's just say all right this is going to loop the text let's do eight iterations let's just see what it does on out of the box alright so it just moves it in a linear fashion down this way alright let's let's back that up real quick and let's say I want to do some rotation with this can I rotate it I would love to rotate it so let's just go start color unfortunately these aren't actually real color picker color pickers so we'd have to go let's go let's just go close we know they're easy so we'll go red to that we can also put in a stroke and opacity let's just fade that up so this will sort of tween in between these let's go scale all right and oh here we go this is it this is the rotation let's rotate this sucker all right let's go let's see what this does this better be beautiful looper half failed on me this is what happens when I what did I do okay sorry about that yeah okay I blame us for that because you had you had me do something that I wasn't prepped to do on stream I would love for it to work though it did work oh I'm sad it's just what died it busted alright we're gonna move on it is cool I've seen some pretty cool effects essentially with rotating text and stroke getting larger and larger and larger and then opacity shifts you can set blend modes on this stuff it's really cool to create like text effects but it's not just text you can do all kinds of stuff shapes objects who knows alright let's go ahead and this is one that's just a little bit more practical but I think that it could really help with dev handoff alright just go back here it's got a tiny image I'm gonna share tiny image is it all one more probably won't work tiny image compressor there it is install that okay so tiny image but if you haven't noticed I'm sure that you have but if you haven't noticed any time that you'll export an image out of figma it's not really compressed it's it's pretty large in file size it's never something that you would want to put our broad side now a lot of times for certain dev processes those those images at full at full res and enlarged that's fine it doesn't really matter because there are processes that developers have done to go ahead and crunch those images and make them the right size and all of that that's great but sometimes let's say you're in a smaller team or smaller studio or you'd like to just go ahead as an independent designer just export your images out pets maybe you can upload to a blog software or maybe you're just like creating your own raw HTML site let's go ahead and experiment with this now if we go here let's just go ahead and type in tiny image all right here we go I love that little intro - all right so here we go oh no selectively visible layers hi did it not have a selected layer this can't be the second time I wif sorry I'm not gonna allow it this is all frames Oh Oh got it okay got it I'm gonna go ahead and wrap this in a frame so I'm gonna go ahead and go I think it's command shift G command option G and that'll frame my selection we're gonna try this one more time cross my fingers let's see I think it needs a frame to run on a lot of plugins need frames to run on which it is just not working well anyways we're gonna go ahead and try another one this was working for me and maybe my figma is actually just kind of crashing let's go image compressor I've worked with a few of them yeah anyways uh what this should look like and what this should do is be able to Shane like export things at more compressed rates it's a great plugin I do think that I'm kind of having a bit of an issue here let me see here I do think that maybe figma has died with me yeah ruslan just said that tiny is working today and he said define an image as an export so let's just try that oh there we go there we go all right so many ways we can create a gif out of this which is really cool I have not I have not messed around with this much so I'm wondering what kind of gift we're looking at here so we've got frames okay all right this is what I wanted to showcase this one's more of an exploratory one for me I haven't really got to mess with it very much but I love the fact that now with this I can actually I can actually put an animated gif which has been something that a lot of people have wanted to do and a lot of requests in figma so now that it's working now that's working we'll go ahead and mess with this a little bit so time per frame I wonder if we can do a few frames and just see but what if we took this and this and I just wanted to take this one my copy to fill out of this pace to fill there I'm gonna create a three frame gift with Disneyland but delightful place that is currently closed to help I'm gonna take all three of these alright let's go ahead ah there we go plugin launch ap huh let's see what tiny image does alright let's create the gift Oh baby this is great I love this this is great oh this is fantastic this is so great okay there's lots to explore an air you can even they even have all the presets for the differing types for gift which is great we can create a gift from here but also we can go ahead and change potentially our settings for quality which is way cool looks like they can also do web P which is amazing I actually didn't even notice about this so we're learning together this is great uh I have now gonna be recommending this plugin to everyone there's also some sort of like prefixes here special values in your file name that will automatically set it up for maybe a name oh cool you can inject names into it by doing this sort of variable naming in there oh great you can actually inject the width into this let's just do that where I'm just nerding out hard let's go ahead and say like let's say we were gonna say like Yosemite and then we were gonna say something like this we wanted to have a width and then we wanted to have a height in there all right let's see if this works all right let's get back in here tiny image mean alright so now we're gonna say you can use these in your file names I'm hoping later naming is is what we want to do let's compress it and let's see what it aims it to be nope didn't do it right maybe I didn't read it right let's see so that seems right you can mix any of these now what did I do here maybe that - naming before it this up can mix any de special values example output your semi boom-boom oh-oh-oh so maybe I'm doing it actually in here try that I'm new here - let's give it a try let's see if it puts those numbers in there yes awesome okay it works that way awesome alright well that's been tiny image I want to keep this usually lasts about an hour but I'd like to just have Q&A at the end so let's go ahead I can share more plugins I've got plenty more to share but I would love to ask you all what you're thinking if there's any questions that you have about anything we've presented or any questions really about anything about figma I'm here to answer them so hit me up all right since we don't have any I'm going to go ahead and talk about that uh faker I think the plug-in is called thicker I actually haven't used this as well Tom's used it quite a bit tom was going to present on this but Tom had to go out a little bit so there's faker this is by Cory X corn I'm gonna go ahead and copy that link and give it to you all okay we've got a question so go ahead and hit the question since I asked Gaby says hey Ronnie the content manager is my office who only have viewing viewing rights of the file would be able to change would like to be able to change the copy and pigment files is there a plug-in which is good for that Gaby at the beginning of at the beginning of our plugin showcase we actually talked quite a bit about Google sheets sync and so Google sheets sync could allow them to not have edit permissions in there granted most copywriters especially that I've worked with often want to work with like micro copy in button titles and all sorts of things and really see the design and work with it in the design oftentimes they might want to get edit permissions just for that but yes Gaby you're right an editor would need to refresh there are lots of content plugins that I didn't prepare but if you go out to the community and look for that I believe content reel is one of those here just go out here type in content and we can see or at least you can see what ones could be useful now if they are plugins that's absolutely true they're gonna need an editor to come in and refresh those things but one quick solution that we just allow that editor to have edit permissions and it writes but if you're not in a place where you can do that then have an editor refresh that content via some of those plugins all right so let's uh let's take this let's let's open up faker Tom showed me a little bit about it the idea is just like maybe don't have content we don't have content in a Google spreadsheet or anything like that and really what you want to do is just like throw a bunch of dummy data in there faker is cool because it has a lot of like random values for things that you would use often so for instance I'm building who knows what I'm building I'm building a an auto layout row and it's like this I have a name um let's see what else there's in here let's say we have an address in there so it's like my street address I see we're working with IDC bang law standard and it's looking real real cool 2nd street address we'll just do that who knows I think you can also use this in conjunction with similair we'll check that out in just a second let's see if there's there's all sorts of things that we can look at all this stuff country state all sorts of things that you could break out here Wow very cool you can just search through this - all right let's just give it a try and it's like sort of simplest incarnation I'm just gonna hit first name and you can see here that I can hit it all right now let's just give another situation let's say I'm still I'm still kind of freaking out because we're doing it with this thing here all right let's say we've got this here I autolayout in this thing I'm gonna make it a component absolutely named frame 11 and I'm just gonna repeat components this is more a common scenario I'll wrap that in an auto layout frame I just come let's see how this all works okay so if I come here and I select each one of these this is why I said this can often work out best with similair let's just run that first name and it does do exactly what I thought it would do it it does this random / it does this thing where it does a random a random name per layer so now let's go to street address here and let's just see if we've got like a street address we'll just type it in here a whole street address great ah that's great that's great now I wish that you could find some way of just like doing it here and then it would go all down here I do not like where I have to keep selecting all these but remember those other plugins that we shared save selections could really be a good thing for this and you could just select these all as street addresses or we could have some kind of like similar simulator selection here where you actually take this input in street address and then use simulator to look up all the street addresses alright so let's go we got a few questions coming in and looks like the community has some things they'd like to share I was asked is there gonna be improvements for the present product ignite which were able to centerline the whole prototype uh I am curious about so I know they're always working on things figmas ridiculously amazing at the speed at which they're processing thing we're always listening to y'all too as a designer advocate at figma my job is to listen to you and then to bring that feedback from the designers to the team so ours are love if you could explain what you mean about presenting in center so right now I'm running this and it's appearing to me to be centered in that and so if I can get a little bit more context around your question how I'm misunderstanding there then I can help out and if it doesn't work then we can give that feedback to the team all right Joelle says there's a cool new plugin called scale yes just notice that that came out today it's called scale it resizes all the child elements and effects it looks super duper cool I think that's really great I just saw it I have not demoed it but what i've what i've heard is feedback from a lot of designers is if you want to scale this object here you have to press k or go into the scale mode here and then you have to scale everything down now the problem with this becomes and I've dealt with this problem myself is what if I want this thing to be 320 pixels wide like notice I'm working with fractions of a pixel here which is really annoying so I've had to go in here this is how I've sort of worked around this here I come create a little frame and then I do 320 pixels kind of a lioness here then I come back to this frame press K and then kind of snap here and it should do like a little bit of a snap to that 320 and that's the way I've worked around it it's still totally annoying and scale allows you to just add in your own values and it should just go boom everything is scaled as opposed to the move tool if you try to go 320 you'll see what's happening here so alright ah-h asks what is this search plugin it's not a search plugin it's actually just command forward slash here brings you into this menu I have become addicted to this thing because it not only searches through all the commands within figma here including shortcuts and things like that but if you just wanted to know if there's a shortcut for something you could say like is there a resize what that must have been a plug-in golden and golden ratio but is there like a rename command oh yes there is boom rename duplicated layers so there's all kinds of amazing stuff within this search menu it's kind of like spotlight in OS X but the other thing you can do is just type and plug in the stuff so if you want to type in oh gosh let's type in Tom status annotations here that is boom I can go ahead and run those commands here and their status annotations I don't have to navigate my completely unreal deep plugin menu alright and rat sounds actually answered my question thank you so much rats ins alright so handle asked is there any plugin that I can help with padding and measurement in pixel position about any that shows both side both sides measurements is the same off off the cuff I think one thing that you might look at I'll just dump this in the chat I didn't get any chance to showcase this but so huh no you might check out the plug-in red lines that allows you it's more like a dev hand off tool but it allows you to see measurement and space between things also the other thing that you might do is say you want to know the padding between this and this and you you don't want to come I used to do this all the time as a designer a youngster I would come in here and I'd be like okay good I think that's 24 and I put these little like things to measure red lines came up with that but one other thing you can do too is by holding option and selecting an object you can actually go and hover over the objects around it and you can see spacing so with that option key I now know that like oh this thing is 2 pixels away from that this thing is looks like 20 12 pixels away so this state here is 12 pixels away from the image below it now if I just click this here this title I hold option and I move away from it I can now see that this is 40 pixels from the top it's 24 pixels from the side and that's just built in and that's native to figma so that's not red lines that's just the native thing and that may help you along your way I hope it does Alice says I have a 19 pixel 19 1920 pixel with web prototype and when if someone with a smaller screen opens it it's not Center aligned oh no problem I hope I have a solution for you here let's make a big huge frame no this one's big I'm gonna go ahead and go to prototype mode what I'd like to do is find the playhead first of all there might actually be a great way to do that but I'm gonna just do this instead I am going to go in here get rid of this great alright so this one's a big boy now I'm on a huge screen so let's use Kay to scale this thing to make it Johnny's okay yeah it's a person empty one this has happened a lot for me as well sanal where I'm designing on an iMac or maybe I'm actually designing it doesn't really matter what you're designing on maybe I'm designing for very very large screens maybe I'm doing a gaming UI and that gaming UI is intended for like dual screen kind of coverage and so it really needs to be that big it needs to be pixel perfect ah ha Ratz and says can you introduce them to the nudging by your pixels okay to that absolutely whoo oh my plugins was already open it was presenting on that page all right let's okay here's a perfect example of that like now I'm in my prototype like who ever would want to do this so what you'll want to do is just go up to the hundred-percent menu here and just scale up or down to fill and you'll see that this occupies the most space that it can in the prototype but still allows you to be able to view it here so that's incredibly helpful I use it all the time you can also scale it to width so now we've got a little bit of scrolling I believe here because it's a side to side you can scale down to fit you can look at these different modes I also know that figma is working on some of those different modes too so can you go back to full size that might help you be able to present your prototype I really opened to us let me know if it does rats ins asks can you introduce them to nudging by 8 pixels yeah I would love to let's do that all right so I a friend of mine a long time ago maybe 10 years ago introduced me to be a pixel grid the reason that oftentimes you'll want to use an 8 pixel grid is say you're designing icons or something like that and you're on an 8 pixel grid 8 is perfectly and you can say 16 any multiple of 2 really so 2 4 6 8 anytime you scale something down to a half size its perfectly on the pixel grid so you're not getting any half pixels that's why I love working with an 8 pixel grid especially for padding and amounts like that when I first started web development I started with like 10 pixal stuff like put 10 or 20 pixels but the problem is as you scale those down once you divide 10 by 2 let's say you need a a scaling down padding system so on the modal dialog it's 20 pixels on a button it's 10 pixels on even a like on a mini button it's 5 pixels well if you divide that by 2 enough in the system now you're sitting at like 2.5 pixels so I love the a pixel grid because it's a it's never on a decimal value so let's just say I think we might even be able to use this really great of this really great menu here let's just pretty much there you go you can just type in Niger Mountain here normally in figma a small nudge is 1 a big nudge is 10 now say you're working on a named pixel grid and I want to take this little square and I want to move it like this depending on the grid that you're used to that you like maybe it's a 16 pixel depending on what you're working on now you're not here so then you have to like sort of drag it back up into the right position and every designer that I've known uses nudging so you can customize your nudge amount by going and putting in 8 you can also make the small nudge too if you never want to just nudge it by one pixel once again let's do this and now to nudge I'm gonna just do one pixel there just with my directional keys and if I hold shift now I'm perfectly on aids and this makes my heart sing thank you everyone so much for coming to my office hours thank you to Tom for for being a champ and and squeezing in some plugins that were his favorite thank you everyone for coming and checking out all these things I hope I answered most of your questions I hope that they helped ya Tom's the champ absolutely we love Him we never want to lose him ever he's the best thank you so much my next live stream is actually gonna be next Monday and that's on figma dog comm slush events you can see all of them we just put that link here so you can go ahead and add those events to your calendar so you can get a reminder you can also use subscribed features on YouTube or twitch if you'd like to do that that's fine but next week we're gonna be starting a brand new build it in figma and we're going to be building a brand new app and just sort of discovering and and building everything from the ground up we literally start and build it build it in figma with a blank canvas so with nothing but dreams in our hearts and heads thank you everyone for coming you've been the best thanks for sticking around thanks for the great questions until next time office hours are closed thanks so much

Channel: Figma

Views: 6,524

Rating: 4.927928 out of 5

Keywords: rogie, rogie king, figma, design, ui design, ux design, office hours, plugins, plug ins, plug-ins, product design, live stream, ui, ux

Id: wKRO0U8Eku0

Length: 74min 44sec (4484 seconds)

Published: Wed May 06 2020