Intro to Figma for .NET Developers

Developers and designers 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 unfamiliar with Figma, it is a free, collaborative interface design tool that has rapidly become the go-to choice for designers. That’s why we chose to integrate a Figma plugin that helps make the designer-developer handoff process smooth and seamless by allowing developers to easily access the complete 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 seen by a UX Tools survey.

Even a quick Twitter poll we conducted in October 2021 showed Figma as one of the leading design tool choices amongst developers. However, 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 the 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

The 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 neat all-in-one package.

Extensibility and Community

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

Uno Platform & Figma

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 allows pixel-perfect XAML export, bringing your design to XAML code in seconds.

One of the most significant 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. However, 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 using 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 and ellipses or adding images and multimedia. The problem is Expression Blend and Visual Studio. Though they can work on the duplicate solution/project files, they remain two separate IDEs. 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 the 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 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. In addition, 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

We included a pre-configured component library called UnoToolkit Material components to develop your application rapidly. In addition, 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 build your app, use mock data (we provide) to get a feel for it and see how the actual 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 much more to come in the future.

Uno Platform Figma Series

This is the first article in our series dedicated to Uno platform for Figma. Stay tuned for articles on various 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 the instructions. 

Tags:

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