What’s new | quick notes

Sept. 1, 2020

Quick notes: Today QuickBooks designers start creating, discovering, and sharing with Figma

Launch day: All QuickBooks designers now have access to Figma, the cloud-based design tool that’s becoming the Intuit standard for design creation and collaboration. Design system teams and design project managers across Intuit established the foundations that help Intuit move to this open, collaborative tool.

A number of components and resources are available now for QuickBooks designers:

• Nearly 20 core product design components have been published in the design system libraries.
  • Buttons
  • Checkboxes
  • Dropdowns
  • Dropdown buttons
  • Dropdown typeahead
  • Numeric badges
  • Page messages
  • Radio buttons
  • Split buttons
  • Status badges
  • Switches
  • Text area
  • Textfield
  • Textfield typeahead
  • Menu items
  • Tooltips
  • Combo links
  • Icon buttons
  • Toast messages

  The team is working on more than 30 additional components, revised documentation, and other resources.

• Organized neatly following atomic design principles, a full set of components are available in the marketing design system. More enhancements for building marketing experiences are on the way.
• For designers working on mobile apps, components are ready for both Android and iOS.
• If you need a component that’s not in Figma yet, import the asset from our Lingo library. For more help, you can read about importing files from Sketch.

Don’t miss Figma 101 training Thursday
To get more info about designing with Figma, Zoom into Figma 101 on Thursday, Sept. 3 at 3 PM PT. Can’t make it? We’ll record it and make the replay available. Need an invite? Email Diem Sarkar.

For more updates, see the Figma questions and answers.

More Figma questions? Ask in Slack: #cmty-design-figma.

Design system questions? Ask in Slack: #sbg-xd-designsystem.

Aug. 27, 2020

Quick notes: Figma launches next week! Here’s how to get ready

On Sept. 1, all QuickBooks designers can get access to Figma, the cloud-based design tool that’s becoming our new standard for design creation and collaboration. Here’s how to get started and celebrate.

Drop into the Figma launch party
Join us anytime from noon till 4 PM PT on Tuesday, Sept. 1 for our Figma launch event and celebration. We’ll deliver light Figma training 4 times throughout the afternoon, and there will be plenty of chances to win Figma T-shirts. Need an invite? Email Diem Sarkar.

Zoom into Figma 101 training
To get more in-depth info about designing with Figma, Zoom in to Figma 101 on Thursday, Sept. 3 at 3 PM PT. Can’t make it? We’ll record it and make the replay available. Need an invite? Email Diem Sarkar.

Native mobile first
This week we published components you should use when designing QuickBooks native mobile apps. Start designing with confidence using Android or iOS components.

Marketing design system ready to use
Creating marketing experiences for QuickBooks? Design in Figma and use the marketing design system. We published components this week!

Product design system foundations and components ready
If you’re designing product experiences for QuickBooks, more foundations and components are now ready for you to use in Figma. You can find the design system libraries here.

Components in progress
You can see in-progress versions of most components in Figma. But not all the components are updated in Figma yet. You might need to import a component from Sketch in the meanwhile. Be sure to check the component once you do that. There will be some shifting from one tool to the other.

For more updates, see the Figma questions and answers.

Aug. 19, 2020

Quick notes about design system foundations in Figma

Foundations set for product and marketing
To prepare for the Sept. 1 launch of Figma, QuickBooks designers completed establishing foundations for marketing and product designs this week.

Fundamental elements like spacing grids, color, and typography are set for web and native mobile designs. Once they’re published, these foundations will be available for designers to integrate into their work in Figma. And the foundations will be an integral part of other components.

Product foundations
See color, responsive grid, and elevation in the web product foundations.
You can also view web product typography.
Native mobile typography, color, and elevation are in the mobile foundations.

Marketing foundations
With some exceptions, marketing uses most of the same foundations as product. See marketing foundations in the marketing design system.

QuickBooks Online navigation
Speaking of foundations, a version of the product shell and navigation is available now. Thanks to Natalie Harmon and her team for contributing these patterns. We’ll move them into the QuickBooks Design System before we launch in September. Meanwhile, you can see the left navigation, global header, and global create menu patterns in Figma now.

More Figma training, questions, and answers
Additional Figma training opportunities are in the works. Meanwhile, you can catch up on Figma questions and answers.

Still more questions? Ask in Slack: #cmty-design-figma.

Design system questions? Ask in Slack: #sbg-xd-designsystem.

Aug. 12, 2020

Quick notes about Figma, retiring Harmony components, and creating new marketing ones

Figma update: new design tool launches Sept. 1
QuickBooks designers can start to create and collaborate in Figma starting on Sept. 1. With the open, cloud-based platform, designers will work fast and get inspiration from other teams, designs, and explorations across the organization.

The design system team is setting up foundations for Figma now. And you can prepare for the change too. Check out the Figma questions and answers.

More Figma questions? Ask in Slack: #cmty-design-figma.

Design system questions? Ask in Slack: #sbg-xd-designsystem.

Goodbye to Harmony components
Throughout the past quarter, QuickBooks Design System designers and a team of IDS developers have been rebuilding Harmony components. The rebuilt components will be compatible with the updated version of Chrome that Google is releasing in 2021. And the refreshed components are aligned with the latest visual design.

For examples, check out trowsers, panels, or popovers. Once we’re done with QA, we’ll post the list of updated Sketch components soon. And the updated work will also appear in Figma.

Hello to fresh marketing components
To help QuickBooks create and deliver awesome end-to-end experiences, the marketing design system has a new home in the QuickBooks Design System. The team (XD, PD, PM, think globally) is finalizing work on new, improved components for marketing experiences. These updates will help us deliver faster for marketing designers, partners, producers, PD, and our customers.

The new components will also have a home within Storybook (ReactJS) and a new CMS publisher, Gutenberg WordPress.

Check out examples of the new components in Zeplin and Storybook.

July 29, 2020

Catch up on Figma progress, web-responsive page templates, and revised components

To prepare for the September launch of Figma, the QuickBooks design systems team revised QuickBooks page templates and a number of components, such as panels and popovers.

• Figma is set to launch for Intuit designers in September. Design program managers are leading us through contract details now. Once the paperwork is signed, designers will have access to a collaborative, cloud-based tool for creating and sharing designs. To keep track of the progress as it happens, read the latest Figma update.
• QuickBooks Online page templates now include additional guidance for how we can make these foundational elements work for mobile screens as well as desktop pages. These web-responsive templates are in Sketch now. We’ll start working on Figma versions in August. Meanwhile, check out the latest in the design system sandbox.
• Panels are a quick way for customers to add details in a trowser. To see the updated guidelines and specs, review the panels component.
• Popovers are another way to let customers add info fast, without getting too far from the page they’re on. See the new guidelines, images, and files in the revised popovers component.

July 11, 2020

New design tool set to launch in September,
New page templates launch now

With the launch of Figma and a fresh approach to page templates, QuickBooks designers will have more powerful tools to organize, build, share, and improve customer experiences.

• Figma is set to launch to the entire QuickBooks Online design community in September. This beta launch will give designers and stakeholders access to a collaborative, cloud-based tool for making and sharing designs. We’re working with teams across Intuit to figure out details, and we’ll keep you posted. For more information and to get answers to some of your questions, read the latest Figma update.
• QuickBooks Online page templates are the newest addition to the design system sandbox. The templates give designers a framework and guidelines for how we structure pages and screens in QuickBooks Online. To check out and start using the Sketch files, see the design system sandbox.

June 14, 2020

Shining the light on new badges and dark mode

New badges and dark mode are the highlights of today’s QuickBooks Design System updates.

Revisions in the visual system of badges help us guide customers to new and useful features. And dark mode makes sure customers can see those features in whatever light the customers are working in.

• Badges help guide customers to helpful information or new features.
  • To show customers things they might need to act on, we use status badges.
  • To guide customers to important numbers they should pay attention to, we use numeric badges.
  • To inform customers about new or revised features, we use new feature badges. We also include guidelines for using the indicator dot.
  • To let customers know a feature is in progress or incomplete, we use beta badges.
• Dark mode lets customers keep reading and using our product in dim or dark lighting conditions. When using dark mode, customers “turn out the lights” on QuickBooks, and colors and some functionality change to keep the experience readable and useable. This alternate way of presenting our screens is still work in progress. Get enlightened about dark mode.

April 18, 2020

Customer celebrations and design system sandbox launched

The QuickBooks Design System site now features a new pattern for presenting celebratory moments and a fresh way to explore design innovations even before they become part of the design system.

• The celebration framework helps designers create just the right moments of joy when customers complete a task or meet a goal. The pattern blends interaction, visual, and content design to create the appropriate amount of delight for these moments of accomplishment. To celebrate good times, come on.
• The design system sandbox gives our design community access to emerging designs, guidelines, and examples that aren’t yet included in system standards. Many of these new designs haven’t been coded yet or haven’t been verified as components or patterns. But these innovations are worth a look and can guide or inform the work we’re doing. Go play in the sandbox.

In addition to these efforts, new work on typography, dark mode, and other designs are in progress. More to come.

March 30, 2020

Design system site struggles

Throughout the past week, the QuickBooks Design System site has not been working well. We apologize for the inconvenience and are working to stabilize the site.

We identified a number of issues:

• Slow load times
• Missing graphics
• Inability to download logos

We’re working to address these and other problems. If you notice other site issues, please let us know.

We’ll update this page with information as soon as we have it.

September 20, 2019

Keeping up with design system changes

The QuickBooks Design Systems team has been busy, and we’ve resolved to do a better job of keeping our design community and partners posted about updates. Here are some of the latest.

The visual design refresh continues

Guidelines for the visual refresh were completed earlier this year, and some components and patterns are still being updated to reflect the new design direction. To keep up with the latest changes, see the visual refresh dashboard.

Browse through a gallery of components

Not sure what the components or patterns are called? You can browse through a gallery of them in the component gallery. It’s a work in progress, so please feel free to let us know how we can make it better.

A final goodbye to Geogrotesque

This should be old news by now, but let’s make sure: The font known as Geogrotesque should not appear in any QuickBooks screens. Avenir is the new boss. Read more about migrating to the new font.

Intuit content designers come together with a unified style guide

For the most up-to-date content guidelines, visit the one Intuit content design style guide. Content creators across Intuit brands and teams contributed to this new resource, and the site will be redesigned and relaunched later this year.

Revising the design system site and tools

Other efforts to refresh the design system site and tools are underway. We’ll publish more updates about improved communication, migration, and tools soon.

Jan. 18, 2019

Bolt transforms QuickBooks design

The Bolt visual design refresh continues to make its way into the QuickBooks Design System. To make Bolt and the system easier to use, we’ve Boltified buttons, form elements, and guidelines. And we updated the Lingo Sketch library too.

These elements now include Bolt updates:

• Typography
• Spatial units
• Basic buttons
• Menu buttons
• Split buttons (combo buttons)
• Info links
• Radio buttons
• Checkboxes
• Switches
• Text fields

Bring Bolt into the product experiences you’re creating. Find out how.