@figma-export

Export tool for Figma

You can easily and automatically export your figma components and styles and use them directly into your website

run
figma-export
figma arrow
Icon iconZapIcon iconXIcon iconWatchIcon iconVersionsIcon iconVerifiedIcon iconUnverifiedIcon iconUnsavedIcon iconUnmuteIcon iconUnfoldIcon iconTriangleUpIcon iconTriangleRightIcon iconTriangleLeftIcon iconTriangleDownIcon iconTrashcanIcon iconToolsIcon iconThumbsupIcon iconThumbsdownIcon iconThreeBarsIcon iconTextSizeIcon iconTerminalIcon iconTelescopeIcon iconTasklistIcon iconTagIcon iconSyncIcon iconStopIcon iconStarIcon iconSquirrelIcon iconSmileyIcon iconSkipIcon iconSignOutIcon iconSignInIcon iconShieldXIcon iconShieldLockIcon iconShieldCheckIcon iconShieldIcon iconSettingsIcon iconServerIcon iconSearchIcon iconScreenNormalIcon iconScreenFullIcon iconSavedIcon iconRubyIcon iconRssIcon iconRocketIcon iconRequestChangesIcon iconReportIcon iconRepoTemplatePrivateIcon iconRepoTemplateIcon iconRepoPushIcon iconRepoPullIcon iconRepoForkedIcon iconRepoForcePushIcon iconRepoCloneIcon iconRepoIcon iconReplyIcon iconRadioTowerIcon iconQuoteIcon iconQuestionIcon iconPulseIcon iconProjectIcon iconPrimitiveSquareIcon iconPrimitiveDotStrokeIcon iconPrimitiveDotIcon iconPlusSmallIcon iconPlusIcon iconPlugIcon iconPlayIcon iconPinIcon iconPersonIcon iconPencilIcon iconPaintcanIcon iconPackageIcon iconOrganizationIcon iconOctofaceIcon iconNoteIcon iconNoNewlineIcon iconMuteIcon iconMortarBoardIcon iconMirrorIcon iconMilestoneIcon iconMentionIcon iconMegaphoneIcon iconMarkdownIcon iconMarkGithubIcon iconMailReadIcon iconMailIcon iconLogoGithubIcon iconLogoGistIcon iconLockIcon iconLocationIcon iconListUnorderedIcon iconListOrderedIcon iconLinkExternalIcon iconLinkIcon iconLightBulbIcon iconLawIcon iconKeyboardIcon iconKeyIcon iconKebabVerticalIcon iconKebabHorizontalIcon iconJerseyIcon iconItalicIcon iconIssueReopenedIcon iconIssueOpenedIcon iconIssueClosedIcon iconInfoIcon iconInboxIcon iconHubotIcon iconHorizontalRuleIcon iconHomeIcon iconHistoryIcon iconHeartIcon iconGraphIcon iconGrabberIcon iconGlobeIcon iconGithubActionIcon iconGitPullRequestIcon iconGitMergeIcon iconGitCompareIcon iconGitCommitIcon iconGitBranchIcon iconGistSecretIcon iconGistIcon iconGiftIcon iconGearIcon iconFoldUpIcon iconFoldDownIcon iconFoldIcon iconFlameIcon iconFileZipIcon iconFileSymlinkFileIcon iconFileSymlinkDirectoryIcon iconFileSubmoduleIcon iconFilePdfIcon iconFileMediaIcon iconFileDirectoryIcon iconFileCodeIcon iconFileBinaryIcon iconFileIcon iconEyeClosedIcon iconEyeIcon iconEllipsisIcon iconDiffRenamedIcon iconDiffRemovedIcon iconDiffModifiedIcon iconDiffIgnoredIcon iconDiffAddedIcon iconDiffIcon iconDeviceMobileIcon iconDeviceDesktopIcon iconDeviceCameraVideoIcon iconDeviceCameraIcon iconDesktopDownloadIcon iconDependentIcon iconDatabaseIcon iconDashboardIcon iconDashIcon iconCreditCardIcon iconCommentDiscussionIcon iconCommentIcon iconCodeIcon iconCloudUploadIcon iconCloudDownloadIcon iconClockIcon iconClippyIcon iconCircuitBoardIcon iconCircleSlashIcon iconChevronUpIcon iconChevronRightIcon iconChevronLeftIcon iconChevronDownIcon iconChecklistIcon iconCheckIcon iconCalendarIcon iconBugIcon iconBrowserIcon iconBroadcastIcon iconBriefcaseIcon iconBookmarkIcon iconBookIcon iconBoldIcon iconBellIcon iconBeakerIcon iconArrowUpIcon iconArrowSmallUpIcon iconArrowSmallRightIcon iconArrowSmallLeftIcon iconArrowSmallDownIcon iconArrowRightIcon iconArrowLeftIcon iconArrowDownIcon iconArrowBothIcon iconArchiveIcon iconAlert
@figma-exportGitHub logo

Figma Components

SVG into .js

Exporting SVG into JS is a good solution. You will have multiple exported variables that you can easily import in your project. Another benefit is being able to use tree shaking to load only icons that you really need.

Export your icons as data:image/svg+xml

The .js file contains all components as Data URL so you can easly put this value into the src of your images. This is the best way to load an svg as image.
Figma Export iconFigma Export logo
import asES6 from '@figma-export/output-components-as-es6'

export default {
  commands: [
    ['components', {
      fileId: 'fzYhvQpqwhZDUImRz431Qo',
      onlyFromPages: ['icons'],
      outputters: [
        asES6({
          output: './output/es6-dataurl',
          useDataUrl: true,
        })
      ]
    }]
  ]
}

Export your icons as Base 64

The .js file contains all components with Base 64 encoding. If you want to use it into your images you need to prepend the Data URL data:image/svg+xml;base64,
svg iconsvg icon
import asES6 from '@figma-export/output-components-as-es6'

export default {
  commands: [
    ['components', {
      fileId: 'fzYhvQpqwhZDUImRz431Qo',
      onlyFromPages: ['icons'],
      outputters: [
        asES6({
          output: './output/es6-base64',
          useBase64: true,
        })
      ]
    }]
  ]
}

SVG Sprites

Probably you already know what CSS Sprites are, basically you can combine multiple images into a single image file and use it on a website. SVG Sprites are very similar, but you will use .svg instead of .png. Discover more on this article "Icon System with SVG Sprites" where you will also find how to use this technique.

Export your icons as SVG Symbols

The .svg file contains all components as <symbol> so you can easly use an icon with<svg><use href="/icons.svg#icon-name" /></svg>
Figma ExportFigma Logo
import asSvgstore from '@figma-export/output-components-as-svgstore'

export default {
  commands: [
    ['components', {
      fileId: 'fzYhvQpqwhZDUImRz431Qo',
      onlyFromPages: ['icons'],
      outputters: [
        asSvgstore({
          output: './output/svgstore'
        })
      ]
    }]
  ]
}

Export your icons as Monochrome SVG Symbols

The .svg file contains all components as <symbol> and all fillproperties are removed from the svg so you can easily customize the icon color from css.
Figma Export - monochromeFigma Logo - monochrome
import asSvgstore from '@figma-export/output-components-as-svgstore'

export default {
  commands: [
    ['components', {
      fileId: 'fzYhvQpqwhZDUImRz431Qo',
      onlyFromPages: ['icons'],
      outputters: [
        asSvgstore({
          output: './output/svgstore-monochrome',
          svgstoreConfig: {
            cleanSymbols: ['fill']
          }
        })
      ]
    }]
  ]
}

SVG into (p)React Component

If you work on a React/Preact project, probably you need to export your Figma components into (p)React components.

Export your icons as React Components

You can easily import the generated .jsx files into your project and start using your Figma components as React components.
import { Squirrel } from './output/icons/octicons-by-github';
import asSvgr from '@figma-export/output-components-as-svgr'

export default {
  commands: [
    ['components', {
      fileId: 'fzYhvQpqwhZDUImRz431Qo',
      onlyFromPages: ['icons/octicons-by-github'],
      outputters: [
        asSvgr({
          output: './output'
        })
      ]
    }]
  ]
}

Figma Styles

You can export Figma Styles to different output.
https://www.figma.com/file/fzYhvQpqwhZDUImRz431Qo
Solid Colors
Linear Gradients
Effects
Text
Sample text
Sample text
Sample text
Sample text

Export your styles as CSS Variables

Once exported, you can easly use them directly into your css file.
body {
  color: var(--color-3);
  background: var(--color-linear-gradient);
  font-family: var(--regular-text-font-family);
  font-size: var(--regular-text-font-size);
}
        
import asCss from '@figma-export/output-styles-as-css'

export default {
  commands: [
    ['styles', {
      fileId: 'fzYhvQpqwhZDUImRz431Qo',
      outputters: [
        asCss({
          output: './output/css',
        })
      ]
    }]
  ]
}

Export your styles as Style Dictionary tokens

Once exported, you can configure a Style Dictionary project and use the generated base.json.
import asStyleDictionary from '@figma-export/output-styles-as-style-dictionary'

export default {
  commands: [
    ['styles', {
      fileId: 'fzYhvQpqwhZDUImRz431Qo',
      outputters: [
        asStyleDictionary({
          output: './output/style-dictionary',
        })
      ]
    }]
  ]
}

Export your styles as SASS and SCSS

Once exported, you can import the generated _variables.scss and use it.
It contains variables and maps.
body {
  color: $color-3;
  background: $color-linear-gradient;
  font-family: map-get($regular-text, "font-family");
  font-size: map-get($regular-text, "font-size");
}
        
import asSass from '@figma-export/output-styles-as-sass'

export default {
  commands: [
    ['styles', {
      fileId: 'fzYhvQpqwhZDUImRz431Qo',
      outputters: [
        asSass({
          output: './output/scss',
        }),
        asSass({
          output: './output/sass',
          getExtension: () => 'SASS',
        })
      ]
    }]
  ]
}

Export your styles as LESS

Once exported, you can import the generated _variables.less and use it.
It contains variables and maps.
body {
  color: @color-3;
  background: @color-linear-gradient;
  font-family: #regular-text[font-family];
  font-size: #regular-text[font-size];
}
        
import asLess from '@figma-export/output-styles-as-less'

export default {
  commands: [
    ['styles', {
      fileId: 'fzYhvQpqwhZDUImRz431Qo',
      outputters: [
        asLess({
          output: './output/less',
        })
      ]
    }]
  ]
}

ready to start?

Shell - npm install @figma-export/cli
@figma-exportGitHub logo