Adding Components from the Design System in Figma
Music: Upbeat light digital music
(On Screen) Graphic text that says, “Massachusetts Design System. Adding components from the design system in Figma”
Voice Over: Adding Components from the Design System in Figma.
(On Screen) Figma fills the screen. A placeholder form appears on the canvas, with empty space at the bottom where the buttons will be added. To the left of the canvas is the Layers menu.
Voice Over: Hi, let's talk about adding components to the canvas.
We have a layout here with a form placeholder, but it's missing its primary and secondary actions. Let's look at how to pull these required CTA, or call to action, components directly from our team library onto the canvas.
To find our components, we'll jump over to the left sidebar and switch from the Layers tab to the Assets tab. You can use the shortcut Option + 2 on Mac or Alt + 2 on Windows.
(On Screen) The mouse cursor moves to the far left of the screen and selects the plus sign enclosed in a circle. The Layers menu changes to the Library menu. The cursor then selects “Core Components” from the Library menu, revealing the Assets menu.
Voice Over: Instead of digging through folders, let's use the search bar at the top.
I'll type in "button" to instantly bring up all the button variants in our design system.
Now, just click and drag the primary button component right into the bottom of our form layout. I'll do the same for our secondary Cancel button.
(On Screen) After placing the primary button, the cursor returns to the Assets menu and right-clicks the same Button component. A new window opens next to the Assets menu, displaying “Button” at the top along with options for the component. Under “Properties,” the cursor opens the available drop-down menus. Finally, the cursor selects “Insert Instance.”
Voice Over: Because these instances are from our shared library, they're perfectly formatted and automatically stay linked to our Design System's global updates.
And just like that, our form has the exact CTAs it needs.
(On Screen) The first Button component on the canvas is selected, revealing the “Design” tab in the upper-right corner of the screen. The cursor moves to the Design tab and selects “Type.” In the box next to “Type,” the word “Button” is deleted and replaced with “Cancel.”
Voice Over: This is how you quickly utilize the Massachusetts Design System to build out consistent designs. See you next time.
(On Screen) Screen fades to black.