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
- Content across different states or moments. For instance, variants for empty state and populated state or beginner, novice, intermediate.
- Various levels of formality. Like variants for formal, informal, and in-between
- Managing content in many/lengthy flows
- Steve Cusumano: Allowing writers to centrally manage variants during design/prototyping. Change copy after feedback → change trickles into all instances in the flow.
- 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!