figma / code-snippet-editor-plugin

Translate component variants, properties, and more into dynamic code snippets for your design system.
https://www.figma.com/community/plugin/1311777988952403297/code-snippet-editor
MIT License
126 stars 11 forks source link

Reusable code blocks #14

Closed mikeysouthwell closed 5 months ago

mikeysouthwell commented 5 months ago

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?

jake-figma commented 5 months ago

Ok. So. I totally understand the use case. Examples for me are a <Layout /> type template for any instance of an autolayout and <Typography /> template for text nodes.

Theres no good way to utilize a template like this, unless it is hardcoded in the plugin codebase. This is because there's nothing to store the template on other than a node, or in local data for the user. If you want to distribute these templates to your team, theres nowhere to save it for them. UNLESS, it is hardcoded into the plugin itself. Then the templates would be distributed with the private plugin for your team.

To do what you're trying to do, you can clone this repo, and hardcode a template for each global node type you want to render for. Then, write a function that detects when there isn't a template saved in the node's plugin data. Instead of rendering nothing in that case, render the hardcoded templates for the node type.

I want to create an example of this in the codebase so that it would be easy to extend, it will just take some time for me to get to that though.

jake-figma commented 5 months ago

21 is where I am tracking an example of this idea as an enhancement