How to design macOS Big Sur style icons in Figma, Sketch, and Adobe XD

hey what is up everyone in this video i'll show you a few simple techniques you can use in figma sketch or adobe xd to upgrade any flat icon to the icon style in apple's new mac os big sur so when apple made their announcement tons of designers got to work copying this new style and sharing it on dribble and i want to show that while it is a bit more complicated all that's required to create something in this type of style is more gradients and shadows and i'll demonstrate these techniques by creating the new messages icon but what i show you in this video can be used to level up any flat icon personally right now i'm in figma i use figma i've used sketch previously but anything i do here can be done in sketch and adobe xd as well so here i've pasted a screenshot of the real big sur messages icon i'll use it as a reference as i create my version of the icon the first thing i'll do is create the background by pressing r and building a rectangle that matches the radius and dimensions of the real background the background color is a slight gradient so i'll change the fill style from solid to linear and use the eyedropper tool to match the colors i'll call this layer background to keep our layers organized next i'll create the bubble by using the ellipse tool to dry out the body and using the pen tool to manually draw out the tail [Music] so i'm just about happy with how the tail looks i'll remove the stroke and add a solid fill then i'll select both the tail and the ellipse and use the union function to combine them to make our one bubble shape we'll be creating a few duplicate layers as we add more styling so i'll name the elements that compose our bubble with the master prefix at the beginning to signify that this is our original bubble shape i'll move this bubble over to our new background center it and change the fill color to white now this was 2019 we could stop here and we'd be done with the messages icon in about only three minutes with big sur there's some extra styling to add on the first style i'll get to is the drop shadow beneath the bubble looking at the bubbles drop shadow on the left i see it looks like a combination of two shadows what i mean by that is that i see there's the first part to the shadow which is larger and softer and simulates the light from a direct light source and a second part of the shadow that is tighter and darker and simulates the area underneath the bubble where ambient light has a harder time reaching which i think is really cool and makes for a really nice effect we'll emulate this two-part shadow by you guessed it adding two drop shadows to the bubble the first one will have a larger offset in the y direction with a larger blur value [Music] the second shadow will have a smaller vertical offset and less blur i'll toggle each shadow on and off so you can see what they look like individually compared to when we have them both on [Music] now all we have left is the inside of the bubble looking at the styling on the left the main circular body has its own styles compared to the tail that means the two parts will require separate styling so i'll duplicate the individual body and tail shapes by expanding the master bubble selecting both the tail and the body then holding option and dragging them on top of the master now we have a duplicate ellipse and tail layer that can be styled separately i'll just rename these new layers and drag the body to be on top of the tail for the actual fun stuff i'll start by using the eyedropper tool to change the body's fill color to something more similar to what's on the left [Music] looking at the apple icon i noticed potentially three inner shadows the green glow at the bottom the dark gray inner shadow above it and an almost white inner shadow coming from the top left for my version i'll create the gray inner shadow first i'll give it a large negative vertical offset so it comes up from the bottom and increase the blur drastically to match the look on the left then i'll use the eyedropper tool to grab the shadow's color next i'll add the second inner shadow to create the green glow that comes from the bottom i'll use the eyedropper tool first this time to grab the correct color the shadow style is similar to the previous style except the vertical offset and blur aren't nearly as drastic now for the final shadow this one's a little different as there's a horizontal offset and a positive vertical offset to make it come from the top left i'll adjust the values to my eye and use the eyedropper tool to pick the color from the left if you compare the two now it still doesn't look quite right apple's version has a matte looking light to dark gradient in the center whereas ours is very white i'll try to emulate apple's look by creating an ellipse on top with a linear gradient fill [Music] once again i'll use the eyedropper tool to select the proper colors from the left this time i'll also click on the gradient line to add two more color points so i can more precisely emulate the way the color changes and to bring this together i'll add a generous amount of layer blur in order to blend this ellipse into the bubble if you're trying to follow along in sketch it'll be called gaussian blur rather than layer blur [Music] now i'm not sure if you saw but as a result of adding that blur there's a whitish glow that bleeds out of the bubble watch the area i'm highlighting with my mouse as i turn the layer on and off we don't want this glow so i'll need to create a mask by duplicating the master bubble and turning that duplicate into a mask pay attention to how the glow disappears as i click to make this a mask and this is looking amazing now we just have the tail to go which i think is the most interesting part of the icon zooming in to the human eye it looks to be a type of raised ridge the white side on the left looks to be illuminated by the same white light source that's responsible for the top left of the bubble being very light and white the bottom right on the other hand looks to be like it's illuminated by a green light source that's responsible for the green inner glow at the bottom of the body the middle section is gray indicating a lack of light and making it appear to be a type of raised mountain range blocking the white and green light sources from being able to light up the opposite site it's very cool how they were able to achieve this effect and it's definitely a lot simpler than i thought it would be from the outside looking in hope you enjoyed my little analysis now let's get back to the styling first i'll give the tail a linear gradient fill to blend it into the body i'll use the eyedropper to make the bottom end of the gradient the same gray color of the middle ridge and i'll make the top and match the green glow so that it blends perfectly into the body [Music] next i'll use the pen tool to draw the two sides of the ridge and color them white and green respectively in this case it's not too important that the shape we draw is perfect as everything will be contained in the bubble mask that we created earlier now that we have our white and green shapes that make the two sides of the ridge here's where the magic happens in order to achieve this ridge like effect i'm going to turn the solid white to a linear gradient that goes from white to transparent then i'm going to add a layer blur to these two shapes till we get the look we want [Music] the three gradient colors we've used in the tail are very close to the apple icon but they're just a little bit off so i'm going to fiddle around with the colors a little bit to get them to be a more exact match and voila that is it we have created our very own big sur styled messages icon from nothingness feel free to leave a like comment or subscribe if you found this video informative and maybe picked up some techniques that you can use to step up your visual game i know i definitely did and yeah let me know if you'd like to see more of this in the future thanks for watching and bye bye you

Channel: ydanify

Views: 11,442

Rating: 4.9748955 out of 5

Keywords: icon design tutorial, big sur mac, macos big sur, macos design, macos big sur design, figma icon design, figma tutorial, apple design, apple icon design, sketch tutorial, figma web design, adobe xd icon design, adobe xd tutorial, icon design, web design, flat design, tutorial, visual design, ui design, user interface design, ux design, user experience design, graphic design, product design, ios design, ios app icon design, ios icon design, iphone app icon design

Id: 8LbPT17NAzY

Length: 10min 33sec (633 seconds)

Published: Mon Jul 20 2020