Explore Octave: Innovative Music Keyboard Designed in Figma

Explore Octave: Innovative Music Keyboard Designed in FigmaExplore Octave: Innovative Music Keyboard Designed in Figma

The network for creativity

Join 1.25M professional creatives like you

Connect with clients, get discovered, and run your business 100% commission-free

Creatives on Contra have earned over $150M and we are just getting started

Back to feedPost

Shihan Malik

• 5h

After 101 Figma Make versions and five major design improvements, I’m excited to share Octave a modern music keyboard where you can play, record, and produce music. 🙌

The project began as a keyboard design in Figma, followed by multiple Figma Make iterations to refine the design, layout, and functionality.

Current features include: 8 toggleable sound effects Interactive music keyboard keys Record and playback functionality Volume and octave controls Not implemented: Tempo control Function button Jump in, play around, and have Fun 🚀 https://octavemusickeyboard.figma.site/

AI Art UI Design Figma Figma Make figmamakeathon

Alex Tatu

• 5h

8 sound effects + record + playback. This went way further than most Figma Make experiments 😃

Shihan Malik

• 5h

Thank you Alex😊

sandeep Akkipalli

• 5h

ZemryX is a Figma Based Design System, Go Through once. You will definitely liked it.

Website Link: https://zemryx.com/ Platform Link: https://zemryx.vercel.app/

zemryx.com

ZemryX – The easiest, most accurate way to build real-world products in Figma.

ZemryX Technologies LLP builds and sells digital design systems, Typo Logic, Colour Set, Icon Ready UI kits, and Figma components for designers and product teams. All assets are created by our internal design team. 10x faster. Effortless decisions. No tedious work.

Lorant Trellay

pro

• Feb 24

Experimenting a lot with AI, one thing became clear: AI can match your design vision, but only if you are specific. Vague prompts = generic results.

So here is my current process using Figma Make, before I build anything, I ask AI to analyze the design language of a screenshot to build a design system first. Think of it as a style guide where colors, typography, and spacing are all locked in. Once that foundation is there, I use that same design system to build my application, website, whatever the project is.

The result? Way more consistent outputs and a lot less back and forth.

Figma Figma Make figmamakeathon2026

Sepehr Babaei

• Feb 25

Style first, build later, makes total sense. Feels like treating AI as a junior designer instead of a magic box.

Give Cursor AI a shot too

Jarar Malik

• Feb 24

Figma Make introduces a faster way to turn designs into fully functional websites directly inside Figma.

Instead of exporting designs and coordinating development separately, you can now generate working sites from your designs or prompts in minutes. This removes friction between design and launch.

This is a major workflow upgrade for designers, freelancers, and agencies looking to ship faster.

Check it out here: https://psxid.figma.com/jarar

#figma #webdesign #nocode #aitools #productivity #designworkflow #creatortools #futureofwork

Figma figmamake

Abhiram Tinguria

• Feb 24

This could fundamentally change iteration speed. The real value is how it compresses feedback loops between design and production

Moses Kim

• Feb 24

Culturepulse is a marketplace where sports culture, memorabilia, and blockchain technology intersect. The platform allows athletes and creators to release collectible items that exist simultaneously in the physical and digital worlds — a jersey, a sneaker, or a card becomes both a real object and a verified NFT tied to a specific moment in a career.

Check it out

Blender Adobe After Effects Figma

Stephanie Asoegwu

pro

• Feb 26

The concept of physical + digital collectibles is so ahead of its time. And that 3D glass cube render on the orange type? Stunning 👏

Back to feed

The network for creativity

Join 1.25M professional creatives like you

Connect with clients, get discovered, and run your business 100% commission-free

Creatives on Contra have earned over $150M and we are just getting started

Challenges

View all

Figma Makeathon

$100K9h 05m left6.2K participants

Trending

maxearnings

The next frontier of payments is live on Contra. How are you maximizing revenue?

freelancerlife

Freelancer life is wins, pivots, and everything in between. What’s yours right now?

aidesignflow

AI tools are redefining how designer work. What does your workflow look like?

micrographics

Micrographics started as utility - barcodes, packaging, instruction labels. How would you use them?

aivideo

AI video tools are moving at warp speed. What tools are you using?

Lorant Trellay

pro

• Feb 24

Experimenting a lot with AI, one thing became clear: AI can match your design vision, but only if you are specific. Vague prompts = generic results.

The result? Way more consistent outputs and a lot less back and forth.

Figma Figma Make figmamakeathon2026

Sepehr Babaei

• Feb 25

Style first, build later, makes total sense. Feels like treating AI as a junior designer instead of a magic box.

Give Cursor AI a shot too

Jarar Malik

• Feb 24

Figma Make introduces a faster way to turn designs into fully functional websites directly inside Figma.

Instead of exporting designs and coordinating development separately, you can now generate working sites from your designs or prompts in minutes. This removes friction between design and launch.

This is a major workflow upgrade for designers, freelancers, and agencies looking to ship faster.

Check it out here: https://psxid.figma.com/jarar

#figma #webdesign #nocode #aitools #productivity #designworkflow #creatortools #futureofwork

Figma figmamake