Turns your Figma design into .NET MAUI Graphics code

foreign to develop that idea over developers or teammates and Microsoft can use join your project to help you to develop that idea or if you don't have anything in mind you can use explore the list of assistant project created by others and join Force to a thing to develop that idea in previous year I developed for example the graphics control library that was a library where created all the controls that is already seized in showering forms visual use using the native drawing apis or sdsr to draw all these controls implementing Cupertino fluent and material design after create that experimental library of course appears a big amount of questions and ideas about hey what happens with performance let's finish Market correctly what's happening with for example accessibility let's fix the problem about how to implement accessibility in advance control Etc and other of the main questions always has been hey what's happening is suddenly Google announced material Design 4 with a new implementation and changing the appearance of a big amount of the controls to solve that question this year I thought in Implement a tool that will use take a design from figma for example an implementation from Material 4 in case that this is Sunday and we'll use using the figma apis gets the information of all the nodes creates a list with all the hierarchy of the different notes and we'll use generate code for a Microsoft Maui Graphics so in that way we can use easily and quickly use sport to Maui Graphics code a design from vigma and today I want to share with you the result of this experimental project from figma to Mario Graphics let's go as I said previously in this kind of hack weeks I worked in the globe and sold some ideas about for example get a pixel perfect solution with drone controls implementing Cupertino fluent and material designs in all the platforms supported by Bonnet Maui this is great it's fantastic anything I like to match the idea I think that cool so many many problems and for that reason I created another custom Library called it Aloha kit with other kind of controls like for example apples icon button or sun control slide progress radial or gouge control charts Etc but today I want to put the focus on the new project the figma to Maui Graphics mostly Tunes Your figma Design into a net Maui Graphics code how it works first of all I'm going to take a look to it working and then let's take a quick look to the code this is the project for figma Maui graphics and I have the tool here mostly you need to put the figma access talking it's something that you can get easily accessing to the figma developer documentation and you can get it with a few steps in a few minutes you can paste that fix my talking here and then the only thing that you need is put here the file IV from the document that you want to support to code to do that you need to go to a figma document for example this document after in the URL after the fail name this identifier is what you need to copy and paste in the tool then the only thing that you need to do is stop the generate button this will do different things the first thing that will do is use access to the figma API and requesting all the information from all the nodes all this hierarchy that you can see here in figma with all the different kind of of nodes we will get in memory a hirachi with a rectangle nose Vector nodes you know frame notes Etc with all this information we are going to use a helper that will use generate Maui Graphics code based on all this node if you get a free note you are going to draw well different stuff based on this kind of node but mostly around rectangle or a rectangle we are going to get from this Frame all these properties that we can get here the we the a the positioning that you know the different properties like the background color the Border radius Etc and we are going to use transform this kind of properties from figma to Maui Graphics in this case we are using the stroke color the stroke size Etc we are going to do the same with all the different nodes for example with test we are going to use the row stream method probably there are also ellipses shapes vectors Etc and after have it when the code is generated the same tool is going to compile the code to be sure that all these generated code is uh it's correctly so after that you can use right click and copy one of the specific parts of the code or you can tap the support button to save this generate code to to a file class the other option is Select everything and copy and to test it you can use test it in your Maui application to draw all these the only thing that you need it's a graphics view control it's a new view in don't let Maui that is generating a native canvas where we can draw everything creating other weapon it's a class implementing the userable interface you only need to implement the draw method and as you can see all the generative code is all this long piece of code that I pasted here and if I launch this application the generated code is something like this so it's mostly all design just generated and drawing everything this is really really useful if we want to create some prototypes but mostly I think it's really useful to create drone controls for example we can use select displayer and we can use copy it and use generate it to do it we only need to align the control and after that we are going to use generate the the pleasure and the thing could happen for example with charts where for example the axis will be in the same position always the only change will be the position of the different bars or the points or lines or whatever and sporting mostly all this code uh increase a lot of productivity because the only thing that we need to do is use create a control around control a control that create a new class that inherits from Graphics View and in that view implement or find double properties for example the item Source property in the case of the chart and after that you pass the list of the points for example to the drawable to invalidate it and set the correct position of the bars points lines or whatever but the big amount of codes necessary to draw you know the positionings correctly with the axis Etc will be the same and will be something that will reduce a lot the necessary amount of time to create the control the same happens for us for example today the graphics control library for example here I have all the implementations of the button in fluent design and to get the correct sizing states base if the Buddha needs fill it outline it Etc we can use replace the figma file ID to use this new ID tap the generate button copy the code and get now something like this this is generated with all the necessary goals to render exactly and correctly I will turn in the fluent design again we can reuse this code to create a drum control a class that can edit from the graphics View using the travel class Etc but as you can imagine this is a project that you started is generating a big amount of code is generating all kind of shapes generating texts generating vectors generating a lot of things that allow you to generate call for more or less complex designs but the fact is like there are still some painting functionality in the short term I would love to include a previewer directly in the tool I think that we'll use increase a little bit more the productivity and with that there are some pending stuff to be generated for example the Transformations like a rotation etc for example in a vector is not implemented and then what I would love to do is group all the generated goals in different methods for example if we have something like let me go back in this design if we have something like this group create for example call it for example dashboard we can just generate a draw dashboard method that will draw all these elements we can create a draw player method drawing all the pliers Etc now what we create is the same piece of code generating all the the root node both but create something like split in different methods it's perfectly possible and I think we'll increase the readability the usability and will be something more useful at the end so figma to Maui Graphics is a tool that tune your figma design into dot net Maui Graphics call remember that is generating code and remember that is generating code for dotted Maui Graphics is not generating directly uh dot net Maui application is not generating directly the code for donut Maui with Channel code with views Etc and we reach the end of the video I really hope that you enjoyed the content but I want to know what do you think about this kind of tooling it's something that you are interested to use by yourself or your company would you collaborate more for example with designers using this kind of stuff please as always leave your feedback in the comments of the video and if you enjoy it remember to tap the Subscribe button and see you soon bye

Channel: Javier Suárez

Views: 16,989

Keywords: dotnet, dotnet-maui, maui, figma, design

Id: WKbQdShVrjM

Length: 11min 51sec (711 seconds)

Published: Thu Sep 29 2022