Figma library
This page provides guidance on how to use Figma components and what designers can expect to see in the configuration.
Link to Terra library in Figma.
1. Find components
Follow the below steps to find the components in the Figma library.
Step 1: Enable the Terra library
Turn on the Terra library in the Team library under the Assets Tab.![Enable the Terra library demo](/images/resources/figma-library/figma_pic1.png)
Step 2: Checkout component list
You can find all the released components under Terra library.
For the components that have variants, you can find the variants by expanding the category.
Tips: Library components are all in purple frame. Components in blue frame are your local components.
![Checkout component list demo](/images/resources/figma-library/figma_pic2.png)
Q&A: What if you can’t find what you want?
If you can not find what you want, you may want to propose a new component. Check outthe process pagefor details.2. Leverage components’ configuration
Manipulate the properties in the configuration to get the visuals and functionalities that fit your design. Below is a list of common methodologies to interact with the configuration.
![config position](/images/resources/figma-library/figma_pic3.png)
2.1 Dropdown
When you see the properties are presented in the format of dropdowns, you can manipulate it by selecting the values under drop down.
![Dropdown property demo](/images/resources/figma-library/Dropdown.gif)
2.2 Switch
Switch is used when the property is a boolean value. Some common properties that use switch are On/Off, Required, Helper text, Label, Clearable.
![Switch property demo](/images/resources/figma-library/Switch.gif)
2.3 Text
Text applies to the copy in the component. You can either type directly in the config or click into the text component to type.
1) Change text in the control panel.
![Text property demo 1](/images/resources/figma-library/Text1.gif)
2) Change text by selecting text layer.
![Text property demo 2](/images/resources/figma-library/Text2.gif)
2.4 Icons
Search for icons and apply the desired one through the config panel. Please note that an icon position needs to be selected first to enable the icon selection.
![Icon property demo](/images/resources/figma-library/Icon.gif)
2.5 Components
Component applies to components in the components like buttons. Select the component and manipulate the properties of the component inside.
![Components property demo](/images/resources/figma-library/Component.gif)
2.6 Detach to use
Some components require designers to detach to use in order to provide flexibility in the layout. You will see a Usage section to instruct it. After detaching, you can manipulate properties in the sub-components.
*Only detach the components when the config instructs to do so.
![Detach to use demo](/images/resources/figma-library/Detach-to-use.gif)
3. Communicate with dev
All the config in Figma is 1:1 with the properties developers will see. Make sure all the configs are in the desired setting before hand-off.
![Figma config vs Dev config](/images/resources/figma-library/figma_pic4.png)
4. Update the components
You will see a component update toast on the bottom right if there are any updates. You can selectively adopt the changes.
![Update locations](/images/resources/figma-library/figma_pic6.png)