hey everyone it's chad and clara and today we're going to talk about maintaining component
libraries and enabling contributions from consuming design teams as a maintainer some
of the most common reasons why you update your libraries are to add features or properties
to a component for parity with the code side adding support for new figma features like
interactive components or auto layout or fixing little bugs that may have been introduced
into your assets when you have a published library that your teams rely on for their
daily work if you're working on these kind of updates to your library and teams are coming
into the file for information there's a risk that work in progress component enhancements
may be copied out and used in designs when they're not quite ready for production use
yet on the contribution side if you solicit contributions to your libraries and your organization
today your workflow may involve the contributor detaching a component to make updates sharing
that file with you as the maintainer and some manual copying and pasting back into the component
library before publishing if work has also been happening on those same components in
the library the contributor could be working with an outdated asset which can lead to even
more work for the maintainer when accepting the contribution
let's take a look at how we can make both of these common component library workflows
much more seamless by using branching in our organization here i'm one of the designers
maintaining our design system assets and clara is a designer on the product side i'm starting
my work for the day and open up my file as i'm making edits i notice the buttons aren't
scaling correctly though i'd normally ping the design system team over chat i know we
have contribution guidelines in place so i'll start there
i'm going to head back to the library file and propose an update by creating a branch
though i'm a viewer on the library file i can still create a branch since this is a
bug fix i'm going to include the correct prefix in the branch name to indicate what type of
work i'm doing once the branch is created i'm going to fill out the contribution template
the design system team created in the contribution type area i'm going to select bug fix
since i'm not contributing a new component i'm going to mark everything else as not applicable
let's go ahead and fix the alignment on the button meanwhile as claire is working on a
contribution in a branch i'm going to start some enhancement work on our components talking
with our design and development teams we've agreed to add a new button variant to the
system and change the name of the destructive button to danger to align with changes coming
to the code side i'm going to create a branch for these enhancements so i'm not disturbing
the current source of truth all right so let's take our buttons and we're just going to bring
those in here and we'll set that up
all right and while we're in here let's also change the name of the destructive button
to danger
all right now that i've made these updates and the changes are going to be going live
on the code side i'm going to merge my branch into main
and since i'm an editor on the library file i can go ahead and merge this without needing
to request a review
now that i'm up to date and have my proposal i'm going to request a review on my branch
in the description i'm going to write a brief description of the issue and what i changed
the modal is already suggesting reviewers based on the editors of the main library file
i'm tagging in some members of the design system team chad and tom
now during our weekly design system meeting we go through all of the branches in our library
files to check for any that may be tagged as in review in addition to a tag on the branch
name when a review is requested the reviewers who have been tagged will get an email and
a notification inside of figma if a notification comes in with a high priority prefix like
bug fix hotfix etc will typically prioritize those and take a look when they come in rather
than waiting since they may have a large impact to other users as well here i see that clara
found a bug with the buttons so i'm going to open her branch and take a look here i
can see that she's already made the fix in her branch so i'm going to review this
and everything looks good here so since i am an editor on the main file i'm going to
merge this and then i'll publish a new version of the library
i now see that there's a library update and when i accept the update the button is fixed
and i got a shout out in the release notes having these contribution guidelines in place
can help reduce back and forth between teams while tracking any updates made to the system
even though this was for a smaller fix this workflow can be used for any proposals you'd
like to make to a library file
we hope this can help you maintain and evolve your library assets and further solicit contribution
to your design system libraries in a collaborative and structured way also be sure to check out
the design system contribution template in the figma community linked in the description
below see you next time