figma / code-snippet-editor-plugin Goto Github PK

{{?node.type=frame}}<Border {{?css.border}}Stroke="{{css.border}}"> {{?node.name}}x:Name="{{node.name|pascal}}"

Expected output:

Node has a border (currently this isn't possible because you can't grab Stroke or StrokeThickness from css, it returns all properties):
x:Name="NodeName"

Node doesn't have a border:

x:Name="NodeName"

If there is a frame, but no css.border, then the whole line is missing. I have tried using the "" escape character, but it doesn't seem to be working. Unless I'm using it wrong?

The idea would be that it should still have ' > x:Name="NodeName" ' after ' <Border ' if there is no border around the frame
eg. x:Name="NodeName"

At the moment, everything to the right of {{?css.border}} is left out, even if {{?node.name}} is not null for example.

Current workaround:

{{?node.type=frame}}<Border
{{?css.border}}Stroke="{{css.border}}"
{{?node.type=frame}}> {{?node.name}}x:Name="{{node.name|pascal}}"

Output when no border:

<Border

x:Name="NodeName"

A way to remove a substring from a string. Proposed approach would be a second pipe after the filter. This way, the template explicitly states how the input string should be filtered and transformed prior to searching for the substring. This gives template authors a reliable format to match against (they can always use raw filter if they want the original string):

• {{something|pascal|Something}} would remove "Something".
  • "SomethingGrand" becomes "Grand"
  • "something wonderful friend" becomes "WonderfulFriend"

Additionally, we could take the regex-y HTML attribute selector syntax from CSS (^ for "starts with" and $ for "ends with") and supplement with:

• {{something|pascal|^Something}} only a starting instance of "Something"
  • "SomethingGrand"
• {{something|pascal|$Something}} only an ending instance of "Something"
  • "GrandSomething"

Is there a way to retrieve the properties from a parent node's children if it has one or more child nodes?

Say a parent frame has a child frame inside it, how would I get the child frame's properties while the parent is selected?

Hello!
I'm working on making toggle button part of template, my toggle button is created in a way that it has always 2 node children.
I have this challenge to get label props to one place in template and then get other children inside tag, ideally it would look something like this:

<ToggleButtonGroup
  {{figma.children.0}}
>
  {{figma.children.1}}
</ToggleButtonGroup>

So I can get this outcome

<ToggleButtonGroup
  label="Toggle button"
>
    <ToggleButton
      label="First"
      value="first"
    />
    <ToggleButton
      label="Last"
      value="last"
    />
</ToggleButtonGroup>

Would that be something worth pursuing? Or is there a way to do that right now?

As an example, if I have the following:

And I put an escape character "" after "width=48 >", and I then change the width to "hug" instead of fixed and the width line is conditional on there being a css.width value, then it disappears along with the ">" which ends the frame parameters. The only way I have seen around this is to put an escape character after each line, but that ends up with everything on one line and I want to keep the more readable code format of one parameter per line. Alternatively I could put the ">" character on its own line below the last parameter (width in this example), but then the code is using more lines than it needs to and isn't as neat.

Does this make sense?
Is there a better way of doing this?

Hey, it would be really cool to allow for improved syncronization with a repository.

I imagine a way to login to a github repo from the plugin and link to a specific .json file with the structure in it. Whenever the file changes, the plugin could show an update button or something to pull in the latest changes.

Why?

A common issue is that docs, code playgrounds and figma get out of sync. Automating the update process and putting the source of truth onto github could help a lot.

I'm running into an issue and this might be because I'm using this plugin wrong and then this is a question to use it correctly - or - if I'm using the plugin correctly, then I likely found a bug.

What I see:

Repro Steps:

A) In my components file:

• I did a couple of instances of my components with varying properties
• I went into devMode, selected the component
• Opened the code snippet editor
• Entered my snippet, selected the syntax and tested these on my instance to check if it works - it does and hell ya! I like it
• I removed the instances
• I published the component under assets

B) I another file:

• I use the asset panel to pull in the component
• I switched to devMode
• I see the error above

Expectation:

I would see the code in my other file as I'd seen this for the instances I tested them with in the same file.

Is it possible to get the values for Border radius for example (which from what I can tell can only be extracted from the css property, but without the "px" in the value returned or somehow alter this value to show just 30 in Figma inspect?

If it has a border or 30px, just give us 30, or do we have to manually delete this from our own code base after pasting it in from your plugin?

There are times where I need to reach into subcomponents to get text overrides or other properties, but there may be more than 1 subcomponent as a direct child. Does that ability exist and how would I go about doing so?

I'm envisioning something like {{figma.children[1].text}} or
{{?figma.children[1].name=Label}}{{figma.children[1].text}}
if I wanted to do so safely?

Hi Jake,

How do I get the margin values from the node?

I can't see the X or Y values in the raw data.

For example I have a badge on my notification icon and I need to know it's distance from the edges of the frame for positioning purposes. As shown in the screenshot below, the X value is 23 and Y value is 4. With the Width and Height values of the ellipse being 22.

{
"node.name": "Ellipse",
"node.type": "ELLIPSE",
"css.width": "22px",
"css.height": "22px",
"css.flexShrink": "0",
"css.fill": "var(--Red-Gradient, linear-gradient(180deg, #FB7474 7.29%, #F91F1F 100%))",
"css.strokeWidth": "1px",
"css.stroke": "var(--White, #FFF)"
}

Hey Jake,

Would it be possible to use your plugin to export all the variables and styles out of Figma in a custom format that we set so it matches the code of our chosen platform?

As a simple example:

<Color x:Key="White">#FFFFFF</Color>

I'm trying to create a MAUI XAML block of code when clicking on a Frame.

So for example I would want the tag to be hidden if the node.type is NOT a frame.

I could put {{?node.type=frame}} before each line, but I also want it to hide all the code inside the code block.

Is there a way span the {{?node.type=frame}} statement across muliple lines to indicate when it starts and finishes?

Current approach:

{{?node.type=frame}}
{{?node.type=frame}}{{?css.height}}HeightRequest="{{css.height}}"
{{?node.type=frame}}

Ideal approach (just one of many examples):

{ {{?node.type=frame}}
{{?css.height}}HeightRequest="{{css.height}}"

{{?node.type=frame}}
{{?css.height}}HeightRequest="{{css.height}}"

Allow referencing of properties of child elements using the each syntax.

Example

Template

import {
{{#each children}}
  {{property.type|pascal}}Icon,
{{/each}}
} from "@heroicons/react/24/solid";
import { FC } from "react";

export const MyIcon: FC<{ type: string }> = ({ type }) => {
  switch (type) {
  {{#each children}}
    case "{{property.type}}":
      return <{{property.type|pascal}}Icon className="h-6 w-6 text-blue-500" />;
  {{/each}}
    default:
      return null;
  }
};

Snippet

import {
  AdjustmentsHorizontalIcon,
  ArrowDownRightIcon,
  Bars3Icon,
} from "@heroicons/react/24/solid";
import { FC } from "react";

export const MyIcon: FC<{ type: string }> = ({ type }) => {
  switch (type) {
    case "adjustments-horizontal":
      return <AdjustmentsHorizontalIcon className="h-6 w-6 text-blue-500" />;
    case "arrow-down-right":
      return <ArrowDownRightIcon className="h-6 w-6 text-blue-500" />;
    case "bars-3":
      return <Bars3Icon className="h-6 w-6 text-blue-500" />;
    default:
      return null;
  }
};

Hi Jake,

How do I get it so that my textbox parameters show up for textboxes that are inside frames/components?

Currently I have this as a separate field:

"TEXT": [
      {
        "title": "MAUI",
        "language": "JAVASCRIPT",
        "code": "<Typography\\\nvariant=\"{{node.textStyle}}\"\\\n{{!node.textStyle}}variant=\"unknown\"\\\n\\>{{node.characters|raw}}</Typography>"
      }
    ]

Hi Jake,

I can't see the raw data, so I'm winging it a bit here, but I have converted my JSON back to the format required to run as code on a single node to test it works for components and their child components. What am I missing here?

<FlexLayout 
{{?autolayout.layoutMode=horizontal}}Direction="Row"
{{?autolayout.layoutMode=vertical}}Direction="Column"
BackgroundColor={{css.background|pascal}} 
WidthRequest="{{css.width|pascal}}"
HeightRequest="{{css.height|pascal}}"
Padding="\\
{{?variables.paddingTop}}theme.{{variables.paddingTop|pascal}}, \\
{{!variables.paddingTop}}{{autolayout.paddingTop}}, \\
{{?variables.paddingRight}}theme.{{variables.paddingRight|pascal}}, \\
{{!variables.paddingRight}}{{autolayout.paddingRight}}, \\
{{?variables.paddingBottom}}theme.{{variables.paddingBottom|pascal}}, \\
{{!variables.paddingBottom}}{{autolayout.paddingBottom}}, \\
{{?variables.paddingLeft}}theme.{{variables.paddingLeft|pascal}}\\
{{!variables.paddingLeft}}{{autolayout.paddingLeft}}\\
"
{{?variables.itemSpacing}}Spacing="theme.{{variables.itemSpacing|pascal}}" {{!variables.itemSpacing}}Spacing="{{autolayout.itemSpacing}}" 
{{?css.justifyContent=center}}JustifyContent="Center"
{{?css.justifyContent=space-between}}JustifyContent="SpaceBetween"
{{?css.justifyContent=flex-start}}JustifyContent="Start"
{{?css.justifyContent=flex-end}}JustifyContent="End"
{{?css.alignItems=center}}AlignItems="Center"
{{?css.alignItems=flex-start}}AlignItems="Start"
{{?css.alignItems=flex-end}}AlignItems="End" 
{{?autolayout.layoutMode=horizontal}}{{?autolayout.counterAxisAlignItems=center}}VerticalOptions="Center"
{{?autolayout.layoutMode=horizontal}}{{?autolayout.counterAxisAlignItems=min}}VerticalOptions="Start" 
{{?autolayout.layoutMode=horizontal}}{{?autolayout.counterAxisAlignItems=max}}VerticalOptions="End" 
{{!autolayout.layoutMode=horizontal}}{{?autolayout.primaryAxisAlignItems=center}}VerticalOptions="Center"
{{!autolayout.layoutMode=horizontal}}{{?autolayout.primaryAxisAlignItems=min}}VerticalOptions="Start" 
{{!autolayout.layoutMode=horizontal}}{{?autolayout.primaryAxisAlignItems=max}}VerticalOptions="End" 
{{?autolayout.layoutMode=horizontal}}{{?autolayout.primaryAxisAlignItems=center}}HorizontalOptions="Center"
{{?autolayout.layoutMode=horizontal}}{{?autolayout.primaryAxisAlignItems=min}}HorizontalOptions="Start"
{{?autolayout.layoutMode=horizontal}}{{?autolayout.primaryAxisAlignItems=max}}HorizontalOptions="End"
{{!autolayout.layoutMode=horizontal}}{{?autolayout.counterAxisAlignItems=center}}HorizontalOptions="Center"
{{!autolayout.layoutMode=horizontal}}{{?autolayout.counterAxisAlignItems=min}}HorizontalOptions="Start"
{{!autolayout.layoutMode=horizontal}}{{?autolayout.counterAxisAlignItems=max}}HorizontalOptions="End" 
{{?node.children=0}} />
{{!node.children=0}}> 
{{figma.children}}
{{!node.children=0}}
</FlexLayout>

Hey, it would be really cool to use this plugin on IntelliJ also !

Why?
Most developers in addition to VSCode also use IntelliJ as an editor

Hi, is there an option to get the contents of the text contents of a node (characters property I guess)?

Also supposing I have a component build like this, even if we got the access to the characters, would it correctly get the contents of the Button layer?

If those aren't possible now but are technically viable (I haven't worked with Figma APIs too much so I'm not sure) then I'm happy to contribute and create a Pull request for those

That's a great extension. Especially since it supports all sort of code (not only the react people) - thanks a lot for that.

In my design system, I make great use of slots (instance swap properties).

For example, for a button there is a before and after slot, which when visible defaults to icons. Now, these icons are their own component, with their own code snippets.

So I was wondering, if there can be a helper to render the snippet of a sub-component ?

I do have this code editor snippet defined:

<Button
  {{!property.intent=action}}@intent="{{property.intent}}"
  {{!property.importance=supreme}}@importance="{{property.importance}}"
  {{!property.spacing=0}}@spacing="{{property.spacing}}"
  {{property.state=disabled}}@disabled={{true}}
>
  {{property.text}}
</Button>

but if none of the properties are given (ie. the default), then this is the rendered snippet for devs to copy:

<Button
>
text
</Button>

which sorta looks weird.

Probably when a couple of lines beginning with qualifiers and they all turn empty, then this is trimmable?

Posisble bug?

If you click on undo in Figma in the main canvas with DevMode off and the Inspect flyout menu minimised, it still undoes the changes that were made to your code snippet, instead of the changes you made on the canvas before opening the Code Snippet Editor.

The intention from the user should be the undo the recent changes on the canvas not from the Code Snippet Editor.

It should be possible to pull in global templates from an external source.

There should be a template source url setting stored in the client that the global template editor can retrieve JSON from.

Hi Jake,

How do I create a global template that works the same as the Frame with child nodes code, but for components?

Looking through the readme file, it looks like you have to know the component ID, but I want it to convert any component and its children to code.

How do I create the code for this in the JSON file? The example below is where the ID of the component is known in advance, but I would want this to work for all components:

"components": {
    "componentKeyABC123": [
      {
        "title": "Sample React",
        "language": "JAVASCRIPT",
        "code": "<MyComponent />"
      }
    ]
  }

We want to recursively render templates without having to parse children during template compilation. We want to have all the nested children params in the params object. This structure would allow for testing outside of the figma context on a nested params object and be more optimized.

Additional benefits:

• know the precise number of children that will render for a template (children that have a template with a shared title + lang), not just the number of children
• know if a template refers to specific params before generating them (#46 - svg export. we'd only want to supply this for templates that refer to it)

I'd like to use this issue to keep track of stuff I wish I could do with the templating logic.

Ideally, I wish I could use an established templating language like EJS or doT.js.

Ideally what I'm trying to do is custom build a single code snippet editor for MAUI XAML where it checkes the node.type and only shows the relevant class and its associated properties based on that.

eg. If I click on a frame it shows me the code I need for that frame, if it's an ellipse it shows me the code for that. So it would have all the different types in one code block and just have a {{?node.type=whatever}} in front so that it only shows the code for the selected node.

From what I can gather, I have to paste the template code to convert to my language of choice in spector for every node in Figma that I want to use. Even with components thats a lot of manual repetition.

Is it possible to set it up so that it is a default view and it will always show that code in the snipped editor plugin screen in Figma inspect, regardless of what node I have selected?

Hey,
I was wondering if there are any plans to support design tokens from token studio plugin.
I have no data how many people are willing to use both Code Snippet editor and token studio but my understanding is that those two plugin enable small/medium to automate code generating and tokens usage in their project. That kind of teams does not have capabilities to create plugin on their own so they are stuck on whatever is available. Just food for thought.

So first of all, this plugin is amazing! Thank you

Pretty sure I am encountering a bug where if a property has an underscore in the name, it always converts to a dash.

In figma our icons are named with underscores, so for example 'bug_report'
Adding that to the code as [iconName]="'{{property.statusIcon|raw}}'"

but I get back
[iconName]="'bug-report'"

so bug_report converts to bug-report, which isn't the valid name.

Is it possible to get all the separate properties from an effect, such as a drop shadow for example?

Currently, it only seems possible to get this from the CSS properties eg:

"css.boxShadow": "0px -1px 2px 0px rgba(0, 0, 0, 0.25)",

Ideally it would be great to be able to grab the X and Y Offset, Blur, Colour and Opacity values seprately so they can be converted into the format required for the programming language being used.

I'm using this to generate code for Ember, which uses handlebars as their templating language, so very similar to what this plugin is using. Ember code can look like this:

<IconButton @label={{t "some-variable}}" />

I want to generate the label part and want to let engineers fill in the string. Here is the code I use for the template of this plugin:

<IconButton @label={{t "..."}} />

which fails, as I think it can't interpret the t "..." part between the curlies.

Is there a way to escape the sequence of {{and }}?

I'm linking handlebars escaping mechanism for reference: https://handlebarsjs.com/guide/expressions.html#escaping-handlebars-expressions

Would the plugin support typescript in the future? We have to convert some of these functions into .ts files so it would be amazing to have it all hooked up

I'm trying to build up a list of conditional statements so I only see certain code if a node is of type Frame and different code if a node is of type ellipse, rectangle, text etc.

However if it's a component or an instance of a component then this doesn't work.

Is there another way to get the base node type of a node?

Hi Jake,

I can no longer see any of the code fields in the dev mode pane on the right apart from the global template editor code.

Has something changed?

Add a new JSON schema / type like:

type TemplatesByNodeType = { [k in BaseNode["type"]]?: CodegenResult[] }

For folks to hang templates on in the codebase itself and have that be the fallback.

This wouldn't work in the official plugin, but would be useful for folks who clone this and want to add templates for things like Typography and Layout components.

Hello :)
I have one simple question.
I added very simple snippet for button. I see the snippet for newly created instances of button but I'm not seeing anything on old components ("No snippets on this node. Add snippets via the Snippet Editor.")

With the support of figma.children, snippets are now easier to use. Thank you!
We believe that SVG strings and fimga.children will make it even more convenient.
Are there any plans to add SVG strings to params?

For example.

This button consists of an icon component and a text node.

This is what you want to display as a snippet in the button component

<Button>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
    <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z" clip-rule="evenodd" />
  </svg>
  <span>favorite</span>
</Button>

I think we can achieve this by registering a snippet like this in each template

Button	Text	Icon

In our design system, we have lots of different configurations of items, and designers sometimes often hide layers in certain variants where that configuration is not applicable. Should the templating system take into effect whether nodes are not visible before generating markup for those hidden nodes?

I am trying to output text to code using the plugin, but it doesn't work when some of the text is Bold for example. It just says the style is figma.mixed. How do I output this as different text blocks?

I am aware that the current textbox could be easily separated into two (stacked vertically), but often this isn't the case and they need to create a seemless paragraph with normal text and bold text being side-by-side and wrapping inside the frame/autolayout they are contained in. Is there a way to pickup the different sections of the text related to each style being applied or is there a way you can have text boxes fill and wrap inside an autolayout so that they look just like a single textbox?