To do this we have to use constraints, which you'll find under the Properties menu on the right. Now we are going to adjust our layout so it's responsive to different iPhones (320x568, 375圆67 and 414x736). Finally, group all elements together and name them up properly. Align the text by the centre of the button. Put some text on the buttonĪdd text to the button using the Text tool ( T): 'Get more Shares!' Set this in Avenir Black, 15px, #FFFFFF. After that add a drop shadow effect (colour: #ABDAFF opacity: 100% y: 5 blur: 11). Then set the fill colour to #5F98FA and roundness to 22 (you'll find this field after 'Rotation' in the Properties panel). Using the Align tools, line up the rectangle by horizontal centre. Draw a rectangle below the last cell, width: 195 height: 44, Y-axis distance from the last separator 21px. Change second heading to 'Total members' and the third group heading to 'Friends signed up' and update the relevant values. Underneath the graph will be three cells showing key pieces of data (click image to enlarge) (opens in new tab)ĭuplicate this group so you have three groups with 24px vertical distance between them. Select the heading, value and separator and create a group ( cmd+G).
FIGMA RESPONSIVE RESIZE FULL
Making a separatorĭraw a rectangle that is 1px in height and spans the full width of the screen (#F5F5F5 x: 0 y: 435) – this will act as the separator between the cells. To the right of the cell place the value '$1,115', text style: Avenir Heavy, 22px, #5F98FA, text alignment: left, x: 287 y: 387. Using the Text tool ( T) let's create our first heading: 'Estimated value of your shares': x:16 y:391, Avenir Medium, 15px, #5D7EB6. Three informative boxesīelow the line graph we are going to create three cells that display more information. With the Text tool ( T) select Avenir Black, 11px, #1F4991. To finish the graph section, we just need to add values to our intersection points. We need to add a stroke: click on the '+' button next to the stroke section, set weight: 2px and align: Center. Draw 8x8px circles on each intersection and set the fill colour to #5F98FA. This time we'll use the Ellipse tool ( O), which you'll find in the drop-down menu accompanying the Rectangle tool. Use the Text tool to add values to the places the guidelines intersect with the data lineĪt the points where the guidelines intersect with the data line we are going to add circles. Use following settings to make a smooth and elegant shadow: blur: 3px, y: 7px, #2951FF, opacity: 100%. Let's add a drop shadow to help the line stand out: click the '+' on the Effects section and choose 'Drop shadow'. This shape should have a 4px stroke and no fill, #FFFFFF. Using the Pen tool ( P) we need to create a vector to represent the data line. I have used Avenir Medium, at 11px, #C1D8FF. On the bottom of each guideline, we need to add a date label using text layers ('Feb 2', 'Feb 9', 'Feb 16', 'Feb 23', 'Mar 1'). Select the Rectangle tool ( R) and set x:24 y:147 width: 1 height: 166 fill colour #B3DCFF and opacity 20%.ĭuplicate this rectangle four times with 80px margins. The final step is to set the fill colour to #FFFFFF. Now we just need to set the width and height to numeric values – in my case width: 12px height: 20px. After that, go back into Boolean groups > Flatten selection, or press cmd+E. Select both rectangles and under the top menu go to Boolean groups > Subtract selection.
Duplicate this rectangle and place it at x:18 y:43. Create a rectangle 14x14px, add 45-degree rotation, x:14 y:43. On the left of the navigation bar should be a 'back' icon. Align the heading by horizontal centre, y: 33. I've gone for Avenir Heavy, 15px, #FFFFFF. Using the Text tool ( T), click on your artboard to add a header to the navigation bar. Copy out the light status bar option, paste it into the current file and place it at (x: 0 y:0).
.png "figma responsive resize")
However, there is a file called 'Sample File', which is an iOS app design, so we can borrow the status bar from that. Unfortunately, Figma doesn't include iOS UI elements by default. The colour at the top should be #77A6F7, and at the bottom #5A93F5 (opacity 100 per cent for both). Find the 'Fill' option, press on the colour preview and select 'Linear' from the drop-down menu.
For our navigation bar let's set the gradient fill using the property inspector panel on the right. Press R to set width: 375, height: 64, position (x:0 y:0). Next we want to place a status bar at the top of the screen. Here you can adjust the colour options to create a linear gradient (click image to enlarge) (opens in new tab)
Set the gradient for the status bar using the properties panel on the right on the screen.
0 kommentar(er)
