With the brown bar, you’ll notice the horizontal edges are sharp and straight before curving into a semicircle at the ends; whereas with the white bar, the horizontal edges look slightly puffed out or curved upwards. I’ve tried everything I know in Figma as a beginner, but nothing worked and the Pin tool is frustrating; I feel like I’m not tracing it exactly right, so I don’t like using it.
I use the agent all the time, but never use this pop-up feature. It pops up all the time when I’m trying click into layers/groups/auto-layout or doing detailed design work… and it’s become mad annoying.
Getting rid of it also mad annoying….I have to zoom out of my art board in click off the frame for it to go away… though I recently found clicking back into the chat box then hitting escape works too.
green is "transparent" on the screenshot, but it is still there
I am new to Figma, and I am trying to figure out the correct way to make a simple navigation bar with some buttons. I drew out some shapes and purposely made them not evenly aligned.
1.) I want to center the text on each button both vertically and horizontally. I select each rectangle and choose the horizontal and vertical alignment options and it worked for the first two, though for the second two buttons it will not work properly. Do I need to make each rectangle into a frame that includes the shape and text for this to work properly?
2.) I want to create even spacing between each button, so I chose a gap option of 20, though this did not move the text. Do I need to create a frame for each individual button to make this work?
3.) Is the first step to select everything and make the navigation bar, the rectangles and the text into a frame and then make each individual rectangle and text into a frame?
Thanks in advance
I'm really enjoying Figma Motion to be honest. I used to have adobe creative suite but since my company stopped paying for it, it became to big of an expense to have it. I'm doing some small ads and tiktok videos to promote an iOS app, and so far so good, everything worked great and I'm using then DaVinci Resolve to finalise the edits.
My problem is that today I'm finishing a video that is a bit long, around 45 seconds, and I'm constantly getting stuck at the 52% mark. Do you know any solutions or workarounds for this?
I'm also contacting support regarding this issue, but wanted to know if anyone else had this experience.
every time i gave claude a screenshot and said "make it look like this" it just guessed. spacing off, wrong fonts, and it always came out looking like every other ai site
so i built a chrome extension (pikspec) that grabs the actual css instead. what i did in the video:
- opened spotify, opened pikspec in the side panel
- hovered over stuff to see the real font, size, colors, padding etc
- clicked the pricing cards to lock them and hit reconstruct
- copied the prompt from the dashboard and pasted it into claude
it spat out one html file and honestly it's pretty much the same as the original. same type, spacing, colors. side by side is at the end, i guess from html file you will have enough context to use it for your own website to make changes as per your tech stack.
not saying go ship someone else's site lol. i mostly use it to see how good sites are built and to start my own stuff from something that doesn't look like ai slop. Sometimes i like one website's navbar while others card design.
it's free on the chrome web store, link is here. anyone got a better way to give claude design context? genuinely curious
Chrome Extension Link - https://chromewebstore.google.com/detail/pikspec-%E2%80%94-website-inspect/cnpghkfbhdpcendcliogffmajlkepoig
I’m building my portfolio at the moment, and I needed an orbit animation for one of my projects. Also, I cancelled my Adobe subscription and decided to go full Figma. So I made an animation plugin to create animation loops. It was hard, you need to fake 3d space, heavy animated files are hard to work with, and the Figma Motion API is in beta and with limitations.
To make it work, you need to select a frame with other frames inside that you want to animate. Child frames can be animated before too, but you need to choose the proper settings in the plugin for looping and starting their animations. Try it in playground file.
Cautions:
— It can take time to animate heavy frames.
— It might not work flawlessly with pseudo-3D presets. It tries to fake 3D motion with scale and service copies of the current frames.
— It will convert your motion presets to keyframes due to Figma API limitations.
The plugin is on Figma Community.
As always: free, no tracking, no internet use. Share feedback and your examples in the comments.
I have two buttons inside an auto layout frame. Their widths are set to fill to ensure equal width distribution. But somehow the left button is taking up 2px extra. I have excluded the stroke value to add up but it still gets added up to the width and the stroke position is also 'Inside'. Once I remove the stroke, both buttons fill up the space equally. How to prevent this from happening?
One solution I found was to give the right button the same stroke value as the left one. But is it the best possible way to deal with it? I don't wanna introduce another variable into the button.
Edit: I got to know that Figma introduced this behavior to match CSS behavior. https://help.figma.com/hc/en-us/articles/42031586813719-Use-auto-layout-with-CSS-Flexbox-in-mind
