Efficient collaboration between designers and builders is significant for making a constructive consumer expertise, however bridging the hole between design and code may be difficult at the very best of instances. The handoff course of typically results in communication gaps, inconsistencies, and, most significantly, misplaced productiveness, inflicting frustration for each designers and builders.
After we attempt to perceive the place more often than not is spent constructing software program purposes, we are going to discover {that a} important quantity of it’s misplaced as a result of a scarcity of true collaboration, miscommunication, and no single “supply of reality.” Consequently, we see designers creating nice consumer experiences for shoppers and passing on their accredited designs with little enter from the builders. They then try and recreate the designs with their developer instruments, leading to a sophisticated, cost-intensive course of and sometimes unimplementable designs.
Builders and integrators are purported to intently examine a design and attempt to analyze all there’s to it: the margins, spacing, alignments, the sorts of controls, and the completely different visible states that the consumer interface may undergo (a loading state, a partial state, an error state, and so forth) throughout the interactions with it, after which strive to determine the best way to write the code for this interface. Historically, that is the design handoff course of and has lengthy grow to be the norm.
We at Uno Platform imagine that a greater, extra pragmatic strategy should exist. So, we centered on enhancing the workflow and including the choice to generate the code for the consumer interface straight from the design whereas permitting builders to construct upon the generated code’s basis and additional broaden it.
“When designers are totally happy with their designs, they create a doc with all the main points and digital belongings required for the event staff to carry the product to life. That is the design handoff course of.”
— UX Design Institute, “Learn how to create a design handoff for builders”
Let’s take a look at a number of the issues related to the handoff course of and the way the Uno Platform for Figma Plugin might assist alleviate the pitfalls historically seen on this course of.
Notice: The Uno Platform Plugin for Figma is free, so for those who’d wish to strive it whereas studying this text, you possibly can set up it immediately. Uno Platform is a developer productiveness platform that permits the creation of native cell, internet, desktop, and embedded apps utilizing a single codebase. As a part of its complete tooling, Uno Platform gives the Uno Figma plugin, enabling straightforward translation of designs to code. (Whereas Uno Platform is free and open-source, the plugin itself is free however not open-source.) If you wish to discover the code or contribute to the Uno mission, please go to the Uno Platform GitHub repository.
A big consider selecting our present improvement path lies within the perception that Figma outperforms the Sketch + Zeplin mixture (and never solely) due to its platform-agnostic nature. Being a web-based device, Figma is extra common, whereas Sketch is restricted to MacOS, and sharing designs with non-Mac builders necessitates utilizing third-party software program. Figma gives an all-in-one answer, making it a extra handy choice.
As well as, Figma now additionally helps plugins, lots of them aiding with the handoff course of particularly. For instance, Rogie King just lately launched a plugin “Clippy — add attachments” that permits attachments to your Figma information, which may be very helpful throughout the handoff course of. In fact, there are various others.
This and different elements “weighed” us in direction of Figma Design. And we aren’t alone; others have picked up Figma as their key design device after doing a little analysis after which making an attempt issues in observe.
“Evaluating the must-haves in opposition to the options of a listing of potential design apps we compiled (together with Sketch, Axure RP, Framer, and extra), Figma got here out because the clear forerunner. We determined to proceed with a short-term trial to check Figma’s suitability, and we haven’t regarded again since. It met all of our key characteristic necessities however shocked us with numerous different issues alongside the best way.”
— Simon Harper, “Why we selected Figma as our major design device”
Working with the Uno Figma Plugin
1: Get Began with Uno Platform for Figma Plugin
Uno for Figma presents a big benefit for groups that depend on Figma as their major design device.
By combining the familiarity and effectivity of Figma with the capabilities of the Uno Platform, designers can seamlessly proceed working in a well-recognized atmosphere that they’re already snug with whereas figuring out their designs can be built-in virtually by their improvement staff.
Getting began with the Uno Figma plugin is a simple course of:
Set up the Uno Platform (Figma to C# or XAML) plugin.
Open the Uno Platform Materials Toolkit design file obtainable from the Figma Group.
With the Uno Materials Toolkit, you now not have to design most of the elements from scratch because the toolkit gives UI (consumer interface) controls designed particularly for multi-platform, responsive purposes.
Notice: To make use of the plugin, you have to create your design inside the Uno Materials Toolkit Figma file, utilizing its elements. With out it, the plugin gained’t be capable of generate any output, making it incompatible with current Figma designs.
2: Setting Up Your Design
After getting put in the Uno Platform for Figma plugin and opened the Materials Toolkit design file, you need to use the “Getting Began” web page within the file layers to arrange your design. The aim of this web page is to simplify the method of defining your software’s theme, colours, and font types.
It’s also possible to use DSP Tooling in Uno.Materials for Uno Platform purposes. This characteristic has been one of many prime requests from the Uno Platform neighborhood, and it’s now obtainable each as a bundle and as a part of the App Template Wizard.
If you happen to’re unfamiliar with DSP (Design System Packages), it’s primarily a repository of design belongings, together with icons, buttons, and different UI parts, accompanied by JSON information containing design system info. With a DSP, you possibly can craft a personalised theme that aligns together with your model, effortlessly combine it into your Uno Platform software by the Figma plugin, and implement theme modifications throughout all the consumer interface of your software.
The power to import customized Design System Packages (DSPs) is a big improvement for Uno Platform. With this characteristic, designers can create and handle their very own design programs, which may be shared throughout tasks and groups. This not solely saves time but in addition ensures consistency throughout all design work. Moreover, it permits designers to take care of management over the design belongings, making it simpler to make updates and modifications as wanted.
Notice: The “Getting Began” web page gives step-by-step directions for modifying the colours and fonts of the consumer interface, together with previewing your general theme. When you can modify these later, I’d advocate doing this proper in the beginning of your mission for higher group.
Afterward, create a brand new web page and be sure that you start through the use of the Commonplace Web page Template supplied within the Uno Toolkit elements to start out the design of your software. It’s important to do not forget that you’ll have to detach the occasion from the template to put it to use.
3: Begin Creating The Design
Most Toolkit Elements have variants that can act as time savers, permitting a single part to include its numerous states and variations, with particular attributes that you could be toggle on and off.
For instance, button elements have a Main Icon variant so you need to use the identical aspect with or with out icons all through the design.
The Uno Toolkit gives a complete library of pre-built elements and templates that include the suitable layer constructions to generate XAML (eXtensible Utility Markup Language is Microsoft’s variant of XML for describing a graphic consumer interface) and C# markup and permits designers to preview their designs utilizing the Uno plugin. This helps synchronize design and improvement efforts, keep mission consistency, and optimize code output. Moreover, these elements may be reused, making creating and managing constant designs throughout a number of tasks simpler.
4: Reside Preview Your App
The Previewer within the Uno Platform is a strong device that permits designers to troubleshoot their designs and catch points earlier than the handoff course of begins, avoiding redundancy in communications with builders. It gives a stay interactive preview of the translated look, conduct, and code of the appliance’s design, together with all styling and structure properties. Designers can work together with their design as if it’s a working app, scrolling by content material and testing elements to see how they behave.
To preview the designed consumer interface, comply with these steps:
In Figma, choose the display you need to preview.
Proper-click the display → Plugins → Uno Platform (Figma to C# or XAML).
As soon as the plugin has launched, choose the Preview tab.
Press the Refresh button.
Getting Began With The Tutorial: First Steps
If you happen to’re new to utilizing the Uno Platform for Figma plugin, step one is to set up it from the Figma neighborhood. After downloading the plugin, proceed with the next steps:
Navigate to the Uno Materials Toolkit File within the Figma neighborhood and choose Open in Figma to start out a brand new mission.
Establishing your mission theme first is elective however really helpful. You possibly can set your required theme from the Getting Began web page (included within the file) or import a DSP (Design System Package deal) file to shortly remodel your theme.
Create a brand new web page. Throughout the Assets tab of the menu, below Elements, discover and choose the “Commonplace Web page Template.”
Proper-click on the template and choose Detach the occasion.
These are the preliminary steps for all new tasks utilizing the Uno Platform for Figma plugin and Uno Materials Toolkit — not solely the steps for this tutorial. This workflow will set you on the proper path to creating numerous cell app designs successfully.
Designing With Uno Materials Toolkit
You possibly can comply with alongside right here with the Uno Flights file template, which you need to use for reference. Please word that when constructing your UI design, you must solely use elements which can be a part of the fabric toolkit file. Consult with the elements web page to see the record of obtainable elements.
Step 1: Search Outcomes, Kind, And Filter
First, implement the search outcomes and the Kind and Filter motion buttons by following these steps:
Add a TextBox and alter the placeholder textual content.
Within the TextBox properties, toggle on a number one/trailing icon. (elective)
Add Textual content to show the variety of outcomes and the related textual content. (Use Shift + A so as to add them to an Auto Format.)
Add an IconButton (use the elements supplied by the Materials Toolkit) and swap the default icon to a Filter icon. Embody accompanying Textual content for the icon, and group them inside a body with a horizontal Auto Format.
Repeat the earlier step for the filter motion, including an IconButton with a filter icon accompanied by Textual content and putting them in an Auto Format.
Nest each actions inside one other Auto Format.
Lastly, group the three sections (variety of outcomes, type motion, and filter motion) into an Auto Format.
Add the SearchBox and your remaining Format and nest them inside Content material.Scrollable.
By following these steps, you must see a consequence much like the instance under:
Step 2: Flight Info
The Flight Itinerary block may be divided into three sections:
Flight Occasions and the ProgressBar are included within the first Auto Format.
Airport and Flight Info are organized in a separate Auto Format.
Airline Info and Flight Prices are introduced in a 3rd Auto Format.
Flight Occasions and ProgressBar
Insert two Textual content parts for arrival and departure instances.
Find the ProgressBar part within the Assets tab and add it between the 2 instances created.
Group the three elements (arrival time, ProgressBar, departure time) into an Auto Format.
Add an icon and swap the occasion with a airplane icon.
Choose absolutely the place and place the airplane icon in the beginning of the ProgressBar.
Flight Data
Insert Textual content in your flight time and flight standing.
Apply an Auto Format to arrange them and set it to Fill.
Proceed so as to add Textual content for the Airport initials.
Mix the 2 Texts and the beforehand created Auto Format into a brand new horizontal Auto Format.
Airline Info
Add the mandatory Textual content for Airline Info and pricing.
Choose each Textual content parts and apply an Auto Format to them.
Set the body of the Auto Format to Fill.
Modify the horizontal hole as desired.
Choose the three sections you need to modify:
Add a brand new Auto Format.
Apply a Fill shade to the brand new structure.
Modify the vertical and horizontal spacing in line with your desire.
Transfer your part to the Commonplace Web page Template by dragging it under the content material.Scrollable layer.
Step 3. Backside TabBar
The Backside TabBar is comparatively easy to change and is a part of the Commonplace Web page Template. To finish this part:
Choose every merchandise from the Backside TabBar.
Broaden it to the bottom icon layer.
Within the Design tab, exchange the present occasion with the suitable one.
Subsequent, choose the related Textual content and replace it to match the corresponding menu merchandise.
Step 4. Preview, Export, And Transition From Figma To Visible Studio
As soon as the consumer interface design is finalized in Figma, the Uno Platform Plugin allows us to render and preview our software with the clicking of a button. Throughout the Previewer, you possibly can work together with the elements, resembling clicking the buttons, scrolling, toggling numerous functionalities, and so forth.
After previewing the app, we will look at the XAML code generated within the Export tab.
Open the Uno Figma Plugin (right-click the display → Plugins → Uno Platform (Figma to C# or XAML).
For XAML
You possibly can change your namespace within the first tab (Properties) below Utility (elective).
Go to the Export tab and choose Copy to Clipboard (backside proper button).
Open Visible Studio and create a brand new mission utilizing the Uno App Template Wizard (that is the place you’ll select between utilizing XAML or C# Markup in your consumer interface).
Open your MainPage.xaml file, take away the present code, and paste your exported code from the Uno Figma Plugin.
Change your x:class and xmlns:native namespaces.
Export the colour override file and paste it into your ColorPaletteOverride.xaml.
For C# Markup
Go to the Export tab and choose all contents from the road after this to the semicolon ; on the finish. (See the screenshot under.)
Copy the chosen code to the clipboard (Ctrl/Cmd + C on Win/Mac).
In Visible Studio, create a brand new mission utilizing the Uno App Template Wizard. (That is the place you’ll select between utilizing XAML or C# Markup in your consumer interface.)
Open MainPage.cs and exchange all of the Web page contents with the copied code.
To set the suitable font dimension for all buttons, entry the MaterialFontsOverride.cs file within the Fashion folder. Go to the Figma Plugin, and within the Export tab, choose Fonts Override File from the dropdown menu. Copy the content material within the ResourceDictionary and exchange it in your MaterialFontsOverride.cs.
Right here’s an instance of the generated XAML (and in addition C#) code which you can import into Microsoft Visible Studio:
⏬ flightXAML.txt (38 kB)
⏬ flightCsharp.txt (56 kB)
Conclusion
Harmonizing design and improvement isn’t any straightforward process, and the nuances between groups make it so there isn’t a one-size-fits-all answer. Nonetheless, by specializing in the areas that almost all typically have an effect on productiveness, the Uno Platform for Figma device helps improve designer-developer workflows. It facilitates the environment friendly creation of high-fidelity designs, interactive prototypes, and the export of responsive code, making all the course of extra environment friendly.
The examples supplied within the article primarily showcase working with cell design variations. Nonetheless, there aren’t any limitations within the doc or the generated code that prohibit you from creating appropriate variations for desktops, laptops, tablets, and simply the world of the World Broad Net. Specify the specified resolutions and responsive parts (and the way they need to behave), and the designs you create must be simply adaptable throughout completely different platforms and display sizes.
Additional Studying
“5 is for 5X productiveness. Asserting Uno Platform 5.0,” (Uno Platform )
This text gives an outline of all the brand new options obtainable within the Uno Platform, together with the brand new Figma to C# Markup plugin characteristic.
“Intro to Figma for .NET Builders,” (Uno Platform )
This text gives an outline of Figma and its options and the way .NET builders can use it along with the Uno Platform to streamline their design-to-development workflows.
“Uno Platform 5.0 — Figma plugin, C# Markup, and Scorching Reload showcase through Uno Tube Participant pattern app,” (YouTube)
It is a quick video spotlight for Uno Platform v. 5.0, edited from the next steps within the Tube Participant workshop (it is a Figma Design file which is a part of the Tube Participant workshop and is tailor-made to .NET builders particularly).
“Uno Platform for Figma — Uno Flight pace construct,” (YouTube)
A brief video that reveals the making of the Uno Flight app UI compressed into solely a minute and a half.
“Constructing a Login Web page with Uno Platform and Figma,” (Uno Platform)
The Uno Platform’s plugin and toolkit provide a big library of ready-to-use elements, permitting builders and designers to benefit from a set of higher-level consumer interface controls designed particularly for multi-platform, responsive purposes.
“Constructing a Profile Web page with Uno Platform for Figma,” (Uno Platform)
On this tutorial, you’ll learn to construct a very practical Profile web page utilizing Figma and Uno Platform and the best way to generate responsive and extendable XAML code.
“Replicating Pet Adoption UI with Uno Platform and Figma,” (Uno Platform)
This tutorial will stroll you thru making a Pet Undertake consumer interface cell display and exporting your Figma designs into code, together with organising your Figma file and designing utilizing Uno Materials Toolkit elements.
“From Figma to Visible Studio — Including Again-Finish Logic to Goodreads App,” (Uno Platform)
The Uno Platform has an XAML tab (which homes the generated code for the web page you created in Figma) and a Themes tab (which homes the Useful resource Dictionary for the web page you created). This tutorial comprises a working Goodreads pattern and gives many particulars as to utilizing the XAML and Themes tabs.
“Replicating a Courting App UI with .NET, Uno Platform and Figma,” (Uno Platform)
On this tutorial, you’ll learn to use Uno Platform to create a relationship app consumer interface, masking intimately numerous sections and elements of the interface; on the finish, you’ll additionally be capable of export the design into Visible Studio Code.
“Getting Began with Uno Toolkit,” (Uno Platform)
Detailed developer documentation pages for working with Uno Platform.
“The 12 greatest IDEs for programming,” Franklin Okeke
To maintain up with the quick tempo of rising applied sciences, there was an rising demand for IDEs amongst software program improvement firms. We’ll discover the 12 greatest IDEs that presently provide worthwhile options to programmers.
“Why we selected Figma as our major design device,” Simon Harper (Purplebricks Digital)
Evaluating the must-haves in opposition to the options of a listing of potential design apps we compiled (together with Sketch, Axure RP, Framer, and extra), Figma got here out because the clear forerunner. It met all of our key characteristic necessities however shocked us with numerous different issues alongside the best way.
“Why we switched to Figma as the first design device at Zomato,” Vijay Verma
Earlier than Figma, a number of different instruments have been used to facilitate the alternate of design mockups and updates; after Figma, the necessity to use different instruments and companies was decreased as all the things is available in one single bundle.
“The Greatest Handoff Is No Handoff,” Vitaly Friedman (Smashing Journal)
Design handoffs are sometimes inefficient and painful; they trigger frustration, friction, and numerous forwards and backwards. Can we keep away from them altogether? This text discusses intimately the “No Handoff” fluid mannequin, the place product and engineering groups work on the product iteratively on a regular basis, with practical prototyping being the central methodology of working collectively.
“Designing A Higher Design Handoff File In Figma,” Ben Shih (Smashing Journal)
Creating an efficient handoff course of from design to improvement is a essential step in any product improvement cycle. This text shares many sensible tricks to improve the handoff course of between design and improvement in product improvement, with pointers for efficient communication, documentation, design particulars, model management, and plugin utilization.
“How I take advantage of Sketch with Zeplin to Design and Specify Apps,” Marc Decerle
Sketch is a really highly effective device together with Zeplin. On this article, the creator describes how he organizes his Sketch paperwork and the way he makes use of Sketch at the side of Zeplin.
Design System Package deal (DSP)
This doc describes the Design System Package deal construction, together with particulars on how every inside file or folder must be used.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!