Metallic UI Component in Framer

Copy component

Metallic UI Component in Framer

Copy component

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Component

Metallic UI Component in Framer

This is a Framer recreation of Jordan Singer's viral metallic UI elements. I've captured that futuristic, almost-touchable texture using Framer's native features. Remix the project to peek under the hood, or simply copy these shiny components to your own projects.

image of Nandi Muzsik
Jordan Singer

Created by

Dark-themed, metallic 'Get started' button with adjacent cleanup icon, suggesting initiation and optimization features
Dark-themed, metallic 'Get started' button with adjacent cleanup icon, suggesting initiation and optimization features
Dark-themed, metallic 'Get started' button with adjacent cleanup icon, suggesting initiation and optimization features

About the resource

It's still so amazing that, thanks to Framer, we as designers can turn our ideas into live and usable websites straight away by designing in Framer.

With the same tools we have in Figma, we can use gradients, shadows, and multiple layers to create such mesmerizing UI elements.

For example, in this case, we have 4 layers for this button, each with a different linear gradient fill and/or shadows applied to them. You can see their structure in the image below.

About the resource

It's still so amazing that, thanks to Framer, we as designers can turn our ideas into live and usable websites straight away by designing in Framer.

With the same tools we have in Figma, we can use gradients, shadows, and multiple layers to create such mesmerizing UI elements.

For example, in this case, we have 4 layers for this button, each with a different linear gradient fill and/or shadows applied to them. You can see their structure in the image below.

About the resource

It's still so amazing that, thanks to Framer, we as designers can turn our ideas into live and usable websites straight away by designing in Framer.

With the same tools we have in Figma, we can use gradients, shadows, and multiple layers to create such mesmerizing UI elements.

For example, in this case, we have 4 layers for this button, each with a different linear gradient fill and/or shadows applied to them. You can see their structure in the image below.

Design interface showing cleanup icon with layout guides, and layers panel displaying Metal Button component

The structure of the metallic design aesthetic in Framer.

Design interface showing cleanup icon with layout guides, and layers panel displaying Metal Button component

The structure of the metallic design aesthetic in Framer.

Design interface showing cleanup icon with layout guides, and layers panel displaying Metal Button component

The structure of the metallic design aesthetic in Framer.

Feel free to copy this component to your Framer project, or remix it to see how it's built without writing any code. It's designed and developed straight on the canvas.

More like this

Here are a few other skeuomorphic UI elements I've created previously:

  1. Skeuomorphic Toggle Component

  2. Mechanical Button Component

  3. Skeuomorphic Buttons in Framer

  4. Lego Elements Component

  5. Skeuomorphic Switch in Framer

Feel free to copy this component to your Framer project, or remix it to see how it's built without writing any code. It's designed and developed straight on the canvas.

More like this

Here are a few other skeuomorphic UI elements I've created previously:

  1. Skeuomorphic Toggle Component

  2. Mechanical Button Component

  3. Skeuomorphic Buttons in Framer

  4. Lego Elements Component

  5. Skeuomorphic Switch in Framer

Feel free to copy this component to your Framer project, or remix it to see how it's built without writing any code. It's designed and developed straight on the canvas.

More like this

Here are a few other skeuomorphic UI elements I've created previously:

  1. Skeuomorphic Toggle Component

  2. Mechanical Button Component

  3. Skeuomorphic Buttons in Framer

  4. Lego Elements Component

  5. Skeuomorphic Switch in Framer

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • Dark mode UI of Framer Uni feedback form with user avatar, input fields for name and email, and 'Send a message' button, showcasing sleek interface design

    New

    Native Feedback Widget in Framer

    Component

    Dark mode UI of Framer Uni feedback form with user avatar, input fields for name and email, and 'Send a message' button, showcasing sleek interface design

    New

    Native Feedback Widget in Framer

    Component

    Dark mode UI of Framer Uni feedback form with user avatar, input fields for name and email, and 'Send a message' button, showcasing sleek interface design

    New

    Native Feedback Widget in Framer

    Component

  • Futuristic dark interface displaying 'Your Secure' followed by a encrypted version fo the text, with a glowing central light effect

    Encryption Hero Animation in Framer

    Component

    Futuristic dark interface displaying 'Your Secure' followed by a encrypted version fo the text, with a glowing central light effect

    Encryption Hero Animation in Framer

    Component

    Futuristic dark interface displaying 'Your Secure' followed by a encrypted version fo the text, with a glowing central light effect

    Encryption Hero Animation in Framer

    Component