My Dear Friends of Figma in Sure so um for those of you who maybe haven’t joined us before um jake and i we just like to chat a bit here in the beginning but uh for those who i haven’t met if it’s your first time if the repeat time welcome my name is chad bergman i’m a designer advocate here at figma what’s awesome.
About that is it means like to work with all of you in the community and uh yeah just super super fun and i’m joined today by jacob hello everyone i’m jacob i’m one of our product managers over here working specifically on design systems something that’s going to be very uh question for what we’re actually talking about today let’s jump into it.
Yeah so as we jump in just a little housekeeping um right up front here um as i mentioned you know if this is your first time joining us or if you have joined us for other live streams um you know we are excited that you’re here with us today um.
Probably one of the biggest things to plan out yes our session today will be recorded um we’ll have this available on the figma youtube channel i’m usually in about a week ish so um this will definitely be recorded and shared out um sometime in the next week or so um if you have questions for us please use.
That q a chat button um on the window um jacob and i will be doing q a at the end of the session today here um we have some great folks helping uh gather those questions so be sure to use that q a button um set your chat to everyone if you haven’t so far and i’m gonna say hello but most importantly please we ask be kind.
Figma does have a code of conduct and um you can check that out figma.com code of dash conduct um but the big the big piece of that is really just be kind to one another please uh so let’s dive into what we’re going to talk about today um as we were saying it has been a little bit so we’re going to do a little bit of a recap from episode 2 and you know.
Refresh everyone on where we are in our building blocks here is we’ve started to build the basics of a design system from scratch we’re also going to do a little bit of a refresher on component props and auto layout updates um because we have some updates due to our library with those.
Feature releases then we’re going to spend a little bit of time talking about how do we get that v1 out for teams to start using so we’ll talk a little bit about uh polishing publishing and then who knows what what comes after that well we’ll we’ll talk about that today um and then we are going to.
Reserve the last 20 minutes of the session today uh to answer your q and a questions so um once again please drop those in the q a if you have questions as we go so with that we are going to switch over here and we will dive right in on recapping where we have been.
All right so in building blocks here really the goal was to say hey where do we get started in building libraries building assets for a design system and how we started that out was just really starting with taking an inventory we did an audit of our twigma website and you know found some common components.
And patterns that were being used uh we started to group all those together and creating a sticker sheet where we started to see okay what were all of the common themes we went through how to start creating some styles and just laying everything out on a.
Sticker sheet so we could really see everything side by side and start planning for component interactions different variations um and then we also started in episode two we started to move beyond the sticker sheet and say.
You know hey let’s actually turn these into components and um jacob walked through a couple of pieces on you know styles and planning for style ramping and um you know jacob other things that you might want to share about just recapping some of those best practices you shared.
Absolutely i mean when creating styles uh one of the tips that we gave last time was leaving some room for them to actually breathe and add in other levels that were there we ended up filling out those levels in the previous episode and so now we have some really good kind of robust atomic color ramps that are there that you can see in the sidebar which is.
Our green 100 through 500 across several different hues that are there we started mapping those out in the buttons and now the buttons are actually in a pretty good state or at least they would have been up until the point that we released some cool new updates which we’re excited to talk about and share today.
Yes um so we did have some of these buttons here and also you know one of the last places we left off is you know once you’ve started to create some component sets what is the best way to approach that you know do you have all of your different variants.
Within a single component set here or do you start to break it down to maybe you have just your primary button and your secondary button each as their own component sets um where this breaks down is once you are using those components if i take a look at the local ones here.
Um we can see i have just the button right here where i could drag it out and i have each of those priorities here or if i didn’t have this i’m just going to delete it now we would see in our assets panel we can intentionally choose if we either want to just print out a primary button.
Or if we want to bring out a secondary button um i’m a big fan of always kind of giving some visual search opportunities that are there so i like that second option should i do a preference between the two i honestly don’t really have a preference um myself um what i have.
Found though is um and this will be a topic we’re going to talk a bit about in a little bit later today too but the importance of listening to the consumers of the system and you know having your asset libraries evolve and adapt based on the teams that are using them so i’ve i’ve seen this both ways in.
Different teams libraries um i i tend to lean more towards this one because it’s a little closer to the code implementation side of things um at the same time things don’t always have to map one to one again it comes down to listening to the consumers i think yeah you bring up a really good point in that as people that.
Are on a design systems team we’re still making a product our product just happens to usually be people that are internal to the company that we’re actually building these out for so treat it like that do as we saw in the comments here some a b testing with this and really listen to the people that you’re making these things for there’s.
Going to be a right answer for you but not a right answer for everyone absolutely so that’s a little bit of a recap of where we left off this is really where we stopped on which way do we plan to roll this out and um.
We then saw features at config with the introduction of component properties which aims to make it so we don’t always have to create all of these different variants um also updates with auto layout you know individual borders just some key key things that working as a design system manager and contributing into a design system make.
Life a lot easier in my opinion um and being able to very quickly start to edit components so we’re going to look today as we are continuing to build our library and get towards that v1 that we want to publish you know how do we take a moment to pause and implement those feature updates to.
Um really start making a bit more robust even in our kind of scrappy v1 that we are putting together here uh so for that i’m gonna hand it over to jacob in a moment here uh but we’re gonna actually switch over you see here we have a new uh we’ve kind of duplicated our sticker sheet and.
We’ve turned this into library draft we’re not entirely sure on naming or anything like that yet but um we’ve gone through we’ve been doing some work behind the scenes you know being the design the system team just starting to do some work and we’ve started to do a little bit of.
Polishing and grouping of our components into what seems to be aligned with what we’ve seen from our product team so far and jacob’s going to take it away here and do a little reintroduction into uh component properties um so folks can see your panel i’m gonna switch over and let.
You take over the share here not a problem so as chad mentioned we launched some cool stuff over at config one of those was component properties and i want to go through and just kind of share what those component properties can do and how they can really help you when setting up your components today.
So let’s kind of jump right into it first and foremost this was our previous kind of established set of buttons that we had here and we noticed we had variants for things like icon before icon after and the annoying thing there is that these are just small little pieces of this component but in order to support.
Each one of these we had to build out four different variants for each one of those options even though it was just the presence of an icon so if we really kind of map this out and how this kind of looks in terms of documenting that’s not it in terms of documenting what these are.
We just had our default button here underneath that we had a icon before and below that we had this icon after and this is really how we would describe these things in code but if we look at how we’re actually consuming these in the variants we have this thing down here which is really like.
What is this this is our behavior this is whether or not there’s an icon that’s there and it’s not really mapping out to code exactly how we want it so we can re-architect this a little bit to really match that appearance in code which will really help with that designer developer handoff that’s there.
So the first thing that i’m going to do is i’m actually going to delete some of these variants and this is where we’re really going to see the power of component properties and that it reduces that variant explosion so what i’m going to do here is i’m going to go ahead and copy this icon first.
Reason why i want to do that is i’m going to start with a button that has all of these options combined and you’ll see why here in a quick second the next thing that i’m going to do is i’m going to delete all these other variants that are up here now we have just a button that has all.
The combinations mixed into one and so now i’m going to do is i’m going to go ahead and create some component properties i’m going to do this one of two ways the first way i’m going to do it is i’m going to do a top-down approach this is where we go ahead and select the actual outer frame of this entire state group that’s there and.
We’re going to go to our properties panel which is what our new thing is here and we’re going to create a new property you can see inside of here there’s four separate options the first is variant that’s the old set of variants that we know and love the next three are booleans which allow.
Us to toggle layer visibility on and off instant swaps which allows to actually toggle the instance that say an icon is and the last thing there is text these are all essentially attributes that we would see inside of html and are really going to map and allow us data entry into our components so i’m going to go ahead and create a.
Boolean first and i’m going to name this icon before i’m also going to set the value to initially be false and we’re going to see why here in a second so i’m going to create this property now that created this property it isn’t applying to anything just yet and we can see that in the properties panel over.
Here it’s not used within the component so now let’s go and apply it to this component as well and since this is our icon before i’m going to go ahead and select this icon before and i’m also going to use our new multi-select tool which will allow us to select all matching layers there.
And now i’ve gone and selected all these matching icons what i can do is i can bind this component property to the visibility of the layer that’s there so i’m going to go over here click our component property icon and i’m going to apply the boolean property i come before.
And remember the initial state of this was false so when i apply this we can see that all those icons now disappear i’m going to do this as well and do this from a bottoms up approach so this time i’m going to select all of our icon afters that are there we’ll select all of them.
And now i want to go over to this layer to apply a boolean property instead of selecting icon before i’m going to create a new property and i’m just going to name this icon after and i’m also going to set this to false so we can see that now disappear and we’re left with this button that’s there that’s in a state where if i bring this.
Instance out i now have these things that is icon before and icon after and by clicking on these i can toggle the presence of that icon before or after the great thing about that is now i’ve been able to do that in only four variants whereas before it took me 12. let’s go a step further though and rig.
This up with a few more options the next thing i’m going to want to do is select all of the text elements that’s here and notice we have this content field that’s new to figma we can go ahead and change this to whatever we want but i can also bind a component property to this.
What i’m going to do is i’m going to bind a text property to this so i’m going to say hey i want this button label to be a value of let’s just say button i’m changing this just from the initial one that’s there just we can see that swap out so now i have a component property it’s.
Named label with the value of button and i’m applying it to all these text fields when i do that what we see is they all update like that and so the cool thing there is now when i select this instance i can see my label which allows me to change the text of this button now in the state of a button like this.
It’s not huge having that immediate access to the label that’s there but if you have more complex components like a tweet component which has an author name a title to it a date a big content box all these other elements that are there it can be quite helpful to have easy access to all those fields and know how they.
Map out the other thing is now when i hand this off to a developer if these are the same attributes that they have in code they can very easily match that one to one so that’s some of the power of component properties and it’s going to be really exciting please please please go out and.
Use it the last step that we’d want to do here is clean up some of the existing states that we had so before we had things like our icon false and true i can now delete that property since it’s no longer really being used inside of here yeah anyway chad i’ll hand it off to you.
That’s how we create component properties awesome and uh you know one thing that jake was showing there which you know i find really really helpful is that multi-select of within a component set how it will automatically select all the matching.
Layers um you know i’ve used simulator plug-in in the past to do some of that i’ve used the edit menu and select all with matching instance on some things if i’m doing nested instances um sometimes i just manually select as well but you know that is a huge time saver for me as a maintainer.
Especially when you’re doing those big refactors that multi-select is just so critical absolutely so the next part that um i want to show a little bit about is with the auto layout updates and how that can also help us in building our components so for example here i’m going to look at.
This input that we had started to create last time i’ve already gone in on this just one particular input and i’ve detached it so we could see what the structure looked like and you can see here that the overall input field you know we just had a frame for it here.
We want to have a floating label on there kind of material style um but really just okay using negative um spacing on there and you know it’s not a very flexible component it’s very manual right now um with everything resizing we can kind of get fun little upside down states we can get.
You know people could start to set their own sizes the helper text here but let’s take a look at how we can make this a little bit better with auto layout so i’m going to duplicate this here and if i hit shift a just to apply auto layout to the overall input.
You know this is what we would expect it gets a little crazy everything is grouped together in you know this one structure here um so i’m going to just start to go into all the layout here and change a little of my positioning of things um but what i can do if i expand this structure here.
Now i’m going to do a little bit of cleanup here so let’s actually name this label um our input area here let’s give this auto layout as well let’s just call this field we have our helper that is down here maybe i don’t want this all to be in.
Here maybe i do but i can start to do a little bit of different setup with it now so here i could go ahead and i could drag this out so it’s not a part of it.
Maybe i want to have my helper out here we have our input field here let’s do this and let’s hit shift a again to create a new outer frame and we’re going to just change this up a bit so we’ll go field let’s actually not do this we’re just.
Going to make this we’ll leave it input text and i’m going to ungroup this i said the close icon there now i’m going to take this field here and i’m going to set this to fill container so it will always be whatever this outer frame size is.
And i can now start to set this up where now my helper text will always be 4 pixels below here i’m going to also set this just to hug the contents of no this is my outer right let’s have that fix my helper text here we’re going to go in and set to fill but now if i want that floating label.
You know with setting up everything in auto layout before i would have to maybe create a frame with a .001 pixel height on it and do some positioning hacks but a cool thing with auto layout now is using absolute position within it so i can actually just hit absolute position on the label here and now i can freeform drag this to.
Anywhere i’d like to place this so maybe i want to put this 4 maybe 12 i’ll put it 8 over now on the input for the field here i can start to assign my left and right padding values maybe i want 12 pixels maybe i just want eight pixels.
Uh on the top and bottom i can affect the size of this here by saying um maybe i want 12 pixels top and bottom let’s do the same thing so that our icon here isn’t causing extra space we’re going to absolutely position that and when i absolute position i get constraints for that absolutely positioned item.
So here i could set this to if i want it left if i resize this outer fixed size it’s going to stay anchored to the left side or if i go ahead and set this here and i anchor this to the right now as i resize this component helps if i grab the.
Right one here it will resize with that and be constrained to that right side but now i’ve got it where my input is actually using auto layout um it gets a bit cleaner so once i do turn this into a component i’m just gonna do this with uh command option k on my mac keyboard and if i create an instance of it.
We can now see that i have auto layout for everything um i can have this expand if i hit return i can make it wider i can polish this and make it a bit cleaner but that’s just a little bit of how absolute positioning can help in auto.
Layout for some of the component structure um if we come down here we take a look at a completed example that i’ve already gone ahead and updated very similarly there if we take a look at the structure you can see here we have you know the field the label the helper text for it.
We’ve already wired this up here where we already have some different variants for it we have that absolute positioning on it and if we take a look at the overall field you can see we’ve already set this up with all of our component properties so now when we take a input field component.
I’m going to actually just do that here i’m going to use an insert and i’ll say input field i want to just bring this from my local components here so i insert this field now my variance set here this is still pretty reduced and you know.
Thinking back to the introduction to component properties live stream that jacob and i did um there was a section there you know when you use variants versus when you use props and you know how you can use them in combination with one another where um one of our engineers naomi really walked.
Through that and just as a refresher things where you still are going to want to use variants in your library is things like state changes or you know different visual treatments that aren’t controlled by showing and hiding things or swapping things out.
This will also set it up for when we start to create interactive components and you know we want to be able to change the different state based on hovering and clicking and interacting with these components so now that we have our excuse me our completed input component.
Here you can see that we can always switch between each of those variants we want password type if it becomes a search and one of the cool things with properties on here we notice that some of the properties we didn’t include in some of the variants so similar to how you would create.
Variant component sets before and you know you had to build an instance for every supported piece you can also remove or add props only on specific variants so on our search here you know we don’t have any instant swapping whereas like.
On our text if i were to go in here and i turn on the helper text um you know i could put errors and i get the icon suddenly appears on there yeah i can have all these different pieces show up whereas um i didn’t have to create an actual variant for all of them so we.
Can actually see the different props changing based on the type so i’m gonna pause for a drink here real quick before we get into a little bit more on the polished side all right so now that we have some of our components you know we’ve started to organize.
Everything here in this example library where we we’ve we’re putting everything together in one library for our v1 because it’s a very small v1 for testing we’re not worrying right now about what should we break out into separate files you know we just want to get a v1 published again.
To start getting feedback and see how teams will start to use this so the last thing i want to do before i just publish this is start to clean it up a little bit now as we’ve created components you know we’ve been thoughtful with our naming and we’ve gone in and we’ve named our layers through the components.
Um a reason when creating a library that i find it helpful to name your layers is people are going to be using these components in their files and it’s a good way of kind of self-documenting what certain pieces are of that.
Component by having a clear layer name for it um also as jacob talked about naming of properties um the naming there it helps people know whether it’s a designer a developer you know a pm a ux engineer a content writer you.
Know it helps them know what areas should be changed what can be changed what things are named um so applying in your library files naming to layers can be really really helpful um as we start to just review everything you know i look at the styles here um you’d say i have a lot of just frame and.
You know some of us can say yeah yeah this is named frame 22 that is a name that’s totally helpful you know uh you know but myself i like to go in and i like to clean these up um you don’t have to go in and change everything.
Um a really cool thing is i can just select all these layers and press command r on a mac or control r on windows and i can bulk rename things and i use the bulk rename a lot so here these are all our type examples i’m just going to give it a simple name so we’ll just call it.
Type example and suddenly we have all of our names right here uh same thing if i take a look at the colors here i’m gonna just rename these to color swatch and this is just a little bit of the naming polish in the library so if people come into the library file.
It’s a little you know cleaner experience here now i could just bulk rename these and just say these are all um evolution let’s clean up our typos as we go so i i do the typo on it so yeah name this elevation there we go um i could rename each of these or i.
Could still even bulk rename and i can get a bit more advanced with it you know maybe i want to call these um elevation i’m going to call it level and maybe i want to auto number it so i see it’s kind of going reversed right now i could go number down here um and i want to add a.
Zero so i’m just going to use a dollar sign capital n to go in reverse and zero um and now i can rename it’ll automatically number those and hey they actually match what these are named already uh so some cool ways to do a little bit of polish with your layer renaming do it in bulk there.
Another really really helpful thing is you’re starting to apply polish is you know when we when we first started thinking about what all goes into a design system right your asset libraries it’s just one part of it like your library’s that’s not your design system you know we still.
Need to think about things like documentation we still need to think about how are people going to contribute to this how are they going to get feedback um when should things be used when is it okay to override um how do people contribute back to it you know there’s a lot more thought that goes into this.
Um we’re not going into all of that right now because we are just at the building library asset phase right now so um but what we can do um and i’m actually jacob maybe you want to talk a bit more about this um just thinking about little bits of documentation you know you may not have.
It yet and that’s totally cool to not have it but anything you can do to again start to provide context for consumers can be helpful so um we can apply little snippets of documentation to our components as well and jacob’s going to walk us through.
That absolutely as chad mentioned documentation is super important when really looking and creating a complete and robust design system i mean we started if you look at the evolution of design systems we started way back when with these brand guidelines that companies were using.
Around hey here’s how you want to consume these things to stay standard and have a really consistent look and feel for everything that you do part of that process is obviously providing these robust components that people can reuse but understanding how to use those components can sometimes just be as important as creating those.
Reusable ones so i’m going to show you how to quickly create some documentation inside of your libraries that you have there go ahead and share the screen again and notice we have this out here and what i’m going to do is i’m going to select the outer frame of this and we can see that i clean this up a.
Little bit and remove some of the variants that we weren’t using before but there’s still no way to know really how to use this component and when to use the primary one versus the secondary one so what i’ll do is i’m going to add some descriptions to his component itself if i go over to the component.
Panel over here and click component details this will allow me to do two things number one it allows me to describe how i want to use this component number two it allows me to link to some documentation as well this is especially useful if you have really robust documentation somewhere else but you.
Also want to provide a little snippet and blurb for how to use this thing in the context of figma i’m going to show you where that appears right now and how to add some of that so i’ve had some stuff prepared already i’m just going to drop this in here and so this is just describing how to actually use and consume this and when.
You want to do certain things so i’m just going to say yep that’s my documentation there now if i actually look in my asks panel over here and look at some of the local components i have this button over here and one little benefit that we have is now when we hover over this we get that same.
Description there inside of that assets panel it allows us to provide a really simple and easy way for designers to quickly understand hey how should i be using this component am i using the right one this is especially helpful when you have multiple components that all look kind of similar and you’re not sure which one.
To use in which context some of those could be like toasts for instance there’s a bunch of different types of toasts some are tool tips and it can be hard to know when to use one or the other so providing the small little description field is super helpful in that regard next i believe chad you’re going to walk.
Us through how to actually publish these things and push them out yeah um and the other thing that i think is also really really helpful um and that jacob touched on there is you know having that description um for knowing in advance when you’re bringing it out but also if we were.
Creating our designs you know we also see we have it right here in the panel too so as he was mentioning about you know different toasts right you might have peanut butter toast that could be one of them you know you could absolutely have that where you can have the description show up here as.
Well and it can also help the consuming teams know what they might want to select based on what they’re designing so it’s really really cool to be able to just include that now should that be a blocker for your rerun release absolutely not you know if you.
Have it there great cool put some of that in there but those are things you can continue to add and publish updates over and over again uh you know at this point you’ve created the components you know you’re in a v1 state where you want to get out there the important thing is you know how do we publish it now.
So one of the last things we might want to do before publishing um we might want to create a cover for it so people can see it they know it’s a library maybe we don’t um i’m just going to do it just for fun i like to always just name it cover um and put it like at the bottom of my file um if i hit f on the keyboard um i get.
All the predefined print frame sizes here i can go in here and i can quickly choose for a plug-in or file cover size i’m not going to design anything intricate i’m just going to call this this is the v1 library and.
We have our different sizes we’ve created here already i’m going to break that because i want to live on the edge and detach just kidding i just want to make this very very large for v1 and i’m going to just set this by right clicking here and i’m.
Going to set this as the thumbnail for this file now the question is where should this live so see i have a big file now instead of just the preview now but when i’m going to publish this out i might want to think a little bit here about where i’m going to have our library files live.
You know right now on our building blocks team here you know we have our inventory for all the work we’ve been doing and we have some presentations as we’ve been sharing things with the community and stakeholders but maybe i want to plan for having future libraries as well and one thing that we commonly see teams do and we recommend.
Is to have a dedicated project for your libraries so i’m just going to call it simply libraries and i’m going to create that project here and now if i look at my building blocks here.
You know i can go in here um i have this favorited um so i could drag that over there um but for right now i’m just going to go ahead and rename this as well and we’ll call this um where’s it called ui library and let’s go here.
if i favorite this here i should be able to have it show up in my sidebar here and now i can come in here and just drag this right to my libraries and now it lives where i want it to live in the library’s project here i’m in the file here and i’m ready to.
Publish this so i’m going to go up by where i’ve named this ui library and i’m going to publish the styles and components now we can see i have a lot of changes here because this is our brand new library so it’s going to have all of our different.
Styles we’ve created all of our icon components all of our components everything is in here i could selectively choose maybe i don’t want to publish something i can uncheck it maybe i don’t want that leaf published um or i could you know opt into publishing specific things maybe i want to uncheck it all and only publish.
The text styles i did that by just selecting the top one and then hitting shift and selecting down to where i want to go for the sake of our first publish i’m going to publish everything though um i’m going to put a description here initial library publish.
And now i can choose do i want publishes just for our building blocks team um or since you know we’re in an organization here i can publish this out for everyone within our twin organization i’m going to just publish this to everyone because hey i want to make it so everyone can use this and start.
Giving feedback so once i hit that i just press publish um then initial publish being almost 1100 components it might take a little bit but um it is now publishing and will be out there the last thing you’re going to want to really do is you know especially if.
You’re on an organization is now that we’ve created our v1 we want to make it so teams can use this and we might want to enable this by default so teams can start to do it the way we would do that is go into our admin settings and then in resources here you can see we have all of the.
Libraries that we have access to and we have our building blocks library that we’ve now just published so i’m going to go ahead and turn that on for i’m just going to do for new design files and this will be on for all files by default in the organization now so.
Now if we were to come in here and go into building blocks theory and maybe i’m going to start a new project for merchandising for twigma and in here i’m going to start creating a new design file now we can see in my assets panel i have that ui library it’s published i can now start to use those components.
That we’ve been building um so i can start to use them bring them out onto my canvas here i can wrap everything in a frame i can now start to use the components um that have been put out there and you know we talked about gaining.
Feedback this is a great way that now teams start to use them of course you’re going to want to communicate these changes out to teams there’s a lot more to happen from here because this is our v1 we’re no we’re close to done right we still want to address documentation we’re going to want to revise components there might be things that.
We haven’t considered in these components yet and teams might want to give us that feedback or contribute that um so that stuff that we will continue to cover in the future in our next building block series where we’re going to jump into a bit more on you know where that feedback comes from.
How to take action based on that feedback um you know jacob i think one cool thing maybe even we leave here you know as we are finishing up you know we’re starting to design um if you are newer to figma or using components from libraries one thing that’s really helpful is um right in your panel here where we have.
Now our primary secondary we have our documentation we also have this icon and we can always go to the main component in the library so you know maybe we’re using this and we’re like wait why does this button have eight.
Pixel corner radius our buttons are supposed to be rounded like i could override this in my file sure i want 360. i want to make that you know rounded pill shape button but i could also go back into the library and i could always leave a comment by using the comment tool and just saying.
You know shouldn’t these be hill shape and i could tag jacob on there so i could start to leave comments in the library file um this is always a great way to get feedback and people just drop comments right in your files so.
Um more to come on that but uh that kind of concludes a little bit of what we want to really show today as you know we’ve now published that v1 it’s now out there where teams can start to use it they can start to see how it’s working uh man we can go into the mode of.
Hey learning mode you know while we’re writing documentation we can start to learn about how teams are using it and we’ll cover that a bit more in the next building block session but i want to switch it over to q a at this point and uh jacob i know you have uh.
Possibly maybe you’ve possibly taken a quick peek at some of our q a i have indeed so we had a couple questions about this this is both in the chat as well as through the q a and really the base of this is what people are asking is what happens when you update your components to use.
Component properties and when you push those updates out and you actually have designers press that update button um in the general case we transfer those overrides however if you are doing a major re-architecture of that component as well there is a chance that you could lose overrides in some situations what.
We really recommend is treat this as a product you wouldn’t release a product without testing it first so go ahead and do those small updates and then test it in isolation first to make sure that things are updating correctly if they aren’t updating correctly what i really look for is number one make sure you haven’t.
Deleted or renamed layers that are there rather just apply those component properties to those layers directly that you already had the other thing is a lot of times colors may not transfer correctly when doing instance swaps make sure that the layers the components that you’re swapping between with those.
Instant swaps have the same layer hierarchy that’s inside of them that means flatten those icons to make sure they can transfer from one layer inside of one icon to another layer in the other icon all right i think the next one we have a question for you chad oh chad you’re muted.
That would help if i came off mute so um yeah a great question about i’m using absolute positioning instead of the container with auto layout um you could absolutely set it up uh either way um a cool thing with that is yes we could set that to use auto layout and always have it on.
The um right side there for the icon um if i jump back i’m going to switch back over to the component here as an example um one reason i wanted to do the auto layout on there if i were to again take our component here in an instance of it.
Um actually i didn’t create the prop for that yet so i i didn’t create a prop for why that would be there yet so um here we have the action icon on here once i’m using this let’s say i have this i want it to be a bit more.
Realistic of how it might be in code so we can see i have on the background here i actually have a color background behind it to mask the text behind it right here so um it kind of overflows like the component would when it is in code you could do it without absolute.
Position as well um if i were to go here and um let’s actually detach this um yes i’m going to detach command option shift b and detach if we go into the component here and i remove the absolute position from it like it’s.
Way over there now um i could go on here and change these where i’m going to just fill container we see i start to wrap in the input field now so it’s not necessarily as the same behavior as it would be on the code side.
There because it’s still reserving the space for this icon yeah great answer um there’s just so much nuance when dealing with auto layout and yeah you really do have to test those out and understand the behaviors that are there um this is a great question that we had uh which is will we ever be able to bubble up.
Properties in nested components to the parent component this is in relation to component properties and this is something we see quite a bit especially in base component architectures that are out there where you may have a parent component that consumes a base component and we want to be able to control both.
The parent and the base from that parent component this is something that we are working on right now and not only that we dove into this a little bit during our last office hours for component properties that i think we did about a month ago i’ll paste it as a link inside of the chat for people to actually see and dive into.
If you really want to dive into the nuances of component properties but there’s two upcoming things that we’re going to be telling people about four component properties number one is bubbled properties because we are very very aware of this problem that will be coming in the next couple of months the other thing that’s there is.
Suggested values so with instance swap properties that we see typically we want to reduce the amount of options that are there that people can swap between classic example there would be let’s say you have a button and that button has a icon inside of it and you typically only.
Want maybe like eight of your icons out of your 1 000 length icon library that’s out there to appear then you can suggest those eight values as options for that instant swap we’ll be launching those things in the next couple of months so keep an eye out for those.
Awesome um speaking of icons so best way to organize or categorize your icon library um do you have resource recommendations um wow there are there are so so many resources out there in the community for icons um.
Now the google material icon set does a great job of breaking down kind of categories of icons um we touched a little on this in the last building blocks as well on you know do you put all your components within different frames do them within pages is everything dumped together in one.
I always think of the material icon file because they use frames to group out the different uh sections so you’ll have like action icons and then it’ll have all of those main components within it um there’ll be like a editor section um so they have those in there um i use that icon set a lot i.
Believe actually that’s what we’re using our twig ml library here as well um but you know the community is a great great resource figma.com community um you know the best way i found is you know take a look around and again you know can i see what works best for you and for you know your organization and.
Your teams um there’s no right or wrong way yeah and as chad said like look at those community libraries flute is another one that does a really good job of categorization that i found the other thing that i would say that’s a really good kind of tip and trick is.
That description field that we showed you from earlier that’s actually indexed by the search as well so one thing i find really helpful is a lot of times it’s really hard to find the best way to organize an icon library but what you can do instead is optimize it for search so what i’ll often do is i’ll select one of these icons i’ll go into the.
Description field that’s there and i’ll add aliases look we already have some right there so things like favorite or like if you search for these items they’ll still reveal this heart icon that’s present there’s a few that actually pop up for like there but nonetheless it’s a great way to go and just optimize those really.
Really large component sets awesome how to add a component to an existing component set so i think this would be another variant right jacob yeah i mean this is pretty standard all you do is you can go and either go into that properties panel and just go create new variant and it’ll go.
And add in another one inside of there or there’s also an inline create component one we can see the little purple plus icon that’s at the bottom there both of those will go and create another variant for you you can go and add and modify and do whatever you want with just make sure to republish afterwards.
Yes yep cool see how might one approach figma as one source of truth for documentation and not rely on external tools could the new widget feature empower figma in that process and are there any tools you would recommend there’s a bunch of tools that are out.
There for documentation i can’t recommend one specific one but i’ve seen a lot of companies add in documentation into the library itself that has the components that are there and that way if people go and use that go to main component shortcut that’s there they can see that documentation in line with the source of truth for those.
Components yeah um this is another one that i would say um this kind of goes on where we left off on um okay what comes next one you publish that v1 you know if you don’t already have documentation it’s a great time to start writing those docs and you know incorporate your feedback into the.
Decisions going into the docs um but when you’re you know when you’re getting started like you can use you know the notes app on your computer you could use a you know uh notion you could use paper doc you use google doc you could use just the canvas.
In figma um you know the important part is that you do start to document though and start to have those that clear documentation um again the fema community does have some great resources out there um where there are examples of la libraries that have documentation within.
Them whether it’s getting started or set up or on component use a couple that come to mind the shopify polaris for admin their component libraries their style libraries they have a cool intro section there um fluent uh libraries microsoft fluent they also have some documentation in.
There um and yeah definitely stay tuned for the next building blocks because i think documentation is going to be a topic we dive a bit deeper into in the next building blocks absolutely and i think we’re just about uh out of time here we’ve finished up on those main questions that said uh we did notice that there were a lot of product.
Suggestions inside of the q a that’s there we have an actual place where you can share ideas directly with us us product managers read this form quite a bit so please please please use this i’ll paste it in chat here it’s just our standard figma forum and our share an idea category that’s there so any feature.
Requests that you have or suggestions for improvements please drop them in there and chat i’m going to hand it off to you for a little outro awesome yeah and thank you for posting that link jacob and you know really a couple other resources for you as well um you know some of that being tied to.
Forum.figma.com you know great place to go for help or share your ideas also help.figma.com for getting help and friends.figma.com where you can learn about uh local meetups you can learn about the friends of figma discord uh if you haven’t joined the friends of figma discord um.
Give it a try check it out uh i know that uh rda team we like to hang out in there sometimes we’ll just do random impromptu q a sessions on there sometimes um other live events on there so feel free to check that out we may or may not may.
Uh have a q a session coming up next week so if you do have just questions want to hang out for a bit uh yeah definitely check that out uh so thank you again so much for joining us um you know i hope that everyone really got um a lot out of this gave you some ideas.
To think about as you’re starting to build those libraries or you know think about tweaks you might want to make to assets you may already have um if you did miss some of it you know have no fear as i mentioned at the beginning this session was recorded and will be available on the figma youtube soon um you can always check out upcoming.
Live streams at figma.com events um we have cool design ops in the file one coming up um configure registration is not live that is a mistake on my part apologies everyone we are not uh we are not having config again here uh but if you do have suggestions and ideas uh for future live streams please let us know uh send us a message to community.
Figma.com with that thank you everyone thank you all so much for joining catch y’all next time
Figma is free to use. Sign up here: https://bit.ly/3msp0OV In this stream, Figma Designer Advocate Chad Bergman and Product …
Figma Official Channel,building,polishing,your,product:figma_design, audience:designer, language:english, format:standard, produced_by:design_advocate, theme:design_systems, event:none, series:building_blocks, type:workflow_tutorial, level:advanced, primary_feature:components, secondary_feature:interactive_component,