BECU Digital Design Toolkit

The design toolkit is a Figma library that can be referenced and enabled in your projects.

Open in Figma

Release Notes

What's added

  • 2 new card components and expanded cards usage guidelines.
  • A missing font style used in card components.
  • Badge component and usage guidelines for it.
  • 2 selection tile components have been added, along with usage guidelines.
  • 2 components, along with guidelines, have been created to standardize the design of right sidebar boxes in Online Banking.
  • 1 new component for popovers (icon & fly out menu), along with usage guidelines.
  • 1 new component for a 'more' menu (icon & fly out menu), along with usage guidelines.
  • A Bootstrap icon library ready to use on Figma, containing over 1,300 icons with variants (outline, fill, enclosed, etc.).
  • Implemented a modular approach to embed icons coming from the Bootstrap library into the Design Toolkit. The new approach uses an 'Icon Wrapper' with out-of-the-box, standard icon sizes and padding areas.
  • Multiple button variants with icons for mobile and desktop, incorporating Icon Wrapper.
  • Established a unified approach to Focus states.
  • Focus state variant added for desktop buttons.

What's improved

  • Fields and controls now have more features to handle input validation.
  • Improved multiple Notifications and Alerts components, along with best practices.
  • The new Icon Wrapper improved multiple components (Alerts, Forms, Popover, Related articles) with more to come.
  • Reviewed all buttons, bringing consistency to layer naming structure and variant properties.
  • Focus state was updated to provide better UI alignment across components. Updated components include cards, form components, interactive icons, buttons, links, and selection tiles.

Launch to design.becu.org with initial set of components.

Initial assembly of Library and Figma Files.

FAQs

If you have questions that cannot be answered below please contact the UX CoE Team.

Why can't I interact with anything in the Design Toolkit?

You must have a Figma account to obtain assets and inspect elements. To learn more, please visit figma.com. If you are a BECU employee please contact Liz Holland about our Enterprise account.

How do I provide feedback on what I see?

If you have feedback on a specific component, and you have a Figma account, you can leave a comment in the file ( learn more about Figma comments).

If you have general feedback, or encounter an issue, please alert the UX CoE team at aaa-DigitalUX@becu.org

What's Included

The guide contains an inventory of UI patterns and Figma components. As a designer, you can leverage the components in your work, and implement the Figma library into your project. As a developer, you can review specifications of design attributes.

Published Patterns

Contains an inventory of patterns and brand assets that BECU vendors should use in their systems.

Components

Contains all patterns that BECU designers should use in their prototypes.

Style

Contains color, typography, and spacing primitives.

Enabling the Library

Once you have access you can enable the library for easy use in your projects.

How to Enable

Enable libraries from the Figma 'Assets' Panel - Option+3, then search for the library that you want or need to use in your project.

The name of this specific library is 'Components.'

Learn more about Figma libraries.

Library Usage Guidelines

The dos and don'ts of working with the Design Toolkit

Do's

  • Use the components and their variants just as they are.
  • If you notice something that can be better - or even something that is wrong in a component - contact the UX CoE team and provide feedback.

Don'ts

  • In your projects, do not override text and color styles.
  • In your projects, do not detach a component instance from their parent component.
  • In the libray, do not make changes without reviewing with colleagues.