Flinto supports drawing vector rectangles and ovals. Freeform vector shapes are also supported using the vector tool.

Advantages of vector shapes versus bitmap images

  • Vector shapes remain crisp when scaled or rotated.
  • Vector shapes have several properties that can be animated such as
    • Control point position
    • Drop shadow
    • Border width and completion
    • Fill color
    • Corner radius

Ways to draw a vector shape layers

  • Use the insert menu in the toolbar and choose Rectangle, or Oval then click and drag on a screen.
  • Press the “r” shortcut for rectangle or the “o” shortcut for oval, then click and drag on a screen.
  • Import vector shapes from Sketch using the Send to Flinto Sketch plugin.

Editing vector shape layer properties

With a vector shape layer selected, there are several properties that can be edited in the inspector such as fill, border, shadow and radius. Most properties can be animated in the Transition Designer and Behavior Designer.

  • Radius: Size of rounded corners on the shape
  • Fill: Fill color and opacity
  • Border: Border color and opacity
    • Position: Where to draw the border
    • Style: Creates a dashed border. The first value is the lenght of the dashes, the second is the length of the space following it. The fourth and fifth values specify the lenght of the second dash, and space following it, then the first dash is repeated.
    • Cap: The shape and position of the end of any open paths
    • Join: The shape of the any sharp corners on the shape
    • Start: The shape of the any sharp corners on the shape
  • Start and End: The percent of the border to show starting from the beginning or end