Applying Styles with the Style Panel
Motion designers can use the You.i Style Panel to apply color, typography, and layout styles from a style dictionary to design system components in After Effects. Whenever the style dictionary changes, designers can reimport it, automatically updating the linked styles.
The Style Panel supports style dictionaries extracted from Figma or Sketch using the Style Extractor. To extract a style dictionary from a Figma file see Extracting Styles from a Figma Design File, and for Sketch files see Extracting Styles from a Sketch Design File.
The Style Panel forms part of the Design Workflow when your organization develops apps with After Effects or with both After Effects and JSX.
If you’re developing apps with JSX only, see Using a Style Dictionary instead.
Prerequisites
After Effects 2020 at Minimum
The Style Panel requires After Effects 2020, minimum. If you use an earlier version of AE, you won’t be able to apply typography styles to text layers.
JavaScript Expressions Engine
Your After Effects project must use the JavaScript Expressions Engine.
If you created your project in AE 2018, you’ll need to change this setting. To check which expressions engine is set for your AE project, go to File > Project Settings and select the Expressions tab.
If your project does not use the JavaScript Expressions Engine, when you try to apply a typography style to a text layer, you’ll see an error like the following:
This project contains an expression error: error 1 of 1
Installation
The Style Panel is one of the You.i After Effects plugins. You can install the plugin on macOS or Windows.
Accessing the Style Panel
To access the Style Panel from within After Effects, select You.i Style from the Window menu. You can arrange the Style Panel in your workspace like any other AE panel.
Loading a style dictionary
Currently, the Style Panel supports style dictionaries extracted from Figma, see Extracting Styles from a Figma Design File, and style dictionaries extracted from Sketch, see Extracting Styles from a Sketch Design File.
In the Style Panel, click the Load button
and browse to a style dictionary JSON file.
If you just want to try it out, use this example JSON file.
Once you’ve loaded a dictionary, its styles appear under Color, Typography, and Layout.
See Troubleshooting below to learn about errors and warnings.
Applying Color or Typography styles
You can apply styles to Solid, Shape, and Text layers.
To apply a style to a layer, select the layer, go to the Color or Typography tab in the Style Panel, and click the style you want to apply. The style is now linked to the layer, so if you refresh the style dictionary or load a new version, the link is preserved.
You can apply a style to multiple layers or strokes at the same time with multi-select.
Once you’ve applied a style, the Style Panel shows the link.
If the selected style contains a stroke property, the stroke property will only apply to shape strokes. You can also apply styles to parts of layers, such as a shape stroke or fill. Fill properties can be applied to shape strokes if the selected style has no stroke property, and a shape stroke is selected directly.
Applying Layout styles
Layout styles are handled differently from Color and Typography styles.
To apply a layout style, select it in the Style Panel’s Layout tab. You’ll see the message “Value copied to clipboard!”
Now, select a layer in your composition.
In the You.i Properties Panel, paste the clipboard contents into the appropriate Layout property field, such as Margin or Spacing.
Here, you can see that we’ve pasted the value of 60.000000 into all of the Padding properties.
Layout styles are not linked to layers in your composition. So, to clear a layout style, you need to clear the value from the You.i Properties Panel.
If you refresh the dictionary, Layout styles in the dictionary are updated, allowing you to copy and paste these values again.
Filtering styles
Use the Filters drop-down to narrow the list of styles displayed in the Style Panel. For example, if your style dictionary groups Color styles by brand, you can use the filters to view only styles for a particular brand. Likewise, if your style dictionary groups Layout styles by form factor, you can use the filters to view only Handset styles.
Filters persist across all Style Panel tabs until you clear them. To clear all filters, click the Show All box in the Filters drop-down.
To clear an individual filter, uncheck it (clear the checkbox).
Unlinking Color and Typography styles
Generally, you’d want to apply only styles from your organization’s style dictionary. However, if you need to apply styling manually to a specific layer, you can unlink a style from a layer.
To unlink one or more styles from one or more layers, select the layer(s), and in the Style Panel, click Unlink Styles
.
To unlink all styles from all layers in your project, make sure no layers are selected, and in the Style Panel, click Unlink Styles
.
A confirmation dialog appears.
If you’re sure you want to unlink all styles for all layers, click Unlink All.
Refreshing a style dictionary
If the style dictionary has changed, or if you’ve made style changes to individual layers that you want to override, you can refresh the style dictionary.
To do so, click the Refresh button
in the Style Panel.
Limitations
If a style with both fill and stroke properties is applied to a shape layer with strokes and the stroke property is later removed from the style, the shape layer stroke will be updated to use the properties of the fill when you refresh the style dictionary.
Troubleshooting
When you load a style dictionary, if errors are detected, the You.i Style Panel Logs window pops up.
The Logs icon
also changes to red.
If warnings are detected, the Logs window doesn’t pop up, but the Logs icon
changes to amber.
Click the Logs icon to review the messages.
Once you’ve reviewed the messages, you can click Clear to clear the list.
If you previously cleared errors and warnings and you want to see them again, refreshing the style dictionary restores all messages to the Logs window.