Figma Shapes and Xamarin Forms
I have been using David Ortinau’s tricks shown here to export SVG-s from Figma to Xamarin Forms and use the built-in Path control to render it and I’ve been in love with it.
However, I ran into scenarios when the Vector I wanted to export was a group of Vectors i.e.
When you export this it will create you something like this:
Now at this point I found that there are two things you can do:
Option 1: Add a parent Grid and add these Path objects “on top of each other” by placing them all into Column = 0 and Row = 0 and this is what Javier (thanks Javier!) also describes here which works great for almost all scenarios:
https://javiersuarezruiz.wordpress.com/2020/06/30/xamarin-forms-tips-and-tricks-working-with-shapes/
Option 2: You can combine these Path elements into a single Geometry object. In that case you can use a “GeometryGroup”: define the path elements each as a PathGeometry objects and use the Figures property for your Data. One scenario where you’d want to do this is if you had to bind your complex shape to a propery of type “Geometry” and suddenly using a “Grid” would not be enough:
Pro-tip: You could also define these “Geometry”-s in your page or app resource files i.e. your complex ones like so:
And your simples too like:
And then your XAML / code will become much tidier:
or from code:
Application.Current.Resources[“SvgEditItem”] as Geometry;`I hope this helps someone!
