Intro to Figma for .NET Developers

Developers and designers working together can often agree that the “handoff” is a dreaded pain point when collaborating. Every mistake made in the design handoff can impact the app and cause a rework for the developer. One tool that has been quickly gaining traction and has seen increasingly wide use with developers and designers is Figma.

Now for those who are unfamiliar with Figma, it is a free, browser-based design tool that makes the developer handoff process smooth and seamless by allowing developers to readily access the full design files.

In the Microsoft ecosystem, we have been using the likes of Expression Blend, Adobe XD, Sketch, and InVision. But Figma has skyrocketed in adoption among designers, as can be seen by a survey done by UX Tools.

Even a quick Twitter poll we conducted in October 2021 showed Figma as one of the main design tool choices amongst developers. Given the UX Tools poll above, we can conclude that Figma is yet to get even more adoption among .NET developers.

3 Features that Make Figma Stand Out Above Other

In our opinion Figma stands out above other options for following reasons:

Collaboration

With Figma, multiple team members can work on a single project in real-time. This makes the process fast and pleasant. As a side effect of this collaborative process, the resulting design has automatic buy-in from everyone on the team and becomes the ‘single source of truth’ for everyone on the team to adhere to.

Handoff Process Made Easy

Design-Developer handoff process with Figma is exceptionally smooth. Software developers have excellent and free access to the designs and can easily extract information about typography, redlines, colors, measurement,

One of the key reasons we think Figma works so well compared to Sketch + Zeplin duo is that Figma is a platform agnostic web-based tool while Sketch is MacOS only and requires a 3rd party to share designs with non-mac-based developers. Figma does this all-in-one neat package.

Extensibility and Community

Figma has made it extremely easy to create and distribute Figma plugins. They have also nurtured an amazing community that provides free plugins and ready-made designs you can easily ‘duplicate’. There are literally thousands of options at Figma Community Files.

About Uno Platform

For those new to Uno Platform – it allows for creation of pixel-perfect, single-source C# and XAML apps which run natively on Windows, iOS, Android, macOS, Linux and Web via WebAssembly. Uno Platform is free and Open Source (Apache 2.0) and available on GitHub.

Uno Platform & Figma

Now, what if we could take that already improved process provided by the Figma tool and make our workflow even more efficient? Now you are probably wondering “But how do I do it if I’m a developer, not a designer…”? That is where Uno Platform for Figma comes in. A plugin that allows for pixel-perfect XAML export, bringing your design to XAML code in seconds.

One of the greatest benefits for users using Figma was the possibility of being able to create prototypes and share them with other colleagues while being able to make changes at the same time. However, it does not end there, developers now have greater access to the designs and can extract information such as font, redlines, colors, and measurement, among other things.

Uno Platform for Figma philosophy takes it one step further, allowing you to make your Figma design the single source of truth on which end-users, designers, and developers can agree on. As a designer, you continue working in Figma and developers retain 100% control over the crucial code they care about. By using Uno Toolkit Material Library and Live Preview you get instant feedback on controls that you are using for your designs. One-click for XAML code and assets files means no more back and forth for assets export and management.

XAML Design Alternatives

Similarly, Blend for Visual Studio helps you design XAML-based Windows and Web applications and create aesthetically appealing UIs for WPF and Silverlight applications, and once upon a time, Windows Phone apps. The most significant benefit of Expression Blend is that it allows designers to concentrate only on design while developers focus on programming.

While coding XAML in the Visual Studio IDE is simple for small-scale applications, developers prefer to utilize XAML authoring tools like Expression Blend for big projects. However even though Blend allows you to create apps by sketching controls and graphical objects like rectangles, ellipses, or adding images and multimedia. The problem is Expression Blend and Visual Studio though they can work on the same solution/project files, they remain two separate IDEs and it is common for certain functionalities to work correctly in the Visual Studio design-time environment and throw an error in the Expression Blend one.

Uno Platform for Figma

It is now possible to use Figma to design and build Uno Platform applications. Designers can use the highly collaborative Figma environment to fine-tune the User Experience (UX) while putting in place building blocks of an application following the Material Design language. Using the Uno Platform Figma Plugin, it is possible to visualize how the application will render and export actual XAML to use in Visual Studio for the application. This application is also ready for localization, ready for accessibility, and can optionally use Uno Extensions (Reactive, Navigation…).

Improve Design to Code Handoff

Handoff from design to code should be as quick as possible. Uno Platform for Figma lets you transform high-fidelity Figma designs into developer-friendly XAML code that can be swiftly built upon and enhanced. Create packages that are ready to utilize in your projects with ease and use our plugin’s XAML exports to decrease the time it takes to start new projects or app screens by up to 50%.

Design to XAML code in Seconds

By creating easy-to-use packages for your projects, you can convert high-fidelity Figma designs into developer-friendly XAML code that can be quickly expanded and improved. The time it takes to start new projects or app screens is again reduced by up to 50% when you use our plugin’s XAML exports.

Component Library

To develop your application rapidly we included a pre-configured component library, called UnoToolkit Material components. All controls may be readily customized using variations, allowing you to watch your app come to life even in design. To create a skeleton for your app, start with pre-built app pages.

Live Preview

Before you start building your app, use mock data (that we also provide) to get a feel for it and see how real material interacts with your app.

Sample Code Generated from Login Screen
				
					<utu:AutoLayout Background="{StaticResource MaterialBackgroundBrush}">
    <utu:AutoLayout utu:AutoLayout.CounterAlignment="Stretch" utu:AutoLayout.PrimaryAlignment="Stretch">
      <utu:AutoLayout Spacing="16" Padding="32,48,32,8" utu:AutoLayout.CounterAlignment="Stretch">
        <TextBlock Foreground="{StaticResource MaterialOnSurfaceBrush}" Text="Welcome." Style="{StaticResource MaterialHeadline4}" />
        <TextBlock Foreground="{StaticResource MaterialOnSurfaceBrush}" Text="Log in to your account" Style="{StaticResource MaterialSubtitle2}" />
      </utu:AutoLayout>
      <utu:AutoLayout Spacing="16" Padding="32,8,32,32" utu:AutoLayout.CounterAlignment="Stretch">
        <TextBox Text="{Binding Credentials.UserName, Mode=TwoWay}" utu:AutoLayout.CounterAlignment="Stretch" Style="{StaticResource MaterialFilledTextBoxStyle}" />
        <PasswordBox Password="{Binding Credentials.Password, Mode=TwoWay}" utu:AutoLayout.CounterAlignment="Stretch" Style="{StaticResource MaterialFilledPasswordBoxStyle}" />
        <HyperlinkButton Content="Forgot password?" Style="{StaticResource MaterialHyperlinkButtonStyle}" />
        <Button Content="LOGIN" utu:AutoLayout.CounterAlignment="Stretch" Style="{StaticResource MaterialContainedButtonStyle}" />
      </utu:AutoLayout>
      <utu:AutoLayout Spacing="16" Padding="32,32,32,32" PrimaryAxisAlignment="End" utu:AutoLayout.CounterAlignment="Stretch" utu:AutoLayout.PrimaryAlignment="Stretch">
        <TextBlock Foreground="{StaticResource MaterialOnBackgroundBrush}" TextAlignment="Center" TextWrapping="Wrap" Text="Legal mentions" utu:AutoLayout.CounterAlignment="Stretch" Style="{StaticResource MaterialCaption}" />
      </utu:AutoLayout>
    </utu:AutoLayout>
  </utu:AutoLayout>

				
			

Documentation

For better discoverability and ease of adopting Uno Platform for Figma, we have started publishing various resources, ranging from a sample commerce app, documentation and a growing blog series. You can now easily begin with our Get Started documentation, sample apps and Multiplatform-first UI components. Check it all out and expect many more to come in the future.

This is the first article in our series dedicated to Uno platform for Figma. Stay tuned for articles on a range of topics covering everything from Replicating a UI with Uno Figma to a deep dive into Uno Toolkit. Follow as we share news, tips, and best practices along the way.

Next Steps

Experience the design-to-XAML Handoff with Uno Platform. If you’re interested in converting your high-fidelity Figma designs into XAML code, visit us on the Figma Community page to download Uno Platform for Figma and follow instructions. 

Tags:

Share this post:
Share on twitter
Share on linkedin
Share on reddit
Share on telegram
Related Posts