Elevation Scale
Create shadow systems and effect styles with your choice of steps from a custom function.UsageRun the plugin and click the Create a new elevation scale buttonSelect the elevation scale frameAdjust the settings to your likingChanges are automatically applied and saved.StepsSteps are the amount of elevations/shadows you want to create. For example steps:2 will create two shadows each with all the layers you specify.Effect StylesTo automatically create & update effect styles enable the Sync Styles option. You can optionally provide a style name that will be used to create the effect styles. If you add a # to the name it will be replaced with the current step. A ## will result in a 0 prefixed number if below 10.// Example style name with # Elevation / Level # // Elevation / Level 0, Elevation / Level 1, ... // Example style name with ## Elevation / ##dp // Elevation / 00dp, Elevation / 01dp, ..., Elevation / 12dp PropertiesShadow type: Either dropshadow or innershadowx: The x offset of the shadow. # is replaced by the current step. E.g. .5*#y: The y offset of the shadow. # is replaced by the current step. E.g. 2+#blur: The shadows blur radius. # is replaced by the current step. E.g. (1+#)*4spread: The shadows spread. # is replaced by the current step. E.g. #/.5color: a 6-digit hex color code between 000000 and FFFFFFopacity: The opacity for the color. # is replaced by the current step. E.g. 10+# if # = 1 -> 11%Adding LayersAn elevation step consists of one or more elevation layers (each `layer` is an effect e.g. a dropshadow or innershadow). Each layer you add will be present on each step.To add a new layer, click the "Add layer" button below the list of layers.To delete a layer click the trash can icon next to the layer name. (You can not delete the last layer)Layer names are purely for your organization of the different layers and have no effect on the elevations or the names.Bug reports, PRs & feature requestsIf you find a bug or want to help by suggestion or even developing a feature, please reach out on the github project page: https://github.com/lukasoppermann/elevation-scale/issues
Plugin Preview
About this plugin
Create shadow systems and effect styles with your choice of steps from a custom function.UsageRun the plugin and click the Create a new elevation scale buttonSelect the elevation scale frameAdjust the settings to your likingChanges are automatically applied and saved.StepsSteps are the amount of elevations/shadows you want to create. For example steps:2 will create two shadows each with all the layers you specify.Effect StylesTo automatically create & update effect styles enable the Sync Styles option. You can optionally provide a style name that will be used to create the effect styles. If you add a # to the name it will be replaced with the current step. A ## will result in a 0 prefixed number if below 10.// Example style name with # Elevation / Level # // Elevation / Level 0, Elevation / Level 1, ... // Example style name with ## Elevation / ##dp // Elevation / 00dp, Elevation / 01dp, ..., Elevation / 12dp PropertiesShadow type: Either dropshadow or innershadowx: The x offset of the shadow. # is replaced by the current step. E.g. .5*#y: The y offset of the shadow. # is replaced by the current step. E.g. 2+#blur: The shadows blur radius. # is replaced by the current step. E.g. (1+#)*4spread: The shadows spread. # is replaced by the current step. E.g. #/.5color: a 6-digit hex color code between 000000 and FFFFFFopacity: The opacity for the color. # is replaced by the current step. E.g. 10+# if # = 1 -> 11%Adding LayersAn elevation step consists of one or more elevation layers (each `layer` is an effect e.g. a dropshadow or innershadow). Each layer you add will be present on each step.To add a new layer, click the "Add layer" button below the list of layers.To delete a layer click the trash can icon next to the layer name. (You can not delete the last layer)Layer names are purely for your organization of the different layers and have no effect on the elevations or the names.Bug reports, PRs & feature requestsIf you find a bug or want to help by suggestion or even developing a feature, please reach out on the github project page: https://github.com/lukasoppermann/elevation-scale/issues
Plugin Details
| Version | 10 |
|---|---|
| Created | February 9, 2021 |
| Last Updated | March 5, 2021 |
| Category | Software development |
| Creator | Lukas Oppermann |
| Stats | 2897 installs, 154 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:dist/ui.html
- main:dist/plugin.js
More Like This
Discover other plugins in the Software development category.
Figma to Code (HTML, Tailwind, Flutter, SwiftUI)
Code Conversion Made Easy: Figma to Web & Apps
Builder.io - Figma to Code & AI Apps (React, Vue, Tailwind, etc)
Export designs to clean, responsive code or turn Figma screens into AI apps and prototypes.
SkewDat
Skew any layer or group with all layers preserved to edit.