The Figma source is used to pull individual design patterns from Figma projects. The source subscribes to Figma project groups, then extracts from project files, tagged patterns.
A Figma pattern tag is defined within a Figma project's sharedPluginData.
For each retrieved/tagged pattern, a page is created in the Mosaic file-system.
Additional Mosaic metadata can be added, to each created page, using meta
For instance we could add metadata which defines which product owns a particular pattern and then
group patterns based on owner.
yarn add @jpmorganchase/mosaic-source-figma
The Figma source is an HttpSource and shares the same base configuration.
The transformResponseToPagesModulePath prop has a default transformer which creates a page for each matching Story.
| Property | Description | Required |
|---|---|---|
| prefixDir | path to store figma patterns | Yes |
| figmaToken | figma access token | Yes |
| projects | array of projects to subscribe to | Yes |
| endpoints | figma endpoints | Yes |
Each project is configured from the projects array.
| Property | Description | Required |
|---|---|---|
| id | numerical id of the subscribed project group | Yes |
| meta | metadata to add to each of the projects pages | Yes |
| patternPrefix | prefix to add to all pages created | Yes |
endpoints defined the Figma REST API endpoints.
| Property | Description | Required |
|---|---|---|
| getProject | url to return a list of projects within the project group | Yes |
| getFile | url to return a project file | Yes |
| generateThumbnail | url to generate a thumbnail for the shared Figma node | Yes |