Consider adding a Figma plugin for this tool

[ebrelsford]

In relation to #19, let's at least explore what it would take to make a Figma plugin that pulls in all or part of this tool.

For example, the plugin could take a style JSON and show the entire tool, or maybe just the typography chart (since the rest could be pulled in as an SVG).

It could be worth exploring how difficult making such a plugin is and how useful it would be, both for this and for other projects under the carto tools banner.

[aparlato]

@ebrelsford I spent some time looking into this and think I have a good path.

Originally I tried exploring figsvelte to turn this tool into a plugin, but as I continued reading, I learned that Figma plugins basically accept a single file to use which made me think we could make a more general template here.

I was able to find a tool to create single HTML files with inline CSS and JS from locally running servers and I ended up creating a pretty simple tool/template locally that lets you run a script while separately running any app locally (mapbox-gl-style-design-system or the compare tool, or other) and automatically make it a Figma plugin.

I currently don't have permissions to make a repo in the stamen org, so what would be the best way to show this proof of concept?

[aparlato]

I should also clarify, this would solve using the tools as they are in Figma but would not address any way that they directly make changes in Figma which would require more custom approaches per tool. Let me know if this is something we're thinking about!

[ebrelsford]

I currently don't have permissions to make a repo in the stamen org, so what would be the best way to show this proof of concept?

I'm happy to make you a repo--just give me a name.

...this would solve using the tools as they are in Figma but would not address any way that they directly make changes in Figma which would require more custom approaches per tool.

Thanks for noting that, it feels appropriate to start with loading the tool read-only in Figma.

[aparlato]

I'm happy to make you a repo--just give me a name.

@ebrelsford thanks! Is carto-tools-figma-plugin-template too long you think? I lean towards more descriptive titles but open to anything! I guess we can always change it if we want.

Thanks for noting that, it feels appropriate to start with loading the tool read-only in Figma.

Cool, sounds good! 👍

[ebrelsford]

carto-tools-figma-plugin-template

Created it, you should have access via the carto-tools team.

[aparlato]

Hmm, @ebrelsford looks like I do not have permissions to view yet. I had this happen with another repo this morning as well, so I wonder if I'm not added to the right team in Github.

[ebrelsford]

@aparlato Indeed, you weren't on the carto-tools team and now you should be. Please let me know if that works!

[aparlato]

@ebrelsford it worked, thanks! I went ahead and pushed straight to main since it was an empty repo, but realizing now that that may not necessarily be the best way for you to leave comments.

Maybe for now you can leave initial comments here on this ticket and then we can open tickets in that repo from there if the direction feels good? Let me know if you think there's a better way!

https://github.com/stamen/carto-tools-figma-plugin-template/

Also, I want to note that ui.html gets generated by the script as described in the README, but for now I also went ahead and pushed up a ui.html that reflects the mapbox-gl-style-design-system tool. Since this repo is a template, I think I'd want to update this to be some generic HTML with some descriptive copy that gets overwritten.

[ebrelsford]

That works! Created this general issue around what we want out of a plugin like this.

[mulloverit]

Sounds like we are past the process of "consider" adding this tool now that we have a repo for it. @aparlato is it ok with you if we close this issue and move energy over to https://github.com/stamen/carto-tools-figma-plugin-template/issues/1 ?

[aparlato]

Sounds like we are past the process of "consider" adding this tool now that we have a repo for it.

@mulloverit this was kind of an exploratory issue and the issue you reference talks about how it might be more helpful to make something more specific to this tool.

I'm ok with closing this though and either continuing the work in that repo, if helpful, or opening a new more targeted issue here for turning our design system tool into a Figma plugin now that we know more though. @ebrelsford does this evaluation sound right to you?

[ebrelsford]

Yes let's close this. For now I'm happy to stick with the issue in the other repo, if it turns out that we need to do something here specifically let's open new issues for that.