Designing

How to design your assistant on Voiceflow.

Components/Flows

An overview on how you create reusable design and functionality for your projects.

Overview

Say goodbye to copy and pasting sets of steps across projects! With components (also known as Flows), you can now easily organize and reuse collection of steps with a single click. Components or Flows are paths or sections that can be re-used throughout your project.

You might use a Component to define commonly used:

  • back-end functions
  • business logic
  • generalized processes

This allows designers to have the ability and flexibility to build a catalog of re-usable patterns or functions, and eliminates the need to copy/paste or manually rebuild recurring aspects of a design, and can be called upon at any time.

Components help your projects and designs scale and stay organized by creating pieces of logic that can be referenced and re-used repeatedly within your project.

Creating Components

When opening a new Voiceflow project, you’ll notice that the sidebar in your canvas has two tabs that have your project's Layers and Steps.

There are multiple ways to create a Component (also known as flows):

  • Selecting Blocks on the Canvas (Drag or Shift+Click)
  • Using the Flow (Component) Step
Note: Previously, you will have used “Flows” in your sidebar & projects, instead you’ll see a space for your project's Topics and Flows/Components under Layers.

On-canvas block selection

You can convert blocks on your canvas into a Component by:

  • Click + Dragging the Cursor over your chosen area OR
  • Holding ⬆️ Shift and making your selection of block(s)

Once you’ve chosen your block(s), select the ‘Create flow’ option in the header. You will automatically be directed to the Component’s Canvas View, where you can make any desired edits.

Tip: You can use the Hot Key:  ⬆️ Shift + Command + K to create components quickly, once you have your block selection.

You are also able to enter and edit your newly created component by double-clicking on the desired component/flow in the sidebar on the canvas. Alternatively, you can also do this by hovering over your selected component on the Canvas and clicking into it.

Once a component is created and configured, they will now be considered as holistic elements or steps that you can drag onto the canvas and use/re-use repeatedly like any other block.

Note: If you modify or make changes to a components or its contained elements, ALL of the instances of that component across your project will be updated.

Using the FLOW Step

Alternatively, you can create Components (Flows) from the Flow step itself. Simply type in a new name into the input and hit enter.

Using a Component in Design

You can apply a component to your design by:

  1. Dragging in an existing Component (Flow) from the Layers menu, under the Flows section onto the canvas
  2. Dragging in a new 📁 Flow (Component) step from the Steps menu
Tip: Components can be used both for functional conversational streams and back-end operations, i.e. API protocols, data pulls, or a collection of reusable prompts & entities.

Converting a Component (Flow) into a Topic

Note: For legacy/previous projects that are duplicated, any 'flows' will be automatically converted as components. If a certain component is more suitable as a topic, you have the flexibility of converting it into a Topic.

To convert a Component into a Topic, right-click on the desired Component (flow) under the Flows section, and select the ‘Convert to Topic’ option in the menu.

Other docs in this section