Button Components

Component

Components are objects that can be reused multiple times throughout your scene. When you change the main component, all the copies automatically change, too. Components help you stay organized and maintain consistency by enabling you to create a design system that can be reused throughout your scene.

Creating a Component

To create a component, right-click and select 'Create Component' from the object context menu or use the shortcut ⇧⌘K. You'll notice a new symbol in the layer list.

Main Component and Instances

When you create a component, there is the main component and the instance. The main component is the central object that all instances will refer back to and where you can make changes to update all instances. Instances are objects that follow the main component's properties. Changes to the main component affect the instances unless some properties have been modified separately.

Creating Instances

You can create an instance of the main component in multiple ways: by duplicating it with ⌘D, copying and pasting with ⌘C and ⌘V, or simply dragging it with ⌘ to a different location.

Instance Overrides

Components provide flexibility. You can modify individual instances without affecting the main component. Within an instance, you can customize properties like color, roundness, and more, while keeping the main component's size and other features. This lets you create various unique instances based on the same original object.

Detaching Instances

You can detach an instance, which means it's no longer connected to the main component, and any changes to the main component won't affect the detached instance. To do this, select the instance, right-click, and choose "Detach Instance" from the menu, or use the detach icon in the Instance Panel.

Resetting Instance Changes

You can reset any changes you've made to an instance. This can be done from the Instance Panel. You can reset everything or just specific properties to match the main component again.

Component Swapping

In the Instance Panel, you can swap instances with different components. This is useful for experimenting with different designs or variations.

Component Library

We've covered the basics and can now talk about the 3D card. If you want to learn more, check out their official video on Components. You can also explore the component library in Spline, which is interesting.

Opening a File

Let's continue from where we left off. Open the 3D card file we used in the last section in Spline. We'll start by finalizing the card by adding text and icon, then we'll move on to the component part.

Creating Text

Let's begin by adding text, and you can effortlessly modify it using the Text Panel, where you'll find options to customize elements like font size, font style, and visual effects such as extrusion, bevel, and bevel sides to achieve your desired appearance.

• To create text, click on the text tool icon in the toolbar, and then drag it onto the card.

Customize the Text

We create a pricing card so we need information such as price, plan, and period. We'll use the 'Inter' font, which is a Google font, and varying font sizes.

• Price: Write '25' or any other amount, and adjust the size to 260 by 50. Set the font size to 80, and select the 'SemiBold' weight. Apply the color white.
• Currency Symbol: Write '$' and adjust the size to 260 by 30. Set the font size to 40, and select the 'Semibold weight. Apply the color white and reduce the opacity to 30%.
• Plan: Duplicate the currency symbol, change the content to "Pro," and also change the font size to 20.
• Period: Duplicate, change the text to "per month, billed monthly" with a size of 17 and regular weight.

Position

We will move the 3D icon upward because we need space for the information, including the button. Position the 3D icon at X-12, Y-95, and Z-1316. Then, select all the text elements, move them upward, and name the layers.

Import the SVG Icon

Now, we need an icon - specifically, a checkmark. You can find free icons online or in Figma and import an SVG icon. Once you've selected the icon you want, go to the 'export' option, choose SVG, and click 'Export.' Save it to your desired location, such as the desktop.

Adding Icons

Once you have your icon, drag and drop it onto the scene. Position the icon on the card and add the accompanying text next to it, then create a component. We created a component for this feature because, if, for example, I need to change the icon, the change will automatically apply to all the other icons. This way, I won't have to manually update each one individually.

• Duplicate the text layer, change the content to "All courses and videos." Adjust the size to 310 by 30, font size to 17, line height to 1.20, font style to regular, align it to the center, and apply a white color with 50% opacity.
• Select both the icon and text, then right-click and choose "Create Component."
• Create two instances and change the text to "Course designs, source files" and "Certificates and tests."

Creating the Button Component

To complete our 3D card, we need a button. We'll start with a rectangular shaper, apply extrusion and several material such as matcap, fresnel and glass. Then, add text to the button to label it. You can also add animations to the button if desired.

• Create the base using the rectangle, change the dimension to 338 by 64. Set the corner to 16 and extrusion at 12, bevel 1 and bevel sides 1.

Apply Material

We're going to apply several materials such as matcap, fresnel and glass, and it's important to follow the order.

• Matcap: Choose a darker reflection, and choose the blending mode, Screen.
• Fresnel: Reduce the opacity to 60, and choose Overlay.
• Matcap: Choose a lighter reflection, select the multiply blending mode, and reduce the opacity to 69.
• Glass: Simply add glass, and Leave the setup as it is.
• Lighting: Leave the setup as it is.
• Add “Subscribe”, set the font size to 17, and align it centrally in both directions. And, of course, the font should still be 'Inter’.

Managing Components

Remember that the background card serves as the portal, just like the main card. Duplicate the entire card to create the third card, ensuring consistent spacing as per your design. Customize the text for each card instance to make them unique. To make changes to components, such as the button, navigate to the main component. Changes to the main component affect all instances.

• Duplicate two cards, and remove the 3D icon.
• Select the Glass Card in the two instances, reduce the height to 370.
• I may easily modify the instances without affecting the main component. Let's change the text label to "Create account.”

Conclusion

In summary, components in Spline are versatile tools applicable in different situations, including 3D scene creation, design systems, and icon design. They promote efficiency, consistency, and creative exploration in your 3D projects.