Component Variables and Objects

[devinhalladay]

Schema should have a feature that allows designers to do two things:

• Interpolate placeholder text into an existing text layer, eg. Published at ${time}
• Store global content variables to re-use throughout a design, like a specific set of user information

This feature would become more powerful in combination with API Integrations, which would allow users to address a third use case:

• Interpolate response values from an API into text layers

Variables are scoped to a layer, and can be a layer name ({NAME}) or text layer content (Created by ${name}).

Variables can be filled in by selecting a single text layer or a frame containing multiple. Ideally, the plugin can use your variable names (eg. {time}) to auto-select a placeholder category for that variable (eg. Times).

The first part of this category is already built, which is essentially a panel that displays all text layers in your selection range, and allows you to select layers to fill out & select the type of content to fill.

There are a few more aspects of this feature that need to get finished;

• Better global state management for Panel options
• Ability for users to customize options for their variable types, by opening the variable type's panel (eg Times) and configuring the options.
• Improved support and UX for filling multiple selections at a time (eg. 10 instances of a single component)
• Definition of the UX of defining variables in layer names and text variables — what format to use, how to detect variable types in the plugin

[devinhalladay]

Another use case, which is more like "placeholder objects" than "placeholder variables":

• I have an atomic design system. One of my components, which is re-used across the product inside of cards and global navigation, is a UserAttribution component, which displays a user's name, avatar, and a short byline/credential.
• I'd like to be able to select an instance of that component and automatically fill each layer with appropriate placeholders.

Let's say this is my layer structure:

— UserAttribution<Instance>
    — {Avatar}<ImageLayer>
    — {Name}<TextLayer>
    — {Credential}<TextLayer>

I want to select the entire instance and open Schema to do the following:

• Fill {Avatar} with an avatar image.
• Fill {Name} with a user's name
• Fill {Credential} with text from a Custom List (Save custom lists #6)