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.
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.
The structure of the metallic design aesthetic in Framer.
The structure of the metallic design aesthetic in Framer.
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:
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:
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:
