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
Copy file name to clipboardExpand all lines: website/blog/2023-lcf/2023-02-13/index.md
+21-3Lines changed: 21 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -34,9 +34,9 @@ Welcome to `Day 13` of #30DaysOfLowCode!
34
34
More often than not, a well thought out, consistent, eye-catching but functional user experience can define the success of your app. This is why we’ve decided to dedicate this week to the **User Interface (UI)**. Today’s blog will begin that journey with actionable insights and resources that will get you started building amazing UI with Canvas Apps.
35
35
36
36
## What We'll Cover
37
-
* What are Canvas Apps?
37
+
* What are Canvas Apps?
38
38
* Ways to build Canvas Apps
39
-
*Section 3
39
+
*Working with Express Design
40
40
* Section 4
41
41
* Exercise: Try this yourself!
42
42
* Resources: For self-study!
@@ -89,7 +89,25 @@ The generated 3-screen app includes:
89
89
90
90
This process takes care of the data connection for you so that you can focus on the functionality and UI straight away. Whether your data lives in [SharePoint](https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/app-from-sharepoint), [Excel](https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/get-started-create-from-data), [Azure SQL](https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/app-from-azure-sql-database) or even [Dataverse](https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/data-platform-create-app), you can get started building Canvas Apps, from data, today.
91
91
92
-
## Section 3
92
+
## Working with Express Design
93
+
94
+
Express design is a new way to quickly get started with Canvas Apps by instantly transforming any visual design artifact into an app. Every app starts with a design phase where some form of initial sketch would have been made. You may have sketched some basic UI on a piece of paper or on a whiteboard or if you’re a professional – you may have designed some assets in Figma.
95
+
96
+
Whatever your method is, Power Apps is now applying advanced cognitive AI models to generate app UI using two methods.
97
+
98
+
### Image to App
99
+
100
+
All you have to do is take a picture or screenshot of whatever wireframe, sketch, or visual design that you have, upload it into Power Apps and then follow the steps in the guided interface to tag the relevant UI components and set up your data. This will then auto-magically generate an app for you to jumpstart your app development process. See [this article](https://learn.microsoft.com/en-gb/power-apps/maker/canvas-apps/app-from-image) for more information and step-by-step guidance on how to generate Canvas Apps from an image!
101
+
102
+
Also, check out this [AMAZING TikTok](https://www.tiktok.com/@mspowerplatform/video/7192702168489577774) that shows you the whole Image to App process in under 60 seconds! Don’t forget to follow us while you’re there 😉
103
+
104
+

105
+
106
+
### Figma to App
107
+
108
+
Now the Image to App process will do it’s best to match your drawing or image however if you are looking for an exact, pixel-perfect match then you should consider creating your design in Figma using the [Create Apps from Figma UI Kit](https://www.figma.com/community/file/1110934196623232680). Afterwards, you will then convert your design file into a Canvas App and then add more functionality using the Power Apps Studio. More details on this process can be [found here](https://learn.microsoft.com/en-gb/power-apps/maker/canvas-apps/figma/overview) so be sure to try it out for yourself and let us know how it went!
109
+
110
+

0 commit comments