Content variants in Figma

Jason Fox

·

Follow

2 min read

·

Mar 7, 2022

--

2

Listen

Share

Instructions

• Open Figma!
• [control] + right click a text layer

• [option] drag the text layer out of the frame

• Duplicate the text layer (1 layer for each variant) and create variants!

• Create component set

• Revise variant labels

• Organize into a frame with grids and labels

• Delete the original text layer and replace with new component

• Try it out!

Some use cases

1. Content across different states or moments. For instance, variants for empty state and populated state or beginner, novice, intermediate.
2. Various levels of formality. Like variants for formal, informal, and in-between
3. Managing content in many/lengthy flows
4. Steve Cusumano: Allowing writers to centrally manage variants during design/prototyping. Change copy after feedback → change trickles into all instances in the flow.
5. Steve Cusumano Once design is ready for dev, assemble all content variant components into a dedicated frame or page for engineers to reference. No more final.final.v3 copy docs in Word — same content from the prototype is used to create a dynamic copy doc in Figma!