Prerequisites

1. Previous knowledge of Figma
2. Be familiar with Power Apps
3. Have background assets, see step 14

Step 1. Create the design in Figma

1. Goto to the Microsoft profile in Figma

2. Scroll down and choose "Microsoft Power Apps", which is the Figma UI Kit

3. Click on the top right button "Get a copy", so get a copy of the UI toolkit in your Figma profile

4. This deploys a copy of the UI Tookit in your Figma workspace

5. Click on the plus button to create a new page for the Figma app

6. Rename the name space to a name of your liking. We used "Workspace"

7. Go to the Assets tab, as indicated in the figure and switch there

8. Choose the Phone assets to build the app

9. Choose and drag to the Canvas, the Phone/Screen asset and resize it

10. Create 3 copies of this screen, by copying and pasting them pressing Ctrl + C or Cmd + C:

11. Next, dettach the instances, by right clicking on every one of the Screens and choosing Detach instance

12. Change the title of the screens, by selecting them. We rename them as

    1. Welcome Page
    2. Subscribe Page
    3. Thank you Plage

13. In the Figma toolbar, click on the small rectangle icon, and choose "Place image"

14. Add the image to your canvas and center it over the leftmost screen:

15. Copy and paste the image over the other two remaining screens

16. From the panel on the left, grab the label asset and drag it to the leftmost screen

17. Add the text "RESERVATION APP" to the label, and proceed to place it where desired

18. You may also change the color as you desire

19. From the asset panel to the left, choose the Button asset and added to the leftmost screen

20. Modify the design to the button to fit your design. We used a white background and lila text

21. Copy and paste the labels on the leftmost screen, and add them to the center screen. Change the text as it suits you:

22. From the asset panel to the left, search now for the Phone/03 Textinput, Dropdown, ... and drag and drop to the screen the text input field

23. Copy and paste the text field two more times, to get the Last Name and Email address

24. Drag from the asset panel to the left, the Dropbox component

25. We rename the text inside all these components to "Name", "Last Name", "Email:[email protected]" and "Select a place category"

26. Copy the button from the leftmost screen and paste it in the center screen:

27. Paste the label to the rightmost screen and rename it:

28. Get an image from your computer, express your love :)

Step 2. Import the design in Power automate

1. Head to the Power Automate Portal
2. Choose Figma Preview
3. Write a title for your Power App in the Popup that opens, then move to Figma to grab the Link to Figma page
4. Return to Figma, right click on the Page you created for your App, in our case, Workspace, and from select "Copy link to page"
5. Paste the link in the Link to Figma page or frame, in the Dialog you have open in Power Automate:
6. Switch to Figma to grab now the Figma personal access token and click on the top right, where your profile is. Then choose settings. You will get this Dialog:
7. Copy the token. Notice, that this is the only chance to grab to the token, after this, you will have to regenerate the token.
8. Paste it back in Power Apps, under the Figma personal access token section:
9. Choose the format as Phone to keep it consistent with the choice you did in Figma
10. Click create
11. Power Apps will begin to import assets and create your app:

Building the App in Power Apps

1. Finally the app, with its design it is imported in Power Apps
2. Choose the Make button and in the formula field, enter Navigate(Subscribe_Page) function, on the OnSelect event, as shown below:
3. Go to the Subscribe page, on the left panel, select it, and then clicking on the Send button, add on the OnSelect event, the function Navigate(Thank_you_Page)
4. Fix the labels size if necessary:
5. Go now and try the app

And now you have the scalfolding to being to add functionality to your app.

Happy coding!