fromCSS

About this plugin

Write, paste, and apply CSS

Select node/nodes to apply .fromCSS styles. After plugin relaunch .fromCSS block will be blank.

Write your notes below .fromCSS block. Notes will be saved in the same place after plugin, project or even Figma relaunch.

Use cases

1. Apply CSS from different generators like: https://neumorphism.io/, https://brumm.af/shadows, https://www.cssmatic.com/box-shadow
2. Get rid of manual adding effects from CSS.
3. Save CSS notes to reuse in the project.
4. Edit node properties fast

How it works

1. You can select a node or nodes before or after the plugin is launched. When you change the selection styles from the block .fromCSS will be applied immediately.
2. Block .fromCSS must be the first. The name can be changed.
3. When applying styles for effects and backgrounds, the plugin looks for conflicts and removes only effects and fills with the same type as you have in CSS, while all the others remain unchanged. Conflicts are searched individually for each selected node.
4. If you add something inside the plugin, you will see changes, and if you decide to delete something via plugin nothing will happen, this is due to the specifics of the plugin: quickly add with removing conflicts, but do not replace the functionality of standard controls in Figma.

What is supported (the rest is ignored by the plugin)

1. width
2. height
3. opacity
4. mix-blend-mode
5. border-radius
6. background
7. background-color
8. background-blend-mode
9. box-shadow
10. backdrop-filter: blur()
11. transform: rotate()
12. filter: blur()
13. color
14. font-size: px, rem, em, %
15. line-height: px, rem, em, %, and unitless shorthand
16. text-align
17. text-decoration: except overline
18. text-transform
19. text-shadow

Future releases

Borders, Background images: images, gradients(I'm in search of a good parser for the last one).

Demonstration

https://youtu.be/zVazGBugYpA

Support

https://jamillazarev.gumroad.com/l/fromCSS

Contributors

Jamil Lazarev 🇦🇿: Plugin creator and maintainer

Twitter | Github

Tait Brown 🇦🇺: Added font support

Twitter | Github