Smart Text

<p>With Smart text you can create custom text expressions with special tokens connected to the properties of your layers. </p><p>Tokens grant you access to layer’s properties, such as size, position, transforms, colors, fonts, styles, names, effects and much more.</p><p><br></p><p>After you make changes on the connected layers, the plugin will update the expressions content with up-to-date data from the layers.</p><p><br></p><p>Documenting design has never been easier: Create and maintain automatic documentations, style-guides, brand manuals, dev specs or any design templates, right in Figma.</p><p><br></p><p>——————————————————</p><p></p><p>HOW TO CREATE SMART EXPRESSIONS</p><p><br></p><p>1. Access the plugin and select the Insert Tab.</p><p>2. Select at least one layer to connect on the canvas. Plugin will detect your selection and will show the name of the selected layer, or ‘Mixed’ if more than one layer is selected.</p><p>3. Add tokens on the expression input by clicking the items in the Tokens list. The plugin will give you a live preview of the result for the first selected item.</p><p>4. Create a custom expression by mixing plain text and tokens inside the Expression field.</p><p>5. Click Insert to add a text layer containing the expression, on top of each selected layer.</p><p><br></p><p>Note: Editing the content or tokens of an expression after the insertion is not currently supported. You’ll have to add a new expression with desired values.</p><p><br></p><p>——————————————————</p><p></p><p>HOW TO SYNC SMART EXPRESSIONS</p><p><br></p><p>1. Access the plugin and select the Resolve Tab.</p><p>2. Select a scope from the Picker. You can choose to resolve the current Selection, Current Page or the Entire Document.</p><p>3. Click Resolve to proceed. The plugin will detect all available expressions in the Scope and update the content based on the current layer properties.</p><p><br></p><p>Note: Expressions connected to missing or deleted layers will be ignored and tagged as Broken. Reconnection is not supported currently.</p><p><br></p><p>——————————————————</p><p><br></p><p>HOW TO CUSTOMIZE TOKENS OUTPUT VALUE</p><p><br></p><p>Some tokens allow their output value to be customized. These tokens use square-brackets in their name. You can customize their output by changing the value inside.</p><p><br></p><p>Colors: [HEX] -&gt; [RGB]</p><p>Date: [MM.DD.YYYY] -&gt; [<a href="http://hh.mm.ss" rel="noreferrer noopener nofollow ugc" target="_blank">hh.mm.ss</a>]</p><p><br></p><p>---</p><p><br></p><p>Available Color Outputs (case-insensitive)</p><p>HEX, RGB, CSS, HSL</p><p><br></p><p>Available Date Output (case-sensitive)</p><p>See full list of formats here: <a href="https://devhints.io/moment" rel="noreferrer noopener nofollow ugc" target="_blank">https://devhints.io/moment</a></p>