To manipulate the components, access the components object on the SDK. Through that, you can invoke all component methods mentioned, like this:
await sdk.components.deleteComponent({
designSystemId, versionId
}, component.idInVersion)
Read methods
Get all components
Retrieves all components in the specified design system version.
async getComponents(
from: RemoteVersionIdentifier
): Promise<Array<Component>>
Get all component groups
Retrieves all component groups in the specified design system version.
async getComponentGroups(
from: RemoteVersionIdentifier
): Promise<Array<ComponentGroup>>
Get all design components
Retrieves all design components (components imported from design tools like Figma) in the specified design system version.
async getDesignComponents(
from: RemoteVersionIdentifier
): Promise<Array<DesignComponent>>
Get all design component groups
Retrieves all design component groups in the specified design system version.
async getDesignComponentGroups(
from: RemoteVersionIdentifier
): Promise<Array<DesignComponentGroup>>
Get all component properties
Retrieves all component properties in the specified design system version.
async getComponentProperties(
from: RemoteVersionIdentifier
): Promise<Array<ElementProperty>>
Get all property definitions for components
Retrieves all property definitions in the specified design system version.
async getComponentPropertyValues(
from: RemoteVersionIdentifier
): Promise<Array<ElementPropertyValue>>
Get all property views for components
Retrieves all component views in the specified design system version.
async getComponentDataViews(
from: RemoteVersionIdentifier
): Promise<Array<ElementDataView>>
Create/update methods
Create component
Creates a remote component in a design system version. This method assigns a persistent ID to the component.
async createComponent(
to: RemoteVersionIdentifier,
component: Component
): Promise<{
id: string;
idInVersion: string;
}>
Create local component
Creates a local component without an associated remote ID. This component must be created once with createComponent to be stored in the design system.
createLocalComponent(versionId: string, brandId: string): Component
Create component group
Creates a remote component group in a design system version. This method assigns a persistent ID to the group.
async createComponentGroup(
to: RemoteVersionIdentifier,
group: ComponentGroup
): Promise<{
id: string;
idInVersion: string;
}>
Create local component group
Creates a local component group without an associated remote ID. This group must be created once with createComponentGroup to be stored in the design system.
createLocalComponentGroup(versionId: string, brandId: string): ComponentGroup
Update component
Updates a remote component. This method can only be used on components that already exist in the version.
async updateComponent(
to: RemoteVersionIdentifier,
component: Component
): Promise<void>
Update component group
Updates a remote component group. This method can only be used on component groups that already exist in the version.
async updateComponentGroup(
to: RemoteVersionIdentifier,
group: ComponentGroup
): Promise<void>
Update component property value
Updates a remote component property value. This method also creates the property value if it doesn't exist.
async updateComponentPropertyValue(
to: RemoteVersionIdentifier,
newValue: string,
forComponent: Component,
forProperty: ElementProperty
)
Create component property
Creates a remote component property.
async createComponentProperty(
to: RemoteVersionIdentifier,
model: ElementPropertyCreationModel
): Promise<{
id: string;
idInVersion: string;
}>
Update component property
Updates a remote component property.
async updateComponentProperty(
to: RemoteVersionIdentifier,
propertyIdInVersion: string,
model: ElementPropertyUpdateModel
): Promise<void>
Resize specific component column
Resizes a specific component column within an element data view.
async updateResizeComponentColumn(
to: RemoteVersionIdentifier,
view: ElementDataView,
column: ElementDataViewColumn,
newWidth: number
): Promise<void>
Move column to a new index
Moves a column to a new index and reorders all other columns around it within an element data view.
async updateReorderComponentColumn(
to: RemoteVersionIdentifier,
view: ElementDataView,
column: ElementDataViewColumn,
newIndex: number
): Promise<void>
Delete methods
Delete component property value
Deletes a remote component property value.
async deleteComponentPropertyValue(
to: RemoteVersionIdentifier,
valueId: string
): Promise<void>
Delete component property
Deletes a remote component property. This action also removes all values associated with the property.
async deleteComponentProperty(
to: RemoteVersionIdentifier,
propertyIdInVersion: string
): Promise<void>
Delete remote component
Deletes a remote component.
async deleteComponent(
to: RemoteVersionIdentifier,
componentIdInVersion: string
): Promise<void>
Delete remote component group
Deletes a remote component group. This method will also fix the component group tree by moving any subgroups to the parent. Note that it will not delete the contents of the group.
async ungroupComponentGroup(
to: RemoteVersionIdentifier,
componentGroupIdInVersion: string
): Promise<void>
Delete remote component group and all its descendants
Deletes a remote component group and all its descendants. All items (groups and components) underneath will be deleted.
async deleteComponentGroup(
to: RemoteVersionIdentifier,
componentGroupToDelete: ComponentGroup,
components: Array<Component>,
componentGroups: Array<ComponentGroup>
): Promise<void>