Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

Introducing Variables! (Beta)🔸A new way to create interactive experiences in Spline. 🤹‍♀️ Numbers, Strings, Booleans 🔥 Dynamic: Time, Counter, Random ↔️ Attach variables to inputs ⚡️ Trigger events from variables 🎯 Capture object props changes Demo: Remix:

Spline

110,655 subscribers

85,631 views • 2 years ago •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

10 Comments

Spline2 years ago

This feature will be in beta and it is available to all Spline users ❤️ We will keep improving it!

Diego Toda de Oliveira2 years ago

WOW, this is fricking awesome! Any plans to somehow expose variables outside the Spline scene? Let's say I want to expose variables outside a Spline Viewer instance, so I can update it programmatically and the scene is watching for changes on the variable, would that be possible?

Spline2 years ago

We will have this in mind, thanks for the feedback, Diego! 💕

sambø2 years ago

Dynamic counter, inputs? Daamn :D

Spline2 years ago

⚡️

solodolo2 years ago

Wow! Just wow! 🤩

Spline2 years ago

🙌

Ξugene2 years ago

Super cool guys! 🙌

Spline2 years ago

⚡️💕

Arvydas Gečas2 years ago

yo, that’s awesome!!

Related Videos

Introducing AI Voice + 3D in real-time. 🥕 Integrate with OpenAI Real-time API ✨ Create conversational AI experiences 🌳 Drive states, variables, morph targets 🍓 Trigger events and actions from instructions Make your own AI Voice 3D experiences with Spline.

Introducing AI Voice + 3D in real-time. 🥕 Integrate with OpenAI Real-time API ✨ Create conversational AI experiences 🌳 Drive states, variables, morph targets 🍓 Trigger events and actions from instructions Make your own AI Voice 3D experiences with Spline.

Spline

105,825 views • 1 year ago

Prompts shouldn’t be static. Introducing Prompt Variables. A way to build prompts that adapt to your inputs. Think of it as a text compositor: drop dynamic variables directly into your prompt, reorder them with drag-and-drop, and create new ones instantly with an @ sign. It means a cleaner workflow, and a cleaner canvas. 👉 See it in action:

Prompts shouldn’t be static. Introducing Prompt Variables. A way to build prompts that adapt to your inputs. Think of it as a text compositor: drop dynamic variables directly into your prompt, reorder them with drag-and-drop, and create new ones instantly with an @ sign. It means a cleaner workflow, and a cleaner canvas. 👉 See it in action:

Figma Weave

24,438 views • 3 months ago

Component properties can now be bound to variables Also, UI has been simplified so that props and variables are in the same dropdown

Component properties can now be bound to variables Also, UI has been simplified so that props and variables are in the same dropdown

Figma

38,480 views • 1 year ago

Create Primitive and Semantic color variables in Figma Supafast ⚡️

Create Primitive and Semantic color variables in Figma Supafast ⚡️

Zander Whitehurst

35,988 views • 1 year ago

BIG: We are introducing Multi-Scenes🔆, a way to create multiple scenes within the same Spline file + new updates! 🪟 Multi-Scenes ⚡️ Scene Transitions 🏃‍♀️ Animation support on imported models 🎯 Trigger Areas 🌔 Bump & Roughness Maps 💄 UI refresh Demo: Remix:

BIG: We are introducing Multi-Scenes🔆, a way to create multiple scenes within the same Spline file + new updates! 🪟 Multi-Scenes ⚡️ Scene Transitions 🏃‍♀️ Animation support on imported models 🎯 Trigger Areas 🌔 Bump & Roughness Maps 💄 UI refresh Demo: Remix:

Spline

82,330 views • 2 years ago

🐣Tiny update: Variable Control, a new event action that allows you to easily control dynamic variables.

🐣Tiny update: Variable Control, a new event action that allows you to easily control dynamic variables.

Spline

23,041 views • 2 years ago

❌ Avoid increasing time complexity by having non-normalized state variables in React . ✅ Instead normalize the structure of the state variables to reduce time complexity.

❌ Avoid increasing time complexity by having non-normalized state variables in React . ✅ Instead normalize the structure of the state variables to reduce time complexity.

George Moller

177,601 views • 2 years ago

#Config2023 Launch 2: Variables You can now use variables to make adaptable designs—we’re talking different brand themes, device formats, and more. And yup, variables can be exported as tokens in case that’s helpful 😉. 👇 See variables in action

Figma

357,641 views • 3 years ago

Math operator is now in Figma variables. Demo: innerRadius = outerRadius - padding What would you build with variables with math? Reply one idea.

Math operator is now in Figma variables. Demo: innerRadius = outerRadius - padding What would you build with variables with math? Reply one idea.

Mr. Biscuit

11,482 views • 9 months ago

Introducing Timeline, a new way to animate your 3D scenes in Spline. - Keyframes - Curve controls - Events support Available now in Beta.

Introducing Timeline, a new way to animate your 3D scenes in Spline. - Keyframes - Curve controls - Events support Available now in Beta.

Spline

51,991 views • 8 months ago

After so much experimentation and playing around with variables in Figma, thanks to chad, I think I finally found the most *efficient and easy* way to migrate existing component libraries from styles to variables. 🎛️⚡

After so much experimentation and playing around with variables in Figma, thanks to chad, I think I finally found the most efficient and easy way to migrate existing component libraries from styles to variables. 🎛️⚡

Joey Banks

124,210 views • 3 years ago

Present section Demo of Figma Plugin. This will print and document all variables and styles. I'm building a plugin to generate design system variables/styles from presets. Already shared test version, who signed up. Coming soon...

Present section Demo of Figma Plugin. This will print and document all variables and styles. I'm building a plugin to generate design system variables/styles from presets. Already shared test version, who signed up. Coming soon...

vijay verma

13,889 views • 1 year ago

Let Claude create your Figma variables in seconds! 🤯

Let Claude create your Figma variables in seconds! 🤯

Jan Mraz

13,577 views • 18 days ago

An instant interactive explainer from Claude for a frequent debate about correlation & causation. Prompt: “Create an interactive tool that explains all the ways two variables can be correlated (causation, random chance, reverse causation, etc)” Play it:

An instant interactive explainer from Claude for a frequent debate about correlation & causation. Prompt: “Create an interactive tool that explains all the ways two variables can be correlated (causation, random chance, reverse causation, etc)” Play it:

Ethan Mollick

48,187 views • 5 months ago

CSS variables are live and they are POWERFUL. Now Live on Product Hunt 🚀 ➡️ Create a design system "So you can stay consistent and build much quicker." Define global styles like colors, gradients, sizes, and box shadows. ➡️ Use your variables everywhere "So you never have to manually enter a border color again." You're not limited to just sizes, colors, and font families. Use variables in gradients, box shadows, transforms, and more! ➡️ Start with libraries like Open Props, expertly crafted CSS variables "So you can use a tried and true system, and so we can standardize our Projects." Because there are no abstractions, you can use existing CSS variable libraries like Open Props, an expertly crafted library of CSS variables, and the recommended starting point in Webstudio. ➡️ Create complex micro-interactions "So when you hover a link, you can change any children's styles." CSS variables go beyond reusability! You can define variables anywhere in the navigator, such as on a link, and modify the variables on hover. Then, you can use those variables on the children to create complex micro-interactions! ➡️ Design and build simultaneously "So when deciding that perfect border color, you can arrow through all your options." Experimenting on the canvas just got a whole lot better. Now, you can arrow through your variables and see them rendered on the canvas to see which works best. ➡️ Change variable by breakpoint "So you can make the variables look great, no matter the screen size." CSS variables in Webstudio use the same UI as the rest of your styles, enabling breakpoints to work the same way. ✨ Building with design systems gives a HUGE boost in speed, consistency, and maintainability.

CSS variables are live and they are POWERFUL. Now Live on Product Hunt 🚀 ➡️ Create a design system "So you can stay consistent and build much quicker." Define global styles like colors, gradients, sizes, and box shadows. ➡️ Use your variables everywhere "So you never have to manually enter a border color again." You're not limited to just sizes, colors, and font families. Use variables in gradients, box shadows, transforms, and more! ➡️ Start with libraries like Open Props, expertly crafted CSS variables "So you can use a tried and true system, and so we can standardize our Projects." Because there are no abstractions, you can use existing CSS variable libraries like Open Props, an expertly crafted library of CSS variables, and the recommended starting point in Webstudio. ➡️ Create complex micro-interactions "So when you hover a link, you can change any children's styles." CSS variables go beyond reusability! You can define variables anywhere in the navigator, such as on a link, and modify the variables on hover. Then, you can use those variables on the children to create complex micro-interactions! ➡️ Design and build simultaneously "So when deciding that perfect border color, you can arrow through all your options." Experimenting on the canvas just got a whole lot better. Now, you can arrow through your variables and see them rendered on the canvas to see which works best. ➡️ Change variable by breakpoint "So you can make the variables look great, no matter the screen size." CSS variables in Webstudio use the same UI as the rest of your styles, enabling breakpoints to work the same way. ✨ Building with design systems gives a HUGE boost in speed, consistency, and maintainability.

Webstudio

15,495 views • 1 year ago

With new Figma variables. We can create any number of flow using conditions on a single frame. Testing a free flow character movement. Also tried to detect object and it worked. Small demo for something big we can create. Shared some logics below 🤩

With new Figma variables. We can create any number of flow using conditions on a single frame. Testing a free flow character movement. Also tried to detect object and it worked. Small demo for something big we can create. Shared some logics below 🤩

vijay verma

381,273 views • 3 years ago

Just published Parametric Tables in Figma ✶ A new cool technique to use Figma variables to create 100% responsive and scalable tables, Check it out ↓

Just published Parametric Tables in Figma ✶ A new cool technique to use Figma variables to create 100% responsive and scalable tables, Check it out ↓

Dmitriy Bunin

11,630 views • 11 months ago

Working with variables in Figma is so much fun! 🤩 It’s becoming clear that variables and components are essential for building any website or app today. True? #figma #designsystem #components #variables

Working with variables in Figma is so much fun! 🤩 It’s becoming clear that variables and components are essential for building any website or app today. True? #figma #designsystem #components #variables

Harshil Acharya

34,330 views • 1 year ago

Excited about incorporating Figma variables detection and display in EightShapes Specs anatomy, props and layout and spacing.

Excited about incorporating Figma variables detection and display in EightShapes Specs anatomy, props and layout and spacing.

Nathan A Curtis

34,266 views • 3 years ago

Don’t waste time creating manual styles and variables in Figma!

Don’t waste time creating manual styles and variables in Figma!

Jan Mraz

17,169 views • 9 months ago