diff --git a/simple-calc/art/Light/app-looks.png b/simple-calc/art/Light/app-looks.png index 4e25b17..c634ad1 100644 Binary files a/simple-calc/art/Light/app-looks.png and b/simple-calc/art/Light/app-looks.png differ diff --git a/simple-calc/art/figma-export-csharp.png b/simple-calc/art/figma-export-csharp.png index 2179693..5fd6302 100644 Binary files a/simple-calc/art/figma-export-csharp.png and b/simple-calc/art/figma-export-csharp.png differ diff --git a/simple-calc/art/figma-export-fonts-csharp.png b/simple-calc/art/figma-export-fonts-csharp.png index f06dce9..05c3c4d 100644 Binary files a/simple-calc/art/figma-export-fonts-csharp.png and b/simple-calc/art/figma-export-fonts-csharp.png differ diff --git a/simple-calc/art/figma-plugin-export-csharp.png b/simple-calc/art/figma-plugin-export-csharp.png index 3d157cd..2e15fcb 100644 Binary files a/simple-calc/art/figma-plugin-export-csharp.png and b/simple-calc/art/figma-plugin-export-csharp.png differ diff --git a/simple-calc/art/figma-plugin-launch.png b/simple-calc/art/figma-plugin-launch.png index a188d01..964d30f 100644 Binary files a/simple-calc/art/figma-plugin-launch.png and b/simple-calc/art/figma-plugin-launch.png differ diff --git a/simple-calc/art/figma-run-plugin.png b/simple-calc/art/figma-run-plugin.png new file mode 100644 index 0000000..1f72e8b Binary files /dev/null and b/simple-calc/art/figma-run-plugin.png differ diff --git a/simple-calc/art/figma-select-design.png b/simple-calc/art/figma-select-design.png index 9077b79..5b38afa 100644 Binary files a/simple-calc/art/figma-select-design.png and b/simple-calc/art/figma-select-design.png differ diff --git a/simple-calc/modules/Import-UI-from-Figma/Conclusion.md b/simple-calc/modules/Import-UI-from-Figma/Conclusion.md index 858bde4..5969bac 100644 --- a/simple-calc/modules/Import-UI-from-Figma/Conclusion.md +++ b/simple-calc/modules/Import-UI-from-Figma/Conclusion.md @@ -4,7 +4,7 @@ uid: Workshop.SimpleCalc.Figma.Conclusion ## Run the app -Run the app (F5 on Visual Studio) and observe the UI, it should look similar to the following: +Run the app (F5 on Visual Studio) and observe the UI. It should resemble the example below: @@ -14,4 +14,4 @@ Run the app (F5 on Visual Studio) and observe the UI, it should look ## Next Step -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. \ No newline at end of file +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. \ No newline at end of file diff --git a/simple-calc/modules/Import-UI-from-Figma/Intro.md b/simple-calc/modules/Import-UI-from-Figma/Intro.md index 5397f4b..8fd33a5 100644 --- a/simple-calc/modules/Import-UI-from-Figma/Intro.md +++ b/simple-calc/modules/Import-UI-from-Figma/Intro.md @@ -10,35 +10,31 @@ Figma is a collaborative app UI design tool that allows users to create, share, Uno Platform offers a Figma plugin that enables exporting the UI designed in Figma as both XAML and C# Markup. 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. -## Open the Figma file and set up an account +## Opening the Figma file and setting up an account -1. Open the SimpleCalculator Figma file via [this link](https://aka.platform.uno/uno-figma-simplecalc-workshop). +1. Use [this link](https://aka.platform.uno/uno-figma-simplecalc-workshop) to access the Figma file for the Simple Calculator project. The link will take you to the Simple Calculator community file, where you can proceed to open it in Figma. -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. +> [!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. ![Figma sign-in page](../../art/figma-sign-in.jpg) -## Install the Uno Platform plugin for Figma +## Installing the Uno Platform plugin for Figma -1. The SimpleCalculator design will open in Figma, displaying the Cover page: +1. 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. ![Figma menu plugin](../../art/figma-cover.png) -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. - In the top menu in the center of the screen click the little down arrow and select *Duplicate to your drafts* from the menu. +1. From within the Simple Calculator Figma file, navigate to the "Resources" tab, and under plugins, search for "Uno Platform (Figma to C# and XAML). - ![Figma menu plugin](../../art/figma-duplicate-drafts.png) - -1. The duplicated file will open in a new tab and additional menu items and controls will appear on the Figma ribbon. - - ![Figma menu plugin](../../art/figma-menu-plugin.png) + ![Figma Plugin Launch](../../art/figma-plugin-launch.png) -1. In the search box enter "Uno Platform (Figma-To-XAML)". Launch the plugin by clicking the Uno Platform plugin. +1. Install the plugin by clicking "Run" or "Try it out” from the community page. - ![Figma Plugin Launch](../../art/figma-plugin-launch.png) + ![Figma Plugin Launch](../../art/figma-run-plugin.png) -## Export the UI +## Exporting the UI -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. +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. ![Select Figma Design](../../art/figma-select-design.png) \ No newline at end of file diff --git a/simple-calc/modules/Resources/CSharp/Figma/Import-UI-from-Figma.md b/simple-calc/modules/Resources/CSharp/Figma/Import-UI-from-Figma.md index d9bbca6..a64d09f 100644 --- a/simple-calc/modules/Resources/CSharp/Figma/Import-UI-from-Figma.md +++ b/simple-calc/modules/Resources/CSharp/Figma/Import-UI-from-Figma.md @@ -4,13 +4,17 @@ uid: Workshop.SimpleCalc.Figma.CSharp [!include[Setting up Figma Plugin](../../../Import-UI-from-Figma/Intro.md)] -2. Open the Export tab, select C#, then click Refresh (the circled arrow button on the bottom). +2. Run the plugin by right-clicking on the design and selecting *Plugins* > *Uno Platform (Figma to C# or XAML)*. -![Figma menu plugin](../../../../art/figma-plugin-export-csharp.png) +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). -3. Select all contents starting from the line following `this` and ending at the semicolon (;). + ![Figma menu plugin](../../../../art/figma-plugin-export-csharp.png) -![Figma Export](../../../../art/figma-export-csharp.png) +8. Select all the code starting from the line following `this` and ending at the semicolon (`;`). + + ![Figma Export](../../../../art/figma-export-csharp.png) + +9. Copy the selected code to your clipboard (CTRL+C on Windows).
MainPage.cs code contents (collapsed for brevity) @@ -20,11 +24,14 @@ uid: Workshop.SimpleCalc.Figma.CSharp 4. Copy the selected code to the clipboard (Ctrl+C on Windows). -5. Open MainPage.cs and replace all the Page contents with the copied code. +5. Open *MainPage.cs* and replace all the existing code following `this` and ending at the semicolon (`;`) with the copied code. + +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. + +7. Access the *MaterialFontsOverride.cs* file in the *Style* folder and replace it with your *MaterialFontsOverride.cs* file. -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. -![Figma Export](../../../../art/figma-export-fonts-csharp.png) + ![Figma Export](../../../../art/figma-export-fonts-csharp.png)
MaterialFontsOverride.cs code contents (collapsed for brevity) @@ -32,7 +39,7 @@ uid: Workshop.SimpleCalc.Figma.CSharp [!code-csharp[MaterialFontsOverride.cs](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. +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. ```csharp this