Skip to content

Widget

Widgets are self-contained, customizable components that transform data into actionable insights. They are the building blocks of effective dashboards and user interfaces.

PrincipleWidget structureWidget typeGuidelines

#Principle

When designing a widget, follow these principles:

  • Singular focus: Each widget serves one purpose. Avoid combining unrelated data or features. Use clear follow-up actions (links, buttons) to provide deeper context when needed.
  • Intuitive clarity: Widgets should be immediately understandable, even in isolation. Include relevant timeframes, avoid jargon, and minimize dependencies on external information.
  • Insight-driven: Prioritize valuable conclusions over raw data. Visualize data thoughtfully, favoring charts and diagrams over dense text. Tailor widgets for their specific context (dashboard vs. detailed report).

#Widget structure

When designing a widget, follow this structure:

  • Title (Card Header): Clear, concise, and specific. Accurately reflects the widget's content and purpose, even when viewed alone.
  • Export: Located on the right side of the header, allowing users to export data or add the widget to a dashboard.
  • Toolbar (optional): Located below the header, offering primary actions (e.g., "Create"), filtering, and search functionality.
  • Key metrics (optional): Highlight the most important data points, using abbreviated numbers and clear units (e.g., 1.2M). Use tooltips to explain complex metrics.
  • Content: The main area for data visualization, combining charts, metrics, and brief text where appropriate. Ensure all graphs within a widget share the same time range. Use tabs sparingly to separate related metrics for the same item.
  • Footnotes (optional): Brief contextual notes placed in the bottom-left corner. Prioritize in-line tooltips for explanations.
  • Follow-Up Actions (optional): Consistent across all widgets. A maximum of two call-to-action buttons at the bottom, guiding users to the next logical step.

#Widget type

Choose the most suitable widget based on the content, complexity, and user goals: Link to Figma Widgets

TypeExample

#Chart

Ideal for visualizing trends and comparisons. Use line charts, bar charts, pie charts, etc., appropriately.

Usage:

  • Dashboard: Provide an overview of key metrics and trends.
  • Reports: Visualize data analysis results.
  • Analytics: Monitor performance and track goals.
Bar chart

#List

Perfect for displaying items, tasks, or records in a structured way.

Usage:

  • Task lists: Organize and track tasks or activities.
  • Data lists: Display records or items in a structured format.
  • Navigation: Provide links to different sections of the application.
Bar chart

#Table

Suitable for detailed data analysis and comparison. Include filtering and sorting options.

Usage:

  • Data analysis: Explore and analyze complex datasets.
  • Reporting: Present detailed information in a structured format.
  • Comparison: Compare different data sets side-by-side.
 Line chart

#Description

Provides textual information, instructions, or summaries.

Usage:

  • Onboarding: Guide new users through the application.
  • Help: Provide context-sensitive information or troubleshooting tips.
  • Notifications: Display alerts or updates.
 Bubble chart

#Form

Facilitates user input. Prioritize clear validation and error handling.

Usage:

  • Settings: Allow users to customize preferences.
  • Data Entry: Capture information for forms or surveys.
  • Feedback: Collect user feedback or suggestions.
 Pie chart

#Rule builder

Empowers users to create custom conditions or criteria.

Usage:

  • Policy creation: Craft tailored policies for managing access, permissions, or behavior within a system.
  • Key metrics setup: Establish custom metrics for measuring specific aspects of performance or engagement.
  • Funnel configuration: Track user journeys through a series of steps to identify bottlenecks or optimization opportunities.
 Matrix chart

#Highlight

Emphasizes critical information or metrics.

Usage:

  • Dashboard: Highlight critical KPIs or performance indicators.
  • Reports: Draw attention to significant findings or trends.
 Flat gauge

#Side Panel

A collapsible panel that can contain any of the above widget types for flexible layouts.

Usage:

  • Navigation: Provide access to different sections of the application.
  • Contextual Information: Display additional details or options related to the main content.
 Flat gauge

#Guidelines

#Do's

  • Prioritize clarity, readability, and visual consistency across widgets.
  • Provide immediate feedback for user interactions (e.g., loading states, hover effects).
  • Use abbreviated numbers (e.g., 1K, 5M) for metrics and include currency symbols with monetary values.

#Don'ts

  • Combine unrelated data or functions within a single widget. Each widget should have a single, clear purpose.
  • Abbreviate percentages (e.g., use "50%" instead of "50pct").
  • Overwhelm users with excessive information. Prioritize the most important insights.
  • Use complex layouts that hinder navigation or understanding.
  • Display empty widgets. Show an empty state message or hide the widget if no data is available.
  • Exceed two follow-up actions per widget.