General FAQ for designers

In short, this styleguide. For a more detailed answer, please read on.

Fancy’s components and guidelines have been documented on various websites and Confluence pages. That has understandably led to confusion. We hope to clear things up here.

When it comes to Fancy’s guidelines, this styleguide is the only source of truth. We’re in the process of moving all guidelines documented elsewhere to here. As a result, some guidelines may be missing. Please contact us if you can’t find the guideline you’re interested in.

When it comes to Fancy’s components, Fancy’s code is the ultimate source of truth. This styleguide is the most accurate reflection of that truth. The Fancy UI kit for Figma is less reliable than the styleguide. So, if you want to know how a component looks and functions, you’re in the right place.

FancyPFG is a folder in PFG, which contains code written in TypeScript and React. The code is split up into subfolders, some of which are product specific. There's also a folder called Shared. This folder is effectively the previous version of Fancy.

Products built outside of PFG, such as Performance and Data Privacy, cannot use the code in the Shared folder. As a result, the decision was made to move the folder's contents to an external repository, accessible by all. That new repository is simply called Fancy. The components documented in this styleguide all originate from the Fancy repository.

• For design related questions, please use the ux_fancy channel.
• If your question is more technical, please use the dev_fancy channel.
• If your question concerns accessibility, please use the a11y_fancy channel.

Yes, absolutely. We may seem busy, but supporting users of Fancy is our top priority.

One option is to use the “Internal tools” bar:

1. To turn it on, click the button with the wrench icon in the top right corner.
2. Click on “State”, check “Highlight Fancy components”, and click “Store”.
3. If the UI element now has an orange border, it’s a Fancy component.

Alternatively, you can use your browser's developer tools. This will also give you the name of the component. Here's how to do it in Chrome and Firefox on macOS:

1. Press ⌥ (option) + ⌘ (command) + C.
2. Click on the UI element in question.
3. If the element’s opening tag contains a data-component attribute, it’s a Fancy component. The value of the data-component tag will be the component's name. For instance:
   <section data-component="card" ...>...</section>

Practically speaking, yes.

Some low-level components are missing, though. This is because they're used to build other components and are not meant to be used by product teams. There are also a few components that remain to be moved over from FancyPFG. However, they'll soon be available. In any case, if you can't find the component you're looking for, please reach out to us through the ux_fancy channel.

Lib and Lab components are both part of the Fancy repository. Lab components are components that don’t satisfy our Definition of Done (DoD). The DoD is a list of requirements related to development, UX, accessibility, process, and documentation. New components and components that have been migrated from FancyPFG start out in Lab.

When a component satisfies all DoD requirements, it's moved from Lab to Lib. However, this doesn’t mean the component is perfect or won’t be changed in the future.

Yes. However, since Lab components are a work-in-progress, there are some things to keep in mind:

• A Lab component may be changed significantly in the process of making it ready for Lib.
• A Lab component may not yet live up to our standards when it comes to UX and accessibility.
• A Lab component may lack proper documentation and guidelines.

Please reach out to us, if you'd like to know more about the component, such as known issues, planned changes, or (undocumented) guidelines.

Fancy’s ultimate source of truth is its code. However, for a designer, the best place to look is here in the styleguide. The Fancy UI kit for Figma is also an option, but it will never be as reliable or accurate as the styleguide.

Contact us through the ux_fancy channel. There’s a chance the component exists, but hasn’t been moved from FancyPFG to the new Fancy repository. If the component doesn’t exist anywhere, we’ll discuss whether it adds shared value. Shared value means the component would also benefit other product teams and use cases.

If shared value is established, we’ll discuss how your team and the Fancy team can collaborate on implementing the component. If shared value is not established, we’ll help you figure out whether existing Fancy components can be used to build your feature. If not, we’ll provide you with input for creating a custom UI element.

Contact us through the ux_fancy channel. We’ll discuss whether changing the component to satisfy your requirements would add shared value. Shared value means the change would also benefit other product teams and use cases.

If shared value is established, we’ll discuss how your team and the Fancy team can collaborate on changing the component. If shared value is not established, we’ll help you figure out whether existing Fancy components can be used to build your feature. If not, we’ll provide you and your team with input for creating a custom version of the component.

Basically any time you would like our help, input or feedback.

However, we do recommend a check in before handing off your designs to developers. This is mainly because many Fancy components are in Lab. That means they may not live up to our standards when it comes to UX, accessibility, and documentation.

By checking in with us, we can inform you about any known issues with the components you wish to use. We can also discuss how our teams can collaborate to fix critical issues. Lastly, we can give you feedback on component usage, accessibility, and other design considerations. The aim of all of this is to make the implementation of your designs as smooth as possible.

You can expect our help, input or feedback on any topic related to Fancy. Here are some examples:

• Picking the right Fancy components for your use case.
• Using Fancy components in a way that aligns with our UX, accessibility, and writing guidelines.
• Figuring out what to do when the component you need is not part of Fancy.
• Figuring out what to do when a Fancy component doesn’t look or function the way you want it to.
• Using our design tokens to design UI elements that visually align with Fancy.

Our accessibility checklist for designers is a good place to start. It’s a work in progress, though. So, if you have any further questions, please reach out to Fancy’s accessibility experts through the a11y_fancy channel.