lukasoppermann / elevation-scale

Figma plugin to create elevation systems based on functions.

Elevation Scale

Create shadow systems and effect styles with your choice of steps from a custom function.

Installation

1. Go to the elevation scale plugin page
2. Click on install in the top right corner

Usage

1. Run the plugin and click the Create a new elevation scale button
2. Select the elevation scale frame
3. Adjust the settings to your liking

Changes are automatically applied and saved.

Steps

Steps 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 Styles

To 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

If you disable Sync Styles the effect styles will be deleted as well.

Properties

• Shadow type: Either dropshadow or innershadow
• x: 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+#)*4
• spread: The shadows spread. # is replaced by the current step. E.g. #/.5
• color: a 6-digit hex color code between 000000 and FFFFFF
• opacity: The opacity for the color. # is replaced by the current step. E.g. 10+# if # = 1 -> 11%

Adding Layers

An 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.

elevation-scale's Issues

Highlight # in textfields on blur (or with hidden & overlayed textfields)

Style text field content a bit

Add step to the end of style name if no # is present

Save settings on toggle sync styles

Copying scale creates unexpected behavior

• style is connected
• style name is not synced

Solution:

On copy...

• detach styles from copied scale
• set sync styles to false

This could potentially be achieved by adding the id of the frame to the container data and in selection checking if the id matches with the container. If not, detach styles, unset sync styles and update the id in the data.

Keyboard navigation

• Allow user to switch fields with tab key
• autofocus on loading the plugin
• autofocus on selection change

Add default style name

Delete styles when disabling sync styles

Feature: Add Presets

A dropdown that allows the user to select a preset like material design elevation scale.