Skip to content

Commit

Permalink
docs: import-figma-ui-update
Browse files Browse the repository at this point in the history
  • Loading branch information
Matt committed Nov 9, 2023
1 parent 69561a0 commit d861975
Show file tree
Hide file tree
Showing 4 changed files with 25 additions and 23 deletions.
Binary file modified simple-calc/art/Light/app-looks.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions simple-calc/modules/Import-UI-from-Figma/Conclusion.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ uid: Workshop.SimpleCalc.Figma.Conclusion

## Run the app

Run the app (<kbd>F5</kbd> on Visual Studio) and observe the UI, it should look similar to the following:
Run the app (<kbd>F5</kbd> on Visual Studio) and observe the UI. It should resemble the example below:

<picture>
<source media="(prefers-color-scheme: dark)" srcset="../../../art/Dark/app-looks.png">
Expand All @@ -14,4 +14,4 @@ Run the app (<kbd>F5</kbd> 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.
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.
27 changes: 11 additions & 16 deletions simple-calc/modules/Import-UI-from-Figma/Intro.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,35 +10,30 @@ 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. 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.

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:
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.

![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.
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).

![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.
4. 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)
17 changes: 12 additions & 5 deletions simple-calc/modules/Resources/CSharp/Figma/Import-UI-from-Figma.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,18 @@ 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).

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).

![Figma menu plugin](../../../../art/figma-plugin-export-csharp.png)

3. Select all contents starting from the line following `this` and ending at the semicolon (;).
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).

<details>
<summary><i>MainPage.cs</i> code contents (collapsed for brevity)</summary>

Expand All @@ -20,9 +24,12 @@ uid: Workshop.SimpleCalc.Figma.CSharp

4. Copy the selected code to the clipboard (<kbd>Ctrl</kbd>+<kbd>C</kbd> 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."

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)

Expand All @@ -32,7 +39,7 @@ uid: Workshop.SimpleCalc.Figma.CSharp
[!code-csharp[MaterialFontsOverride.cs](MaterialFontsOverride.cs)]
</details>

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
Expand Down

0 comments on commit d861975

Please sign in to comment.