You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -14,4 +14,4 @@ Run the app (<kbd>F5</kbd> on Visual Studio) and observe the UI, it should look
14
14
15
15
## Next Step
16
16
17
-
The next module offers an alternative way to import the UI code without Figma. Since you've already imported the UI, you may skip to Module 4, where you will add the app architecture.
17
+
The next module offers an alternative way to import the UI code without using Figma. Since you've already imported the UI, you can skip to Module 4, where you will add the app architecture.
Copy file name to clipboardExpand all lines: simple-calc/modules/Import-UI-from-Figma/Intro.md
+11-16Lines changed: 11 additions & 16 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,35 +10,30 @@ Figma is a collaborative app UI design tool that allows users to create, share,
10
10
Uno Platform offers a Figma plugin that enables exporting the UI designed in Figma as both XAML and C# Markup.
11
11
In this module, you'll learn how to export the UI from a pre-existing Figma design for the SimpleCalculator app, and how to import it into the app you've started to create in the previous modules.
12
12
13
-
## Open the Figma file and set up an account
13
+
## Opening the Figma file and setting up an account
14
14
15
-
1.Open the SimpleCalculator Figma file via [this link](https://aka.platform.uno/uno-figma-simplecalc-workshop).
15
+
1.Use [this link](https://aka.platform.uno/uno-figma-simplecalc-workshop) to access the Figma file for the Simple Calculator project. When you click on the link, it will take you to the Simple Calculator community file, where you can proceed to open it in Figma.
16
16
17
-
1. If you are not signed in with Figma, you will be asked to do so. Create an account if you don't have one. Follow the instructions to sign up with your Google account or use a username and password.
17
+
Note: If you are not currently signed in to Figma, you will be prompted to do so. If you don't have an account, you can create one by following the instructions to sign up with your Google account or using a username and password.
1.The SimpleCalculator design will open in Figma, displaying the Cover page:
23
+
2. The SimpleCalculator file will open in Figma, displaying the Cover page. To export the generated code from the Simple Calculator UI, you'll need to install the Uno Platform plugin.
24
24
25
25
26
26
27
-
1. To export the UI from Figma, you'll need to install the Uno Platform plugin. To enable that you will need to create your own copy of the SimpleCalculator design.
28
-
In the top menu in the center of the screen click the little down arrow and select *Duplicate to your drafts* from the menu.
27
+
3. From within the Simple Calculator Figma file, navigate to the "Resources" tab, and under plugins, search for "Uno Platform (Figma to C# and XAML).
29
28
30
-
31
-
32
-
1. The duplicated file will open in a new tab and additional menu items and controls will appear on the Figma ribbon.
33
-
34
-
1. The page designed in the SimpleCalculator design in Figma is listed in the left-side navigation bar. Select **Simple Calculator design**, then select **Simple Calc** (either Dark or Light version) option that appears at the bottom of the sidebar.
37
+
1. In the left-side navigation bar, locate the Simple Calculator UI design by selecting the "Calculator" page, and within the layers, choose either the "Dark" or "Light" version.
[!include[Setting up Figma Plugin](../../../Import-UI-from-Figma/Intro.md)]
6
6
7
-
2. Open the Export tab, select C#, then click Refresh (the circled arrow button on the bottom).
7
+
2. Run the plugin by right-clicking on the design and selecting "Plugins" > Uno Platform (Figma to C# or XAML).
8
+
9
+
7. Once the plugin is running, select the "Export" tab, and choose "C#" as your export language, then click "Refresh" (the circular arrow button at the bottom).
8
10
9
11
10
12
11
-
3.Select all contents starting from the line following `this` and ending at the semicolon (;).
13
+
8. Select all the code starting from the line following `this` and ending at the semicolon (;).
4. Copy the selected code to the clipboard (<kbd>Ctrl</kbd>+<kbd>C</kbd> on Windows).
22
26
23
-
5. Open MainPage.cs and replace all the Page contents with the copied code.
27
+
5. Open MainPage.cs and replace all the existing code following `this` and ending at the semicolon (;) with the copied code.
28
+
29
+
6. To set the appropriate font size for all buttons, go to the Figma Plugin in the "Export" tab, select "Fonts Override File" from the dropdown menu, and copy the content in the ResourceDictionary.
30
+
31
+
7. Access the "MaterialFontsOverride.cs" file in the "Style" folder and replace it with your "MaterialFontsOverride.cs."
24
32
25
-
6. To set the appropriate font size for all buttons, access the MaterialFontsOverride.cs file in the Style folder. Go to the Figma Plugin, in the Export tab, and select Fonts Override File from the dropdown menu. Copy the content in the ResourceDictionary and replace it in your MaterialFontsOverride.cs.
7. Now we need to prepare our UI with the Binding expressions that we will need in the App Architecture module. First let's add the `DataContext` to the page. To do so add `.DataContext(new TempDataContext(), (page, vm) => page` before the `.Content` definition. Ensure to properly terminate the DataContext with a closing `)` preceding the semicolon at the end of the page's code.
42
+
8. Now we need to prepare our UI with the Binding expressions that we will need in the App Architecture module. First let's add the `DataContext` to the page. To do so add `.DataContext(new TempDataContext(), (page, vm) => page` before the `.Content` definition. Ensure to properly terminate the DataContext with a closing `)` preceding the semicolon at the end of the page's code.
0 commit comments