As a UI designer you'll most likely Spend the majority of your time Designing websites but every now and Then something else might come along Like for example a smartphone app so I Think it's important that you Flex those Creativity muscles by working on Projects that are maybe outside of your Comfort zone and that's exactly what This course is all about because today We'll be designing this calculator app In figma we'll start with a simple Wireframe and we'll create two pages for It one for the calculator and one for The history but hey for just meaning my Name is adipordillo I'm a web designer And developer and we're gonna split this Course the following way first we'll Grab the wireframe and we'll change the Typography and also will import some Icons Then we'll create and apply a color Scheme and in this part I'll show you How to easily work with tints and shades Uh then we'll design the actual app Layout and we'll follow it up with the Creation of the history page and finally I'll tell you more information about a Challenge that comes with this course Now before we get started I would like To briefly tell you about an amazing Resource that I use all the time and That is called envato elements here you Can find tons of useful resources like
Fonts icons UI kits WordPress themes Music stock photos and much more for Creatives like me this is an awesome Resource because all the assets have Simple commercial licensing and you're Not bound to any contract therefore you Can cancel whenever you want so if You're interested check out the link in The video description alright let's get The ball rolling and start working on The designs typography and iconography Before we get started don't forget that In the video description you can find Links to all the resources that I used In this video as well as links to the Source files so if you want to follow Along uh that's where it can download The figma file from and work alongside Me oh and don't forget to also Uh hit that subscribe button for more Free courses and tutorials just like This one all right uh the first thing we Have to do for this project is to take Care of the typography and icons so Let's see how we can do that uh first of All let's take a look at the figma file Here this is the starter kit that you Can download uh you have two pages here Basically First page is uh where we're gonna start We have the wireframe and then you can See here the final design that I made Let's see exactly what we have for this Calculator app before we get to the uh
To the typography part so we basically Have the the main uh calculator pad here With all the numbers and all the uh the Buttons that we need to create the Various operations uh this is going to Be a history Uh button that's gonna basically show up The history with all of our calculations This is a clear button that basically Deletes the the current row And here we have the calculation area Where we can see the uh the operations And the result For those operations right and that's Pretty much it really now this demo is Also using uh an iPhone 14 template this Is from the figma community you can find The exact link by clicking on on this Link in in figma so let's go ahead and Actually Delete this or actually you know what Let's Let's copy this let's create a new page Here and we'll we'll just start fresh so We'll duplicate this this wireframe and As you can see the majority of text Content in here is going to be numbers Right And in order to create a clean interface We need to Or we need those numbers to have like a Fixed width or a consistent with for That really easily we can use a mono Spaced font and the one that we're going
To use is called jet brains mono this is A free typeface is it typeface developed Or created for developers and you can Download it at this address here you Just download install the font in your System and you'll be good to go so uh What we're going to do now is basically Select every single piece of text that We have here and we're gonna change Uh it's a fun family the jetbrains mono And We're going to do the same here let's See this and this all of these basically All the numbers yeah these will all use Jetbrains mono and we're gonna keep them At 20 pixels for uh for our design let's Just make sure that we set the line Height to 150 percent here in figma and Actually let's do the same here we're Going to change the line height to 150 percent okay So that's looking a lot better already And just to make it easier for ourselves In the long run uh let's actually select Uh like the numbers here and we'll Create a text Style with this we'll call It a number right so the number is 20 Pixels so 150 percent line height and It's using jetbrains mono and let's do The same for these we'll just Um applied the uh the new style we Created this way if we decide to change Uh the style at any point we can just Change this text style and it's going to
Be applied to everything else we also Need these two Uh to use the number style because the Others the percentage The Divide times And all the other Um Operations will be represented by actual Icons and not just text also the zero And Dot here Must also use the number Style Uh also Let's uh select these and these Are 20 pixels 150. let's add a num or a Style to these as well But actually what I want to do is have These appear a little bit smaller than These So Let's actually change the number Text style to use 28 pixels Instead of 20. just like that And I'm gonna have these As let's call it number small Right so that's going to be applied To these let's see do we make these Bigger or smaller I don't know yet for Now we'll just leave them like that and That should do it uh really for the Typography now let's see about the icons Because we need quite a few in here we Need icons for the history clear the Delete here for the percent and all the Other operations and also for this uh Plus a minus so well we're going to grab Our icons from font awesome because it's
Free And we can use it in both personal and Commercial projects and fun awesome is Like a huge library of icons so we can Pretty much find everything we need so Uh let's start with the uh operations Really let's say which was the first one Here uh let's start with the percentage So percent And for this we're gonna search for the Free icons and there it is so just open This you can simply download it from Here I can just drag this from my Downloads folder In here and in figma since this has a Different width than the height I'm just Gonna click this constraint proportions Button and I'm gonna make this 24 Pixels so now we have this uh this nice Icon now what I'm going to do here is Actually create a separate frame That's going to be called Components because we're going to turn These icons into a couple of components It's going to make it easier for us to Work with so what I can do here is Actually rename this to Icon slash uh Percent we'll do a bit of organization Here and with it selected we can just Click create component all right And one thing that I want is for all of These icons to be the exact same size in My case this is 18 by 24. so we need to Make it a little bit wider but if we
Just drag it like this Uh it's going to make the uh the vector Itself stretch because it's that's how It's set here it's set to scale so let's Change that to left top and then Um I'm just going to select the the Parent here Resize this to 24 by 24 and with this Just align it inside Or align it to the center of its uh its Parent there so that's our first icon That's uh for the components and what I'm going to do now is just Fast forward because it's simply a Matter of grabbing the rest of the icons Based on our design and all you have to Do is search font awesome for the other Icons like divide times Minus plus equal and plus minus Okay so you do the exact same thing you Search you download you import them into Figma and you create a component and I Did exactly that I grabbed all of these Icons from font awesome I made sure that All of them are 24×24 I also resize them Where needed like for example On this percentage and on this one so That the icon itself is right in the Middle of this 24 by 24 pixel container So uh what we can do now is simply Select all of these all of these and Select create multiple components Right so now uh in our page If we go to resources you can say that
Under local components we have icon and Then All of these It's really that simple now finally for This step of the process we need to Create yet another component that's Going to be used for the actual buttons In the calculator right so uh we'll Actually do this we'll actually do two Components one will be a component For the numbers and one will be a Component for the icons okay so what Exactly do I mean by that well here's What we'll do we'll select this text We'll do shift a to create an auto Layout frame We'll set the width and height to fixed We'll use 64 by 64. let's do like a Simple fill color it doesn't really Matter what color we'll use I'll let's round out the corners and Let's make sure everything is nicely Aligned To the center So now let's select that And we'll rename this to number key And create a component Uh let's duplicate that Let's detach the instance let's rename This to Icon key okay So this will have a number or sorry an Icon instead of a number but it's Exactly the same size
The icon is aligned to the middle like That And we create a component out of this as Well And those are all the components that We're going to need for our design we Have all the icons And then we have the icon key and since We're at it let's create uh some some Properties let's select this uh this Text here And let's create a text property let's Call it number or actually text is fine And here we'll select an uh an instance Swap property we'll call it icon And if you don't know what these mean we Have a detailed class or course on figma On the envato test plus YouTube channel That you can check out and learn more About working with figma components all Right so in this lesson we took care of The typography For our calculator app design and we Also loaded a bunch of icons and we Created all the necessary components Right we're off to a good start so let's Keep up the momentum uh the next step in Our small design project here is to Figure out the colors that we're going To use so let's do that next Now creating a color scheme for a Project can be a pretty daunting task But there are tools that can help you do That a lot easier and one of the tools
That I use all the time is called Adobe Color and you can find it here at Color.adobe.com so I use this to create color palettes Based on different color Harmony rules Like analog Triad complementary and so On but I can also explore Certain colors created by other amazing People so for example if we type in here Calculator Right we can find a couple of ideas and We can grab some some inspiration from These or if you want you can just create One yourself starting from scratch in my Case Um I envisioned this calculator designed To uh to have the pad here use a dark Background something towards blue and Then an accent color or something with Orange in it right and the blue color That I chose and let me just create a Simple shape here is this one One D two C four zero right so It's a pretty Darkish blue that looks uh something Like this and then to nicely complement That I used D95032 and this is a nice uh orange Color that looks something like this It's a bit more towards red But I like it it gives a really nice Contrast against this uh this dark Background now I also want to use a kind Of a greenish color
For a certain element so what I did was I grabbed this color and I went to Adobe Color I pasted this right here in the Middle and then I just played around With the color harmonies going through You know the complementary the split Complementary and the one that I found Here 32 D99c Right I just copied that and that's the The green color that we're going to use This is more towards turquoise I guess But it's gonna do a really well for us Also we need two extra colors for this Because sure this will be the background Color for this entire pad area But we need the buttons to kind of Be distinguishable So we need to use either a darker or A lighter version of this color So for that let's copy it And we're going to generate some tints And shades now there are a bunch of ways You can do that this is one of the tools That I started using recently because I Really like how it works you can find it At this address right here it's called Shadow Lord From from what I can tell it's made by Noel Delgado I think and it's basically A tencent shade generator tool and what You do is you basically paste in A hex code of your color and You know the number of increments
And it gives you tints and shades Starting from that color so everything On the left side are tints so mixes of That color with white and everything to The right side are Shades or mixes of That color with black in my case I'm Going to use a 30 percent tint here or This one And that's going to be used for lighter Text So Let's add that to figma like so and then I'm also going to use a darker text this One the 30 shade Yeah I'm going to use it for at the Button background so as you can see this Is darker this is our starting color and This is a lighter and these are The four colors that we're gonna use in Our design all right so with the color Scheme out of the way let's go ahead and Create the actual app layout that's Coming next And to do this let's start from the very Top this is the frame that we're going To be working on and first of all let's Ungroup Everything and Here's the way I'm gonna design this so I'm gonna have The result of the operation on actually The same line because I want to save up This this vertical space as much as Possible all right because I want to be
Able to display as many operations here Before the user needs to uh the tap on The history button so The way we do that uh is actually the Following Uh let's Duplicate this We're going to have 10 so I'm going to Separate these 15 And then 25 I want the result uh to be Displayed in bold so I need to create Another text style here So we're going to use bold And I'm going to call this a number Bold Okay let's actually zoom in And I'm gonna use The green color Like so and for these I'm going to be Using the lighter color like this Okay So What I need to do now is to bring in Some icons Yeah so we need a plus sign here So let's grab that Let's paste it in here and we're going To use a lot of Auto frame so select all Of these shift a And I'm gonna add four pixels of Distance between them align everything Horizontally and I'm going to use the Same color for the icon but I'm actually
Gonna Resize this icon to 12 pixels so half That size Easiest way press k for scale or select It from here and select 0.5 x from the Drop down menu Okay let's also Duplicate this and we're going to choose An equal sign Like so But I want the distance between the Actual the first part of the operation And the result and the equal sign to be A bit bigger than what I have here so Select this this and this shift a to Create another frame with auto layout And I'm going to select the Mainframe And choose the spacing between the 8 Pixels just like that now let's uh Can actually delete this we can move This let's say about 18 pixels From from The Edge there okay let's see About the next operation let's actually Duplicate this So here we have two five five 22 and the result 5 6 1 10. the Operation here is multiply so we're Gonna select uh multiply from this drop Down Now let's actually select these shift a To create a framework Auto layout let's Select let's set the distance between Them to 16 pixels Let's Line everything To the right side
Thus we can now delete and we'll bring This back 18 pixels from the right side And let's place these 16 pixels from This element here on the top okay so Let's assume that this here is the Current operation these are already Completed yes because they have a result And I want to create a way to separate These easiest one use align so select The line tool or l Draw a line it doesn't have to be Precise Command X or Ctrl X to cut that paste it Inside the frame with auto layout Let's actually make this Frame bigger Like so And let's now select the um The line And make it fill the container and for This line Let's uh grab this color Let's paste that in And actually you know what it's still a Bit too dark for me I would like a more Subdued line so let's actually open our Tool again and select this as the base Color and I'm going to select the 90 Tint As a fourth color here I totally forgot About this one yeah And let's see we can Use this and now we have a nice smooth Line going on through there Cool Next let's see about the current
Operation right so what I'm going to do Is actually Duplicate this so we have seven And that's uh divided By And here we actually have uh an Operation right so We're gonna have three plus and then 10 And we close the parenthesis And we grab this we duplicate it and we Change it to Plus And of course we don't have the The result here And we can actually ungroup that frame So now we can delete this but since this Is the current operation I want these to be displayed Uh with a bigger font size right so I'm Going to select The text and I'm going to change these To number And I'm going to change the color To our base color and the icons actually Will stay exactly the same but they will Be using the slightly Toned down color Just like that okay so that's the top Part done Now let's see about this bottom part First thing let's ungroup everything Let's see about these two buttons right We have the history and the clear So the history is this let's copy that Paste it in and the clear is this copy
That Uh pasted In so now we can delete this And let's actually go ahead and select This we'll do a shift a Because I want to create Fixed with container 64 by 64. uh just So we match the other buttons that we're Going to add here align everything to The center like so And a 64 by 64 is actually a great uh Size for mobile because it gives the User a really nice area for uh for Tapping you know with their finger it Should be on iOS it should be at least 44 by 44. So 64 by 64 is even better So let's actually duplicate this put it Here and we'll actually just Swap this Like so we can delete this and now we Can select both of these shift a to add Another framework Auto layout and I'm Going to set an auto distance between Them so you know I can resize this to uh To whatever I want and one item will be Placed on the left one on the right and What actually let's Um let's increase the space between These and the edges of the screen here From 18 to 32 pixels because I think 18 Is just a little too Uh too little so 32 by 32 like that Let's also Do it here and here like so
Cool for now I'll just leave this kind Of around here I will position it after We've completed the layout for the pad Here So for the pad here's how we're gonna Start Let's see we have a group here With all of these items so I think we Should actually start from scratch let's Keep this as a reference And let's start by bringing in two Copies of these components All right so let's create the first row We have icon text And then text and then icon again right So let's shift a these Let's make sure they're aligned to the Middle and let's add 16 pixels spacing Between them and let's make this row Or let's place it 32 pixels from The Edge and 32 like this And actually let's have every single Icon in here Fill the container with wise so I'm We're going to keep the same 16 pixel Distance between and they're going to be 64 pixels in height but the width is Going to be Variable right for this first one we're Gonna use the plus minus For this we're going to use a zero this Is going to be The dot this is going to be
The equal Or is the equal there it is cool so That's our first row let's position it Somewhere like this That's fine so it just sits right up the Uh on the bottom element here and then Let's duplicate it we're going to add 16 Pixels there And here it's actually a lot easier Because we have the numbers we have one Two Three and then The plus sign So now let's actually delete the ones That we already made Let's repeat the Process now let's select all of this Shift a to add another frame with auto Layout Uh let's Grab this and actually you know what Let's um let's select this And let's add a fill color that's going To be Our base gray here Like so let's make it full width Okay Let's select this bottom component here Actually let's Push this back select the bottom Component and choose white instead of Black Uh okay so now let's add 32 pixels of Padding uh to the sides and also 32 Pixels on the top and bottom so now I
Can just bring this over And I can set It to be displayed as hug contents and I'll align it right at the bottom And Let's see we actually need to set the Bottom one to 34 Just so it matches uh the height of this Element which is 34 pixels Okay so that looks pretty cool the Layout here is pretty much complete Let's Move this down let's set it at about 16 Pixels from uh this uh this edge here And now the last thing we need to do is Uh implement the Correct colors right so I'm going to do This first at component level For the colors I'm going to use the Darker shade as The background And for text I'm going to use white And let's do the same here yeah as a Fill we're going to use that and Actually when it comes to icons And we're going to use the uh the orange For the icon color and let's see why Didn't this Update Weird at it doesn't matter uh we can Just select these individually and Change the color like that like so Uh this last one the equal we're Actually going to do a little swap here
We're going to use this For the background and a white as the Foreground And then for some of the rest that are Not uh related to the actual operation We're going to use the green okay so Select this so I'm going to use the Green here And here And here And also here So instead of black we're going to use That Perfect These Let's see we need to make sure They are using the correct color so I'm Gonna change them like that And now if we take a look At all the colors that we selected uh we Can see that they're using the correct Ones Okay great and that's basically our App layout by using uh Auto layout and applying colors and Typography we basically went from this To this It wasn't that hard was it so now the Idea is the user types in it does its Calculations and they're gonna appear Right here once you hit the equal sign That operation along with its result Will be added to this uh this history Here at any point you can open up the History and that's what we're about to
Do next or you can tap on this button to Delete the current line Or the current character I should say You can press AC to delete to delete the Current line AC stands for all clear and the rest of The stuff is just basically uh hell a Calculator works and with that our Design is almost complete and I say Almost because we still need to create The history page so let's go ahead and Do that next The history page is really simple to Make because it basically just needs to Display the history or the past Calculations right it doesn't need to Display uh the actual calculator pad it Just needs to show the past calculations And a way to display the um the Calculator again and also an option to Delete or clear that history so let's Actually Grab some of these move them over And let's create the history page here Let's actually call this Main and let's Call this history like so okay so let's See what we don't need we don't need This bit Uh this is back to being uh using black Color I'm gonna move this all the way Down because I want to make room for the Actual history we don't need the current Calculation or the separator And we need to change the icons here so
This uh I'm gonna change to The calculator And this I'm Gonna Change To the trash right so this is how we Clear or delete the history and this is How we uh go back to showing the Calculator right so it's pretty simple You can actually create a prototype here If you want we basically click this Button and it takes us to this history Page this can slide down it really Depends on how you want to create it but In terms of the design this is what we Have so we went from this wireframe To this design that you see here by Using some simple Typography we used the same typeface Which is jetbrains mono We Define some colors starting from a Base color and then we created some Tints and shades for it We used this accent color this orange And using Adobe color we found a Matching um Secondary color we could I guess we Could call it and then using some simple Layout techniques and figma's amazing Auto layout feature we created this Number pad and also the layout for these Calculations that we see here and Finally we created the history page Where we used a figma's instance swap Feature on its components to change The icons from these to these right here
And that's it folks our calculator app Design is now complete and I guess now It's your turn because we have a Challenge for you so let me tell you More about that This course comes with a UI design Challenge and it goes something like This download the figma starter kit and Based on the wireframe design your own Calculator app then send us the end Result now you'll find a link to the Starter kit in the video description so Go ahead and download that it's a figma File it's a DOT fig file and you can Import that directly into your figma Account So go ahead and do what I did basically Design your own calculator app but feel Free to experiment with different colors Different typefaces different icons Different layouts just let your Imagination run a while we would love to See what you create so after you Complete your design uh go ahead and Send it to us and the way you do that is Very easy you're going to be using figma Community it's uh it's a great place to Share a figma file with other people It's completely free And here's how you do that first of all Make sure you're logged into figma Either via the app or with a browser Like I am here so what I did was I Grabbed the starter kit and let's assume
That I made you know my my design Changes here and now I want to share it Right to do that I'm going to click on Share then hit publish right and here it Says publish to the figma community so Let's hit publish We can upload a custom thumbnail if we Want to we can give it a name here I Guess we could call it calculator app And then Assignment from ADI or UI challenge or Whatever it is that you want to call it And then you can add a short description And then this is the important part okay I need you to add two tags to this so we Can find your file and the first tag Will be Test Plus and the second tag Will be ADI challenge one okay so make Sure you add these two tags tuts plus And ADI challenge one This will allow us to easily find this File for this eui Challenge and then you Can hit publish if you don't have a Community profile created yet you can Easily create one now just like I'm Gonna do here and figma is going to ask For a unique handle this is uh one of my Alternate figma accounts and I'm just Gonna add my handle here hit save And that's it the file will soon be Available For everyone in the community to Duplicate remix and share but more Importantly it will be visible for us
And we'll be able to Um to get it for this UI Challenge and If you want you can click view page and That's going to open up the figma Community page With Exactly The file that you just created so this Is how you can share The UI design challenge results with us By using figma community so please send Us your submissions we'd love to see What you come up with and with that said Uh let us know if you enjoyed this Course and if you have any questions Please leave a comment down below as Always don't forget to check out the Envirotas plus YouTube channel for more Content like this but also to learn About web design web development and Much more it's all free so make sure to Also hit that subscribe button and give This video a thumbs up if you liked it Thank you for watching I'm ADI and until Next time take care [Music] Thank you
