Data Connector

Data Connectors present unique design challenges. Users need to navigate external data sources, understand what they're importing, and handle potential errors — all within the constraints of Canva's interface.

These guidelines address the specific design problems you'll encounter when building Data Connectors.

Think about real-world applications like sales reports, marketing dashboards, or research summaries to inform your design. Empower users to make meaningful use of the imported data.

Data might seem complex, but sharing it should be straightforward, aligning with our Canva Design Principles. Use the App UI Kit for a clear, robust interface. Gradually introduce advanced options with progressive disclosure, ensuring users feel comfortable and in control.

Consider the user journey from opening the Data Connector to having the data live in Canva. Just like our Authentication guidelines, keep login user-friendly. Always provide Search and Filter options to help users find and explore data easily.

Occasionally, data might not be available. When it's due to known issues such as a search keyword issue or error, inform the user and offer alternatives such as related data or keywords. Encourage them to recover the data themselves for a positive experience.

Your Data Connector acts as a trusted pipeline for user data. Validate all imported data rigorously and handle edge cases gracefully. When things go wrong, provide helpful error messages that guide users toward solutions. Implement retry mechanisms for network failures and ensure your app behaves predictably even when data sources become temporarily unavailable.

Nobody likes waiting for data to load. Implement pagination and efficient transformation techniques to keep your app responsive even with large datasets. Be smart about when to fetch data—only retrieve what's needed when it's needed. Consider caching strategies for frequently accessed sources to minimize repeated external requests.

Users trust you with their data. Handle that responsibility with care. Follow the principle of least privilege when requesting permissions, implement proper authentication flows, and never store credentials directly in your app. Be transparent about what data is being accessed and how it will be used.

A. Search fields must be prominently positioned and easy to access

B. Filters must support search

C. Consider grouping similar filters to avoid excess scrolling

D. Use a consistent filter interaction pattern (e.g., checkbox list with search), and omit filters that yield no results

Whenever possible, there must be fallback states when searches return no data. Consider displaying suggested results if applicable.

A. Use list views to return search results with clarity and consistency

B. Support quick scannability. Consider deferring complex breakdowns or visualizations to a secondary view

C. If additional insights or breakdowns are available, consider using progressive disclosure to reveal them when relevant

A. If your app uses public data, you must allow access without requiring login

B. Login prompts must be delayed until the user tries to access protected data or perform actions

C. You must provide a clear visual difference between logged-in and logged-out states

• If your connector supports multiple functions (e.g., fetching, cleaning, visualizing), consider using an initial screen to route users
• Split long or complex tasks into smaller, guided steps

A. Let free users interact with free features and preview premium ones

B. If the app includes premium features, distinguish them with clear labels and familiar icons

Translate technical errors into actionable messages that users can understand. Categorize errors by type and provide specific recovery suggestions for common issues. While keeping user-facing messages simple, log detailed information to help with troubleshooting.

Maintain partial functionality when possible rather than failing completely. Consider caching previous results to use as fallback when fresh data can't be retrieved, and implement progressive enhancement to ensure basic functionality even in challenging conditions.

Include comprehensive metadata with each dataset, including source attribution, last-updated timestamps, and relevant categorization. This information helps users understand the context and currency of the data they're working with.

Provide formatting metadata for numerical values to ensure they display correctly in Canva designs. Specify units of measurement and include localization information when relevant to help with proper data presentation.

Create compact, efficient references (under 5KB) that contain everything needed for future refreshes. Version your reference format to support evolution over time, and handle expired or invalid references gracefully so users aren't stranded if their data source changes.

Validate against Canva's size and complexity limits (max 20 columns, 100 rows by default, 200KB total size). Check for malformed or inconsistent data and test thoroughly with edge cases like extremely large or small values.

Benchmark your Data Connector with realistically sized datasets under varied network conditions. Measure memory usage during transformation operations and optimize critical paths based on profiling results to ensure a smooth user experience.

• App correctly implements the required Data Connector actions
• Data selection UI adapts based on context (new selection vs. edit)
• Error handling covers all common failure scenarios
• Data validation respects Canva's format and size limits
• Refresh mechanism reliably retrieves the latest data
• Performance is optimized for both small and large datasets
• Security best practices are followed for all external connections