Text and effect styles

A style is a named set of values your file shares. A text style holds a font, its weight, size, line height, letter spacing and the rest of the type settings: Heading / H1, Body / Regular. An effect style holds a layer’s shadows and blurs: Elevation / Card. Change a style and every layer that uses it changes, on every page of the file.

Colours are not styles in uxdeck. Keep them as colour variables, which also give you modes such as Light and Dark.

Create a style

1. Select one layer that looks the way you want: a text for a text style, a layer with a shadow for an effect style (any blurs it has come along too).
2. Open the style row: at the top of the Typography section for text, at the top of the Shadow section for effects. It reads Apply text style (or No text styles yet in a new file).
3. Choose Create text style… (or Create effect style…), type a name and confirm.

Name it with a slash, such as Heading / H1, and it is filed in a Heading group in the menu and in Assets.

Apply a style

• Select one or more layers, open the style row and pick the style. The menu shows each text style’s font and size beside its name.
• Or open the Assets tab: Text styles and Effect styles list every style with how many layers use it. Select layers and click a style to apply it.

A layer that follows a style shows the style’s name in the row. Several layers with different styles read Mixed styles.

Change a style everywhere

1. Change one layer that uses the style: a bigger size, a softer shadow.
2. Open the style row and choose Update Heading / H1 from this layer (the style’s own name is in the item).

Every layer that uses it changes, on every page. Someone else’s change to a style reaches you as soon as they make it.

Rename, detach and delete

From the style row:

• Rename style… changes its name everywhere.
• The unlink button beside the row (Detach style) keeps the layer’s look but stops it following the style.
• Delete style… asks first. The layers that use it keep how they look and stop following it.

What a text style holds

Font family, weight, italic, size, line height, letter spacing, text case, underline, strikethrough, paragraph spacing and paragraph indent. Colour and alignment are not part of it: set those on each layer, or use a colour variable. See Text and type settings.

An effect style holds the layer’s whole list of effects: drop and inner shadows, layer blur and background blur. See Fill, stroke, shadow and blur.

On your site

When you publish or export, text styles become CSS classes, so the type scale in your code reads the way you designed it.

Catches

• Changing a value by hand detaches. Set a different size on a heading that follows Heading / H1 and it stops following the style. Update the style from it if you meant to change them all.
• Mixed styles in one text keep their values but not the link to a style.
• There are no colour styles or grid styles. Use colour variables for colours.
• Create and Update need one layer selected, so uxdeck knows whose values to take.
• Styles belong to their file. A Figma file you import brings its text and effect styles with it, and its colour styles as a colour variable collection.

Text and effect styles are on every plan.