Back to Plugins
Code Snippet Editor

Code Snippet Editor

Translate component variants, properties, and more into dynamic code snippets for your design system

code exportdocumentationcodegencomponent librarycodedesign systemdevelopmentcode-generators

Plugin Preview

Code Snippet Editor preview

About this plugin

Source code and docs are on GitHubThis plugin allows you to write and generate code snippets for Figma nodes, which are rendered in the Inspect Panel in Dev Mode. You can make these code snippets dynamic, by referring to parameters provided by the plugin. Doing this for your component library will bring accurate code snippets to any project that incorporates your design system.You can add code snippets using the Snippet Editor, which is accessible from the settings menu of the plugin in Dev Mode's Inspect Panel.Any snippets added to a Component or Component Set will also be propagated to Instances. Snippets can either be static or utilize the snippet templating language, which is documented on GitHub, along with the code for this plugin.

Plugin Details

Version23
CreatedNovember 29, 2023
Last UpdatedAugust 16, 2024
CategorySoftware development
CreatorFigma
Stats1272 installs, 408 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:{"bulk": "ui/bulk.html", "editor": "ui/editor.html", "templates": "ui/templates.html"}
  • main:code.js
  • Editor Types:
    dev
  • Allowed Domains:
    • none
  • Codegen Languages:
    • Snippets(snippets)