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.


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.

Screen capture showing the JavaScript Expressions Engine setting for an After Effects project.

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


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.

Screen capture showing Style Panel before loading a dictionary

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 Style Panel 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.

Screen capture of Style Panel with dictionary loaded

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.

Once you’ve applied a style, the Style Panel shows the link.

Screen capture of Style Panel showing a style applied to a layer

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!”

Screen capture of Style Panel showing a Layout style value copied to the 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.

Screen capture of the You.i Properties Panel showing a Layout style value pasted from the Style Panel

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.

Screen capture of Style Panel showing how to filter color styles by brand

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.

Screen capture of Style Panel showing how to clear a filter

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 Style Panel Unlink Styles icon.

To unlink all styles from all layers in your project, make sure no layers are selected, and in the Style Panel, click Unlink Styles Style Panel Unlink Styles icon. 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 Style Panel 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.

Screen capture of You.i Style Panel Logs window

The Logs icon Style Panel Error icon also changes to red.

If warnings are detected, the Logs window doesn’t pop up, but the Logs icon Style Panel Warning 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.