Getting a Xamlify subscription
In this video, you'll learn how to create a subscription in Xamlify.
Transform Figma Designs into .NET MAUI XAML
Streamline your app development process with our powerful Figma to XAML converter. Bring your designs to life effortlessly.
Save hours by converting XAML code from your Figma designs.
Significantly reduce the time spent building screens using .NET MAUI and XAML.
Simply enter your Figma Access Token and file ID, hit Generate, and you're all set!
Exceptional accuracy in conversions
Achieve a high level of accuracy when converting your designs, with precision reaching up to 90%.
Responsive
With the Flexible Design option, content width limitations are removed, allowing you to create responsive designs that adapt seamlessly to various screen sizes.
Incredibly fast
One click is all it takes to convert your Figma designs into .NET MAUI XAML code, delivering results in seconds!
Here are a few examples of our conversions in action.
Real-world examples of conversions from Figma to .NET MAUI XAML code
Sample 1
Figma File
Converted Code
<!--
fonts.AddFont("SFProText-Medium.ttf", "SFProText-Medium");
-->
<!-- Card -->
<Grid
ColumnDefinitions="0.68*,0.32*"
HeightRequest="161"
RowDefinitions="0.09*,0.09*,0.41*,0.24*,0.17*"
WidthRequest="118">
<!-- Rectangle -->
<Path
Grid.Row="1"
Grid.RowSpan="4"
Grid.ColumnSpan="2"
BackgroundColor="#165EB3"
Data="M0 59C0 26.4152 26.4152 0 59 0L59 0C91.5848 0 118 26.4152 118 59L118 138C118 142.418 114.418 146 110 146L8 146C3.58172 146 0 142.418 0 138L0 59Z "
HeightRequest="146"
HorizontalOptions="Fill"
VerticalOptions="Fill"
WidthRequest="118">
<!-- Shadow -->
<Path.Shadow>
<!-- Shadow Item -->
<Shadow
Brush="#000000"
Opacity="0.03999999910593033"
Radius="48"
Offset="0,2" />
</Path.Shadow>
</Path>
<!-- Border Container -->
<Border
Grid.Row="2"
Grid.RowSpan="2"
Grid.ColumnSpan="2"
BackgroundColor="Transparent"
HeightRequest="90"
HorizontalOptions="Center"
Stroke="Transparent"
StrokeShape="RoundRectangle 45"
VerticalOptions="Center"
WidthRequest="90">
<!-- Image -->
<Grid HeightRequest="90" WidthRequest="90">
<!-- Border with Radius -->
<Border
HeightRequest="90"
HorizontalOptions="Center"
Stroke="Transparent"
StrokeShape="RoundRectangle 45"
VerticalOptions="Center"
WidthRequest="90">
<!-- Mask -->
<Image
Aspect="AspectFill"
HeightRequest="90"
Source="https://xamlifystorage.blob.core.windows.net/xamlifyweb/694a02308dcc6d6324148c5ebad7c115.jpg"
WidthRequest="90" />
</Border>
<!-- Border with Radius -->
<Border
HeightRequest="90"
HorizontalOptions="Center"
Stroke="Transparent"
StrokeShape="RoundRectangle 45"
VerticalOptions="Center"
WidthRequest="90">
<!-- Mask -->
<Image
Aspect="AspectFill"
HeightRequest="90"
Source="https://xamlifystorage.blob.core.windows.net/xamlifyweb/694a02308dcc6d6324148c5ebad7c115.jpg"
WidthRequest="90" />
</Border>
</Grid>
</Border>
<!-- Icon -->
<Grid
Grid.RowSpan="2"
Margin="0,0,1.9414062,0"
ColumnDefinitions="1.0006899*"
HeightRequest="26.913086"
HorizontalOptions="End"
RowDefinitions="1.0032294*"
VerticalOptions="Center"
WidthRequest="38.973114">
<!-- Path -->
<Path
BackgroundColor="#5CC3FF"
Data="M4.60103 25.8837C4.69386 26.2373 4.93699 26.5411 5.27516 26.7261C5.61333 26.911 6.0178 26.9613 6.39663 26.8657C14.9562 24.6689 23.9989 24.6689 32.5585 26.8657C32.9374 26.9613 33.3418 26.911 33.68 26.7261C34.0182 26.5411 34.2613 26.2373 34.3541 25.8837L38.9329 7.8598C39.0612 7.36768 38.8772 6.85073 38.4582 6.52593C38.0392 6.20112 37.4577 6.12468 36.9578 6.32868L27.872 10.0733C27.1902 10.3515 26.3917 10.1072 26.0225 9.50742L20.7435 0.686843C20.4905 0.263035 20.0091 0 19.4866 0C18.964 0 18.4826 0.263035 18.2296 0.686843L12.9506 9.50742C12.5814 10.1072 11.783 10.3515 11.1011 10.0733L2.01536 6.32868C1.51544 6.12468 0.933947 6.20112 0.514948 6.52593C0.0959488 6.85073 -0.0880425 7.36768 0.0402002 7.8598L4.60103 25.8837Z "
HeightRequest="26.9613"
HorizontalOptions="Center"
Stroke="#5CC3FF"
StrokeLineJoin="Round"
StrokeThickness="2"
VerticalOptions="Center"
WidthRequest="39.1492425" />
<!-- Path - Additional -->
<Path
Data="M4.60103 25.8837L3.63154 26.1291L3.6338 26.1377L4.60103 25.8837ZM6.39663 26.8657L6.64151 27.8352L6.64521 27.8343L6.39663 26.8657ZM32.5585 26.8657L32.3099 27.8343L32.3136 27.8352L32.5585 26.8657ZM34.3541 25.8837L35.3214 26.1377L35.3233 26.13L34.3541 25.8837ZM38.9329 7.8598L37.9652 7.60763L37.9637 7.61359L38.9329 7.8598ZM36.9578 6.32868L36.5799 5.4028L36.5767 5.40413L36.9578 6.32868ZM27.872 10.0733L28.2499 10.9991L28.2531 10.9978L27.872 10.0733ZM26.0225 9.50742L25.1644 10.021L25.1709 10.0315L26.0225 9.50742ZM20.7435 0.686843L19.8848 1.19941L19.8854 1.20039L20.7435 0.686843ZM18.2296 0.686843L19.0877 1.20039L19.0883 1.19941L18.2296 0.686843ZM12.9506 9.50742L13.8023 10.0316L13.8086 10.021L12.9506 9.50742ZM11.1011 10.0733L10.7201 10.9978L10.7233 10.9991L11.1011 10.0733ZM2.01536 6.32868L2.39641 5.40412L2.39319 5.40281L2.01536 6.32868ZM0.0402002 7.8598L1.00967 7.61449L1.00788 7.60764L0.0402002 7.8598ZM3.6338 26.1377C3.8006 26.773 4.23059 27.2946 4.79537 27.6034L5.75495 25.8487C5.64339 25.7877 5.58711 25.7016 5.56825 25.6298L3.6338 26.1377ZM4.79537 27.6034C5.35818 27.9112 6.02188 27.9917 6.64151 27.8352L6.15174 25.8961C6.01372 25.931 5.86848 25.9108 5.75495 25.8487L4.79537 27.6034ZM6.64521 27.8343C15.0417 25.6794 23.9134 25.6794 32.3099 27.8343L32.8071 25.897C24.0844 23.6585 14.8707 23.6585 6.14805 25.897L6.64521 27.8343ZM32.3136 27.8352C32.9333 27.9917 33.597 27.9112 34.1598 27.6034L33.2002 25.8487C33.0867 25.9108 32.9414 25.931 32.8034 25.8961L32.3136 27.8352ZM34.1598 27.6034C34.7246 27.2946 35.1546 26.773 35.3214 26.1377L33.3869 25.6298C33.368 25.7016 33.3118 25.7877 33.2002 25.8487L34.1598 27.6034ZM35.3233 26.13L39.9021 8.10602L37.9637 7.61359L33.3849 25.6375L35.3233 26.13ZM39.9006 8.11197C40.1352 7.21164 39.7886 6.29199 39.0708 5.73558L37.8455 7.31627C37.9657 7.40946 37.9871 7.52372 37.9652 7.60764L39.9006 8.11197ZM39.0708 5.73558C38.3632 5.18701 37.403 5.06695 36.5799 5.40281L37.3356 7.25456C37.5124 7.18241 37.7152 7.21524 37.8455 7.31627L39.0708 5.73558ZM36.5767 5.40413L27.491 9.14871L28.2531 10.9978L37.3388 7.25324L36.5767 5.40413ZM27.4942 9.1474C27.2343 9.25346 26.9698 9.13865 26.8742 8.98331L25.1709 10.0315C25.8136 11.0758 27.146 11.4496 28.2499 10.9991L27.4942 9.1474ZM26.8806 8.99388L21.6015 0.173297L19.8854 1.20039L25.1645 10.021L26.8806 8.99388ZM21.6021 0.174276C21.1561 -0.572852 20.336 -1 19.4866 -1L19.4866 1C19.6823 1 19.8248 1.09892 19.8848 1.19941L21.6021 0.174276ZM19.4866 -1C18.6371 -1 17.817 -0.572853 17.371 0.174276L19.0883 1.19941C19.1483 1.09892 19.2909 1 19.4866 1L19.4866 -1ZM17.3716 0.173298L12.0925 8.99388L13.8086 10.021L19.0877 1.20039L17.3716 0.173298ZM12.0989 8.98331C12.0033 9.13865 11.7388 9.25346 11.4789 9.1474L10.7233 10.9991C11.8271 11.4496 13.1596 11.0758 13.8022 10.0315L12.0989 8.98331ZM11.4821 9.14871L2.39641 5.40413L1.63432 7.25324L10.7201 10.9978L11.4821 9.14871ZM2.39319 5.40281C1.57015 5.06695 0.609951 5.18701 -0.0977161 5.73558L1.12761 7.31627C1.25794 7.21524 1.46073 7.18241 1.63754 7.25456L2.39319 5.40281ZM-0.0977161 5.73558C-0.815497 6.292 -1.1621 7.21164 -0.927483 8.11197L1.00788 7.60764C0.986016 7.52372 1.0074 7.40946 1.12761 7.31627L-0.0977161 5.73558ZM-0.929244 8.10511L3.63158 26.1291L5.57047 25.6384L1.00964 7.61449L-0.929244 8.10511Z "
HorizontalOptions="Center"
VerticalOptions="Center" />
<!-- Path -->
<Path
Margin="0,0,0,6.737793"
Data="M-0.0997095 -0.707957C-0.649242 -0.652889 -1.05008 -0.162763 -0.995017 0.386769C-0.939949 0.936302 -0.449823 1.33714 0.0997095 1.28208L-0.0997095 -0.707957ZM11.3921 1.28208C11.9417 1.33714 12.4318 0.936302 12.4869 0.386769C12.5419 -0.162763 12.1411 -0.652889 11.5916 -0.707957L11.3921 1.28208ZM0.0997095 1.28208C3.85289 0.905975 7.63896 0.905975 11.3921 1.28208L11.5916 -0.707957C7.70576 -1.09735 3.78608 -1.09735 -0.0997095 -0.707957L0.0997095 1.28208Z "
HeightRequest="2.4344900000000003"
HorizontalOptions="Center"
Stroke="#FFFFFF"
StrokeLineJoin="Round"
StrokeThickness="2"
VerticalOptions="End"
WidthRequest="13.59198" />
</Grid>
<!-- Ingredia -->
<Label
Grid.Row="4"
Grid.ColumnSpan="2"
FontAttributes="None"
FontFamily="SFProText-Medium"
FontSize="12"
HeightRequest="14"
HorizontalOptions="Center"
HorizontalTextAlignment="Center"
Text="Ingredia"
TextColor="#FFFFFF"
VerticalOptions="Start"
VerticalTextAlignment="Start"
WidthRequest="55" />
<!-- Text -->
<Grid
Grid.Row="3"
Grid.Column="1"
HeightRequest="24"
HorizontalOptions="Start"
VerticalOptions="Start"
WidthRequest="24">
<!-- Oval -->
<Ellipse
BackgroundColor="#5CC3FF"
HeightRequest="24"
HorizontalOptions="Center"
VerticalOptions="Center"
WidthRequest="24" />
<!-- 1 -->
<Label
FontAttributes="None"
FontFamily="SFProText-Medium"
FontSize="12"
HeightRequest="14"
HorizontalOptions="Center"
HorizontalTextAlignment="Center"
Text="1"
TextColor="#FFFFFF"
VerticalOptions="Center"
VerticalTextAlignment="Start"
WidthRequest="6" />
</Grid>
</Grid>Sample 2
Converted Code
<!--
fonts.AddFont("Inter-SemiBold.ttf", "Inter-SemiBold");
fonts.AddFont("Inter-Regular.ttf", "InterRegular");
-->
<ScrollView>
<!-- A homepage for a recipes app -->
<VerticalStackLayout
Padding="0,0,0,0"
BackgroundColor="#FF000000"
Spacing="0">
<!-- Header Navigation Bar With Title -->
<VerticalStackLayout
Padding="0,0,0,0"
BackgroundColor="#FF000000"
Spacing="0">
<!-- Navigation Bar -->
<FlexLayout
Padding="16,4,16,4"
Direction="Row"
JustifyContent="SpaceBetween">
<!-- Leading Icon -->
<HorizontalStackLayout Padding="0,8,8,8" Spacing="0">
<!-- Icon -->
<Path
BackgroundColor="#FFFFFFFF"
Data="M0 1C0 0.447715 0.447715 0 1 0L18.7647 0C19.317 0 19.7647 0.447715 19.7647 1C19.7647 1.55228 19.317 2 18.7647 2L1 2C0.447715 2 0 1.55228 0 1Z M0 8C0 7.44772 0.447715 7 1 7L18.7647 7C19.317 7 19.7647 7.44772 19.7647 8C19.7647 8.55229 19.317 9 18.7647 9L1 9C0.447715 9 0 8.55229 0 8Z M1 14C0.447715 14 0 14.4477 0 15C0 15.5523 0.447715 16 1 16L18.7647 16C19.317 16 19.7647 15.5523 19.7647 15C19.7647 14.4477 19.317 14 18.7647 14L1 14Z "
HeightRequest="16"
StrokeLineJoin="Miter"
WidthRequest="19.7647" />
</HorizontalStackLayout>
<!-- Title? -->
<Label
FontAttributes="None"
FontFamily="Inter-SemiBold"
FontSize="17"
HeightRequest="21"
HorizontalTextAlignment="Center"
LineBreakMode="TailTruncation"
MaxLines="1"
Text="Recipe Home"
TextColor="#FFFFFFFF"
VerticalTextAlignment="Start"
WidthRequest="201" />
<!-- Trailing Icon -->
<HorizontalStackLayout Padding="8,8,0,8" Spacing="24">
<!-- Icon -->
<Path
BackgroundColor="#FFFFFFFF"
Data="M3.9687 8.61709C4.62378 4.85789 7.90295 2 11.8496 2C16.2679 2 19.8496 5.58172 19.8496 10C19.8496 14.4183 16.2679 18 11.8496 18C8.95992 18 6.42702 16.4685 5.01976 14.1682C4.73155 13.6971 4.11599 13.5488 3.64488 13.837C3.17376 14.1252 3.02548 14.7408 3.31369 15.2119C5.06918 18.0815 8.2349 20 11.8496 20C17.3725 20 21.8496 15.5228 21.8496 10C21.8496 4.47715 17.3725 0 11.8496 0C6.82232 0 2.66149 3.70974 1.95527 8.54106L1.70711 8.29289C1.31658 7.90237 0.683417 7.90237 0.292893 8.29289C-0.0976311 8.68342 -0.0976311 9.31658 0.292893 9.70711L2.29289 11.7071C2.68342 12.0976 3.31658 12.0976 3.70711 11.7071L5.70711 9.70711C6.09763 9.31658 6.09763 8.68342 5.70711 8.29289C5.31658 7.90237 4.68342 7.90237 4.29289 8.29289L3.9687 8.61709Z M10.8496 4.5C11.4019 4.5 11.8496 4.94772 11.8496 5.5L11.8496 10L14.8496 10C15.4019 10 15.8496 10.4477 15.8496 11C15.8496 11.5523 15.4019 12 14.8496 12L11.3496 12C10.5212 12 9.84961 11.3284 9.84961 10.5L9.84961 5.5C9.84961 4.94772 10.2973 4.5 10.8496 4.5Z "
HeightRequest="20"
StrokeLineJoin="Miter"
StrokeThickness="2"
WidthRequest="21.9472311" />
<!-- Icon -->
<Path
BackgroundColor="#FFFFFFFF"
Data="M9 0C4.02944 0 0 4.02944 0 9C0 13.9706 4.02944 18 9 18C11.125 18 13.078 17.2635 14.6177 16.0319L20.2929 21.7071C20.6834 22.0976 21.3166 22.0976 21.7071 21.7071C22.0976 21.3166 22.0976 20.6834 21.7071 20.2929L16.0319 14.6177C17.2635 13.078 18 11.125 18 9C18 4.02944 13.9706 0 9 0ZM2 9C2 5.13401 5.13401 2 9 2C12.866 2 16 5.13401 16 9C16 12.866 12.866 16 9 16C5.13401 16 2 12.866 2 9Z "
HeightRequest="22.0976"
StrokeLineJoin="Miter"
WidthRequest="22.0976" />
</HorizontalStackLayout>
</FlexLayout>
</VerticalStackLayout>
<!-- Main Content -->
<VerticalStackLayout Padding="0,0,0,0" Spacing="0">
<!-- Cooking Card Full-Width -->
<VerticalStackLayout
Padding="0,0,0,0"
BackgroundColor="#FF000000"
Spacing="0">
<!-- Table Header -->
<Grid HeightRequest="53">
<!-- Featured Recipe -->
<Label
Margin="16,0,16,0"
FontAttributes="None"
FontFamily="Inter-SemiBold"
FontSize="22"
HeightRequest="29"
HorizontalOptions="Center"
HorizontalTextAlignment="Start"
Text="Featured Recipe"
TextColor="#FFFFFFFF"
VerticalOptions="End"
VerticalTextAlignment="Start"
WidthRequest="361" />
</Grid>
<!-- Frame -->
<HorizontalStackLayout
Padding="16,16,16,16"
BackgroundColor="#FF000000"
Spacing="8">
<!-- Border Container -->
<Border
HeightRequest="486.73285"
Stroke="Transparent"
StrokeShape="RoundRectangle 12"
WidthRequest="361">
<!-- Cooking Card Full-Width -->
<VerticalStackLayout
Padding="0,0,0,0"
BackgroundColor="#FF1D1D1E"
Spacing="0">
<!-- Shadow -->
<VerticalStackLayout.Shadow>
<!-- Shadow Item -->
<Shadow
Brush="#1E000000"
Opacity="0.11999999731779099"
Radius="10"
Offset="0,2" />
</VerticalStackLayout.Shadow>
<!-- A plate of spaghetti carbonara garnished with grated cheese and black pepper on a rustic wooden table. -->
<Image
Aspect="AspectFill"
HeightRequest="393"
Source="https://xamlifystorage.blob.core.windows.net/xamlifyweb/8f8ea71f96c37b9c457205f3cdf8fd8f.png"
WidthRequest="361" />
<!-- Labels -->
<VerticalStackLayout Padding="12,12,12,12" Spacing="4">
<!-- Card Title -->
<Grid HeightRequest="21">
<!-- Spaghetti Carbonara -->
<Label
FontAttributes="None"
FontFamily="Inter-SemiBold"
FontSize="17"
HeightRequest="21"
HorizontalOptions="Center"
HorizontalTextAlignment="Start"
LineBreakMode="TailTruncation"
MaxLines="1"
Text="Spaghetti Carbonara"
TextColor="#FFFFFFFF"
VerticalOptions="Center"
VerticalTextAlignment="Start"
WidthRequest="337" />
</Grid>
<!-- Card Subtitle -->
<Grid HeightRequest="20">
<!-- Classic Italian Pasta -->
<Label
FontAttributes="None"
FontFamily="InterRegular"
FontSize="15"
HeightRequest="20"
HorizontalOptions="Center"
HorizontalTextAlignment="Start"
Text="Classic Italian Pasta"
TextColor="#FFFFFFFF"
VerticalOptions="Center"
VerticalTextAlignment="Start"
WidthRequest="337" />
</Grid>
<!-- Card Subtitle -->
<FlexLayout
Padding="0,8,0,0"
Direction="Row"
JustifyContent="SpaceBetween">
<!-- Rating -->
<HorizontalStackLayout Padding="0,0,0,0" Spacing="4">
<!-- Icon -->
<Path
BackgroundColor="#FFFFFFFF"
Data="M8.31935 4.07511L7.17535 0.554226C6.93524 -0.184741 5.8898 -0.184743 5.64969 0.554226L4.50569 4.07511L0.803621 4.07511C0.0266229 4.07511 -0.296435 5.06938 0.332168 5.52609L3.32721 7.70211L2.1832 11.223C1.9431 11.962 2.78888 12.5765 3.41748 12.1197L6.41252 9.94372L9.40756 12.1197C10.0362 12.5765 10.8819 11.962 10.6418 11.223L9.49784 7.70211L12.4929 5.52609C13.1215 5.06938 12.7984 4.07511 12.0214 4.07511L8.31935 4.07511Z "
HeightRequest="12.761242999999999"
StrokeLineJoin="Miter"
StrokeThickness="1"
WidthRequest="13.417935" />
<!-- Icon -->
<Path
BackgroundColor="#FFFFFFFF"
Data="M8.31935 4.07511L7.17535 0.554226C6.93524 -0.184741 5.8898 -0.184743 5.64969 0.554226L4.50569 4.07511L0.803621 4.07511C0.0266229 4.07511 -0.296435 5.06938 0.332168 5.52609L3.32721 7.70211L2.1832 11.223C1.9431 11.962 2.78888 12.5765 3.41748 12.1197L6.41252 9.94372L9.40756 12.1197C10.0362 12.5765 10.8819 11.962 10.6418 11.223L9.49784 7.70211L12.4929 5.52609C13.1215 5.06938 12.7984 4.07511 12.0214 4.07511L8.31935 4.07511Z "
HeightRequest="12.761242999999999"
StrokeLineJoin="Miter"
StrokeThickness="1"
WidthRequest="13.417935" />
<!-- Icon -->
<Path
BackgroundColor="#FFFFFFFF"
Data="M8.31935 4.07511L7.17535 0.554226C6.93524 -0.184741 5.8898 -0.184743 5.64969 0.554226L4.50569 4.07511L0.803621 4.07511C0.0266229 4.07511 -0.296435 5.06938 0.332168 5.52609L3.32721 7.70211L2.1832 11.223C1.9431 11.962 2.78888 12.5765 3.41748 12.1197L6.41252 9.94372L9.40756 12.1197C10.0362 12.5765 10.8819 11.962 10.6418 11.223L9.49784 7.70211L12.4929 5.52609C13.1215 5.06938 12.7984 4.07511 12.0214 4.07511L8.31935 4.07511Z "
HeightRequest="12.761242999999999"
StrokeLineJoin="Miter"
StrokeThickness="1"
WidthRequest="13.417935" />
<!-- Icon -->
<Path
BackgroundColor="#FFFFFFFF"
Data="M8.31935 4.07511L7.17535 0.554226C6.93524 -0.184741 5.8898 -0.184743 5.64969 0.554226L4.50569 4.07511L0.803621 4.07511C0.0266229 4.07511 -0.296435 5.06938 0.332168 5.52609L3.32721 7.70211L2.1832 11.223C1.9431 11.962 2.78888 12.5765 3.41748 12.1197L6.41252 9.94372L9.40756 12.1197C10.0362 12.5765 10.8819 11.962 10.6418 11.223L9.49784 7.70211L12.4929 5.52609C13.1215 5.06938 12.7984 4.07511 12.0214 4.07511L8.31935 4.07511Z "
HeightRequest="12.761242999999999"
StrokeLineJoin="Miter"
StrokeThickness="1"
WidthRequest="13.417935" />
<!-- Icon -->
<Path
BackgroundColor="#FFFFFFFF"
Data="M8.31935 4.07511L7.17535 0.554226C6.93524 -0.184741 5.8898 -0.184743 5.64969 0.554226L4.50569 4.07511L0.803621 4.07511C0.0266229 4.07511 -0.296435 5.06938 0.332168 5.52609L3.32721 7.70211L2.1832 11.223C1.9431 11.962 2.78888 12.5765 3.41748 12.1197L6.41252 9.94372L9.40756 12.1197C10.0362 12.5765 10.8819 11.962 10.6418 11.223L9.49784 7.70211L12.4929 5.52609C13.1215 5.06938 12.7984 4.07511 12.0214 4.07511L8.31935 4.07511Z "
HeightRequest="12.761242999999999"
StrokeLineJoin="Miter"
StrokeThickness="1"
WidthRequest="13.417935" />
</HorizontalStackLayout>
<!-- Icon -->
<Path
BackgroundColor="#FFFFFFFF"
Data="M1.16667 10.8801L3.22917 9.11222C3.72069 8.69092 4.44598 8.69092 4.9375 9.11222L7 10.8801L7 1.75C7 1.42783 6.73883 1.16667 6.41667 1.16667L1.75 1.16667C1.42783 1.16667 1.16667 1.42783 1.16667 1.75L1.16667 10.8801ZM0 1.75L0 12.1484C0 12.6467 0.584569 12.9156 0.962962 12.5913L3.98843 9.99802C4.04304 9.95121 4.12363 9.95121 4.17824 9.99802L7.20371 12.5913C7.5821 12.9156 8.16667 12.6467 8.16667 12.1484L8.16667 1.75C8.16667 0.783502 7.38317 0 6.41667 0L1.75 0C0.783502 0 0 0.783502 0 1.75Z "
HeightRequest="12.9156"
StrokeLineJoin="Miter"
StrokeThickness="1"
WidthRequest="8.16667" />
</FlexLayout>
</VerticalStackLayout>
</VerticalStackLayout>
</Border>
</HorizontalStackLayout>
</VerticalStackLayout>
<!-- Cooking Card Carousel -->
<VerticalStackLayout
Padding="0,0,0,0"
BackgroundColor="#FF000000"
Spacing="0">
<!-- Table Header -->
<Grid HeightRequest="46">
<!-- Popular Recipes -->
<Label
Margin="16,0,16,0.26708984"
FontAttributes="None"
FontFamily="Inter-SemiBold"
FontSize="18"
HeightRequest="22"
HorizontalOptions="Center"
HorizontalTextAlignment="Start"
Text="Popular Recipes"
TextColor="#FFFFFFFF"
VerticalOptions="End"
VerticalTextAlignment="Start"
WidthRequest="361" />
</Grid>
<!-- Frame -->
<HorizontalStackLayout
Padding="16,16,16,16"
BackgroundColor="#FF000000"
Spacing="8">
<!-- Border Container -->
<Border Stroke="Transparent" StrokeShape="RoundRectangle 12">
<!-- Cooking Card -->
<VerticalStackLayout
Padding="0,0,0,0"
BackgroundColor="#FF1D1D1E"
Spacing="0">
<!-- Shadow -->
<VerticalStackLayout.Shadow>
<!-- Shadow Item -->
<Shadow
Brush="#1E000000"
Opacity="0.11999999731779099"
Radius="10"
Offset="0,2" />
</VerticalStackLayout.Shadow>
<!-- A plate of creamy chicken fettuccine pasta topped with freshly grated cheese and a sprinkle of parsley on a wooden table. -->
<Image
Aspect="AspectFill"
HeightRequest="173"
Source="https://xamlifystorage.blob.core.windows.net/xamlifyweb/c0e1d3d8ab35ff80c633e860c086cc13.png"
WidthRequest="173" />
<!-- Labels -->
<VerticalStackLayout Padding="12,12,12,12" Spacing="4">
<!-- Card Title -->
<Grid HeightRequest="20">
<!-- Chicken Alfredo -->
<Label
FontAttributes="None"
FontFamily="Inter-SemiBold"
FontSize="15"
HeightRequest="20"
HorizontalOptions="Center"
HorizontalTextAlignment="Start"
LineBreakMode="TailTruncation"
MaxLines="0"
Text="Chicken Alfredo"
TextColor="#FFFFFFFF"
VerticalOptions="Center"
VerticalTextAlignment="Start"
WidthRequest="149" />
</Grid>
<!-- Card Subtitle -->
<Grid HeightRequest="16">
<!-- Creamy Pasta -->
<Label
FontAttributes="None"
FontFamily="InterRegular"
FontSize="13"
HeightRequest="16"
HorizontalOptions="Center"
HorizontalTextAlignment="Start"
LineBreakMode="TailTruncation"
MaxLines="1"
Text="Creamy Pasta"
TextColor="#FFFFFFFF"
VerticalOptions="Center"
VerticalTextAlignment="Start"
WidthRequest="149" />
</Grid>
<!-- Card Subtitle -->
<FlexLayout
Padding="0,8,0,0"
Direction="Row"
JustifyContent="SpaceBetween">
<!-- Rating -->
<HorizontalStackLayout Padding="0,0,0,0" Spacing="4">
<!-- Icon -->
<Path
BackgroundColor="#FFFFFFFF"
Data="M8.31935 4.07511L7.17535 0.554226C6.93524 -0.184741 5.8898 -0.184743 5.64969 0.554226L4.50569 4.07511L0.803621 4.07511C0.0266229 4.07511 -0.296435 5.06938 0.332168 5.52609L3.32721 7.70211L2.1832 11.223C1.9431 11.962 2.78888 12.5765 3.41748 12.1197L6.41252 9.94372L9.40756 12.1197C10.0362 12.5765 10.8819 11.962 10.6418 11.223L9.49784 7.70211L12.4929 5.52609C13.1215 5.06938 12.7984 4.07511 12.0214 4.07511L8.31935 4.07511Z "
HeightRequest="12.761242999999999"
StrokeLineJoin="Miter"
StrokeThickness="1"
WidthRequest="13.417935" />
<!-- Icon -->
<Path
BackgroundColor="#FFFFFFFF"
Data="M8.31935 4.07511L7.17535 0.554226C6.93524 -0.184741 5.8898 -0.184743 5.64969 0.554226L4.50569 4.07511L0.803621 4.07511C0.0266229 4.07511 -0.296435 5.06938 0.332168 5.52609L3.32721 7.70211L2.1832 11.223C1.9431 11.962 2.78888 12.5765 3.41748 12.1197L6.41252 9.94372L9.40756 12.1197C10.0362 12.5765 10.8819 11.962 10.6418 11.223L9.49784 7.70211L12.4929 5.52609C13.1215 5.06938 12.7984 4.07511 12.0214 4.07511L8.31935 4.07511Z "
HeightRequest="12.761242999999999"
StrokeLineJoin="Miter"
StrokeThickness="1"
WidthRequest="13.417935" />
<!-- Icon -->
<Path
BackgroundColor="#FFFFFFFF"
Data="M8.31935 4.07511L7.17535 0.554226C6.93524 -0.184741 5.8898 -0.184743 5.64969 0.554226L4.50569 4.07511L0.803621 4.07511C0.0266229 4.07511 -0.296435 5.06938 0.332168 5.52609L3.32721 7.70211L2.1832 11.223C1.9431 11.962 2.78888 12.5765 3.41748 12.1197L6.41252 9.94372L9.40756 12.1197C10.0362 12.5765 10.8819 11.962 10.6418 11.223L9.49784 7.70211L12.4929 5.52609C13.1215 5.06938 12.7984 4.07511 12.0214 4.07511L8.31935 4.07511Z "
HeightRequest="12.761242999999999"
StrokeLineJoin="Miter"
StrokeThickness="1"
WidthRequest="13.417935" />
<!-- Icon -->
<Path
BackgroundColor="#FFFFFFFF"
Data="M8.31935 4.07511L7.17535 0.554226C6.93524 -0.184741 5.8898 -0.184743 5.64969 0.554226L4.50569 4.07511L0.803621 4.07511C0.0266229 4.07511 -0.296435 5.06938 0.332168 5.52609L3.32721 7.70211L2.1832 11.223C1.9431 11.962 2.78888 12.5765 3.41748 12.1197L6.41252 9.94372L9.40756 12.1197C10.0362 12.5765 10.8819 11.962 10.6418 11.223L9.49784 7.70211L12.4929 5.52609C13.1215 5.06938 12.7984 4.07511 12.0214 4.07511L8.31935 4.07511Z "
HeightRequest="12.761242999999999"
StrokeLineJoin="Miter"
StrokeThickness="1"
WidthRequest="13.417935" />
<!-- Icon -->
<Path
BackgroundColor="#FFFFFFFF"
Data="M7.66228 0.906915L8.57131 3.70464L11.513 3.70464C12.7845 3.70464 13.3131 5.33164 12.2845 6.07898L9.9046 7.80807L10.8136 10.6058C11.2065 11.815 9.82252 12.8205 8.7939 12.0732L6.41402 10.3441L4.03413 12.0732C3.0055 12.8206 1.6215 11.815 2.0144 10.6058L2.92343 7.80807L0.543548 6.07898C-0.485076 5.33164 0.0435652 3.70464 1.31502 3.70464L4.25672 3.70464L5.16575 0.906915C5.55865 -0.302308 7.26938 -0.302303 7.66228 0.906915ZM6.41439 8.93647C6.44435 8.93655 6.47428 8.94583 6.49974 8.96432L9.47965 11.1294C9.59394 11.2124 9.74772 11.1007 9.70407 10.9663L8.56584 7.46321C8.54632 7.40312 8.5677 7.3373 8.61882 7.30016L11.5987 5.13512C11.713 5.05208 11.6543 4.87131 11.513 4.87131L7.82964 4.87131C7.76646 4.87131 7.71046 4.83063 7.69094 4.77054L6.55271 1.26744C6.53093 1.2004 6.4727 1.16681 6.41439 1.16667L6.41439 8.93647Z "
HeightRequest="13.122908"
StrokeLineJoin="Miter"
StrokeThickness="1"
WidthRequest="13.798176" />
</HorizontalStackLayout>
<!-- Icon -->
<Path
BackgroundColor="#FFFFFFFF"
Data="M1.16667 10.8801L3.22917 9.11222C3.72069 8.69092 4.44598 8.69092 4.9375 9.11222L7 10.8801L7 1.75C7 1.42783 6.73883 1.16667 6.41667 1.16667L1.75 1.16667C1.42783 1.16667 1.16667 1.42783 1.16667 1.75L1.16667 10.8801ZM0 1.75L0 12.1484C0 12.6467 0.584569 12.9156 0.962962 12.5913L3.98843 9.99802C4.04304 9.95121 4.12363 9.95121 4.17824 9.99802L7.20371 12.5913C7.5821 12.9156 8.16667 12.6467 8.16667 12.1484L8.16667 1.75C8.16667 0.783502 7.38317 0 6.41667 0L1.75 0C0.783502 0 0 0.783502 0 1.75Z "
HeightRequest="12.9156"
StrokeLineJoin="Miter"
StrokeThickness="1"
WidthRequest="8.16667" />
</FlexLayout>
</VerticalStackLayout>
</VerticalStackLayout>
</Border>
<!-- Border Container -->
<Border Stroke="Transparent" StrokeShape="RoundRectangle 12">
<!-- Cooking Card -->
<VerticalStackLayout
Padding="0,0,0,0"
BackgroundColor="#FF1D1D1E"
Spacing="0">
<!-- Shadow -->
<VerticalStackLayout.Shadow>
<!-- Shadow Item -->
<Shadow
Brush="#1E000000"
Opacity="0.11999999731779099"
Radius="10"
Offset="0,2" />
</VerticalStackLayout.Shadow>
<!-- A plate of Beef Stroganoff topped with mushrooms and parsley served next to a fork on a simple table. -->
<Image
Aspect="AspectFill"
HeightRequest="173"
Source="https://xamlifystorage.blob.core.windows.net/xamlifyweb/d8394ab88afbd7ba7a569922d1aad183.png"
WidthRequest="173" />
<!-- Labels -->
<VerticalStackLayout Padding="12,12,12,12" Spacing="4">
<!-- Card Title -->
<Grid HeightRequest="20">
<!-- Beef Stroganoff -->
<Label
FontAttributes="None"
FontFamily="Inter-SemiBold"
FontSize="15"
HeightRequest="20"
HorizontalOptions="Center"
HorizontalTextAlignment="Start"
LineBreakMode="TailTruncation"
MaxLines="0"
Text="Beef Stroganoff"
TextColor="#FFFFFFFF"
VerticalOptions="Center"
VerticalTextAlignment="Start"
WidthRequest="149" />
</Grid>
<!-- Card Subtitle -->
<Grid HeightRequest="16">
<!-- Hearty Meal -->
<Label
FontAttributes="None"
FontFamily="InterRegular"
FontSize="13"
HeightRequest="16"
HorizontalOptions="Center"
HorizontalTextAlignment="Start"
LineBreakMode="TailTruncation"
MaxLines="1"
Text="Hearty Meal"
TextColor="#FFFFFFFF"
VerticalOptions="Center"
VerticalTextAlignment="Start"
WidthRequest="149" />
</Grid>
<!-- Card Subtitle -->
<FlexLayout
Padding="0,8,0,0"
Direction="Row"
JustifyContent="SpaceBetween">
<!-- Rating -->
<HorizontalStackLayout Padding="0,0,0,0" Spacing="4">
<!-- Icon -->
<Path
BackgroundColor="#FFFFFFFF"
Data="M8.31935 4.07511L7.17535 0.554226C6.93524 -0.184741 5.8898 -0.184743 5.64969 0.554226L4.50569 4.07511L0.803621 4.07511C0.0266229 4.07511 -0.296435 5.06938 0.332168 5.52609L3.32721 7.70211L2.1832 11.223C1.9431 11.962 2.78888 12.5765 3.41748 12.1197L6.41252 9.94372L9.40756 12.1197C10.0362 12.5765 10.8819 11.962 10.6418 11.223L9.49784 7.70211L12.4929 5.52609C13.1215 5.06938 12.7984 4.07511 12.0214 4.07511L8.31935 4.07511Z "
HeightRequest="12.761242999999999"
StrokeLineJoin="Miter"
StrokeThickness="1"
WidthRequest="13.417935" />
<!-- Icon -->
<Path
BackgroundColor="#FFFFFFFF"
Data="M8.31935 4.07511L7.17535 0.554226C6.93524 -0.184741 5.8898 -0.184743 5.64969 0.554226L4.50569 4.07511L0.803621 4.07511C0.0266229 4.07511 -0.296435 5.06938 0.332168 5.52609L3.32721 7.70211L2.1832 11.223C1.9431 11.962 2.78888 12.5765 3.41748 12.1197L6.41252 9.94372L9.40756 12.1197C10.0362 12.5765 10.8819 11.962 10.6418 11.223L9.49784 7.70211L12.4929 5.52609C13.1215 5.06938 12.7984 4.07511 12.0214 4.07511L8.31935 4.07511Z "
HeightRequest="12.761242999999999"
StrokeLineJoin="Miter"
StrokeThickness="1"
WidthRequest="13.417935" />
<!-- Icon -->
<Path
BackgroundColor="#FFFFFFFF"
Data="M8.31935 4.07511L7.17535 0.554226C6.93524 -0.184741 5.8898 -0.184743 5.64969 0.554226L4.50569 4.07511L0.803621 4.07511C0.0266229 4.07511 -0.296435 5.06938 0.332168 5.52609L3.32721 7.70211L2.1832 11.223C1.9431 11.962 2.78888 12.5765 3.41748 12.1197L6.41252 9.94372L9.40756 12.1197C10.0362 12.5765 10.8819 11.962 10.6418 11.223L9.49784 7.70211L12.4929 5.52609C13.1215 5.06938 12.7984 4.07511 12.0214 4.07511L8.31935 4.07511Z "
HeightRequest="12.761242999999999"
StrokeLineJoin="Miter"
StrokeThickness="1"
WidthRequest="13.417935" />
<!-- Icon -->
<Path
BackgroundColor="#FFFFFFFF"
Data="M8.31935 4.07511L7.17535 0.554226C6.93524 -0.184741 5.8898 -0.184743 5.64969 0.554226L4.50569 4.07511L0.803621 4.07511C0.0266229 4.07511 -0.296435 5.06938 0.332168 5.52609L3.32721 7.70211L2.1832 11.223C1.9431 11.962 2.78888 12.5765 3.41748 12.1197L6.41252 9.94372L9.40756 12.1197C10.0362 12.5765 10.8819 11.962 10.6418 11.223L9.49784 7.70211L12.4929 5.52609C13.1215 5.06938 12.7984 4.07511 12.0214 4.07511L8.31935 4.07511Z "
HeightRequest="12.761242999999999"
StrokeLineJoin="Miter"
StrokeThickness="1"
WidthRequest="13.417935" />
<!-- Icon -->
<Path
BackgroundColor="#FFFFFFFF"
Data="M5.13709 4.77054C5.11757 4.83063 5.06158 4.87131 4.9984 4.87131L1.31502 4.87131C1.17374 4.87131 1.11501 5.05208 1.2293 5.13512L4.20922 7.30016C4.26033 7.3373 4.28172 7.40312 4.26219 7.46321L3.12397 10.9663C3.08031 11.1007 3.23409 11.2124 3.34838 11.1294L6.3283 8.96432C6.37941 8.92719 6.44862 8.92719 6.49974 8.96432L9.47965 11.1294C9.59395 11.2124 9.74772 11.1007 9.70407 10.9663L8.56584 7.46321C8.54632 7.40312 8.56771 7.3373 8.61882 7.30016L11.5987 5.13512C11.713 5.05208 11.6543 4.87131 11.513 4.87131L7.82964 4.87131C7.76646 4.87131 7.71046 4.83063 7.69094 4.77054L6.55271 1.26744C6.50906 1.13308 6.31898 1.13308 6.27532 1.26744L5.13709 4.77054ZM8.57131 3.70464L7.66228 0.906915C7.26938 -0.302303 5.55866 -0.302308 5.16575 0.906915L4.25672 3.70464L1.31502 3.70464C0.0435653 3.70464 -0.485076 5.33164 0.543548 6.07898L2.92344 7.80807L2.0144 10.6058C1.6215 11.815 3.0055 12.8206 4.03413 12.0732L6.41402 10.3441L8.7939 12.0732C9.82252 12.8205 11.2065 11.815 10.8136 10.6058L9.9046 7.80807L12.2845 6.07898C13.3131 5.33164 12.7845 3.70464 11.513 3.70464L8.57131 3.70464Z "
HeightRequest="13.122908"
StrokeLineJoin="Miter"
StrokeThickness="1"
WidthRequest="13.798176" />
</HorizontalStackLayout>
<!-- Icon -->
<Path
BackgroundColor="#FFFFFFFF"
Data="M1.16667 10.8801L3.22917 9.11222C3.72069 8.69092 4.44598 8.69092 4.9375 9.11222L7 10.8801L7 1.75C7 1.42783 6.73883 1.16667 6.41667 1.16667L1.75 1.16667C1.42783 1.16667 1.16667 1.42783 1.16667 1.75L1.16667 10.8801ZM0 1.75L0 12.1484C0 12.6467 0.584569 12.9156 0.962962 12.5913L3.98843 9.99802C4.04304 9.95121 4.12363 9.95121 4.17824 9.99802L7.20371 12.5913C7.5821 12.9156 8.16667 12.6467 8.16667 12.1484L8.16667 1.75C8.16667 0.783502 7.38317 0 6.41667 0L1.75 0C0.783502 0 0 0.783502 0 1.75Z "
HeightRequest="12.9156"
StrokeLineJoin="Miter"
StrokeThickness="1"
WidthRequest="8.16667" />
</FlexLayout>
</VerticalStackLayout>
</VerticalStackLayout>
</Border>
<!-- Border Container -->
<Border Stroke="Transparent" StrokeShape="RoundRectangle 12">
<!-- Cooking Card -->
<VerticalStackLayout
Padding="0,0,0,0"
BackgroundColor="#FF1D1D1E"
Spacing="0">
<!-- Shadow -->
<VerticalStackLayout.Shadow>
<!-- Shadow Item -->
<Shadow
Brush="#1E000000"
Opacity="0.11999999731779099"
Radius="10"
Offset="0,2" />
</VerticalStackLayout.Shadow>
<!-- A colorful dish featuring fresh bell peppers, broccoli, and snap peas stir-fried with garlic in a light sauce on a white plate. -->
<Image
Aspect="AspectFill"
HeightRequest="173"
Source="https://xamlifystorage.blob.core.windows.net/xamlifyweb/4ceccade688f6ad988bc54bec8dbaaaa.png"
WidthRequest="173" />
<!-- Labels -->
<VerticalStackLayout Padding="12,12,12,12" Spacing="4">
<!-- Card Title -->
<Grid HeightRequest="20">
<!-- Vegetable Stir Fry -->
<Label
FontAttributes="None"
FontFamily="Inter-SemiBold"
FontSize="15"
HeightRequest="20"
HorizontalOptions="Center"
HorizontalTextAlignment="Start"
LineBreakMode="TailTruncation"
MaxLines="0"
Text="Vegetable Stir Fry"
TextColor="#FFFFFFFF"
VerticalOptions="Center"
VerticalTextAlignment="Start"
WidthRequest="149" />
</Grid>
<!-- Card Subtitle -->
<Grid HeightRequest="16">
<!-- Healthy Option -->
<Label
FontAttributes="None"
FontFamily="InterRegular"
FontSize="13"
HeightRequest="16"
HorizontalOptions="Center"
HorizontalTextAlignment="Start"
LineBreakMode="TailTruncation"
MaxLines="1"
Text="Healthy Option"
TextColor="#FFFFFFFF"
VerticalOptions="Center"
VerticalTextAlignment="Start"
WidthRequest="149" />
</Grid>
<!-- Card Subtitle -->
<FlexLayout
Padding="0,8,0,0"
Direction="Row"
JustifyContent="SpaceBetween">
<!-- Rating -->
<HorizontalStackLayout Padding="0,0,0,0" Spacing="4">
<!-- Icon -->
<Path
BackgroundColor="#FFFFFFFF"
Data="M8.31935 4.07511L7.17535 0.554226C6.93524 -0.184741 5.8898 -0.184743 5.64969 0.554226L4.50569 4.07511L0.803621 4.07511C0.0266229 4.07511 -0.296435 5.06938 0.332168 5.52609L3.32721 7.70211L2.1832 11.223C1.9431 11.962 2.78888 12.5765 3.41748 12.1197L6.41252 9.94372L9.40756 12.1197C10.0362 12.5765 10.8819 11.962 10.6418 11.223L9.49784 7.70211L12.4929 5.52609C13.1215 5.06938 12.7984 4.07511 12.0214 4.07511L8.31935 4.07511Z "
HeightRequest="12.761242999999999"
StrokeLineJoin="Miter"
StrokeThickness="1"
WidthRequest="13.417935" />
<!-- Icon -->
<Path
BackgroundColor="#FFFFFFFF"
Data="M8.31935 4.07511L7.17535 0.554226C6.93524 -0.184741 5.8898 -0.184743 5.64969 0.554226L4.50569 4.07511L0.803621 4.07511C0.0266229 4.07511 -0.296435 5.06938 0.332168 5.52609L3.32721 7.70211L2.1832 11.223C1.9431 11.962 2.78888 12.5765 3.41748 12.1197L6.41252 9.94372L9.40756 12.1197C10.0362 12.5765 10.8819 11.962 10.6418 11.223L9.49784 7.70211L12.4929 5.52609C13.1215 5.06938 12.7984 4.07511 12.0214 4.07511L8.31935 4.07511Z "
HeightRequest="12.761242999999999"
StrokeLineJoin="Miter"
StrokeThickness="1"
WidthRequest="13.417935" />
<!-- Icon -->
<Path
BackgroundColor="#FFFFFFFF"
Data="M8.31935 4.07511L7.17535 0.554226C6.93524 -0.184741 5.8898 -0.184743 5.64969 0.554226L4.50569 4.07511L0.803621 4.07511C0.0266229 4.07511 -0.296435 5.06938 0.332168 5.52609L3.32721 7.70211L2.1832 11.223C1.9431 11.962 2.78888 12.5765 3.41748 12.1197L6.41252 9.94372L9.40756 12.1197C10.0362 12.5765 10.8819 11.962 10.6418 11.223L9.49784 7.70211L12.4929 5.52609C13.1215 5.06938 12.7984 4.07511 12.0214 4.07511L8.31935 4.07511Z "
HeightRequest="12.761242999999999"
StrokeLineJoin="Miter"
StrokeThickness="1"
WidthRequest="13.417935" />
<!-- Icon -->
<Path
BackgroundColor="#FFFFFFFF"
Data="M8.31935 4.07511L7.17535 0.554226C6.93524 -0.184741 5.8898 -0.184743 5.64969 0.554226L4.50569 4.07511L0.803621 4.07511C0.0266229 4.07511 -0.296435 5.06938 0.332168 5.52609L3.32721 7.70211L2.1832 11.223C1.9431 11.962 2.78888 12.5765 3.41748 12.1197L6.41252 9.94372L9.40756 12.1197C10.0362 12.5765 10.8819 11.962 10.6418 11.223L9.49784 7.70211L12.4929 5.52609C13.1215 5.06938 12.7984 4.07511 12.0214 4.07511L8.31935 4.07511Z "
HeightRequest="12.761242999999999"
StrokeLineJoin="Miter"
StrokeThickness="1"
WidthRequest="13.417935" />
<!-- Icon -->
<Path
BackgroundColor="#FFFFFFFF"
Data="M7.66228 0.906915L8.57131 3.70464L11.513 3.70464C12.7845 3.70464 13.3131 5.33164 12.2845 6.07898L9.9046 7.80807L10.8136 10.6058C11.2065 11.815 9.82252 12.8205 8.7939 12.0732L6.41402 10.3441L4.03413 12.0732C3.0055 12.8206 1.6215 11.815 2.0144 10.6058L2.92343 7.80807L0.543548 6.07898C-0.485076 5.33164 0.0435652 3.70464 1.31502 3.70464L4.25672 3.70464L5.16575 0.906915C5.55865 -0.302308 7.26938 -0.302303 7.66228 0.906915ZM6.41439 8.93647C6.44435 8.93655 6.47428 8.94583 6.49974 8.96432L9.47965 11.1294C9.59394 11.2124 9.74772 11.1007 9.70407 10.9663L8.56584 7.46321C8.54632 7.40312 8.5677 7.3373 8.61882 7.30016L11.5987 5.13512C11.713 5.05208 11.6543 4.87131 11.513 4.87131L7.82964 4.87131C7.76646 4.87131 7.71046 4.83063 7.69094 4.77054L6.55271 1.26744C6.53093 1.2004 6.4727 1.16681 6.41439 1.16667L6.41439 8.93647Z "
HeightRequest="13.122908"
StrokeLineJoin="Miter"
StrokeThickness="1"
WidthRequest="13.798176" />
</HorizontalStackLayout>
<!-- Icon -->
<Path
BackgroundColor="#FFFFFFFF"
Data="M1.16667 10.8801L3.22917 9.11222C3.72069 8.69092 4.44598 8.69092 4.9375 9.11222L7 10.8801L7 1.75C7 1.42783 6.73883 1.16667 6.41667 1.16667L1.75 1.16667C1.42783 1.16667 1.16667 1.42783 1.16667 1.75L1.16667 10.8801ZM0 1.75L0 12.1484C0 12.6467 0.584569 12.9156 0.962962 12.5913L3.98843 9.99802C4.04304 9.95121 4.12363 9.95121 4.17824 9.99802L7.20371 12.5913C7.5821 12.9156 8.16667 12.6467 8.16667 12.1484L8.16667 1.75C8.16667 0.783502 7.38317 0 6.41667 0L1.75 0C0.783502 0 0 0.783502 0 1.75Z "
HeightRequest="12.9156"
StrokeLineJoin="Miter"
StrokeThickness="1"
WidthRequest="8.16667" />
</FlexLayout>
</VerticalStackLayout>
</VerticalStackLayout>
</Border>
</HorizontalStackLayout>
</VerticalStackLayout>
<!-- Cooking Explore Categories Grid -->
<VerticalStackLayout
Padding="0,0,0,0"
BackgroundColor="#FF000000"
Spacing="0">
<!-- Table Header -->
<Grid HeightRequest="46">
<!-- Explore Categories -->
<Label
Margin="16,0,16,0"
FontAttributes="None"
FontFamily="Inter-SemiBold"
FontSize="18"
HeightRequest="22"
HorizontalOptions="Center"
HorizontalTextAlignment="Start"
Text="Explore Categories"
TextColor="#FFFFFFFF"
VerticalOptions="End"
VerticalTextAlignment="Start"
WidthRequest="361" />
</Grid>
<!-- Frame -->
<FlexLayout
Padding="16,16,16,16"
BackgroundColor="#FF000000"
JustifyContent="SpaceBetween"
Wrap="Wrap">
<!-- Border Container -->
<Border
HeightRequest="173"
Stroke="Transparent"
StrokeShape="RoundRectangle 12"
WidthRequest="176.5">
<!-- Cooking Explore Category -->
<HorizontalStackLayout Padding="0,0,0,0" Spacing="0">
<!-- A plate of spaghetti topped with marinara sauce and a sprinkle of parmesan cheese on a wooden table. -->
<Grid HeightRequest="173" WidthRequest="177">
<!-- Background Image -->
<Image Aspect="AspectFill" Source="https://xamlifystorage.blob.core.windows.net/xamlifyweb/915a0e142e16cb7a03bf9253aadb724b.png" />
<!-- Overlay -->
<Grid
HeightRequest="174"
HorizontalOptions="Center"
VerticalOptions="Center"
WidthRequest="177">
<!-- Background -->
<Grid.Background>
<!-- Radial Gradient Brush -->
<RadialGradientBrush>
<!-- Gradient Stop -->
<GradientStop Offset="0" Color="#66000000" />
<!-- Gradient Stop -->
<GradientStop Offset="1" Color="#00000000" />
</RadialGradientBrush>
</Grid.Background>
<!-- Enter Your Name -->
<Entry
FontAttributes="None"
FontFamily="Inter-SemiBold"
FontSize="15"
HorizontalOptions="Center"
HorizontalTextAlignment="Center"
Text="Enter Your Name"
TextColor="#FFFFFFFF"
VerticalOptions="Center"
VerticalTextAlignment="Center"
WidthRequest="177" />
</Grid>
</Grid>
</HorizontalStackLayout>
</Border>
<!-- Border Container -->
<Border
HeightRequest="173"
Stroke="Transparent"
StrokeShape="RoundRectangle 12"
WidthRequest="176.5">
<!-- Cooking Explore Category -->
<HorizontalStackLayout Padding="0,0,0,0" Spacing="0">
<!-- A vibrant plate of tacos filled with seasoned meat, topped with fresh cilantro and diced onions, garnished with lime wedges on the side. -->
<Grid HeightRequest="173" WidthRequest="177">
<!-- Background Image -->
<Image Aspect="AspectFill" Source="https://xamlifystorage.blob.core.windows.net/xamlifyweb/b384718ca9b96d8812e7bea0bad52cfe.png" />
<!-- Overlay -->
<Grid
Margin="-0.5,0,0.5,0"
HeightRequest="174"
HorizontalOptions="Center"
VerticalOptions="Center"
WidthRequest="177">
<!-- Background -->
<Grid.Background>
<!-- Radial Gradient Brush -->
<RadialGradientBrush>
<!-- Gradient Stop -->
<GradientStop Offset="0" Color="#66000000" />
<!-- Gradient Stop -->
<GradientStop Offset="1" Color="#00000000" />
</RadialGradientBrush>
</Grid.Background>
<!-- Mexican -->
<Label
Margin="-0.5,0,0.5,0"
FontAttributes="None"
FontFamily="Inter-SemiBold"
FontSize="15"
HeightRequest="20"
HorizontalOptions="Center"
HorizontalTextAlignment="Center"
LineBreakMode="TailTruncation"
MaxLines="0"
Text="Mexican"
TextColor="#FFFFFFFF"
VerticalOptions="Center"
VerticalTextAlignment="Center"
WidthRequest="177" />
</Grid>
</Grid>
</HorizontalStackLayout>
</Border>
<!-- Border Container -->
<Border
HeightRequest="173"
Stroke="Transparent"
StrokeShape="RoundRectangle 12"
WidthRequest="176.5">
<!-- Cooking Explore Category -->
<HorizontalStackLayout Padding="0,0,0,0" Spacing="0">
<!-- A vibrant bowl of stir-fried vegetables and tofu garnished with sesame seeds and green onions placed on a wooden table. -->
<Grid HeightRequest="173" WidthRequest="177">
<!-- Background Image -->
<Image Aspect="AspectFill" Source="https://xamlifystorage.blob.core.windows.net/xamlifyweb/e4096f64679e5958c354508f46ae12a5.png" />
<!-- Overlay -->
<Grid
HeightRequest="174"
HorizontalOptions="Center"
VerticalOptions="Center"
WidthRequest="177">
<!-- Background -->
<Grid.Background>
<!-- Radial Gradient Brush -->
<RadialGradientBrush>
<!-- Gradient Stop -->
<GradientStop Offset="0" Color="#66000000" />
<!-- Gradient Stop -->
<GradientStop Offset="1" Color="#00000000" />
</RadialGradientBrush>
</Grid.Background>
<!-- Chinese -->
<Label
FontAttributes="None"
FontFamily="Inter-SemiBold"
FontSize="15"
HeightRequest="20"
HorizontalOptions="Center"
HorizontalTextAlignment="Center"
LineBreakMode="TailTruncation"
MaxLines="0"
Text="Chinese"
TextColor="#FFFFFFFF"
VerticalOptions="Center"
VerticalTextAlignment="Center"
WidthRequest="177" />
</Grid>
</Grid>
</HorizontalStackLayout>
</Border>
<!-- Border Container -->
<Border
HeightRequest="173"
Stroke="Transparent"
StrokeShape="RoundRectangle 12"
WidthRequest="176.5">
<!-- Cooking Explore Category -->
<HorizontalStackLayout Padding="0,0,0,0" Spacing="0">
<!-- A vibrant plate of biryani garnished with fresh herbs and accompanied by a side of yogurt sauce. -->
<Grid HeightRequest="173" WidthRequest="177">
<!-- Background Image -->
<Image Aspect="AspectFill" Source="https://xamlifystorage.blob.core.windows.net/xamlifyweb/db70f99212e3cf0a4238903511f1ece3.png" />
<!-- Overlay -->
<Grid
Margin="-0.5,0,0.5,0"
HeightRequest="174"
HorizontalOptions="Center"
VerticalOptions="Center"
WidthRequest="177">
<!-- Background -->
<Grid.Background>
<!-- Radial Gradient Brush -->
<RadialGradientBrush>
<!-- Gradient Stop -->
<GradientStop Offset="0" Color="#66000000" />
<!-- Gradient Stop -->
<GradientStop Offset="1" Color="#00000000" />
</RadialGradientBrush>
</Grid.Background>
<!-- Indian -->
<Label
Margin="-0.5,0,0.5,0"
FontAttributes="None"
FontFamily="Inter-SemiBold"
FontSize="15"
HeightRequest="20"
HorizontalOptions="Center"
HorizontalTextAlignment="Center"
LineBreakMode="TailTruncation"
MaxLines="0"
Text="Indian"
TextColor="#FFFFFFFF"
VerticalOptions="Center"
VerticalTextAlignment="Center"
WidthRequest="177" />
</Grid>
</Grid>
</HorizontalStackLayout>
</Border>
</FlexLayout>
</VerticalStackLayout>
</VerticalStackLayout>
</VerticalStackLayout>
</ScrollView>
Figma File
Sample 3
Figma File
Converted Code
<!--
fonts.AddFont("SFProText-Medium.ttf", "SFProText-Medium");
-->
<!-- Card -->
<Grid
ColumnDefinitions="0.68*,0.32*"
HeightRequest="161"
RowDefinitions="0.09*,0.09*,0.41*,0.24*,0.17*"
WidthRequest="118">
<!-- Rectangle -->
<Path
Grid.Row="1"
Grid.RowSpan="4"
Grid.ColumnSpan="2"
BackgroundColor="#165EB3"
Data="M0 59C0 26.4152 26.4152 0 59 0L59 0C91.5848 0 118 26.4152 118 59L118 138C118 142.418 114.418 146 110 146L8 146C3.58172 146 0 142.418 0 138L0 59Z "
HeightRequest="146"
HorizontalOptions="Fill"
VerticalOptions="Fill"
WidthRequest="118">
<!-- Shadow -->
<Path.Shadow>
<!-- Shadow Item -->
<Shadow
Brush="#000000"
Opacity="0.03999999910593033"
Radius="48"
Offset="0,2" />
</Path.Shadow>
</Path>
<!-- Border Container -->
<Border
Grid.Row="2"
Grid.RowSpan="2"
Grid.ColumnSpan="2"
BackgroundColor="Transparent"
HeightRequest="90"
HorizontalOptions="Center"
Stroke="Transparent"
StrokeShape="RoundRectangle 45"
VerticalOptions="Center"
WidthRequest="90">
<!-- Image -->
<Grid HeightRequest="90" WidthRequest="90">
<!-- Border with Radius -->
<Border
HeightRequest="90"
HorizontalOptions="Center"
Stroke="Transparent"
StrokeShape="RoundRectangle 45"
VerticalOptions="Center"
WidthRequest="90">
<!-- Mask -->
<Image
Aspect="AspectFill"
HeightRequest="90"
Source="https://xamlifystorage.blob.core.windows.net/xamlifyweb/694a02308dcc6d6324148c5ebad7c115.jpg"
WidthRequest="90" />
</Border>
<!-- Border with Radius -->
<Border
HeightRequest="90"
HorizontalOptions="Center"
Stroke="Transparent"
StrokeShape="RoundRectangle 45"
VerticalOptions="Center"
WidthRequest="90">
<!-- Mask -->
<Image
Aspect="AspectFill"
HeightRequest="90"
Source="https://xamlifystorage.blob.core.windows.net/xamlifyweb/694a02308dcc6d6324148c5ebad7c115.jpg"
WidthRequest="90" />
</Border>
</Grid>
</Border>
<!-- Icon -->
<Grid
Grid.RowSpan="2"
Margin="0,0,1.9414062,0"
ColumnDefinitions="1.0006899*"
HeightRequest="26.913086"
HorizontalOptions="End"
RowDefinitions="1.0032294*"
VerticalOptions="Center"
WidthRequest="38.973114">
<!-- Path -->
<Path
BackgroundColor="#5CC3FF"
Data="M4.60103 25.8837C4.69386 26.2373 4.93699 26.5411 5.27516 26.7261C5.61333 26.911 6.0178 26.9613 6.39663 26.8657C14.9562 24.6689 23.9989 24.6689 32.5585 26.8657C32.9374 26.9613 33.3418 26.911 33.68 26.7261C34.0182 26.5411 34.2613 26.2373 34.3541 25.8837L38.9329 7.8598C39.0612 7.36768 38.8772 6.85073 38.4582 6.52593C38.0392 6.20112 37.4577 6.12468 36.9578 6.32868L27.872 10.0733C27.1902 10.3515 26.3917 10.1072 26.0225 9.50742L20.7435 0.686843C20.4905 0.263035 20.0091 0 19.4866 0C18.964 0 18.4826 0.263035 18.2296 0.686843L12.9506 9.50742C12.5814 10.1072 11.783 10.3515 11.1011 10.0733L2.01536 6.32868C1.51544 6.12468 0.933947 6.20112 0.514948 6.52593C0.0959488 6.85073 -0.0880425 7.36768 0.0402002 7.8598L4.60103 25.8837Z "
HeightRequest="26.9613"
HorizontalOptions="Center"
Stroke="#5CC3FF"
StrokeLineJoin="Round"
StrokeThickness="2"
VerticalOptions="Center"
WidthRequest="39.1492425" />
<!-- Path - Additional -->
<Path
Data="M4.60103 25.8837L3.63154 26.1291L3.6338 26.1377L4.60103 25.8837ZM6.39663 26.8657L6.64151 27.8352L6.64521 27.8343L6.39663 26.8657ZM32.5585 26.8657L32.3099 27.8343L32.3136 27.8352L32.5585 26.8657ZM34.3541 25.8837L35.3214 26.1377L35.3233 26.13L34.3541 25.8837ZM38.9329 7.8598L37.9652 7.60763L37.9637 7.61359L38.9329 7.8598ZM36.9578 6.32868L36.5799 5.4028L36.5767 5.40413L36.9578 6.32868ZM27.872 10.0733L28.2499 10.9991L28.2531 10.9978L27.872 10.0733ZM26.0225 9.50742L25.1644 10.021L25.1709 10.0315L26.0225 9.50742ZM20.7435 0.686843L19.8848 1.19941L19.8854 1.20039L20.7435 0.686843ZM18.2296 0.686843L19.0877 1.20039L19.0883 1.19941L18.2296 0.686843ZM12.9506 9.50742L13.8023 10.0316L13.8086 10.021L12.9506 9.50742ZM11.1011 10.0733L10.7201 10.9978L10.7233 10.9991L11.1011 10.0733ZM2.01536 6.32868L2.39641 5.40412L2.39319 5.40281L2.01536 6.32868ZM0.0402002 7.8598L1.00967 7.61449L1.00788 7.60764L0.0402002 7.8598ZM3.6338 26.1377C3.8006 26.773 4.23059 27.2946 4.79537 27.6034L5.75495 25.8487C5.64339 25.7877 5.58711 25.7016 5.56825 25.6298L3.6338 26.1377ZM4.79537 27.6034C5.35818 27.9112 6.02188 27.9917 6.64151 27.8352L6.15174 25.8961C6.01372 25.931 5.86848 25.9108 5.75495 25.8487L4.79537 27.6034ZM6.64521 27.8343C15.0417 25.6794 23.9134 25.6794 32.3099 27.8343L32.8071 25.897C24.0844 23.6585 14.8707 23.6585 6.14805 25.897L6.64521 27.8343ZM32.3136 27.8352C32.9333 27.9917 33.597 27.9112 34.1598 27.6034L33.2002 25.8487C33.0867 25.9108 32.9414 25.931 32.8034 25.8961L32.3136 27.8352ZM34.1598 27.6034C34.7246 27.2946 35.1546 26.773 35.3214 26.1377L33.3869 25.6298C33.368 25.7016 33.3118 25.7877 33.2002 25.8487L34.1598 27.6034ZM35.3233 26.13L39.9021 8.10602L37.9637 7.61359L33.3849 25.6375L35.3233 26.13ZM39.9006 8.11197C40.1352 7.21164 39.7886 6.29199 39.0708 5.73558L37.8455 7.31627C37.9657 7.40946 37.9871 7.52372 37.9652 7.60764L39.9006 8.11197ZM39.0708 5.73558C38.3632 5.18701 37.403 5.06695 36.5799 5.40281L37.3356 7.25456C37.5124 7.18241 37.7152 7.21524 37.8455 7.31627L39.0708 5.73558ZM36.5767 5.40413L27.491 9.14871L28.2531 10.9978L37.3388 7.25324L36.5767 5.40413ZM27.4942 9.1474C27.2343 9.25346 26.9698 9.13865 26.8742 8.98331L25.1709 10.0315C25.8136 11.0758 27.146 11.4496 28.2499 10.9991L27.4942 9.1474ZM26.8806 8.99388L21.6015 0.173297L19.8854 1.20039L25.1645 10.021L26.8806 8.99388ZM21.6021 0.174276C21.1561 -0.572852 20.336 -1 19.4866 -1L19.4866 1C19.6823 1 19.8248 1.09892 19.8848 1.19941L21.6021 0.174276ZM19.4866 -1C18.6371 -1 17.817 -0.572853 17.371 0.174276L19.0883 1.19941C19.1483 1.09892 19.2909 1 19.4866 1L19.4866 -1ZM17.3716 0.173298L12.0925 8.99388L13.8086 10.021L19.0877 1.20039L17.3716 0.173298ZM12.0989 8.98331C12.0033 9.13865 11.7388 9.25346 11.4789 9.1474L10.7233 10.9991C11.8271 11.4496 13.1596 11.0758 13.8022 10.0315L12.0989 8.98331ZM11.4821 9.14871L2.39641 5.40413L1.63432 7.25324L10.7201 10.9978L11.4821 9.14871ZM2.39319 5.40281C1.57015 5.06695 0.609951 5.18701 -0.0977161 5.73558L1.12761 7.31627C1.25794 7.21524 1.46073 7.18241 1.63754 7.25456L2.39319 5.40281ZM-0.0977161 5.73558C-0.815497 6.292 -1.1621 7.21164 -0.927483 8.11197L1.00788 7.60764C0.986016 7.52372 1.0074 7.40946 1.12761 7.31627L-0.0977161 5.73558ZM-0.929244 8.10511L3.63158 26.1291L5.57047 25.6384L1.00964 7.61449L-0.929244 8.10511Z "
HorizontalOptions="Center"
VerticalOptions="Center" />
<!-- Path -->
<Path
Margin="0,0,0,6.737793"
Data="M-0.0997095 -0.707957C-0.649242 -0.652889 -1.05008 -0.162763 -0.995017 0.386769C-0.939949 0.936302 -0.449823 1.33714 0.0997095 1.28208L-0.0997095 -0.707957ZM11.3921 1.28208C11.9417 1.33714 12.4318 0.936302 12.4869 0.386769C12.5419 -0.162763 12.1411 -0.652889 11.5916 -0.707957L11.3921 1.28208ZM0.0997095 1.28208C3.85289 0.905975 7.63896 0.905975 11.3921 1.28208L11.5916 -0.707957C7.70576 -1.09735 3.78608 -1.09735 -0.0997095 -0.707957L0.0997095 1.28208Z "
HeightRequest="2.4344900000000003"
HorizontalOptions="Center"
Stroke="#FFFFFF"
StrokeLineJoin="Round"
StrokeThickness="2"
VerticalOptions="End"
WidthRequest="13.59198" />
</Grid>
<!-- Ingredia -->
<Label
Grid.Row="4"
Grid.ColumnSpan="2"
FontAttributes="None"
FontFamily="SFProText-Medium"
FontSize="12"
HeightRequest="14"
HorizontalOptions="Center"
HorizontalTextAlignment="Center"
Text="Ingredia"
TextColor="#FFFFFF"
VerticalOptions="Start"
VerticalTextAlignment="Start"
WidthRequest="55" />
<!-- Text -->
<Grid
Grid.Row="3"
Grid.Column="1"
HeightRequest="24"
HorizontalOptions="Start"
VerticalOptions="Start"
WidthRequest="24">
<!-- Oval -->
<Ellipse
BackgroundColor="#5CC3FF"
HeightRequest="24"
HorizontalOptions="Center"
VerticalOptions="Center"
WidthRequest="24" />
<!-- 1 -->
<Label
FontAttributes="None"
FontFamily="SFProText-Medium"
FontSize="12"
HeightRequest="14"
HorizontalOptions="Center"
HorizontalTextAlignment="Center"
Text="1"
TextColor="#FFFFFF"
VerticalOptions="Center"
VerticalTextAlignment="Start"
WidthRequest="6" />
</Grid>
</Grid>Pricing Plan
Different plans tailored to meet various conversion needs.
Monthly Plan
Monthly plan for unlimited conversions every month$ 19 Per/month
Direct Import from Figma
Automatic Conversion to XAML
Support for Layout Structures
Custom Fonts and Typography obtained from the design file
Responsiveness and Adaptability
Annual Plan
Annual plan for unlimited conversions with a built-in discount$ 197 Per/year
Direct Import from Figma
Automatic Conversion to XAML
Support for Layout Structures
Custom Fonts and Typography obtained from the design file
Responsiveness and Adaptability
Exclusive Lifetime Offer - Limited Spots Available
One payment. Lifetime value.$ 297 Single Payment
Direct Import from Figma
Automatic Conversion to XAML
Support for Layout Structures
Custom Fonts and Typography obtained from the design file
Responsiveness and Adaptability
Get started Today!
Save hours of development time by instantly converting your Figma designs into XAML code for your .NET MAUI apps.
Tutorials
Videos to help you learn more about how to use the tool and get the most out of it.
Generating a Figma Access Token
In this video, you'll learn how to generate a Figma Access Token to use with Xamlify.
Configuring Xamlify
Learn how to set up Xamlify
Understanding the XAML generated code
Discover the elements generated by Xamlify that can help you save hours of development time in your .NET MAUI projects.
Generating components with Xamlify
In this video, I'll show you how Xamlify can be a powerful ally in converting graphic components into XAML code for seamless integration into your .NET MAUI pages.
Quickly creating XAML pages
The recommended way to generate designs from scratch and convert them to XAML code
Generating flexible full pages designs
Check out some examples of how Xamlify can extract fully responsive page designs
Generating Borders, Grids, VerticalStack, HorizontalStack and Flex Layouts
Learn how to adjust your Figma designs to generate various layouts in your XAML code
Demo Improving a Figma Design to Generate the Best Possible XAML Code
In this demo, I'll walk you through the step-by-step process of refining a Figma design to generate the best possible XAML code.
Frequently Asked Questions
Find answers to some of the most common questions about our product.
Why isn’t it free?
The cost covers server expenses and the integration of AI models to improve results and add new features over time.
Is Figma the only supported platform?
Yes, for now, Figma is the only platform supported.
Does it generate perfect XAML code?
No tool will generate flawless code. This is intended as a starting point, helping you save time by providing a foundation you can adjust to fit your app’s needs.
Can I try it before purchasing?
Due to the nature of the product, trials aren’t available. However, if you feel the tool didn’t meet your needs, you can contact me for a full refund.
Do you store my Figma designs on your server?
No, the only data stored is related to your account. Even your Figma access token is not saved on the server.
How many times can I use the tool?
Currently, you can generate an unlimited number of XAML conversions.
If prices increase, will I be able to renew at my original subscription price?
Prices may increase as new features are added, but if you lock in a subscription at the current rate, it will remain the same until you cancel.
How long does the conversion process take?
Just seconds! Even for multiple designs, Xamlify performs the conversion very quickly.
Is support provided for customizing the generated code?
While the tool provides a great starting point, you may need to manually refine the code. If you need further assistance, we recommend consulting with a XAML developer.
What happens if I encounter an error during conversion?
If you experience any issues during the conversion process, please reach out to support, and we will assist you in resolving the issue as soon as possible.