Visible Property 2

About this plugin

Visible Property 2 will help you creating documentation for hand off. It will update label following reference's component whenever you call the plugin.

Video Tutorial

https://youtu.be/NoihOB1Z6qM

✨ Quick start:

Select "Generate All Color Styles" in plugin menu. Plugin will create Pantone for all of your Color styles

🐷 How it works:

1. Define reference element by adding "#" in front of a layer name. For example, "#color"
2. Defile text element you want to update (#reference + . + method). For example, "#color.fill", "#color.fillRGB", "#color.height" etc.
3. Call the plugin by typing "cmd + /" -> "visible property 2"

🐯 Tips

You can refer to the parent layer by using "##Parent" or "##TopParent" without inserting a layer name.

For example,

• ##Parent.name or ##Parent.fill
• ##TopParent.name or ##TopParent.fill

🦁 Properties:

Fill

• fill -> #123456 78%
• fillRGB -> rgba(123, 456, 789, 1)
• fillHSL -> hsla(123, 456, 789, 0.1)
• fillHSB -> hsba(123, 456, 789, 0.1)
• fillStyle -> DarkBlue
• fillStyleDescription -> The Description

Stroke

• stroke -> #123456
• strokeRGB -> rgba(123, 456, 789, 1)
• strokeHSL -> hsla(123, 456, 789, 0.1)
• strokeHSB -> hsba(123, 456, 789, 0.1)
• strokeStyle -> DarkBlue
• strokeStyleDescription -> The Description

Text

• font -> Roboto
• fontWeight -> Bold
• fontSize -> 12
• paragraphIndent -> 12
• paragraphSpace -> 12
• letterSpace -> 12 or 12%
• lineHeight -> 12 or 12%
• textStyle -> Body
• textStyleDescription -> The Description

Size

• height -> 32
• width -> 64

Layer

• name -> layer name

Component

• description -> component description

Note: This plugin only supports gradients with default Start/Stop positions

☕️ Love this plugin: buy me a coffee

This plugin is an open-source on github