![figma logo figma logo](http://3.bp.blogspot.com/-cjZOCO7IpQg/TZGrKrLKcOI/AAAAAAAABOo/WCE6BAAS51Q/w1200-h630-p-k-no-nu/logo_figma.jpg)
I had to pause for a few minutes to study the shadows and level of saturation at different corners of the inner parts before thinking of a way to replicate it - all while still using shadows and gradients. Working on the inner part of the box (b3 and b4) was a little bit challenging. b1 and b2ĭid you notice that the box is starting to look more real? Can you spot the difference when a gradient is added to b1 but not yet to b2? Or when gradient fill is applied to both sides? Second image : B1 and B2 with gradient appliedĪll we need for b1 and b2 is gradient fill, as seen in the above illustration. We want to reflect the ray of light bouncing on it as well as the shadows that give the box a contrasting and realistic appearance. Now that we are done with the carton box cover, let’s work on the body of the box. In Figma, you can easily copy and paste a style/effect from one layer to another using ctrl + alt + c for copy and ctrl + alt + v on the layer that you want a similar effect or style to be applied to. I then replicated the same process for f2. Blurring it gives it that cool realistic shadow effect and reduces the black color saturation. You might also notice that the original f1 is not as sharp as the other layers. So I added a dark color to it and blurred it with a value of 20. The default Figma shadow effect feature wouldn’t have given me the flexibility to create the brown box in the picture. This was done just to perfectly create the shadow effect. I then chose the original/initial copy of f1 (which is below the newly copied ‘f1,’) clicked the edit object tool, and resized it to protrude a little underneath “f1 copy”. To add shadow, I simply copied f1 and pasted it on the same layer. That’s what will be resized to form the shadow. Note: The layer highlighted above is actually beneath the visible on. creating shadow layer by copying existing layer and editing it When rays of light fall on an object, a shadow is automatically formed relative to the direction of light and the object. Notice the way the gradient is layered on f2? I did the same for f1, and then adjusted the degree of the gradient fill to match the direction of light on the box.Īfter adding the gradient, I added the shadows. I added a gradient fill to the visible box lids (f1 & f2) to make it look much more realistic and flat. creating covers Step 3: making it more realistic This laid a foundation so that the sides of the box could be worked on independently. I added color to differentiate each side of the box, and also to give an idea of how the shadows, contrast, and gradient fill would be applied. The next thing I did was recreate the same rectangles and turn them backwards to make up the third and fourth sides of the box. In the above illustration, I used the edit object tool to resize and manipulate the rectangles to make a rhombus-like shape. But in the above example, the pen tool doesn’t afford us the flexibility to create shadows, add gradients, or do any sort of object manipulation to individual shapes or parts of the box. I know some people are fans of the pen tool. This was created with the use of shapes (rectangles only). The first thing I created was a box that looks similar to the brown one in the picture above.
![figma logo figma logo](https://brandslogos.com/wp-content/uploads/images/large/figma-logo-black-and-white.png)
So, I will take you through the process of how I came up with the above image. In the end, it didn’t really matter what type of design I might want to do or venture into. This post is about me exploring Figma beyond UI/UX to uncover new ways of using it and new things I could discover while using it as my complete design tool.
#FIGMA LOGO SOFTWARE#
I wanted to discover more tricks with the software, so I could arrive at end-results that aren’t “typical Figma.” This stemmed from the fact that the designs I hope to make aren’t necessarily what the software was developed to do.įigma is more of a UI/UX design tool than a visual designing or illustrating tool like Adobe Illustrator. But since I joined the “Figma gang”, I’ve dropped illustrator so I can focus on Figma and learn as much as I can about it.
![figma logo figma logo](https://rsms.me/work/figma/s-logo1.srgb.png)
Prior to using Figma, I used Adobe Illustrator for most of my designs (like logos, mockups, illustrations, and so on).