Create a Modern Glassmorphism Card in 4 Minutes | Figma Tutorial

Summary

In this tutorial, Arash guides viewers through the process of creating a modern glassmorphism card in Figma. Starting with a frame and a beautiful background, he demonstrates how to design a credit card with a rounded rectangle, applying gradient fills, strokes, and background blur effects. He also adds a drop shadow and arranges text elements such as the card number, cardholder name, and expiration date. Logos and icons, like the Visa logo and Tap to Pay icon, are inserted and aligned. By following these steps, viewers can create a visually appealing, modern card with a sleek glassmorphism effect.

Takeaways

• 😀 Use any background for the glass morphism card, but a beautiful image from Unsplash is chosen in this tutorial.
• 😀 Begin by creating a frame and inserting the background into it to set the visual foundation for the design.
• 😀 To design the card, draw a rectangle with dimensions of 500x300 pixels and align it to the center.
• 😀 Apply a corner radius of 40 to the rectangle for a rounded effect and a more modern look.
• 😀 Change the rectangle's fill type from solid to a linear gradient and set both gradient colors to white with varying opacity for a soft, translucent effect.
• 😀 Add a white linear gradient stroke and adjust its opacity to 60% for a subtle border around the card.
• 😀 Introduce a background blur effect with an intensity of 20 to create the glass-like appearance.
• 😀 Apply a drop shadow with a blur of 40 and a Y offset of 20, adjusting opacity to 10% for a subtle depth effect.
• 😀 Add text elements to the card: a random card number, cardholder's name, and expiration date with customized font sizes and spacing for clarity.
• 😀 Include the Visa logo and a tab-to-pay icon, positioning them within the design for a realistic and functional card layout.
• 😀 Adjust padding and spacing between elements to ensure the card's content is visually appealing and well-organized.

Q & A

What is the main objective of the tutorial?

The main objective of the tutorial is to teach how to create a modern glassmorphism credit card design using Figma.

What background source is recommended for the design?

The tutorial suggests using a background from Unsplash, with a link provided in the description for users to download the exact same background.

How do you set up the basic card shape in Figma?

To set up the card shape, you draw a rectangle with a width of 500px and height of 300px, align it to the center, and then adjust the corner radius to 40px for rounded edges.

What is the purpose of the gradient fill effect in the design?

The gradient fill effect is used to create a smooth transition between colors on the card, giving it a more modern and polished look, while adjusting opacity creates the glassmorphism effect.

What settings are used for the gradient fill?

The gradient fill is set to white for both colors, with the first color's opacity at 70% and the second at 40%. The direction of the gradient is also adjusted for aesthetic purposes.

How is the card's stroke applied?

A white linear gradient stroke is applied to the card, with the gradient direction adjusted, and the opacity of the stroke is decreased to around 60% to enhance the glassmorphism effect.

What effects are applied to the card to achieve the glassmorphism look?

Two main effects are applied: a background blur effect with a blur amount of 20px and a drop shadow effect with a blur of 40px, Y offset of 20px, and 10% opacity, to give the card a frosted, glass-like appearance.

How is the text for the card number and cardholder name formatted?

The card number is set with a font size of 24px, medium weight, and white color. The cardholder's name is added below with a font size of 20px and adjusted letter spacing.

What padding settings are used for the expiration date text?

For the expiration date text, the padding for the bottom and left is set to 40px to ensure proper alignment and spacing.

How is the Visa logo and 'Tap to Pay' icon positioned on the card?

The Visa logo is positioned near the top-left corner with 40px padding on the top and right, while the 'Tap to Pay' icon is placed near the bottom-right corner with alignment to the rest of the content.

Can the background of the card be customized?

Yes, the background of the card is fully customizable. The user can change it to any image or color they prefer, maintaining the glassmorphism effect on the card.