Effective collaboration between designers and developers is vital for creating a positive user experience, but bridging the gap between design and code can be challenging at the best of times. The handoff process often leads to communication gaps, inconsistencies, and, most importantly, lost productivity, causing frustration for both designers and developers.

When we try to understand where most of the time is spent building software applications, we will notice that a significant amount of it is lost due to a lack of true collaboration, miscommunication, and no single “source of truth.” As a result, we see designers creating great user experiences for clients and passing on their approved designs with little input from the developers. They then attempt to recreate the designs with their developer tools, resulting in a complicated, cost-intensive process and often unimplementable designs.

Developers and integrators are supposed to closely inspect a design and try to analyze all there is to it: the margins, spacing, alignments, the types of controls, and the different visual states that the user interface might go through (a loading state, a partial state, an error state, and so on) during the interactions with it, and then try to figure out how to write the code for this interface. Traditionally, this is the design handoff process and has long become the norm.

We at Uno Platform believe that a better, more pragmatic approach must exist. So, we focused on improving the workflow and adding the option to generate the code for the user interface straight from the design while allowing developers to build upon the generated code’s foundation and further expand it.

“When designers are fully satisfied with their designs, they create a document with all the details and digital assets required for the development team to bring the product to life. This is the design handoff process.”

— UX Design Institute, “How to create a design handoff for developers”

Let’s look at some of the problems associated with the handoff process and how the Uno Platform for Figma Plugin may help alleviate the pitfalls traditionally seen in this process.

Note: The Uno Platform Plugin for Figma is free, so if you’d like to try it while reading this article, you can install it right away. Uno Platform is a developer productivity platform that enables the creation of native mobile, web, desktop, and embedded apps using a single codebase. As part of its comprehensive tooling, Uno Platform offers the Uno Figma plugin, enabling easy translation of designs to code. (While Uno Platform is free and open-source, the plugin itself is free but not open-source.) If you want to explore the code or contribute to the Uno project, please visit the Uno Platform GitHub repository.

Unifying Design And Development

“Translating” design elements from Figma to code is time-consuming and prone to errors. Too often, projects are abandoned at handoff; developers and designers may opt to change a specific requirement in their designs but only sometimes communicate these changes effectively. Once designers pass their work files and documentation to the development team, they are on to the next project.

Our philosophy is that your Figma Design is the single source of truth on which end-users, designers, and developers should agree.

Designers and developers should not work in a waterfall system. Instead, they should have their own sets of specifications and requirements evolving in parallel. Developers usually work from a backlog, which is rarely used by designers whose point of view is generally a much wider lens, not well represented in granular backlog-type structures.

“The waterfall model is a linear, sequential approach to the software development lifecycle (SDLC) that is popular in software engineering and product development. The waterfall model uses a logical progression of SDLC steps for a project, similar to the direction in which water flows over the edge of a cliff. It sets distinct endpoints (or goals) for each phase of development. Those endpoints (goals) can’t be revisited after their completion.”

— Ben Lutkevich, “What is the waterfall model?”

When managing the dynamic aspect of the workflow — it’s not a waterfall type where you hand off the entire design project when it’s completely done — you need to constantly communicate the changes (colors, assets, layouts, typography, interactions, and so on). The more designers work on an interface, the more they have to effectively communicate the changes and details to the developers — making detailed documentation does not always suffice.

Another important point should be mentioned. Individual developers will not always have an extensive picture overview of what they are working on as their work is broken down into a set of granular tasks, which may lead to unnecessary rework, double work (that needs to be QA’ed multiple times), or a developer asking for changes that may not benefit the project as a whole. At the same time, designers often have the opposite issue where they constantly move vast chunks of layouts, which sometimes leads them to miss states and assets necessary to complete the details of a specific interaction. Even then, when the design is ready, it still requires a lot of implementation effort on the developers’ part once they start working inside their integrated development environment (IDE).

In the past, designers and developers have often used different platforms and workflows, which led to miscommunication and delays in the handoff process. Nowadays, software development teams can benefit from the availability of many new technologies and tools, and by leveraging them, they can work together more efficiently, reducing the burden on both parties and ultimately delivering better results for their clients and customers. Figma and Uno Platform are some of those new available tools.

Why Figma?

Uno Platform is one of many tools trying to solve the handoff issues for the designers and developers and improve their collaboration efficiency. In fact, many platforms are tackling every aspect of the workflow for every programming language.

A significant factor in choosing our current development path lies in the belief that Figma outperforms the Sketch + Zeplin combination (and not only) because of its platform-agnostic nature. Being a web-based tool, Figma is more universal, while Sketch is limited to MacOS, and sharing designs with non-Mac developers necessitates using third-party software. Figma offers an all-in-one solution, making it a more convenient option.

In addition, Figma now also supports plugins, many of them assisting with the handoff process specifically. For example, Rogie King recently launched a plugin “Clippy — add attachments” that allows attachments to your Figma files, which is very useful during the handoff process. Of course, there are many others.

This and other factors “weighed” us towards Figma Design. And we aren’t alone; others have picked up Figma as their key design tool after doing some research and then trying things in practice.

“Comparing the must-haves against the features of a list of possible design apps we compiled (including Sketch, Axure RP, Framer, and more), Figma came out as the clear forerunner. We decided to proceed with a short-term trial to test Figma’s suitability, and we haven’t looked back since. It met all of our key feature requirements but surprised us with a lot of other things along the way.”

— Simon Harper, “Why we chose Figma as our primary design tool”

Working with the Uno Figma Plugin

1: Get Started with Uno Platform for Figma Plugin

Uno for Figma presents a significant advantage for teams that rely on Figma as their primary design tool.

By combining the familiarity and efficiency of Figma with the capabilities of the Uno Platform, designers can seamlessly continue working in a familiar environment that they are already comfortable with while knowing their designs will be integrated practically by their development team.

Getting started with the Uno Figma plugin is a straightforward process:

1. Install the Uno Platform (Figma to C# or XAML) plugin.
2. Open the Uno Platform Material Toolkit design file available from the Figma Community.

With the Uno Material Toolkit, you no longer need to design many of the components from scratch as the toolkit provides UI (user interface) controls designed specifically for multi-platform, responsive applications.

Note: To use the plugin, you must create your design inside the Uno Material Toolkit Figma file, using its components. Without it, the plugin won’t be able to generate any output, making it incompatible with existing Figma designs.

2: Setting Up Your Design

Once you have installed the Uno Platform for Figma plugin and opened the Material Toolkit design file, you can use the “Getting Started” page in the file layers to set up your design. The purpose of this page is to simplify the process of defining your application’s theme, colors, and font styles.

You can also use DSP Tooling in Uno.Material for Uno Platform applications. This feature has been one of the top requests from the Uno Platform community, and it is now available both as a package and as part of the App Template Wizard.

If you’re unfamiliar with DSP (Design System Packages), it’s essentially a repository of design assets, including icons, buttons, and other UI elements, accompanied by JSON files containing design system information. With a DSP, you can craft a personalized theme that aligns with your brand, effortlessly integrate it into your Uno Platform application through the Figma plugin, and implement theme changes across the entire user interface of your application.

The ability to import custom Design System Packages (DSPs) is a significant development for Uno Platform. With this feature, designers can create and manage their own design systems, which can be shared across projects and teams. This not only saves time but also ensures consistency across all design work. Additionally, it allows designers to maintain control over the design assets, making it easier to make updates and changes as needed.

Note: The “Getting Started” page offers step-by-step instructions for modifying the colors and fonts of the user interface, including previewing your overall theme. While you can modify these later, I’d recommend doing this right at the beginning of your project for better organization.

Afterward, create a new page and ensure that you begin by using the Standard Page Template provided in the Uno Toolkit components to start the design of your application. It’s essential to remember that you will have to detach the instance from the template to utilize it.

3: Start Creating The Design

Most Toolkit Components have variants that will act as time savers, allowing a single component to contain its various states and variations, with specific attributes that you may toggle on and off.

For example, button components have a Leading Icon variant so you can use the same element with or without icons throughout the design.

The Uno Toolkit provides a comprehensive library of pre-built components and templates that come with the appropriate layer structures to generate XAML (eXtensible Application Markup Language is Microsoft’s variant of XML for describing a graphic user interface) and C# markup and allows designers to preview their designs using the Uno plugin. This helps synchronize design and development efforts, maintain project consistency, and optimize code output. Furthermore, these components can be reused, making creating and managing consistent designs across multiple projects easier.

4: Live Preview Your App

The Previewer in the Uno Platform is a powerful tool that enables designers to troubleshoot their designs and catch issues before the handoff process starts, avoiding redundancy in communications with developers. It provides a live interactive preview of the translated look, behavior, and code of the application’s design, including all styling and layout properties. Designers can interact with their design as if it is a running app, scrolling through content and testing components to see how they behave.

To preview the designed user interface, follow these steps:

1. In Figma, select the screen you want to preview.
2. Right-click the screen → Plugins → Uno Platform (Figma to C# or XAML).
3. Once the plugin has launched, select the Preview tab.
4. Press the Refresh button.

The Export tab view allows you to see the C# or XAML code separately, saving you the effort of writing the code yourself. The generated code uses Uno Toolkit components, which are provided with comprehensive developer documentation. Moreover, you are skipping the handoff where developers must inspect the assets to extract the visual specifications, which usually requires more communication efforts and multiple rounds of back-and-forth design “polishing.”

5: Generate and Export your Code

Relying on a third-party tool to generate the code automatically may cause some initial reservations, but it can significantly improve workflow efficiency and save the designers’ and developers’ time. By “translating” the design to code directly from the Figma file, the developers can ensure that the application looks and behaves as intended, and designers can ensure that their designs remain pixel-perfect and provide the interaction/UX experience as they were originally intended.

Uno Platform uses C# and XAML as languages of choice. C# markup and XAML provide a wide range of features, such as support for animations, styles, and templates. In addition, XAML is generally perceived to be providing a good separation between UI styling and business logic, allowing the developers to focus more on high-level business logic during the development process while reducing the amount of code they need to write as XAML can be reused across Windows, iOS, Android, WebAssembly, macOS, and Linux. This level of precision ensures that the user experience is consistent throughout the application (regardless of the software platform being used), saves time, and reduces the likelihood of human error, even for the most experienced developers.

“XAML is a declarative markup language which simplifies creating user interfaces for .NET apps. You can create visible UI elements in the declarative XAML markup and then separate the UI definition from the run-time logic by using code-behind files that are joined to the markup through partial class definitions. XAML directly represents the instantiation of objects in a specific set of backing types defined in assemblies and enables a workflow where separate parties can work on the UI and the logic of an app, using potentially different tools.”

— XAML overview (Microsoft Docs)

How can you leverage the generated code from the Uno Figma plugin?

The Export tab in the Uno Figma plugin allows you to inspect and export the generated code — the code can be later used in your preferred IDE and by the developers. Using the top-left dropdown menu, you can alternate between C#, XAML,Color, and Fonts Override File to export. Additionally, the contextual controls at the bottom of the tab allow you to set the view type and refresh the view.

To generate and export the code, copy the Export tab’s content to the clipboard and paste it into your preferred IDE tool. As a designer, you do not have to do this; your development team can use the plugin (even without Figma editor role fees) using Dev Mode to access the code directly from your design.

To do this, follow these steps:

1. Select the page or component that you want to inspect.
2. From the Plugins menu in Figma, choose Uno Platform (Figma to C# or XAML).
3. Select the Export tab.
4. Click the Refresh button located at the bottom of the tab.
5. Optionally, you can change the left-top dropdown to other files to view the theme’s colors, fonts, and Localization files. You can also export each of these files into your project. For Color Override File, copy the generated code into your application’s “Color Override” file. (This is documented in detail in the “Uno Material library → Customize Color Palette” help page.)

6: Build in Visual Studio

Moving the generated code (C# markup and XAML) to Visual Studio is just as easy when your design is good enough to go into the development stage.

If you create a new project using the Uno Solution Template Wizard for Visual Studio, this user-friendly tool will automatically configure your project to your exact preferences and will allow you to use as many (or as few) of the Uno Platform features as you’d like, including the Uno.Material theme, which is made for designing applications that have a great look yet don’t feel too standard. Alternatively, you can use the Fluent theme, the default theme for WinUI-based applications.

Note: The Toolkit file’s default theme is Material. However, since Uno Platform supports overrides, you have the flexibility to customize your components and achieve a Fluent theme or any other style you like.

Practical Exercise: Flight App UI Tutorial

Let’s review together a detailed practical example!

In this mini-tutorial, I will guide you step-by-step through the process of effectively using Uno Toolkit components and mastering some of the capabilities of the Uno Figma plugin. By the end of the tutorial, you will have the tools and knowledge needed for creating elegant interfaces and how to generate C# Markup and XAML, which could be extended further by you or your team.

Getting Started With The Tutorial: First Steps

If you’re new to using the Uno Platform for Figma plugin, the first step is to install it from the Figma community. After downloading the plugin, proceed with the following steps:

1. Navigate to the Uno Material Toolkit File in the Figma community and select Open in Figma to start a new project.
2. Setting up your project theme first is optional but recommended. You can set your desired theme from the Getting Started page (included in the file) or import a DSP (Design System Package) file to quickly transform your theme.
3. Create a new page. Within the Resources tab of the menu, under Components, find and select the “Standard Page Template.”
4. Right-click on the template and select Detach the instance.

These are the initial steps for all new projects using the Uno Platform for Figma plugin and Uno Material Toolkit — not only the steps for this tutorial. This workflow will set you on the right path to creating various mobile app designs effectively.

Designing With Uno Material Toolkit

You can follow along here with the Uno Flights file template, which you can use for reference. Please note that when building your UI design, you should only use components that are part of the material toolkit file. Refer to the components page to see the list of available components.

First, implement the search results and the Sort and Filter action buttons by following these steps:

1. Add a TextBox and change the placeholder text.
2. In the TextBox properties, toggle on a leading/trailing icon. (optional)
3. Add Text to display the number of results and the associated text. (Use Shift + A to add them to an Auto Layout.)
4. Add an IconButton (use the components provided by the Material Toolkit) and swap the default icon to a Filter icon. Include accompanying Text for the icon, and group them within a frame with a horizontal Auto Layout.
5. Repeat the previous step for the filter action, adding an IconButton with a filter icon accompanied by Text and placing them in an Auto Layout.
6. Nest both actions within another Auto Layout.
7. Finally, group the three sections (number of results, sort action, and filter action) into an Auto Layout.
8. Add the SearchBox and your final Layout and nest them inside Content.Scrollable.

By following these steps, you should see a result similar to the example below:

Step 2: Flight Information

The Flight Itinerary block can be divided into three sections:

• Flight Times and the ProgressBar are included in the first Auto Layout.
• Airport and Flight Information are organized in a separate Auto Layout.
• Airline Information and Flight Costs are presented in a third Auto Layout.

Flight Times and ProgressBar

1. Insert two Text elements for arrival and departure times.
2. Locate the ProgressBar component in the Resources tab and add it between the two times created.
3. Group the three components (arrival time, ProgressBar, departure time) into an Auto Layout.
4. Add an icon and swap the instance with a plane icon.
5. Select the absolute position and place the plane icon at the beginning of the ProgressBar.

Flight Info

1. Insert Text for your flight time and flight status.
2. Apply an Auto Layout to organize them and set it to Fill.
3. Proceed to add Text for the Airport initials.
4. Combine the two Texts and the previously created Auto Layout into a new horizontal Auto Layout.

Airline Information

1. Add the necessary Text for Airline Information and pricing.
2. Select both Text elements and apply an Auto Layout to them.
3. Set the frame of the Auto Layout to Fill.
4. Adjust the horizontal gap as desired.

Select the three sections you want to modify:

1. Add a new Auto Layout.
2. Apply a Fill color to the new layout.
3. Adjust the vertical and horizontal spacing according to your preference.
4. Move your component to the Standard Page Template by dragging it below the content.Scrollable layer.

Step 3. Bottom TabBar

The Bottom TabBar is relatively simple to modify and is part of the Standard Page Template. To complete this section:

1. Select each item from the Bottom TabBar.
2. Expand it to the lowest icon layer.
3. In the Design tab, replace the current instance with the appropriate one.
4. Next, select the associated Text and update it to match the corresponding menu item.

Step 4. Preview, Export, And Transition From Figma To Visual Studio

Once the user interface design is finalized in Figma, the Uno Platform Plugin enables us to render and preview our application with the click of a button. Within the Previewer, you can interact with the components, such as clicking the buttons, scrolling, toggling various functionalities, and so on.

After previewing the app, we can examine the XAML code generated in the Export tab.

Open the Uno Figma Plugin (right-click the screen → Plugins → Uno Platform (Figma to C# or XAML).

For XAML

1. You can change your namespace in the first tab (Properties) under Application (optional).
2. Go to the Export tab and select Copy to Clipboard (bottom right button).
3. Open Visual Studio and create a new project using the Uno App Template Wizard (this is where you will choose between using XAML or C# Markup for your user interface).
4. Open your MainPage.xaml file, remove the existing code, and paste your exported code from the Uno Figma Plugin.
5. Change your x:class and xmlns:local namespaces.
6. Export the color override file and paste it into your ColorPaletteOverride.xaml.

For C# Markup

1. Go to the Export tab and select all contents from the line after this to the semicolon ; at the end. (See the screenshot below.)
2. Copy the selected code to the clipboard (Ctrl/Cmd + C on Win/Mac).
3. In Visual Studio, create a new project using the Uno App Template Wizard. (This is where you will choose between using XAML or C# Markup for your user interface.)
4. Open MainPage.cs and replace all the Page contents with the copied code.
5. To set the appropriate font size for all buttons, access the MaterialFontsOverride.cs file in the Style folder. Go to the Figma Plugin, and in the Export tab, select Fonts Override File from the dropdown menu. Copy the content in the ResourceDictionary and replace it in your MaterialFontsOverride.cs.

Here’s an example of the generated XAML (and also C#) code that you can import into Microsoft Visual Studio:

⏬ flightXAML.txt (38 kB)

⏬ flightCsharp.txt (56 kB)

Conclusion

Harmonizing design and development is no easy task, and the nuances between teams make it so there is no one-size-fits-all solution. However, by focusing on the areas that most often affect productivity, the Uno Platform for Figma tool helps enhance designer-developer workflows. It facilitates the efficient creation of high-fidelity designs, interactive prototypes, and the export of responsive code, making the entire process more efficient.

The examples provided in the article primarily showcase working with mobile design versions. However, there are no limitations in the document or the generated code that restrict you from creating suitable versions for desktops, laptops, tablets, and just the world of the World Wide Web. Specify the desired resolutions and responsive elements (and how they should behave), and the designs you create should be easily adaptable across different platforms and screen sizes.

Further Reading

• “Five is for 5X productivity. Announcing Uno Platform 5.0,” (Uno Platform )
  This article provides an overview of all the new features available in the Uno Platform, including the new Figma to C# Markup plugin feature.
• “Intro to Figma for .NET Developers,” (Uno Platform )
  This article provides an overview of Figma and its features and how .NET developers can use it together with the Uno Platform to streamline their design-to-development workflows.
• “Uno Platform 5.0 — Figma plugin, C# Markup, and Hot Reload showcase via Uno Tube Player sample app,” (YouTube)
  This is a short video highlight for Uno Platform v. 5.0, edited from the following steps in the Tube Player workshop (this is a Figma Design file which is part of the Tube Player workshop and is tailored to .NET developers specifically).
• “Uno Platform for Figma — Uno Flight speed build,” (YouTube)
  A short video that shows the making of the Uno Flight app UI compressed into only a minute and a half.
• “Building a Login Page with Uno Platform and Figma,” (Uno Platform)
  The Uno Platform’s plugin and toolkit offer a large library of ready-to-use components, allowing developers and designers to take advantage of a set of higher-level user interface controls designed specifically for multi-platform, responsive applications.
• “Building a Profile Page with Uno Platform for Figma,” (Uno Platform)
  In this tutorial, you will learn how to build a completely functional Profile page using Figma and Uno Platform and how to generate responsive and extendable XAML code.
• “Replicating Pet Adoption UI with Uno Platform and Figma,” (Uno Platform)
  This tutorial will walk you through creating a Pet Adopt user interface mobile screen and exporting your Figma designs into code, including setting up your Figma file and designing using Uno Material Toolkit components.
• “From Figma to Visual Studio — Adding Back-End Logic to Goodreads App,” (Uno Platform)
  The Uno Platform has an XAML tab (which houses the generated code for the page you created in Figma) and a Themes tab (which houses the Resource Dictionary for the page you created). This tutorial contains a working Goodreads sample and provides many details as to using the XAML and Themes tabs.
• “Replicating a Dating App UI with .NET, Uno Platform and Figma,” (Uno Platform)
  In this tutorial, you’ll learn how to use Uno Platform to create a dating app user interface, covering in detail various sections and components of the interface; at the end, you’ll also be able to export the design into Visual Studio Code.
• “Getting Started with Uno Toolkit,” (Uno Platform)
  Detailed developer documentation pages for working with Uno Platform.
• “The 12 best IDEs for programming,” Franklin Okeke
  To keep up with the fast pace of emerging technologies, there has been an increasing demand for IDEs among software development companies. We will explore the 12 best IDEs that currently offer valuable solutions to programmers.
• “Why we chose Figma as our primary design tool,” Simon Harper (Purplebricks Digital)
  Comparing the must-haves against the features of a list of possible design apps we compiled (including Sketch, Axure RP, Framer, and more), Figma came out as the clear forerunner. It met all of our key feature requirements but surprised us with a lot of other things along the way.
• “Why we switched to Figma as the primary design tool at Zomato,” Vijay Verma
  Before Figma, several other tools were used to facilitate the exchange of design mockups and updates; after Figma, the need to use other tools and services was reduced as everything comes in one single package.
• “The Best Handoff Is No Handoff,” Vitaly Friedman (Smashing Magazine)
  Design handoffs are often inefficient and painful; they cause frustration, friction, and a lot of back and forth. Can we avoid them altogether? This article discusses in detail the “No Handoff” fluid model, where product and engineering teams work on the product iteratively all the time, with functional prototyping being the central method of working together.
• “Designing A Better Design Handoff File In Figma,” Ben Shih (Smashing Magazine)
  Creating an effective handoff process from design to development is a critical step in any product development cycle. This article shares many practical tips to enhance the handoff process between design and development in product development, with guidelines for effective communication, documentation, design details, version control, and plugin usage.
• “How I use Sketch with Zeplin to Design and Specify Apps,” Marc Decerle
  Sketch is a very powerful tool in combination with Zeplin. In this article, the author describes how he organizes his Sketch documents and how he uses Sketch in conjunction with Zeplin.
• Design System Package (DSP)
  This document describes the Design System Package structure, including details on how each internal file or folder should be used.

(mb, yk)

In the digitized corridors of modern healthcare, patient data emerges as the lifeblood, fueling every aspect of clinical decision-making, personalized treatment, and ongoing research. As we entrust our most intimate health details to electronic health records (EHRs), the imperatives of robust data backup and ironclad security protocols cannot be overstated. The importance of patient data transcends mere record-keeping; it represents the sanctity of personal health information and the collective wisdom gleaned from countless medical interactions.

However, this invaluable data trove is not impervious to threats. Cyber-attacks targeting healthcare systems and their data backups have surged, data breaches have led to significant losses, and unexpected downtimes have jeopardized both patient safety and trust. In the face of such risks, the backup and security of patient data evolve from IT concerns to foundational pillars of healthcare integrity. This article will delve into the multifaceted importance of patient data, the potentially devastating consequences of its compromise, and the critical strategies required to safeguard it against the growing sophistication of digital threats. The commitment to protecting patient data is not just a technical challenge; it is a moral imperative that upholds the very essence of healthcare provision in the 21st century.

Securing Healthcare Data with Innovation: The Ciox Health and Veeam Success Story

Ciox Health, a member of the Datavant Group, spearheads innovative data technology solutions that facilitate the flow of healthcare information, thereby enhancing patient care. Ciox is dedicated to transforming health data into valuable insights, overcoming hurdles in areas including clinical data collection, information disclosure, and medical coding

In the ever-evolving world of healthcare, the safety and accessibility of patient data are paramount. Ciox Health, a leader in healthcare information management, has pioneered the use of cutting-edge hybrid cloud backup solutions to ensure that their vast data reserves are both secure and readily available. By integrating Veeam Data Platform – Advanced Edition, along with Veeam Backup for cloud services like AWS and Microsoft Azure, Ciox has set a new standard for data management within the industry.

Ciox’s forward-thinking approach is encapsulated by their embrace of Veeam’s technology, which thrives on flexibility and doesn’t get bogged down by the specifics of data location or hardware variations. As Mike Hudec, a key voice at Ciox, affirms, Veeam’s ability to offer top-notch backup and recovery tools across their varied technological environments made it the standout choice for their needs. It’s the blend of adaptability and cost-efficiency that makes Veeam an indispensable part of their operation.

With a robust system safeguarding 14,000 workloads and handling over 500 terabytes of data daily, Ciox has created an impenetrable fortress for their data. This includes everything from their life sciences research data to their administrative functions. The unique feature of Veeam is its agility – Ciox can transfer their backups between Azure and AWS with ease, ensuring data recovery is possible from multiple sources, a testament to the seamless integration with multi-cloud environments.

The shift towards cloud-centric operations has been significant, with Ciox strategically retiring physical data centers to make way for more cloud-based solutions. Veeam has been pivotal in this transition, enabling swift and cost-effective data migrations without the need for additional external services. It’s become the go-to tool for Ciox, exemplifying efficiency and reliability.

As Ciox continues to delve into innovative technology avenues, Veeam stands as a guardian, adding an extra layer of protection. This protective shell allows Ciox the freedom to explore and integrate sophisticated technologies such as Kubernetes, Amazon S3, and Azure Blob Storage. Veeam’s flexibility is again highlighted by its capability to dynamically scale and restore complex workloads quickly, accommodating for systems that aren’t naturally scalable.

Embracing what they refer to as ‘Data Freedom,’ Ciox, with Veeam’s support, is not only redefining their technological landscape but is also reinforcing their commitment to delivering premium, cost-effective healthcare services. The Veeam solution has not just been a data backup tool for Ciox; it has become a strategic partner in their journey towards technological advancement and excellence in healthcare data management.

Veeam Powers Ciox’s High-Availability of Medical Records Across Clouds for Enhanced Patient Care

With the support of Veeam’s native, purpose-built solutions, Ciox health has the confidence to be able to provide access to an unprecedented level of medical records for healthcare professionals. With the Veeam Data Platform, Ciox can provide access to over 100,000 medical records each minute between their diverse cloud environments making what they do a cornerstone of successful patient care outcomes.

“Our business is incredibly data-intensive,” said Hudec. “For example, one of our most critical databases logs 40,000 transactions per minute. Managing data at scale is a challenge, but we must do it well — people’s lives depend on it. So, we looked for a robust data protection solution that would allow us to recover fast in the event of disasters such as cyberattacks or hardware failures.”

Moreover, Veeam’s efficiency is evident in its cost-effective data management. Ciox creates immutable backups totaling 500 terabytes daily, with monthly expenses under USD 20,000—a figure that Hudec highlights as impressively economical given the volume and cross-cloud backup strategy involved.

Additionally, Veeam has been instrumental in reducing costs and facilitating agility during Ciox’s data center consolidation efforts. By enabling smooth data transfers between various clouds, Veeam has positioned itself as Ciox’s preferred tool for backup and recovery solutions. The approach offers substantial savings, both in terms of time and finances, when compared to other methods. Veeam’s platform-agnostic solutions also diminish the risks associated with data management, by providing Ciox with centralized management, end-to-end layered security and a hybrid and multi-cloud ready platform they are able to maintain an environment that can adapt to changing needs.

In conclusion, Veeam’s solutions have not only helped Ciox continue to secure their position within the healthcare data management sector, but have also underscored the importance of having a fast, secure, and agile hybrid cloud backup solution that supports hybrid- and multi-cloud environments, end-to-end- layered security with fast-reliable recovery to support mission-critical workloads in patient care.

Branded series by Veeam

By Randy Ferguson

Back in the early 2010s, it was nearly impossible to avoid ribbon shapes in web designs. It was actually back in 2010 that Chris Coyier shared a CSS snippet that I am sure has been used thousands of times over.

And for good reason: ribbons are fun and interesting to look at. They’re often used for headings, but that’s not all, of course. You’ll find corner ribbons on product cards (“Sale!”), badges with trimmed ribbon ends (“First Place!”), or even ribbons as icons for bookmarks. Ribbons are playful, wrapping around elements, adding depth and visual anchors to catch the eye’s attention.

I have created a collection of more than 100 ribbon shapes, and we are going to study a few of them in this little two-part series. The challenge is to rely on a single element to create different kinds of ribbon shapes. What we really want is to create a shape that accommodates as many lines of text as you throw at them. In other words, there is no fixed dimension or magic numbers — the shape should adapt to its content.

Here is a demo of what we are building in this first part:

You can play with the text, adjust the screen size, change the font properties, and the shape will always fit the content perfectly. Cool, right? Don’t look at the code just yet because we will build this together from scratch.

How Does It Work?

We are going to rely on a single HTML element, an <h1> in this case, though you can use any element you’d like as long as it can contain text.

<h1>Your text goes here</h1>

Now, if you look closely at the ribbon shapes, you can notice a general layout that is the same for both designs. There’s really one piece that repeats over and over.

Sure, this is not the exact ribbon shape we want, but all we are missing is the cutouts on the ends. The idea is to first start with this generic design and add the extra decoration as we go.

Both ribbons in the demo we looked at are built using pretty much the same exact CSS; the only differences are nuances that help differentiate them, like color and decoration. That’s my secret sauce! Most of the ribbons from my generator share a common code structure, and I merely adjust a few values to get different variations.

Let’s Start With The Gradients

Any time I hear that a component’s design needs to be repeated, I instantly think of background gradients. They are perfect for creating repeatable patterns, and they are capable of drawing lines with hard stops between colors.

We’re essentially talking about applying a background behind a text element. Each line of text gets the background and repeats for as many lines of text as there happens to be. So, the gradient needs to be as tall as one line of text. If you didn’t know it, we recently got the new line height (lh) unit in CSS that allows us to get the computed value of the element’s line-height. In our case, 1lh will always be equal to the height of one line of text, which is perfect for what we need.

Note: It appears that Safari uses the computed line height of a parent element rather than basing the lh unit on the element itself. I’ve accounted for that in the code by explicitly setting a line-height on the body element, which is the parent in our specific case. But hopefully, that will be unnecessary at some point in the future.

Let’s tackle our first gradient. It’s a rectangular shape behind the text that covers part of the line and leaves breathing space between the lines.

The gradient’s red color is set to 70% of the height, which leaves 30% of transparent color to account for the space between lines.

h1 {
  --c: #d81a14;
  
  background-image: linear-gradient(var(--c) 70%, #0000 0);
  background-position: 0 .15lh;
  background-size: 100% 1lh;
}

Nothing too complex, right? We’ve established a background gradient on an h1 element. The color is controlled with a CSS variable (--c), and we’ve sized it with the lh unit to align it with the text content.

Note that the offset (.15lh) is equal to half the space between lines. We could have used a gradient with three color values (e.g., transparent, #d81a14, and transparent), but it’s more efficient and readable to keep things to two colors and then apply an offset.

Next, we need a second gradient for the wrapped or slanted part of the ribbon. This gradient is positioned behind the first one. The following figure demonstrates this with a little opacity added to the front ribbon’s color to see the relationship better.

Here’s how I approached it:

linear-gradient(to bottom right, #0000 50%, red 0 X, #0000 0);

This time, we’re using keywords to set the gradient’s direction (to bottom right). Meanwhile, the color starts at the diagonal (50%) instead of its default 0% and should stop at a value that we’re indicating as X for a placeholder. This value is a bit tricky, so let’s get a visual that illustrates what we’re doing.

The green arrow illustrates the gradient direction, and we can see the different color stops: 50%, X, and 100%. We can apply some geometry rules to solve for X:

(X - 50%) / (100% - 50%) = 70%/100%
X = 85%

This gives us the exact point for the end of the gradient’s hard color stop. We can apply the 85% value to our gradient configuration in CSS:

h1 {
  --c: #d81a14;
  
  background-image: 
    linear-gradient(var(--c) 70%, #0000 0), 
    linear-gradient(to bottom left, #0000 50%, color-mix(in srgb, var(--c), #000 40%) 0 85%, #0000 0);
  background-position: 0 .15lh;
  background-size: 100% 1lh;
}

You’re probably noticing that I added the new color-mix() function to the second gradient. Why introduce it now? Because we can use it to mix the main color (#d81a14) with white or black. This allows us to get darker or lighter values of the color without having to introduce more color values and variables to the mix. It helps keep things efficient!

We have accomplished the main piece of the design! We can turn our attention to creating the ribbon shape. You will notice some unwanted repetition at the top and the bottom. Don’t worry about it; it will be fixed in the next section.

Next, Let’s Make The Ribbons

Before we move in, let’s take a moment to remember that we’re making two ribbons. The demo at the beginning of this article provides two examples: a red one and a green one. They’re similar in structure but differ in the visual details.

For the first one, we’re taking the start and end of the ribbon and basically clipping a triangle out of it. We’ll do a similar thing with the second ribbon example with an extra fold step for the cutout part.

The First Ribbon

The only thing we need to do for the first ribbon is apply a clip-path to cut the triangular shape out from the ribbon’s ends while trimming unwanted artifacts from the repeating gradient at the top and bottom of the ribbon.

We have all of the coordinates we need to make our cuts using the polygon() function on the clip-path property. Coordinates are not always intuitive, but I have expanded the code and added a few comments below to help you identify some of the points from the figure.

h1 {
  --r: 10px; /* control the cutout */

  clip-path: polygon(
   0 .15lh, /* top-left corner */
   100% .15lh, /* top right corner */
   calc(100% - var(--r)) .5lh, /* top-right cutout */
   100% .85lh,
   100% calc(100% - .15lh), /* bottom-right corner  */
   0 calc(100% - .15lh), /* bottom-left corner */
   var(--r) calc(100% - .5lh), /* bottom-left cutout */
   0 calc(100% - .85lh)
  );
}

This completes the first ribbon! Now, we can wrap things up (pun intended) with the second ribbon.

The Second Ribbon

We will use both pseudo-elements to complete the shape. The idea can be broken down like this:

1. We create two rectangles that are placed at the start and end of the ribbon.
2. We rotate the two rectangles with an angle that we define using a new variable, --a.
3. We apply a clip-path to create the triangle cutout and trim where the green gradient overflows the top and bottom of the shape.

First, the variables:

h1 {
  --r: 10px;  /* controls the cutout */
  --a: 20deg; /* controls the rotation */
  --s: 6em;   /* controls the size */
}

Next, we’ll apply styles to the :before and :after pseudo-elements that they share in common:

h1:before,
h1:after {
  content: "";
  position: absolute;
  height: .7lh;
  width: var(--s);
  background: color-mix(in srgb, var(--c), #000 40%);
  rotate: var(--a);
}

Then, we position each pseudo-element and make our clips:

h1:before {
  top: .15lh;
  right: 0;
  transform-origin: top right;
  clip-path: polygon(0 0, 100% 0, calc(100% - .7lh / tan(var(--a))) 100%, 0 100%, var(--r) 50%);
}

h1:after {
  bottom: .15lh;
  left: 0;
  transform-origin: bottom left;
  clip-path: polygon(calc(.7lh / tan(var(--a))) 0, 100% 0, calc(100% - var(--r)) 50%, 100% 100%, 0 100%);
}

We are almost done! We still have some unwanted overflow where the repeating gradient bleeds out of the top and bottom of the shape. Plus, we need small cutouts to match the pseudo-element’s shape.

It’s clip-path again to the rescue, this time on the main element:

clip-path: polygon(
    0 .15lh,
    calc(100% - .7lh/sin(var(--a))) .15lh,
    calc(100% - .7lh/sin(var(--a)) - 999px) calc(.15lh - 999px*tan(var(--a))),
    100% -999px,
    100% .15lh,
    calc(100% - .7lh*tan(var(--a)/2)) .85lh,
    100% 1lh,
    100% calc(100% - .15lh),
    calc(.7lh/sin(var(--a))) calc(100% - .15lh),
    calc(.7lh/sin(var(--a)) + 999px) calc(100% - .15lh + 999px*tan(var(--a))),
    0 999px,
    0 calc(100% - .15lh),
    calc(.7lh*tan(var(--a)/2)) calc(100% - .85lh),
    0 calc(100% - 1lh)
);

Ugh, looks scary! I’m taking advantage of a new set of trigonometric functions that help a bunch with the calculations but probably look foreign and confusing if you’re seeing them for the first time. There is a mathematical explanation behind each value in the snippet that I’d love to explain, but it’s long-winded. That said, I’m more than happy to explain them in greater detail if you drop me a line in the comments.

Our second ribbon is completed! Here is the full demo again with both variations.

Wrapping Up

We looked at two ribbon variations that use almost the same code structure, but we can make many, many more the same way. Your homework, if you accept it, will be to make the following variations using what you have learned so far.

You can still find the code within my ribbons collection, but it’s a good exercise to try writing code without. Maybe you will find a different implementation than mine and want to share it with me in the comments! In the next article of this two-part series, we will increase the complexity and produce two more interesting ribbon shapes.

(gg, yk)