How I used MASK in this opay website redesign #ui #ux #figma

@timxdesign

8.5K followers · usually 1.6K views a post

Views

6.8K

Likes

645

Comments

11

Shares

24

SoundTikTok sound · original sound - timxdesign

Promoted product

OPay

OPay ｜ We are Beyond Banking

2 videos2 creators

Why it worked

The video provides a quick and practical tutorial on a specific design technique (masked circular image with blur) that is visually appealing and relevant to UI/UX designers. The use of a popular tool like Figma and a clear demonstration makes it easily digestible and shareable within the design community.

Summary

The video demonstrates how to create a circular masked image effect in Figma for a website redesign. It shows the process of copying an image, drawing an ellipse, masking it, and applying a layer blur to achieve a specific visual style.

Structure

1Copy original image
2Draw ellipse and mask
3Apply layer blur effect
4Adjust blur intensity and shape size

Original caption

How I used MASK in this opay website redesign #ui #ux #figma

More from @timxdesign

Product placement

OPay: Acts - it is the subject of the website redesign demo. Removing it would change the video. Figma: Acts - it is the tool used to perform the website redesign. Removing it would change the video. TimX Design: Appears - it is a logo at the end of the video. Removing it would not change the video.

Call to action

Download App

On-screen text

Download App 30+ Million Customers We are Beyond Banking Opay is dedicated to providing secure, easy to use & affordable financial services with super fast user experience. Download App Download on App Store Transfer to OPay Account Receive OPay Account OPay Cards

Transcript

How I used MASK in this opay website redesign #ui #ux #figma 00:00 00:00 How do we make this image like this? 00:01 00:01 I'm going to copy the original image outside of it. 00:02 00:02 and then explain. 00:03 00:03 You see this image like this? 00:04 00:04 What I did was simple. I drew an ellipse on it. 00:05 00:05 right? 00:06 00:06 I send the ellipse to the back. 00:07 00:07 right? 00:08 00:08 I made sure both of them was I lighted. 00:09 00:09 I then used masks. 00:10 00:10 Then you within the mask, select the ellipse itself. 00:11 00:11 and then add an effect. 00:12 00:12 Okay? 00:13 00:13 and then layer blur. 00:14 00:14 and then just increase the intensity of the blur. 00:15 00:15 So you see. 00:16 00:16 Now you make sure you don't increase it so much that 00:17 00:17 it starts to exceed the original 00:18 00:18 image. 00:19 00:19 layer. 00:20 00:20 So how you could manage is either you reduce the intensity of the blur or you reduce the size of the shape. 00:21 00:21 right? 00:22 00:22 and just make sure it's where it's supposed to be. 00:23 00:23 And that's how we got this. 00:24 00:24 To be honest, that's how we got this. 00:25 00:25 So yeah.