正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

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 次观看 • 2 年前 •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

10 条评论

Spline 的头像

Spline2 年前

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

Diego Toda de Oliveira 的头像

Diego Toda de Oliveira2 年前

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?

Spline 的头像

Spline2 年前

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

sambø 的头像

sambø2 年前

Dynamic counter, inputs? Daamn :D

Spline 的头像

Spline2 年前

⚡️

solodolo 的头像

solodolo2 年前

Wow! Just wow! 🤩

Spline 的头像

Spline2 年前

🙌

Ξugene 的头像

Ξugene2 年前

Super cool guys! 🙌

Spline 的头像

Spline2 年前

⚡️💕

Arvydas Gečas 的头像

Arvydas Gečas2 年前

yo, that’s awesome!!

相关视频

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,860 次观看 • 1 年前

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 次观看 • 3 个月前

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,494 次观看 • 1 年前

Create Primitive and Semantic color variables in Figma Supafast ⚡️

Create Primitive and Semantic color variables in Figma Supafast ⚡️

Zander Whitehurst

35,988 次观看 • 1 年前

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 次观看 • 3 年前

🐣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 次观看 • 2 年前

❌ 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 次观看 • 2 年前

#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,664 次观看 • 3 年前

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,497 次观看 • 9 个月前

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

52,013 次观看 • 9 个月前

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 次观看 • 3 年前

Let Claude create your Figma variables in seconds! 🤯

Let Claude create your Figma variables in seconds! 🤯

Jan Mraz

13,577 次观看 • 1 个月前

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 次观看 • 1 年前

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 次观看 • 6 个月前

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,496 次观看 • 1 年前

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 次观看 • 3 年前

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 次观看 • 1 年前

A big mistake I see people routinely making is NOT clearly defining a time horizon prior to an investment/trade. Your time horizon for a trade is dictated by the longevity of the variables that trigger price action. i.e. $BTC is a long term hold due to the debasement of fiat + passive ETF bid over time (the variables here take years to play out) The same can be applied to a short term trade (the variables could be fast-moving). Full thoughts below.

A big mistake I see people routinely making is NOT clearly defining a time horizon prior to an investment/trade. Your time horizon for a trade is dictated by the longevity of the variables that trigger price action. i.e. $BTC is a long term hold due to the debasement of fiat + passive ETF bid over time (the variables here take years to play out) The same can be applied to a short term trade (the variables could be fast-moving). Full thoughts below.

Miles Deutscher

52,184 次观看 • 1 年前

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 次观看 • 3 年前

I think I've pushed Figma's new Variables and Advanced prototyping to its limit... I present a fully working version of Flappy Bird!! 🔥 Featuring: - Scoring + highscores - Pseudo-randomised pipe placement - Physics based movement - Uses 46 variables #Config2023

I think I've pushed Figma's new Variables and Advanced prototyping to its limit... I present a fully working version of Flappy Bird!! 🔥 Featuring: - Scoring + highscores - Pseudo-randomised pipe placement - Physics based movement - Uses 46 variables #Config2023

Dave Williames

1,146,245 次观看 • 3 年前