🫣 It may seem like adding a stroke and inner shadow to a button in Figma should be a straightforward process. However, for some reason, Figma has this strange behaviour where the inner shadow overlaps the stroke instead of being added under it.

Unless I’m missing something 🙃

💡 Lately, I have been incorporating an entirely new layer to my button frame to allow for more flexibility in exploring creative options for the inner bevel. Let me demonstrate this to you:

😇 Integrating this new layer enables you to explore a range of powerful options to enhance the level of detail in your buttons, particularly with this style. Additionally, you can modify the constraints to 'Scale' on the layer, making it compatible with longer or wrapped text.

🤝 Let me know if theres a better way to do this in Figma, i'm curious! Additionally, this technique could be applied to different UI elements/illustrations as well. I've shared the Figma file for this in the Community.

Grab it here: https://www.figma.com/community/file/1217531129180029110