I’ve been working on a user interface kit at Gusto for a few months now, which is a project in Figma that allows other designers in our group to try out our components and get a better picture of what’s available. in their designs. There are buttons and shapes, typographic styles and colors, icons, and verifiable cornucopia for reuse and improvement over time.
The other day, I changed the icon in the user interface kit and saw hundreds of components updated in colors, fonts, and other styles, which allowed me to save my entire day. And I realized that a serious and careful approach to devoting all efforts to the method of building facilities will have consequences in the long run.
Get Started
This page gives designers information about what UI Kits are and how to use it, as well as the configuration information they need. This is what this page looks like today. Ideally, this page should somehow serve as a FAQ for questions about the team’s design systems, how to contact us, and the basics of using Figma.
Components
This is a list of all the components available for our design team, as well as standard typography styles, colors, and pictograms. Very simple standard stuff, you’ve probably seen it a million times before. I spent hours ordering this page and thought about how quickly designers could find this document to find a special section like alerts. But the interesting thing about Figma is that you can send links to specific frames in a project, which I find very useful when I point designers to components via Slack.
Patterns
We needed a piece of the kit to help designers learn more about our overall UX models and learn how to put some parts together. This page shows full models and examples of the user interface.
Symbols
We needed a symbol page that housed all the key components that inherited these three pages above. Another place we need is a special area where other designers don’t interact, but I have a variety of buttons and shapes that can be changed. In Shopify’s Polaris design system, they have their own set of web user interfaces that will be in Sketch and have a dedicated page for almost organized.
Naming Components
If you look closely at the picture above, you can see the unknown naming convention of the components: Input / Default, Input / Focus, and Input / Error. This is a hack that helps Figma identify each other’s components and I found it only after reviewing the video tutorials and I recommend reviewing them all before you start working with Figma. these elements.
You can customize this to replace different themes of components in your collection, such as ButtonPrimary / Darkmode or something else. But at Gusto, we do this in a few clever ways: we have multiple user profiles, where the user interface changes depending on whether you’re an employee or an employer. So I created a Layout component that allows people to switch between different interfaces.
Onboarding Designers Is Pretty Dang Easy
I think the second big advantage of using Figma over other design tools is that I don’t have to worry about the UI Kits Figma. a measurement used by our design team. Everything is constantly up to date, so I don’t have to run software or bug fixes to update things.
Recently, we started bringing our designers together and introducing them to our design system so we could discuss with them how Figma works. On the plus side, it allows us to introduce ourselves and explain how our design systems team works with them and their design process.