WEBVTT 00:00.000 --> 00:10.000 We will understand how to create a button and menu in Figma. 00:10.000 --> 00:12.000 Link button to its screen. 00:12.000 --> 00:14.000 Create a slider. 00:14.000 --> 00:20.000 We will create a small mobile interface which has buttons, a home page, and a slider. 00:20.000 --> 00:22.000 Create a new frame and button. 00:22.000 --> 00:27.000 Select the frame tool, square icon, on the bottom. 00:27.000 --> 00:31.000 Choose a device frame from the right to open as frame 1. 00:31.000 --> 00:34.000 We will select Android Compact 1. 00:34.000 --> 00:38.000 Go to the Shape tool and select a shape for your button. 00:38.000 --> 00:46.000 We will style the button, click the rectangle, and choose a color under Fill. 00:46.000 --> 00:49.000 And add roundness to the button. 00:49.000 --> 00:53.000 Add text using the text box tool. 00:53.000 --> 00:56.000 Change the size of the text. 00:56.000 --> 01:00.000 Select frame 1 and the button, then copy and paste. 01:00.000 --> 01:03.000 This creates frame 2. 01:03.000 --> 01:05.000 We will rename the frames. 01:05.000 --> 01:08.000 We will make it a page 1 and home page. 01:08.000 --> 01:12.000 We will duplicate the click button to create home page menu. 01:12.000 --> 01:18.000 Press Alt and drag the rectangle, adjust it according to the frame. 01:18.000 --> 01:23.000 We will add a rectangle for visual enhancement of the design. 01:23.000 --> 01:28.000 To place it below, go to the layer panel and put it at the bottom. 01:28.000 --> 01:32.000 We will change the color of the rectangle. 01:32.000 --> 01:38.000 Edit the text as start, options, slider. 01:38.000 --> 01:42.000 Set up navigation and test the button. 01:42.000 --> 01:44.000 Select the button in page 1. 01:44.000 --> 01:50.000 In the right panel, click on Prototype to find the interaction tool. 01:50.000 --> 01:56.000 Choose on click, navigate to, and select home page as the destination. 01:56.000 --> 02:01.000 To test if it is working, we will click Review to test the button. 02:01.000 --> 02:05.000 Click the button to ensure it navigates to home page. 02:05.000 --> 02:08.000 Create new frames for actions. 02:08.000 --> 02:11.000 We will create frames for each button's action. 02:11.000 --> 02:14.000 For start, we will create welcome screen. 02:14.000 --> 02:17.000 For options, we will create options page. 02:17.000 --> 02:20.000 For slider, we will create a slider page. 02:20.000 --> 02:27.000 Add a back to home button on each new frame. 02:27.000 --> 02:30.000 We will link buttons to frames. 02:30.000 --> 02:35.000 In the Prototype tab, link each button to its corresponding frame. 02:35.000 --> 02:38.000 Start to welcome page. 02:38.000 --> 02:41.000 Options to options page. 02:41.000 --> 02:43.000 Slider to slider page. 02:43.000 --> 02:46.000 We will also connect all three back to home buttons. 02:46.000 --> 02:47.000 Back to home page. 02:47.000 --> 02:51.000 Preview to check whether each button works. 02:51.000 --> 02:56.000 Click each button to ensure it navigates to the correct screen. 02:56.000 --> 02:59.000 Add slider to the slider page. 02:59.000 --> 03:02.000 We will create a slider by adding a rectangle. 03:02.000 --> 03:07.000 Then adjust the roundness and duplicating it and change the color. 03:07.000 --> 03:14.000 Now, we will add a circle by selecting a lips and fill the color. 03:14.000 --> 03:20.000 We will group the elements and create a frame by frame selection. 03:20.000 --> 03:23.000 Duplicate it by Alt and drag. 03:23.000 --> 03:29.000 Now, we will change the slider position and adjust the frame one rectangle. 03:29.000 --> 03:34.000 Select both the sliders and search for create multiple components. 03:34.000 --> 03:37.000 After that select combine as variance. 03:37.000 --> 03:43.000 We will add the prototype, select the frame one circle, and add the arrow to frame two. 03:43.000 --> 03:48.000 A box of interaction will open, change the trigger to on drag. 03:48.000 --> 03:54.000 Select frame two, and add the arrow to frame one, and change the trigger to on drag. 03:54.000 --> 03:57.000 Clear the test on the slider page. 03:57.000 --> 04:04.000 And go to assets, you will find local assets, go on assets, and drag it on the slide page. 04:04.000 --> 04:10.000 Click on preview to check whether it is working. 04:10.000 --> 04:14.000 Great our slider is working. 04:14.000 --> 04:23.000 Try creating a simple profile page with a photo, name, and buttons to edit or log out. 04:23.000 --> 04:30.000 Keep practicing and experimenting to improve your design skills.