_Visual and interaction specifications

Resources to document your deliverables

Visual and interaction deliverables

Overview

The visual and interaction specifications show all the information needed to implement the design created in Figma seamlessly in code. This helps us think beyond a static canvas and improves the quality of our experience. These specs usually include spacing, sizing, viewport constraints, references for design system components, tokens, and annotations, and cover all the interaction patterns in use.

Utilities

To be as precise as possible when translating designs into implemented user interfaces, use this set of utilities to help them understand your design better. The idea is to share a common language between developers and designers.

Values

To be easy for everyone to identify what tokens are in use on the component, use these note pointers.

Color

Color

Use me to point to a specific element that uses a token color.

Component

Component

Use me to point to a specific stroke that uses a divider token.

Effect

Effect

Use me to point to a specific element that uses an effect token.

Font-size

Font-size

Use me to point to a specific text that uses a font token.

Additional note

Additional note

For anything else, you feel an additional note is needed, use the pointer without an icon.

Border

Border

Use me to point to a specific stroke that uses a divider token.

Anatomy

Use these utilities to define the width, height, size constraints, alignment, and interactive areas.

Area limit

Area limit

Use this to highlight the area of an element.

Spacing

Spacing

Use them to showcase the tokens used to apply spacing on the component.

Flex

Flex

Use this when you need a container to adapt freely to the viewport and changes.

Sizing

Sizing

Use this to define the fixed size of an element.

Full width

Full width

Use this when you need a container to expand in width to the limits of the viewport.

Min/Max values

Min/Max values

Use this to define an element's maximum and minimum width/height.

Stickiness

Stickiness

Use this pointer to define how the element sticks when the viewport changes.

Alignment

Alignment

Use this pointer to define how the element aligns with the container.

Interactive area

Interactive area

Use this pointer combined with the “Area Limit” utility to define the interactive areas.

Behavior

Use these utilities to define how the component behaves when users interact with it

Cursors

Cursors

Use these cursors to clarify what happens when the mouse falls within the interactive areas of the component.

Flow

Flow

Use these arrows with notes to clarify what happens when the user interacts with a component.

Usage

When preparing a component for implementation, we need to take care of the following areas:

  • Anatomy
  • Values
  • Interaction states
  • Behavior

Anatomy

This is all about how the different parts of the component are assembled and respond to viewport changes. Make sure to specify which are the interactive areas on the component.

Anatomy

Values

Make explicit the values for each part of the component, including other components.

Values

Interaction states

Showcase the interaction states and the specific values that apply to each.

Interaction states

Behavior

Showcase how users interact with the component and how the component responds.

Behaviour

Template

This template will help everyone to share, consume and locate component specifications for implementation.

  • Sections cover all the parts needed to be able to deliver the component in quality
  • Subsections help you organize the components' different parts and interaction states. Use them freely.
  • The quality checklist helps you to make sure the component is using the quality standards for the maturity level
template