Complete index

Show one or more high-priority measures with optional reference labels and supporting values.

Communicate progress toward a measurable target, often with trend context.

Show progress of one measure within a meaningful minimum–maximum range.

Track structured business goals, owners, status and progress.

Legacy single-measure Card retained for backward compatibility.

Legacy multi-card visual retained for backward compatibility.

Compare values across categories with horizontal bars.

Compare values across short categories or discrete time periods.

Compare totals while also showing their internal composition.

Show composition across time or short categorical groups.

Compare proportional composition where every total equals 100%.

Compare proportional composition across ordered categories or time.

Show trends, direction and change over a continuous or ordered axis.

Show a trend while emphasizing magnitude through filled area.

Show cumulative composition changing over time.

Combine clustered columns and a line to compare related measures.

Combine stacked composition with a line measure.

Show how category ranking changes across an ordered axis.

Explain sequential positive and negative contributions from a starting value to an ending value.

Show sequential stages in a process where volume typically decreases.

Show the relationship between two numeric measures and reveal clusters/outliers.

Show simple part-to-whole relationships.

Show simple part-to-whole relationships in a ring layout.

Show hierarchical part-to-whole relationships using nested rectangles.

Show how proportional composition changes over an ordered/continuous axis, normalized to 100% at each point.

Display exact values in a flat row/column structure.

Display hierarchical and multidimensional data with expand/collapse, subtotals and drill.

Add compact trend context inside Table or Matrix cells.

Expose a frequently used filter directly on the report canvas.

Compact selection from medium/large value sets.

Keep filter choices visible in a vertical list and optionally support hierarchy/search.

Display short values as button-like tiles.

Select a start/end range for dates or numeric values.

Apply a single upper or lower boundary to dates/numbers.

Filter using rolling periods that update automatically.

Filter recent time windows at hour/minute granularity.

Provide a modern date-picking interaction for date filtering.

Filter using highly visible, styleable buttons.

Filter via a rich vertical list with hierarchy, search, conditional formatting and pasted selection.

Filter by typed or pasted text/numeric values with configurable operators.

Centralized management of visual-, page- and report-level filters.

Selecting one visual filters related visuals to the selected subset.

Highlight the selected contribution while retaining total context.

Move through hierarchy levels inside the same visual.

Navigate from a summary selection to a dedicated detail page carrying filter context.

Show supplementary values on hover.

Show a mini report page as contextual hover content.

Explain terminology, calculation or metric meaning.

Let users dynamically switch measures or dimensions used by one or more visuals.

Repeat the same chart in aligned panels by category.

Save report state including filters, slicers, sort, drill, visibility and current page.

Automatically create navigation buttons synchronized with report pages.

Automatically create controls for bookmarks or bookmark groups.

Trigger native actions such as Back, Bookmark, Drillthrough, Page navigation or URL.

Apply a set of slicer changes in one explicit action.

Clear active slicer selections.

Expand one visual for closer inspection.

Expose contextual actions such as drill, focus, sort, filters, export or more options.

Control data order in supported visuals.

Apply data-driven font, background, icons, bars or property formatting.

Add analytical overlays such as reference lines, trend, forecast, anomalies and error bars where supported.

Show fixed thresholds, targets or comparison levels on supported charts.

Extend supported line-chart time series statistically into the future.

Show uncertainty or upper/lower bounds on supported visuals.

Create calculations scoped to a visual, using the visual structure itself.

Interactively break a measure down across dimensions to explore contributors.

Identify factors statistically associated with a selected outcome.

Generate natural-language summaries of report data.

Detect unexpected deviations in supported line charts.

Let users ask natural-language questions and generate a visual answer.

Provide geographic analysis using bubbles, markers, filled areas, heat maps, paths and other layers.

Legacy bubble/location mapping.

Legacy choropleth mapping of geographic areas.

Map custom shapes/boundaries using TopoJSON/GeoJSON-style geographic definitions.

Provide Esri-powered advanced geographic analysis within Power BI.

Add titles, headings, explanations and supporting text.

Provide lightweight visual structure or act as an action-enabled object.

Display contextual/static or supported dynamic imagery.

Standardize colors, fonts and visual formatting through theme JSON.

Trigger a Power Automate flow using report selection/filter context.

Embed a Power App and pass report context into a transactional experience.

Embed pixel-precise, print-oriented paginated output inside a Power BI report.

Render a statistical/custom visual using R.

Render plots produced with Python.

Nudge-style KPI composition for a primary value, comparisons and concise supporting context.

KPI composition with compact directional trend context.

Consistent row/grid of related KPI blocks.

Card/panel shell containing time-series analysis and optional references.

Styled comparison module for ranked categories.

Reusable part-to-whole module.

Styled contribution analysis from a starting value to an ending result.

Styled exact-value detail module with optional title/actions.

Styled hierarchical table pattern.

Consistent top-of-page filter composition.

Button-like switch for changing measure or dimension while retaining the same analysis layout.

Styled navigation for report pages or controlled report states.

Rich compact context card shown from a data point.

Compact narrative or exception callout around an important finding.

Use Nudge's icon library for actions, status cues and supporting semantics.

Centralize Power BI theme foundations using reusable tokens and theme configuration.

Use semantic text, surface, brand, success, warning, error and border tokens to keep theme colors consistent.

Standardize supported Power BI text classes and visual typography.

Manage repeatable chart data-color palettes aligned with brand and accessibility.

Create named formatting variants for supported visual types using Power BI theme style presets.

Preview theme changes against an interactive Power BI sample report.

Import existing Power BI theme JSON and export Power UI themes as standard Power BI JSON.

Apply a Power UI theme directly into a Power BI Project (.pbip) workflow.

Standardized theme/preset treatment for Cards.

Standardize supported table and matrix typography, grids, headers, totals and effects.

Canonical semantic color decisions for brand, surfaces, text, status and data roles.

Canonical font families, weights and hierarchy.

Canonical spacing rhythm and grouping principles.

Canonical borders, radius and shadows where supported.

Compare actual to target in a compact bar-based form.

Show flows between nodes/categories.

Show tasks against a time schedule.

Show distribution, quartiles and outliers.

Show distribution density and spread.

Compare multivariate profiles around radial axes.

Show compact differences between points/categories.

Create custom Vega/Vega-Lite visual specifications inside Power BI.

What is happening and where should I look?

What is the current result and how does it compare?

How is the metric developing?

Which categories perform best/worst?

Why is actual different from budget/target?

What is behind this selected item?

How does performance break down through levels?

Which dimensions are associated with the result?

I know the scope I want to analyse.

I know the exact item/store/order I need.

I want to inspect the same analysis using another measure/dimension.

What must I see on a phone?

Enter a report, domain or report section and choose where to go next.

Understand overall status and the most important changes or exceptions at a glance.

Monitor targets, benchmarks and KPI health across a set of measures.

See what needs attention now and support recurring operational review.

Investigate a business question by changing dimensions, filters or analytical views.

Understand how a measure changes over time and whether the direction is expected.

Compare entities, periods, channels, categories or peers on a consistent basis.

Show how actual performance differs from budget, target, norm or previous period.

Explain why a KPI, variance or outcome changed and identify the strongest contributors.

Understand which categories or segments make up a total and which contribute most.

Understand spread, concentration, variability and outliers rather than only averages.

Compare meaningful groups and identify differences in performance or behaviour.

Find a specific entity, item, store, article, partner or record using known attributes.

Browse, filter, sort and compare a larger result set before opening one item.

Understand one selected business entity in context.

Inspect exact underlying records, events or transactions supporting an analysis.

Prioritize abnormalities, risks or underperformance that require investigation or action.

Understand the expected future state and compare it with targets or capacity.

Evaluate how changing one or more assumptions affects an outcome.

Understand spatial differences and compare performance across locations or regions.

Understand progression through stages, conversion and bottlenecks.

Validate numbers, expose mismatches and support traceability between sources or calculations.

Explain a result or decision using a deliberate sequence of key messages and evidence.

Explain report usage, metric definitions, ownership, scope and analytical conventions.

What requires my attention?

How is this developing?

How does A compare with B?

Why did this change?

Which items need attention?

Tell me more about this item

Pixel-perfect web designs may not map cleanly.

Token changes can drift.

Design must account for scale and viewport.

Uniform styling may not be possible everywhere.

Arbitrary prototype behavior may be impossible.

Application-style state machines are hard to maintain.

Do not put required controls or critical content there.

Do not design unsupported pagination/editing patterns.

More testing and maintenance.

A good screen may not be a good A4 page.

Desktop layout should not simply shrink.

Users may misinterpret results.

Do not make it a strategic UX dependency.

New designs should not depend on legacy maps.

This handbook consolidates the Power BI UX/UI guidance developed across our earlier discussions, interactive guides, prototypes and migration work. It is intended to let a designer or developer answer three questions quickly: **what problem are we solving, which Power BI-native mechanism should implement it, and which parts should be standardized for reuse?**

Power BI is an analytical report platform, not a general-purpose responsive application framework. The most common design failure is to prototype a web application in Figma and discover during handoff that the layout, styling, state logic or interactions do not map cleanly to Power BI.

The recovered enterprise direction is to **reuse the existing company design system rather than create a second standalone Power BI design system**. The Power BI-specific layer should contain mappings, constraints, approved configurations, analytical patterns and implementation guidance.

The recovered interactive guide contained **133 catalog entries**. That catalog intentionally mixed native Power BI visuals/features with Nudge BI representations, Power UI standardization assets, design-system tokens, custom visuals and reusable design patterns. This reconstruction preserves that coverage but labels the implementation status so those categories are not confused.

The reusable standard should be a **configuration of native Table and Matrix**, not a new custom table control.

Use slicers for frequently changed, user-facing controls and the Filters pane for less frequent or more technical filtering. The user must be able to understand **scope, active state, defaults and reset behavior**.

The terminology recovered from the page-flow discussions is:

The later guide expanded the earlier six templates into **24 page archetypes**. The archetype tells you what the page is for; the template tells you how that archetype is composed.

## Default page anatomy

A KPI should make the primary value, comparison basis and status legible without forcing the user to decode several competing numbers.

## Charts to use cautiously

Accessibility is part of each component specification and the Definition of Ready, not a final visual-polish task.

Power BI should not be designed as if it were a CSS-responsive website. Desktop report pages use a configured canvas and are scaled/fitted in the viewer. Phone use has a separate mobile-optimized layout.

Use the lowest-complexity layer that satisfies the analytical requirement.

The central design-system concept recovered from multiple discussions is:

```text

Use a compact per-page specification:

A page is ready when the team can implement and test it without unresolved design or data assumptions.

The migration work established that redesign should not start by tracing the old screen one-to-one. Work with business stakeholders to decide what from the legacy report remains valuable.

The library should be governed from foundations downward. A change to company tokens should flow through mappings; a new page pattern should not redefine brand foundations.

This section records the evolution that could be recovered from previous discussions and stored artifacts.

A practical guide for UX/UI designers coming from web and product design.

A Figma prototype can make almost anything appear possible. Power BI cannot reproduce arbitrary frontend behavior simply because it can be drawn.

Web applications are often organized around tasks: dashboard → search → edit → submit → confirmation.

Do not begin by asking which chart goes here. Define:

A web designer can sometimes design a component before knowing the backend data structure. That is much harder in Power BI, because the design depends directly on model concepts.

A frontend team can build a new component when required. In Power BI every custom solution adds implementation and maintenance cost, so the designer should know the core native building blocks.

Power BI already contains an interaction model; designers need to understand it rather than invent one.

Designers frequently confuse these two mechanisms.

In Figma it is easy to design a hover panel with tabs, buttons, links, filters and actions. Do not assume that works as a Power BI tooltip.

In web, one layout system reflows from desktop to tablet to mobile. Power BI works with a configured report canvas — page settings offer fixed aspect ratios such as 16:9, 4:3 and custom dimensions — and handles phones through a **separate mobile-optimized layout** in which existing visuals are selected and rearranged.

Figma remains useful for page architecture, information hierarchy, analytical flows, page templates, visual selection, layout, design-system application, interaction specification, stakeholder validation and developer handoff.

A web design system commonly runs tokens → components → patterns → templates → application. For Power BI a useful structure is:

Instead of designing a custom "Enterprise Data Table Component", define *our approved configuration of the native Power BI Table*:

Design reusable analytical archetypes and let report pages be selected rather than invented.

Web product design frequently encourages generous spacing and progressive navigation. Analytical reporting often needs higher information density — which is not the same as filling every empty space.

Power BI includes built-in support for keyboard navigation, screen readers, high contrast, focus mode and accessible data views. Report authors still configure alt text, tab order, labels and themes.

In Figma, adding another chart costs virtually nothing. In Power BI each visual can create additional rendering and query work.

A web workflow can sometimes run UX → UI → finished Figma → frontend. That handoff model is risky for Power BI, where feasibility depends on the semantic model.

Do not hand over only a screenshot. For every page, specify:

Before handing a Power BI page to development, ask:

Designing for Power BI is not simply designing dashboards in Figma. The UX designer helps define the analytical interface between data and a business decision.

```text

A Power BI object that renders data or provides interaction.

A reusable design/implementation element. In this guide, always distinguish a Figma component from its Power BI runtime visual.

A repeatable solution to a recurring UX/analytical problem.

A repeatable behavior such as cross-filter, drillthrough, tooltip or reset.

A reusable analytical page type defined by user goal.

A reusable wireframe/composition for an archetype.

Arrangement of sections/components on the report canvas.

A collection of Power BI pages connected to data/semantic models.

The governed model of tables, relationships, measures and metadata used by reports.

Calculated business metric evaluated in filter context.

Field used to group, slice, filter or navigate data.

The active set of filters influencing a calculation or visual.

Move deeper within a hierarchy in the same visual.

Navigate to a dedicated page filtered by selected context.

Selection removes nonmatching data from another visual.

Selection retains the whole while highlighting the matching subset.

Saved report/page state used for controlled views/navigation.

On-canvas user-facing filter control.

Native mechanism to let users switch fields/measures in report visuals.

Named, governed design decision such as semantic color or spacing.

JSON/default styling layer for supported report/visual properties.

Power BI Project format used as a development/project baseline in the recovered workflow.

Power BI-aware Figma UI kit/design accelerator; not runtime functionality.

Organization-specific standardization/configuration layer in the recovered architecture; exact inventory/mechanism must be verified internally.

Custom visual using Vega/Vega-Lite; exception path for visualization needs not met natively.

Power BI reporting mode optimized for precise, hard-page/print-oriented output.

Decision rule that prefers built-in Power BI capability before configuration, custom visuals or custom development.

Flat record list with sorting, scrolling, selection, conditional formatting and tooltips.

Hierarchical rows and columns with expand/collapse, subtotals and grand totals.

Column header sorting with ascending/descending state and a defined default.

No totals, group subtotals or grand total — and how flat and hierarchical aggregation differ.

Background colour, font colour, data bars, icons and colour scales driven by rules or measures.

Dropdown, list, multi-select and search slicers with a reset state.

Report-level, page-level and visual-level filters, and how they stack.

Selecting a data point filters or highlights the other visuals on the page.

Selecting a row updates a detail card, KPIs and a chart on the same page.

Move through Year → Quarter → Month → Day inside a single visual.

Right-click a record and open a dedicated detail page filtered to it, with a back button.

Buttons, page navigation, hyperlinks and drill-through actions — and how they differ from selection.

Hover context: target, actual, difference and last updated — without adding a column.

Export data from a visual — availability depends on configuration, permissions and tenant settings.

Interactive tables scroll, filter and drill. Paginated reports print, repeat headers and produce fixed-format output.

The same table reconsidered for desktop, tablet and mobile composition.

Where to stay inside the native model and where an embedded or custom solution is required.

Who defines what: UX designer, BI developer and QA responsibilities per pattern.

Answer what the user needs and get the native pattern that serves it.