Designing for Microsoft Fabric: How Osmos Built the AI Data Wrangler

In the summer of 2024, the Osmos founders and product manager came across an opportunity to explore whether our data transformation and clean-up tool would work on Microsoft Fabric.

We originally planned on bringing our AI-assisted data transformation experience to Fabric, basically as it was. That quickly became neither plausible or desirable. Not plausible due to the tight integration with the Microsoft Fabric experience and not desirable because rapid advancements in AI gave us the opportunity to shift from an AI-assisted solution to an autonomous AI solution.  

We were excited to see what would happen, after all, we know a lot about cleaning up data and using AI to do so. Bringing Osmos to Fabric would give us an opportunity to show that off to companies¹ like the London Stock Exchange², KPMG³, and 100s of other Enterprises that are rapidly adopting Fabric since May of 2023.

We had less than four months to architect, design, develop, and deploy our AI Data Wrangler on Microsoft Fabric and get to Chicago for Microsoft Ignite in November 2024. Third-party workloads were going to be announced, and we wanted to be there. Even better, Microsoft wanted us to be there and helped us with advice, extra design files, and problem-solving throughout the process.

We needed to move quickly, so we took what we’ve learned over the last four years of transforming data and served it with a twist. We have been continuously improving our Osmos stand-alone features, but with the recent (at that time) strides in LLMs, we knew we wanted to turn our architecture upside down as well. We took moving to Fabric as a really well-educated fresh start.

Our initial tests on a fully autonomous AI Data Wrangler were unbelievably successful—the kind of thing that looks and feels like magic. The new AI Data Wrangler we were building could reduce the complex and time-consuming process of data transformation to a single click. In fact, the process was so seamless that we actually had to slow down our demos to let the magic sink in.

We knew that combining our different AI methodologies would be a game changer for people handling data and needing clean, structured, SQL-ready outputs from various sources. We had the magic; now, the focus was on executing a rapid sprint to a Public Preview launch at Ignite.

The first step was to get clickthrough prototypes working and in the hands of our GTM team and customers, and we had to do it fast.

How to Optimize Figma Files for Microsoft Fabric UI/UX

This is the first time I’ve folded a major company’s design system into one I’ve overseen and I really didn’t want to slip up with the integration and somehow swap every single purple button in our app to a green Microsoft Fabric button. I needed to leverage what we’ve already built and figured out interactions for while giving every screen a severe face lift and then slight reconfiguration.

I had already spent time refining the Osmos Design System's cohesion and nested components, which made the transition smoother. As part of this, I created variables for colors, including an all-pink “Barbie mode,” to test whether nested components translated correctly across the system.

This setup allowed me to create “Fabric” as a variable and push our components into Fabric mode, giving us a clear view of how much work was needed to adapt our system.

As I worked through this process, I learned a lot more about variables beyond colors and spacing. I even discovered that font names could be set as variables, allowing us to seamlessly transition all text in our UI from Roboto to Segoe UI.

Weaving Design Systems Together

Once the variables were in place, I focused on merging Osmos’ design principles with Fabric’s ecosystem. After testing a few configurations, I landed on this structure:

1. Create an “Osmos on Fabric” product file for our UI development.
2. Add a Fabric mode to the variables in the Osmos Design Library.
3. Link the Osmos Design Library to the “Osmos on Fabric” file.
4. Connect the Fabric Figma files (UI Kit, Visuals, and Fluent Icons) as libraries.
5. Copy and paste elements from our original product or the Fabric page templates to build new layouts and prototypes.

Downloading Source Files & ResourcesOnce the design structure was established, I gathered the necessary files to support our integration with Microsoft Fabric.

• Microsoft Fabric UI Kit →
• Microsoft Fabric visuals kit →
• Fabric UX System →
• Fluent Icons Catalog →
• Microsoft Fabric login →

For an up-to-date list of reference materials, the Microsoft Fabric UI Kit file includes a dedicated Resources page with the latest assets.Learning Fabric’s UI LanguageThere are a few terms to understand when you work with Fabric.

• Fabric Design System - UI framework used specifically for workloads on Microsoft Fabric
• Fluent Design System - Microsoft-wide UI, including Windows, Microsoft 365, and web applications. Mostly you’ll need to know this because will get your icons from the Fluent Icon Catalog or from fluenticons.co
• Workload - think of this as your overall app in the hub. It includes whatever your app does (the item[s]), the learning materials (tiles connected to documentation), and the marketing around that app (more on that in the Creating Visuals section).
• Item - a discrete thing that your app does—ours does AI Data Wrangling— and becomes a building block of a larger workflow. Items include Lakehouse, Notebook, or a Mirrored Database.

There are other terms that I called one thing and then found them called something else in the Fabric UI system. This is just a lack of standardization in the UI industry. These were things like:

• Popup  <> Dialog
• Heading <> Title
• Side Panel <> Drawer

Creating Visuals—Illgrams and 3D Illustrations—for FabricTo launch your workload into the Microsoft Fabric Hub, you’ll need to set up key marketing-related assets. These elements are defined in product.json⁴ and you will get to know this file pretty well. This is where you’ll populate:

• Workload display name (long name and short name)
  
  • Osmos example: AI Data Wrangler and Wrangler
• Workload Description:  
  
  • Osmos helps your team enhance data quality without increasing data engineering resources. By autonomously cleaning and transforming your files from within Microsoft Fabric, Osmos AI Data Wrangler enables organizations to get data in shape and drive better decisions.
• Learning materials - each one requires a title, introduction, description, image, and a URL
• Create item card - This needs a title, description, icon
• Publisher
  
  • Osmos
• Slogan
  
  • Clean and transform even your messiest data, hands-free
• Description
  
  • Osmos helps your team enhance data quality without increasing data engineering resources. By autonomously cleaning and transforming your files from within Microsoft Fabric, Osmos AI Data Wrangler enables organizations to get data in shape and drive better decisions.

And you will need to create a series of visuals:

• Favicon
• Learning Materials Illgrams
• Workload successfully installed Illgram
• Workload hub 3D background Banner
• Screenshots of your completed app

Making visuals was the piece I put off the longest, but once I figured out what the pattern for building pieces, I was able to get moving again.

For our Illgrams (medium-sized illustrations used in cards), I established this pattern:

1. Add the Osmos logo into each one, make use of Osmos Yellow and “Yellow Gradient L” from the Microsoft Fabric Visuals Kit
2. One central element
3. Two additional elements (check marks, app icon, play button, any fluent icon with a grounded gradient background)
4. Ensure there is a background surface form (an ‘outline track’ I call them)
5. Look for interesting stacking that doesn’t work IRL, like the background track behind the shape, but the interior icon on top of the shape
6. 320px x 180px, created at size, including 36px margin around the edges
7. Let them sit overnight, you will like them better in the morning

This is how ours turned out:

At the time, there were few examples outside of the Microsoft Fabric Visuals Kit Figma file, but there have been more since the broader launch of Fabric. We also provided feedback to Microsoft, asking for additional base elements for the illustration library.

The ones that really made me cry were the 3D illustrations. As a UX designer with zero 3D experience, I felt like I didn’t have the skills or tools to create something that would satisfy the request.

Luckily, the new crop of AI image generators is pretty good at creating this sort of otherworldly artwork. I worked through some prompts and created a graphic we could use in our Workload Hub.

Navigating surprises and minding the gaps

Like all of our design systems (mine too), the Fabric design system has some missing pieces. They come by it as honestly as we do—Microsoft Fabric is an ambitious platform that’s rapidly evolving. As early adopters, we identified gaps and shared feedback with the UX and product teams.

These were pretty minor inconveniences—icons weren’t available in every size, a component would lose its text when its state changed, or some elements weren’t built to be responsive. We were using early versions of the Figma files, and occasionally, an additional file would be emailed to us so many of these things will continue to improve.

Not everything in the design is available in code

Once we built the screens, tested our click mocks, and were ready to ship to dev, we discovered that many of the elements we were using didn’t have code components. Those with React components were just that—stand-alone components that weren’t connected to the system at large. We couldn’t call them with an API.

The smaller gaps were things like status icons—16 were available in the design system, but only 5 were implemented in code.

On the more complex end, we hit a roadblock with the Rich Data Grid, a critical table component that supports resizing columns, sorting, search-based filtering, and dropdown filters. We rely on it for most of our app, but after quadruple-checking with our PM at Microsoft, we confirmed there wasn’t a production-ready version available. That meant a scramble to redesign for simplicity and for our dev team to build as much functionality as possible from scratch.

From there, it was a fast and bumpy ride to Ignite with the dev team close on my back tire.

Designing the future of data wrangling with Osmos and Microsoft Fabric

We stuck the landing and were one of only two solutions available for public preview on the day that the Workloads Hub launched at Microsoft Ignite. By the end of the week, we had been joined by a couple more.

Our streamlined design system enables rapid iteration as we bring in the best pieces of our stand-alone app and continue to by an early leader in the AI data wrangling space.

Explore how the Osmos AI Data Wrangler on Microsoft Fabric can streamline your enterprise data workflows

‍