My Dear Friends of Figma in hello everyone welcome to schema I am so excited to be here I’m just going to take it in for a brief second this is our first live event that we’ve had since config 2020 which quick show hands anybody with us for config 2020 yeah welcome back I’m super excited to have you back and obviously for everyone else.
Super excited that you’re here config 2020 was really my first start at figma um I was happy enough to actually do a speech there around improving design efficiency and previously I was over at atlassian where I was managing their Design Systems teams as well as their design tooling teams and it was a ton of fun just going to that conference and.
Interacting with everyone here at figma awkward story though I did not do my due diligence uh during one of the actual speaker events that were there I sat down and someone sat down next to me I was talking to them and they’re like oh yeah you know my name’s Dylan and I was like okay whatever um and I was just talking through with.
This person and finally I was just like so what do you do luckily that foot in the mouth event did not prevent them from hiring me and so I’ve been here for about a year and a half now I’m actually working for them remotely out in Seattle with my partner my dog that’s there that’s avocado um yeah and anyway I just want to jump.
Into some really fun things that we’re talking about for Design Systems but before I do that I want to do a flashback to schema 2021 where show was talking about the history of Designing for the web and even back in 1997 some of the core tenets of design philosophies were still there that we were using today.
One of those things was this importance of free-form Design This ability to design and explore things in unbounded creative ways to really not be hampered by all these like imposing structures and it’s really a point in time early on in your design process when you’re thinking about not how do I make something but what is it that I’m.
Actually making on the other side of the pond is this concept of structured Design This more restrictive design that’s there that’s really important especially for Branding processes that are there to make sure that we have consistent implementations of all the components and colors and spacings that we have.
At figma the harmony between these two things has always been Paramount and even really from the beginning of figma’s Origins we’ve always wanted designers to be able to explore between these two worlds freely but if we look at these things there are complexities of them because at each point in that design.
Process you’re going to want more either freeform design or structured design and if we index too much in that free form design what can happen is we’ll lose sight of the actual brands that we’re trying to make for likewise though if we index too much into these structured design world what ends up happening is we lose that spark.
Of creativity that’s in all of us we lose that part of us that makes us designers and so that’s a little bit of background of where we were coming from and the background of design up until today but now I want to talk about what Design Systems really look like now and what we’re going to see in the future as well.
Design Systems today are more powerful more flexible and more sophisticated than they ever have been but the other side of that is that they’re also harder to maintain this is one of the things we’re really seeing as we add these things to support power and flexibility is we create a lot more things that we have to think about.
As design system managers and so I want to highlight three particular areas where we are seeing design complexity increase and the ways that we at figma are actually thinking about how to address those one of these is layout layout is integral to any sort of design but early on in any sort of design.
System when you’re making components layout is usually composed of a single representation of that component that’s there later on what happens we get some ask from designers to support multiple versions of layouts where we can shift the structure of them and change around the order of components inside of them.
This was great for using variants inside of figma for this you could draw out two different versions of it and they could easily swap between them the problem there is what happens if you have these optional elements that are a part of this something like an image that’s a part of one of these cards yeah you can do it in variants but then.
You encounter this problem of variant explosion which I’m sure for any design System Manager here has had to deal with and so we introduced this concept of component properties to really address this to allow for these optional elements inside of components themselves but variants and components don’t always work in the way that we really want to.
To support all the demands of designers take for example these entirely different representations what is clearly the same component we have these cards that are here that what they do is we actually see one that’s in a horizontal layout and one that’s in a vertical layout we can’t easily just swap the orders of layers in order to.
Actually support these things we have to draw each individual one out and represent all states that designers want when we have these layouts that really vastly change one of the ways we’re seeing designers approach this is to pull out each of those individual components and represent them into a larger component.
That’s purely dedicated to layout this sub-component based approach allows you to really vary the representation of your components throughout any representation that your designer truly wants and the cool thing about this is they will use them in ways that are absolutely unique and in ways that you as a design System Manager may have.
Never even considered next I want to talk about theming this is a hot button topic that I’m sure is on everybody’s mind when you’re just starting out though you’re just building a component without any theming at all it has these colors just baked into it and you also probably have a ticket.
Somewhere in like your ticketing system of your designers or other users asking for dark mode and so we added dark mode at some point we have this light and dark mode representation of each of our components and the complexity is starting to grow but what happens when we have multiple sub products and Brands inside of our.
System that all want different representations of their brand color or even other things such as border radiuses what we’re seeing is just like with layout this complexity is growing exponentially and likewise so does the maintenance of it and so one of the ways we’re seeing.
Designers actually approach this is by separating out the presentation of the actual component from the structure of that component Esther Tran who is one of the creators of the figma tokens plugin calls these headless Design Systems and I really like that term because this approach that’s here to.
Separate those two things out mean that you can support things with infinite variety inside of different platforms as well as different products as well different brands that are out there the other nice thing that I really like about this approach is it means maintenance of these components is vastly easier as well.
Whereas before if we had three different components that were there for each of Our Brands inside of our system we would have to go and update each one of those and the maintainability was high there was risk of error when we were duplicating those efforts over and over again but with this kind of approach the great.
Thing about it is you can update that structure and it goes ahead and rolls out to all those sub brands that you have the next thing I really want to talk about that’s really increasing complexity here is process and a really robust Design Systems what we’re seeing is that process is actually.
Baked into the design system itself this is an example of one of our figma libraries that’s here showing off just a little memo of how do I contribute back to this file because really what we’re seeing is that Design Systems are having this issue with organizational complexity that’s there.
And that’s not always the case when you have a smaller organization such as this it’s really easy to talk to everyone in your org you can just be like hey Bob I want to update this component and they’re like yeah cool go do it and it’s done but what happens as you grow as a team is sometimes that design team you’re.
Fairly big and you’re not really sure what every single person is doing at any given time in that system so updating the system creates risk and especially at an Enterprise scale you’re almost guaranteed to encounter situations where one designer will be doing something that’s also what you are working on.
And so we’re seeing a few different ways that designers are going about trying to support the complexity that’s here because what we’re seeing is just like with theming complexity and layout complexity organizational complexity also lends to design system maintenance issues a few of these ways that we’re seeing.
Are really implementing this concept of not test driven development but test driven design and so some cool implementations that we’re actually really seeing here is this concept of having visual regression testing inside of your files themselves there’s a little fun one here where you actually like take a component detach it.
Put it on top of another instance that’s there and use a blending mode to show the difference between the two that way you can see when overrides are lost upon update the other cool thing that we’re seeing is really the embracing of branching inside of figma this is especially critical for any.
Large design system that’s out there and a great process that we’re seeing is encouraging people to Branch off the design system and submit a branch that’s there to be merged back in having those documented processes is critical to avoiding small Splinter Design Systems from actually splitting out of your main core one.
But let’s step back a little bit and look at the bigger picture that’s here if we look at these things this organizational complexity and its design system complexity are really all borrowing from a very specific area because Design Systems really sit in between both design and code and we’re only talking a lot about the.
Design aspects of this but the code aspects have so many things to offer and if you look at the problems that we’re encountering here such as different components well if you look at the code side they’ve been doing slotted components for years now this is really just a code concept that we’re borrowing on the design side.
And likewise theming the separation of presentation and the hierarchy of the data inside of the component HTML and CSS there’s plenty of representations of this that we’ve seen in code for years and what about branching and merging test driven development these are clearly code Concepts.
And so one of the interesting things that we’re seeing is as the complexity of design actually Trends towards code what we should really be doing is looking to our counterparts on the engineering side and seeing what processes that they have to support the complexities that we’re encountering in Design Systems today.
Thank you and these ideas are very helpful but there’s always a butt that’s here and there is an important caveat at the same time as polling these ideas in from code we have to be careful with overdoing it in the process that’s there and putting design into a box there’s a reason why we at figma have.
Never allowed designs to managers to prevent designers from detaching from a component it’s because you should trust these designers to explore and to innovate and we don’t want to restrict that creativity that’s there because really the flexibility of design is what makes it design that ability to.
Explore to go in and create new exciting things that are there and if we lock that down we’re going to lose that spark and so there are things that are unique to design that we really should embrace that creativity that exploration and even that access of who can participate with that actual design system that we have.
And there’s things that we should learn from development on things like branching and merging or test driven development or design and one of the things we saw early on with the creation of Design Systems was design system managers would come up and say oh well the purpose of a design system is to reduce the chance of.
Designers making a mistake and that’s not what Design Systems should be we should trust in our designers to explore and to really go in and dive in to the brands that we have and take them to new levels because really the purpose of a design system is not to constrict but it’s to reduce that friction that’s there so we.
Can increase the creativity of the designers that are using them and so with that I want to welcome you to schema where we are going to be learning from some amazing industry professionals that are out there that are going to teach us how to accelerate that design creativity inside all of our teams.
We have an amazing set of speakers here that I’m super excited for not only you to learn from but also another thing that I want to keep in mind is we’re here to learn from you as well and that’s why we have all these common spaces that are here so that we can mingle and really talk to everyone that’s here because you too are the.
Industry professionals and especially for us at figma we try and take the product in directions based off of the feedback from each of you so let’s listen to some amazing talks that are here but also please please please come up and talk to all of us we really want to hear your voices as well we have an amazing schedule here today.
That we’re really excited for there’s a bunch of amazing talks I want to highlight a few of them in particular we have Nathan Curtis’s talk at the end of this which is going to be diving into that complexity of sub components that I was talking about earlier in the talk we also have two actual Fitness speakers as well.
Um Sue and Naomi are going to be diving into the behind the scenes of component properties so if you’re curious about how we actually build features they’ll be jumping right into it and so thank you from not only myself but everyone at figma for joining us here at schema 2022 thanks all.
As Design Systems grow and evolve, so does the complexity. With complexity comes the need for newer best practices and …
Figma Official Channel,schema,nyc,opening,figma, design, product design, tips, tricks, UI design, ux design, app design, figma design, design for figma, FigJam tutorial, prototyping, collaboration, UX tutorial, Design tips, whiteboard, Figma tutorial, Config, Config 2022, design system, tutorial, product:none, audience:designer, language:english, format:standard, produced_by:marketing, theme:design_systems, event:schema, series:none, type:other, level:intermediate, primary_feature:none, secondary_feature:,