[Feature Request] Importing more than "just" the colors

[adevade]

Would it be possible to import the shadows from a config? How about the font settings?

I can look into it if you don't have time, but I'm not much of a JavaScript (and even less TypeScript) developer. If I find something of value I might submit a PR, and maybe you can get it into shape?

[ecklf]

Nice to see you again with another suggestion :).

Shadows: Possible but with limitations. Figma does not support spread shadows yet, so there would need to be a function that handles cases where users want to add spread shadows and figures out a value that is possible in Figma.

https://www.figma.com/plugin-docs/api/EffectStyle/

Fonts: Also possible but there are just a lot of different edge cases that can happen regarding the naming. One example would be -apple-system which would be San Francisco in Figma (if available). Not sure if there is an API for figuring out whether the font is available or not, but that would certainly be a plus to not run into "font not found errors" after adding the styles.

https://www.figma.com/plugin-docs/api/TextStyle/

I'll see what I can do. Feel free to post whatever you come up with (or PR if you feel brave)

[iljapanic]

I'm working on a design system for our company and would love to base it in large part on Tailwind. The idea is that tailwind.config.js serves as a single source of truth for both designer and developers.

The colors are a crucial building block for a such system. IMHO the following are next on the list for a well-functioning system:

• typographic scale
• spacing
• sourcing tailwind.config.js from a git repo or a direct url for truly real-time design system

I have never developed a plugin for Figma but I'm happy to learn. Could you point me in the right direction for contributing to your plugin?

[ecklf]

@iljapanic all of the above can be implemented.

Basically the flow of this application is: Config -> Store -> Plugin message -> Figma API

Config is being parsed here: (still needs a lot of improvements since it evaluates JS during runtime)
https://github.com/impulse/tailwindcss-figma-plugin/blob/master/src/core/config.ts#L7

Config data is being stored in a mobx-state-tree store. You can define models, actions and generated views there (see mst docs for details).
https://github.com/impulse/tailwindcss-figma-plugin/blob/master/src/models/Root.ts#L16

For talking to the Figma API you can call sendPluginMessage in the Root store. code.ts is where you can wait for messages and start calling everything related to Figma's API.
https://github.com/impulse/tailwindcss-figma-plugin/blob/master/src/code.ts#L16