Flinto supports drawing vector shapes using Bézier paths. This allows for drawing almost anything such as icons and illustrations. The control points of vector shapes can be animated in the Transition Designer and Behavior Designer.

Ways to create vector shapes

  • Use the insert menu in the toolbar and choose Vector, then click to add points
  • Press the “v” shortcut on your keyboard, then click to add points
  • Import a rectangle from Sketch using the Send to Flinto Sketch plugin.

Tips for drawing vector shapes

  • Vector points are added by clicking when the vector tool is active
  • Clicking and dragging while adding a new point will create a curved point
  • Clicking on the first point will close the path into a shape.
  • Holding space while dragging a control point handle will allow momentary dragging of the control point
  • The type of control point can be changed in the inspector using the Point Type menu

Tips for editing vector shapes

  • Double click on a vector shape to edit it’s points
  • Click and drag a point to move it
  • Click a point once to reveal it’s handles, which can be adjusted
  • Press delete to remove selected control points
  • Shift+click to select multiple control points, or click and drag
  • With multiple control points selected, alignment controls can be used
  • Press escape to finish editing

Control point types

Double clicking a control point will toggle between mirrored and straight control point types. This can also be changed in the inspector for the currently selected points.

  • Straight: A sharp corner
  • Mirrored: Control point handles mirror one another
  • Disconnected: Control point handles are completely independent
  • Asymmetric: Control point handles have the same angle but independent distance from the control point

Editing vector shape properties

The draw shapes documentation covers the properties that can be edited for vector shapes.