Open adevade opened 4 years ago
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)
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:
tailwind.config.js
from a git repo or a direct url for truly real-time design systemI 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?
@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
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?