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.
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.
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.
This project contains an expression error: error 1 of 1
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.
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.
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.
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
Here, you can see that we’ve pasted the value of
60.000000 into all of the
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.
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).
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.
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.
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.
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.