Export Figma Analytics - Bookmarklet

ExportFigmaAnalytics.js

javascript:(function()%7Bif%20(document.querySelector('%5Bclass*%3D%22component_file_view_header--header--%22%5D'))%20%7B%0A%20%20%20%20%20%20%2F%2F%20Call%20the%20function%20for%20element1%0A%20%20%20%20%20%2F%2F%20functionForElement1()%3B%0A%20%20%20%20%20%2F%2F%20alert(%22component%20page%22)%3B%0A%0A%20%20%20%20%20%20%2F%2F%20Export%20Figma%20Component%20Analytics%0A%0A%20%20%20%20%20%20%2F%2F%20Scrape%20content%20from%20the%20webpage%0A%20%20%20%20%20%20const%20containerDiv%20%3D%20document.querySelector('div%5Bclass*%3D%22library_item_view--fileViewDSANoTab--%22%5D%20div%5Bclass*%3D%22library_item_stats--allComponentsTable--%22%5D')%3B%0A%20%20%20%20%20%20const%20rows%20%3D%20Array.from(containerDiv.querySelectorAll('div%5Bclass*%3D%22library_item_view--fileViewDSANoTab--%22%5D%20div%5Bclass*%3D%22library_item_stats--row--%22%5D'))%3B%0A%0A%20%20%20%20%20%20%2F%2F%20Extract%20table%20headings%0A%20%20%20%20%20%20const%20headerRow%20%3D%20containerDiv.querySelector('div%5Bclass*%3D%22library_item_stats--headerRowAllComponentTable--%22%5D')%3B%0A%20%20%20%20%20%20const%20headings%20%3D%20Array.from(headerRow.querySelectorAll('div%5Bclass%5E%3D%22entity--sortableField--%22%5D')).map(heading%20%3D%3E%20heading.textContent.trim())%3B%0A%0A%20%20%20%20%20%20%2F%2F%20Extract%20data%20from%20each%20row%0A%20%20%20%20%20%20const%20data%20%3D%20rows.map(row%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20const%20avatarColumn%20%3D%20row.querySelector('div%5Bclass*%3D%22library_item_view--fileViewDSANoTab--%22%5D%20div%5Bclass*%3D%22library_item_stats--avatarColumnComponentName--%22%5D')%3B%0A%20%20%20%20%20%20%20%20const%20componentName%20%3D%20avatarColumn.textContent.trim()%3B%0A%20%20%20%20%20%20%20%20const%20statsColumns%20%3D%20Array.from(row.querySelectorAll('div%5Bclass*%3D%22library_item_view--fileViewDSANoTab--%22%5D%20div%5Bclass*%3D%22library_item_stats--statsColVal--%22%5D')).map(column%20%3D%3E%20column.textContent.trim())%3B%0A%20%20%20%20%20%20%20%20return%20%5BcomponentName%2C%20...statsColumns%5D%3B%0A%20%20%20%20%20%20%7D)%3B%0A%0A%20%20%20%20%20%20%2F%2F%20Get%20current%20date%0A%20%20%20%20%20%20const%20currentDate%20%3D%20new%20Date().toISOString().split('T')%5B0%5D%3B%0A%0A%20%20%20%20%20%20%2F%2F%20Get%20the%20text%20from%20the%20div%20with%20the%20partial%20classname%0A%20%20%20%20%20%20const%20headerTitle%20%3D%20document.querySelector('div%5Bclass*%3D%22header_modal--headerModalTitle--%22%5D').textContent.trim()%3B%0A%0A%20%20%20%20%20%20%2F%2F%20Get%20the%20component%20title%0A%20%20%20%20%20%20const%20componentTitle%20%3D%20document.querySelector('div%5Bclass*%3D%22component_file_view_header--name--%22%5D').textContent.trim()%3B%0A%0A%20%20%20%20%20%20%2F%2F%20Extract%20additional%20content%0A%20%20%20%20%20%20const%20description%20%3D%20document.querySelector('div%5Bclass*%3D%22overview_stats_view--componentDescription--%22%5D').textContent.trim()%3B%0A%20%20%20%20%20%20const%20total%20%3D%20document.querySelector('div%5Bclass*%3D%22overview_stats_view--stat--%22%5D').textContent.trim()%3B%0A%20%20%20%20%20%20const%20usedBy%20%3D%20document.querySelectorAll('div%5Bclass*%3D%22overview_stats_view--stat--%22%5D')%5B1%5D.textContent.trim()%3B%0A%20%20%20%20%20%20const%20usedIn%20%3D%20document.querySelectorAll('div%5Bclass*%3D%22overview_stats_view--stat--%22%5D')%5B2%5D.textContent.trim()%3B%0A%0A%20%20%20%20%20%20%2F%2F%20Prepend%20additional%20content%20to%20data%0A%20%20%20%20%20%20const%20prependedData%20%3D%20%5B%0A%20%20%20%20%20%20%20%20%5B'Library'%2C%20headerTitle%5D%2C%0A%20%20%20%20%20%20%20%20%5B'Date'%2C%20currentDate%5D%2C%0A%20%20%20%20%20%20%20%20%5B'Name'%2C%20componentTitle%5D%2C%0A%20%20%20%20%20%20%20%20%5B'Description'%2C%20description%5D%2C%0A%20%20%20%20%20%20%20%20%5B'Total'%2C%20total%5D%2C%0A%20%20%20%20%20%20%20%20%5B'Used%20by'%2C%20usedBy%5D%2C%0A%20%20%20%20%20%20%20%20%5B'Used%20in'%2C%20usedIn%5D%2C%0A%20%20%20%20%20%20%20%20%5B%5D%2C%0A%20%20%20%20%20%20%5D%3B%0A%0A%20%20%20%20%20%20%2F%2F%20Combine%20prependedData%20with%20existing%20data%0A%20%20%20%20%20%20const%20combinedData%20%3D%20%5B...prependedData%2C%20headings%2C%20...data%5D%3B%0A%0A%20%20%20%20%20%20%2F%2F%20Create%20CSV%20content%0A%20%20%20%20%20%20const%20csvComponentContent%20%3D%20%60%24%7BcombinedData.map(row%20%3D%3E%20row.map(value%20%3D%3E%20%60%22%24%7Bvalue.replace(%2F%22%2Fg%2C%20'%22%22')%7D%22%60).join('%2C')).join('%5Cn')%7D%60%3B%0A%20%20%20%20%20%20%2F%2Fconst%20csvComponentContent%20%3D%20%60%24%7Bheadings.map(value%20%3D%3E%20%60%22%24%7Bvalue.replace(%2F%22%2Fg%2C%20'%22%22')%7D%22%60).join('%2C')%7D%5Cn%24%7BcombinedData.map(row%20%3D%3E%20row.map(value%20%3D%3E%20%60%22%24%7Bvalue.replace(%2F%22%2Fg%2C%20'%22%22')%7D%22%60).join('%2C')).join('%5Cn')%7D%60%3B%0A%0A%0A%0A%20%20%20%20%20%20%2F%2F%20Replace%20spaces%20and%20special%20characters%20with%20underscores%0A%20%20%20%20%20%20const%20cleanedHeaderTitle%20%3D%20headerTitle.replace(%2F%5B%5Ea-zA-Z0-9%5D%2Fg%2C%20%22_%22)%3B%0A%20%20%20%20%20%20const%20cleanedComponentTitle%20%3D%20componentTitle.replace(%2F%5B%5Ea-zA-Z0-9%5D%2Fg%2C%20%22_%22)%3B%0A%0A%20%20%20%20%20%20%2F%2F%20Generate%20the%20filename%20with%20today's%20date%20and%20the%20cleaned%20header%20title%0A%20%20%20%20%20%20const%20fileName%20%3D%20%60Figma-Component-Analytics_-_%24%7BcleanedHeaderTitle%7D_-_%24%7BcleanedComponentTitle%7D_-_%24%7BcurrentDate%7D.csv%60%3B%0A%0A%20%20%20%20%20%20%2F%2F%20Create%20a%20Blob%20object%20to%20download%20the%20CSV%20file%0A%20%20%20%20%20%20const%20blob%20%3D%20new%20Blob(%5BcsvComponentContent%5D%2C%20%7B%20type%3A%20'text%2Fcsv%3Bcharset%3Dutf-8%3B'%20%7D)%3B%0A%0A%0A%0A%20%20%20%20%20%20%2F%2F%20Create%20a%20temporary%20link%20element%20to%20initiate%20the%20download%0A%20%20%20%20%20%20const%20link%20%3D%20document.createElement('a')%3B%0A%20%20%20%20%20%20if%20(link.download%20!%3D%3D%20undefined)%20%7B%0A%20%20%20%20%20%20%20%20const%20url%20%3D%20URL.createObjectURL(blob)%3B%0A%20%20%20%20%20%20%20%20link.setAttribute('href'%2C%20url)%3B%0A%20%20%20%20%20%20%20%20link.setAttribute('download'%2C%20fileName)%3B%0A%20%20%20%20%20%20%20%20link.style.visibility%20%3D%20'hidden'%3B%0A%20%20%20%20%20%20%20%20document.body.appendChild(link)%3B%0A%20%20%20%20%20%20%20%20link.click()%3B%0A%20%20%20%20%20%20%20%20document.body.removeChild(link)%3B%0A%20%20%20%20%20%20%7D%0A%0A%0A%20%20%20%20%7D%20else%20if%20(document.querySelector('%5Bclass*%3D%22library_analytics_view--teamUsageContainer--%22%5D'))%20%7B%0A%20%20%20%20%20%20%2F%2F%20Call%20the%20function%20for%20element2%0A%20%20%20%20%20%2F%2F%20functionForElement2()%3B%0A%20%20%20%20%20%2F%2F%20alert(%22library%20page%22)%3B%0A%0A%20%20%20%20%20%20%2F%2F%20Export%20Figma%20Library%20Analytics%0A%0A%20%20%20%20%20%20%2F%2F%20Scrape%20content%20from%20the%20webpage%0A%20%20%20%20%20%20const%20containerDiv%20%3D%20document.querySelector('div%5Bclass*%3D%22library_item_stats--allComponentsTable--%22%5D')%3B%0A%20%20%20%20%20%20const%20rows%20%3D%20Array.from(containerDiv.querySelectorAll('div%5Bclass*%3D%22library_item_stats--row--%22%5D'))%3B%0A%0A%20%20%20%20%20%20%2F%2F%20Extract%20table%20headings%0A%20%20%20%20%20%20const%20headerRow%20%3D%20containerDiv.querySelector('div%5Bclass*%3D%22library_item_stats--headerRowAllComponentTable--%22%5D')%3B%0A%20%20%20%20%20%20const%20headings%20%3D%20Array.from(headerRow.querySelectorAll('div%5Bclass%5E%3D%22entity--sortableField--%22%5D')).map(heading%20%3D%3E%20heading.textContent.trim())%3B%0A%0A%20%20%20%20%20%20%2F%2F%20Extract%20data%20from%20each%20row%0A%20%20%20%20%20%20const%20data%20%3D%20rows.map(row%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20const%20avatarColumn%20%3D%20row.querySelector('div%5Bclass*%3D%22library_item_stats--avatarColumnComponentName--%22%5D')%3B%0A%20%20%20%20%20%20%20%20const%20componentName%20%3D%20avatarColumn.textContent.trim()%3B%0A%20%20%20%20%20%20%20%20const%20statsColumns%20%3D%20Array.from(row.querySelectorAll('div%5Bclass*%3D%22library_item_stats--statsColVal---%22%5D')).map(column%20%3D%3E%20column.textContent.trim())%3B%0A%20%20%20%20%20%20%20%20return%20%5BcomponentName%2C%20...statsColumns%5D%3B%0A%20%20%20%20%20%20%7D)%3B%0A%0A%20%20%20%20%20%20%2F%2F%20Get%20current%20date%0A%20%20%20%20%20%20const%20currentDate%20%3D%20new%20Date().toISOString().split('T')%5B0%5D%3B%0A%0A%20%20%20%20%20%20%2F%2F%20Get%20the%20text%20from%20the%20div%20with%20the%20partial%20classname%0A%20%20%20%20%20%20const%20headerElement%20%3D%20document.querySelector('div%5Bclass*%3D%22header_modal--headerModalTitle--%22%5D')%3B%0A%20%20%20%20%20%20const%20headerTitle%20%3D%20headerElement%20%3F%20headerElement.textContent.trim()%20%3A%20%22Undefined%22%3B%0A%0A%20%20%20%20%20%20%2F%2F%20Get%20the%20date%20range%20from%20the%20div%20with%20the%20partial%20classname%0A%20%20%20%20%20%20const%20headerDateRange%20%3D%20document.querySelector('span%5Bclass*%3D%22dsa_file_view_tabs--duration--%22%5D').textContent.trim()%3B%0A%0A%20%20%20%20%20%20%2F%2F%20Prepend%20additional%20content%20to%20data%0A%20%20%20%20%20%20const%20prependedData%20%3D%20%5B%0A%20%20%20%20%20%20%20%20%5B'Library'%2C%20headerTitle%5D%2C%0A%20%20%20%20%20%20%20%20%5B'Date'%2C%20currentDate%5D%2C%0A%20%20%20%20%20%20%20%20%5B'Date%20range'%2C%20headerDateRange%5D%2C%0A%20%20%20%20%20%20%20%20%5B%5D%2C%0A%20%20%20%20%20%20%5D%3B%0A%0A%20%20%20%20%20%20%2F%2F%20Combine%20prependedData%20with%20existing%20data%0A%20%20%20%20%20%20const%20combinedData%20%3D%20%5B...prependedData%2C%20headings%2C%20...data%5D%3B%0A%0A%20%20%20%20%20%20%2F%2F%20Create%20CSV%20content%0A%20%20%20%20%20%20const%20csvContent%20%3D%20%60%24%7BcombinedData.map(row%20%3D%3E%20row.map(value%20%3D%3E%20%60%22%24%7Bvalue.replace(%2F%22%2Fg%2C%20'%22%22')%7D%22%60).join('%2C')).join('%5Cn')%7D%60%3B%0A%0A%0A%20%20%20%20%20%20%2F%2F%20Replace%20spaces%20and%20special%20characters%20with%20underscores%0A%20%20%20%20%20%20const%20cleanedHeaderTitle%20%3D%20headerTitle.replace(%2F%5B%5Ea-zA-Z0-9%5D%2Fg%2C%20%22_%22)%3B%0A%20%20%20%20%20%20const%20cleanedDateRange%20%3D%20headerDateRange.replace(%2F%5B%5Ea-zA-Z0-9%5D%2Fg%2C%20%22_%22)%3B%0A%0A%20%20%20%20%20%20%2F%2F%20Generate%20the%20filename%20with%20today's%20date%20and%20the%20cleaned%20header%20title%0A%20%20%20%20%20%20const%20fileName%20%3D%20%60Figma-Analytics_-_%24%7BcleanedHeaderTitle%7D_-_%24%7BcleanedDateRange%7D_-_%24%7BcurrentDate%7D.csv%60%3B%0A%0A%20%20%20%20%20%20%2F%2F%20Create%20a%20Blob%20object%20to%20download%20the%20CSV%20file%0A%20%20%20%20%20%20const%20blob%20%3D%20new%20Blob(%5BcsvContent%5D%2C%20%7B%20type%3A%20'text%2Fcsv%3Bcharset%3Dutf-8%3B'%20%7D)%3B%0A%0A%0A%0A%20%20%20%20%20%20%2F%2F%20Create%20a%20temporary%20link%20element%20to%20initiate%20the%20download%0A%20%20%20%20%20%20const%20link%20%3D%20document.createElement('a')%3B%0A%20%20%20%20%20%20if%20(link.download%20!%3D%3D%20undefined)%20%7B%0A%20%20%20%20%20%20%20%20const%20url%20%3D%20URL.createObjectURL(blob)%3B%0A%20%20%20%20%20%20%20%20link.setAttribute('href'%2C%20url)%3B%0A%20%20%20%20%20%20%20%20link.setAttribute('download'%2C%20fileName)%3B%0A%20%20%20%20%20%20%20%20link.style.visibility%20%3D%20'hidden'%3B%0A%20%20%20%20%20%20%20%20document.body.appendChild(link)%3B%0A%20%20%20%20%20%20%20%20link.click()%3B%0A%20%20%20%20%20%20%20%20document.body.removeChild(link)%3B%0A%20%20%20%20%20%20%7D%0A%0A%0A%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%2F%2F%20Neither%20element%20is%20visible%0A%20%20%20%20%20%20%0A%20%20%20%20%20%20alert(%22You%20can%20only%20export%20results%20when%20Library%20Analytics%20or%20Component%20Analytics%20are%20visible.%22)%3B%0A%20%20%20%20%7D%7D)()%3B

This is a bookmarklet version of the Export Figma Analytics function from my Figma UI Mod chrome extension.

A bookmarklet is a bookmark stored in a web browser that contains JavaScript commands that add new features to the browser.

To add it to your bookmarks bar:

1. Open the RAW view of this gist, and copy it all to your clipboard
2. Right click on your browser Bookmark Bar
3. Choose "Add Page"
4. Add a name for your bookmarklet, e.g. "Export Figma Analytics"
5. Delete the URL value, and paste the code from clipboard.

You're done!
Now open an analytics modal on Figma.com and test it out.