Have you ever imagined SpongeBob as a button? Or Slinky Dog as a slider? Well, we did.

Our team of user interface and user experience designers (UI/UX) at Si digital, who work with interfaces daily, set themselves the challenge of imagining different characters dressed up as common interface elements found on websites. Internally we dubbed this as ‘Playing with UI’ and then we let our imaginations run wild!

All of the characters and their interactions were created with Figma, using the latest interactive components beta. They are all available to view as recorded videos (below) plus there are links to the external prototypes where you can click around and have a play for yourself.

If you’ve got an idea for another character based UI element – tweet us. If we receive enough of your great ideas, we will look to release a follow up post with the best contributions.

Disclaimer: No brands were harmed in the making of Playing with UI. This is purely a bit of conceptual fun.

Navigate breadcrumbs with Pac-Man

Probably the most unhelpful navigational breadcrumb you’ll ever come across. Thanks Pac-Man. Interact with the PacMan prototype in Figma.

Back, Back to the Future

Oh that trusty back button that you always use in the browser. What if it took you ‘back to the future’? Interact with the Back, Back to the Future prototype in Figma.

Mario Coin Counter

Counters allow you to add quantities. What if when clicking the plus or minus boxes, you got those gold coins that Mario likes to collect. Hum the tune in your head whilst doing it! Interact with the Mario Coin Counter prototype in Figma.

Pay with Monopoly money

You can pay with card, PayPal and Apple Pay but what about Monopoly money? Seems legit. Interact with the Monopoly money prototype in Figma.

Loading Cube Spinner

They take an eternity to solve for mere mortals – like those loading spinners that never end. OSX beach ball anyone? Interact with the Loading Cube Spinner prototype in Figma.

SpongeBob SquareButton

It’s like he was made to be a button. A button has never been more fun. Interact with the SpongeBob SquareButton prototype in Figma.

Add to basket like Lebron in Space Jam

An essential for any Ecommerce website. Adding to basket, Space Jam – Dunk it like Lebron or go old school with MJ. Interact with the Add to basket like Lebron prototype in Figma.

Slinky Dog Slider

Slinky Dog is being put to good use here, becoming a slider – normally used to adjust a quantity. Interact with the Slinky Dog Slider prototype in Figma.

Transform that button

Transformers, buttons in disguise! Optimus Prime trying out a new look. Interact with the transforming button prototype in Figma.

Scroll bar-nana

Help Kevin scroll to his banana. Interact with Scroll bar-nana prototype in Figma.

That’s a wrap

Thanks for checking out our Playing with UI characters. If you’d like to chat to the Si digital team about this or anything UI/UX, please get in contact using the form below.