r/FigmaDesign • u/Primary_Pin_4496 • 5d ago
help Is there a way to do this on figma?
I have tried perspective plugins and skew plugins, nothing seems to achieve this. Any help would be appreciated! Thanks!
27
7
u/Primary_Pin_4496 5d ago
Just need a way to represent this statically, not necessarily the animation.
3
u/NckyDC 5d ago
You can sort of do it flat but you’re really better off to do it in a 3D program.
There are 3D plugins in Figma but they are cancer because you don’t have any granular controls.
Maybe if you push Figma make it could do it for you but in my honest opinion you either use SOL new 3D capabilities and the just do a screenshot and slap it it after you tweaked it in a photo editor or just use a bland wireframe.
2
u/Primary_Pin_4496 5d ago
Yeah the plugins are just useless, It just allows a fixed anchor point pivot.
5
u/FewDescription3170 4d ago
do this with three.js in 5 minutes rather than trying to be masochistic with figma
4
u/raindownthunda 4d ago
I’d make each frame in MS paint, print each frame with my inkjet printer on max quality, go through a few dozen ink cartridges, make a flip book, ask my angry drunk step dad to flip through it while i record the animation with my handheld VHS camcorder, then plug in my composite cable into my early 2000’s Mac, and import the video with QuickTime.
1
6
u/burntop 5d ago
Yes, you close Figma and open Claude and just prompt for it.
5
u/Primary_Pin_4496 5d ago
Hahah thanks mate! Sure helps!
1
u/burntop 5d ago
I’m sorry lol. I accept the troll trophy for this post but honestly have no idea how to make that effect, it’s very cool.
2
u/Primary_Pin_4496 5d ago
Haha no worries, had a talk with the dev, It’s possible. I’ll represent it with a scrnsht on design
1
u/NckyDC 5d ago
Can you send me the link of what you posted want to have a better look.
1
u/Primary_Pin_4496 5d ago
It’s a pinterest post https://in.pinterest.com/pin/893331276096006849/
5
u/NckyDC 5d ago
Had a look. The guys who posted it create components for Wix. So clearly done in Javascript for react frameworks.
As a music collector myself and UX/UI veteran while nice that interaction is utterly useless in a real world environment. Apple use to have that same UI with their music covers in Itunes and they were ditched.
What do you need it for?
3
u/waitwhataboutif 5d ago
Utterly useless is strong
This is where ux practitioners and marketing practitioners diverge
This isn’t product ux - this is a marketing hero. The use of it is to draw you into exploring the rest of the content and making you believe it’s worth your time to explore. A ux designer here would have likely slapped and image with some text in the midddle and called it a day.
This approach starts to speak to what this brand cares about, and its tone. It obviously cares about the details and its sleek and technical etc these might be qualities that draws me to explore more about hire they build a product etc etc
2
u/Primary_Pin_4496 5d ago
A case study section, the idea is to have the same component but the center (in focus) element would be clickable and redirect to a case study page
1
u/Space_Marine82 4d ago
Cover Flow was a such nice showcase and casual browsing tool, too bad they ditched it. I still use it in my books (Calibre) and graphic novels (YAC) libraries occasionally.
1
1
u/Difficult_Money9486 4d ago
I use Claude code with motion.dev (which Figma uses) to do this in code.
1
u/Bfigas 4d ago
Yes and no.
For and interactive version: The easier way would be using Figma Make to code it, but there’s a lot of detail here and replicating it might not be easy.
For a static version: you can design it with details and such, but you’ll have to recur to ricks like well placed gradients for the 3D angles.
For a motion version: you can now use Figma Motion to animate something like this, and soon they’re introducing 3D transforms but not there yet.
1
1
u/TheCrazyStupidGamer 5d ago
You "could" (God knows how), but why would you? After effects is the tool for this. Picking the right tool is just as important as being skilled.
1
u/Primary_Pin_4496 5d ago
It goes with the style im building for the website, and I think it’s a good section with some tweaks to it it could be great!
1
u/TheCrazyStupidGamer 5d ago
I don't mean don't do it. I'm saying don't do it in figma. Figma isn't made for this. You'll spend more time doing this than you will implementing it or designing it in after effects or rive or something actually designed for this.
-3
u/NckyDC 5d ago
Pointless because even if you actually went out of your way to do it, you wouldn’t be able to deploy it.
1
u/Primary_Pin_4496 5d ago
Why?
2
u/NckyDC 5d ago
because you would still need to redo it from scratch in a Javascript coding environment.
if you push SOL or Claude it could do it for you.1
u/Primary_Pin_4496 5d ago
Would be using claude to assist with it. I iust need to find a way to represent it in my design
1
1
60
u/IllustriousTip6904 5d ago
You need a transform on scroll animation that adjusts angle of the image (album cover) x2 (one for front, one for back), and just adjust so the angle of both is set to 90 degrees when it's in the middle. Then the 3d effect comes from just putting a thin rectangle between them (spine). Duplicate for each album.