continuing-cyan•15mo ago
ui change
[Need help] I'd like to change the design like the attached image, so please let me know if it's possible
1 Reply
To change the design of your Voiceflow project to align with the attached image, you can follow these steps:
Adding Images to Your Design
1. Add Images: Click the Image icon (or use the keyboard shortcut 'I') in the assistant's top menu. Choose the image you wish to add to the canvas and hit Open in your system dialog.
2. Resize and Position: You can drag and resize images as necessary. Hover and click over a desired image to trigger resizing controls.
3. Remove Images: To remove an image, simply hit [Del] on your keyboard. You can also right-click on the desired image markup to Delete, Duplicate, or Copy.
Customizing Your Prototype
1. Change Colors: From the 'Share' menu, you can add a hex code manually in the given field or pick a color from the color graph selector for your prototype's buttons and bolded text.
2. Add Custom Icons:
- Brand Image: Upload an icon that represents the company or brand of the assistant. The icon will persist at the upper left of the prototype.
- Message Image: Upload an icon that represents the individual or character that the user is communicating with.
Path and Connection Settings
1. Change Canvas Lines: You can change your canvas lines to be either straight or curved. By default, lines are straight but can be changed to curvy. You can switch path modes back and forth at any time.
2. Customize Line Colors and Text: You can also change the color and add accompanying text to any line.
Additional Settings
1. Navigation Mode
2. Zoom Type
3. Line Type
4. Canvas Grid
These settings can be toggled from the Settings tab to enhance and configure your designing experience.
For more detailed information, you can refer to the following links:
- Canvas Markup
- Commenting