- Previous knowledge of Figma
- Be familiar with Power Apps
- Have background assets, see step 14
-
Goto to the Microsoft profile in Figma
-
Scroll down and choose "Microsoft Power Apps", which is the Figma UI Kit
-
Click on the top right button "Get a copy", so get a copy of the UI toolkit in your Figma profile
-
This deploys a copy of the UI Tookit in your Figma workspace
-
Click on the plus button to create a new page for the Figma app
-
Rename the name space to a name of your liking. We used "Workspace"
-
Go to the Assets tab, as indicated in the figure and switch there
-
Choose and drag to the Canvas, the Phone/Screen asset and resize it
-
Create 3 copies of this screen, by copying and pasting them pressing Ctrl + C or Cmd + C:
-
Next, dettach the instances, by right clicking on every one of the Screens and choosing Detach instance
-
Change the title of the screens, by selecting them. We rename them as
-
In the Figma toolbar, click on the small rectangle icon, and choose "Place image"
-
Add the image to your canvas and center it over the leftmost screen:
-
Copy and paste the image over the other two remaining screens
-
From the panel on the left, grab the label asset and drag it to the leftmost screen
-
Add the text "RESERVATION APP" to the label, and proceed to place it where desired
-
From the asset panel to the left, choose the Button asset and added to the leftmost screen
-
Modify the design to the button to fit your design. We used a white background and lila text
-
Copy and paste the labels on the leftmost screen, and add them to the center screen. Change the text as it suits you:
-
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
-
Copy and paste the text field two more times, to get the Last Name and Email address
-
Drag from the asset panel to the left, the Dropbox component
-
We rename the text inside all these components to "Name", "Last Name", "Email:[email protected]" and "Select a place category"
-
Copy the button from the leftmost screen and paste it in the center screen:
- Head to the Power Automate Portal
- Choose Figma Preview
- Write a title for your Power App in the Popup that opens, then move to Figma to grab the Link to Figma page
- Return to Figma, right click on the Page you created for your App, in our case, Workspace, and from select "Copy link to page"
- Paste the link in the Link to Figma page or frame, in the Dialog you have open in Power Automate:
- 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:
- Copy the token. Notice, that this is the only chance to grab to the token, after this, you will have to regenerate the token.
- Paste it back in Power Apps, under the Figma personal access token section:
- Choose the format as Phone to keep it consistent with the choice you did in Figma
- Click create
- Power Apps will begin to import assets and create your app:
- Finally the app, with its design it is imported in Power Apps
- Choose the Make button and in the formula field, enter
Navigate(Subscribe_Page)
function, on the OnSelect event, as shown below: - 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)
- Fix the labels size if necessary:
- Go now and try the app
And now you have the scalfolding to being to add functionality to your app.
Happy coding!