Skip to content

Latest commit

 

History

History
93 lines (73 loc) · 3.53 KB

README.md

File metadata and controls

93 lines (73 loc) · 3.53 KB
Raw

Figma plugin for creating custom maps for the Philippine Travel Level Map by denzdelvillar. This plugin will convert Figma design files into Map data for proper use in the application.

This plugin is only available for Figma design files and not for FigJam.

Sample

Map in Figma

CAR map in Figma

Map in Phil Travel

CAR map in Phil Travel

Usage

Supported Nodes

  • Vector nodes (including arrows, but arrows won't render correctly)
  • Rectangle nodes (including images, but images won't render)

Conversion

Figma Phil Travel Status
File --- TODO
Page --- TODO
Frame Map DONE
Node Province DONE

Vector nodes and Rectangle nodes will be converted as usable data for <path> SVG elements. The name of the nodes will be used as the id of the Province. The name of the Frame will be used as the name of the Map. In addition, the size of the Frame will be used as the size of the Map.

Ignoring nodes

To ignore specific nodes, add @ignore to the end of the name of the node (e.g. "Reference @ignore" will be ignored). This can be useful when using reference images for maps, since images are processed as a Rectangle node.

Map in Figma:

CAR map in Figma

Map in Phil Travel:

CAR map in Phil Travel

By adding the @ignore at the end of the name, we prevent the image from rendering. This allows us to edit the map later if needed.

In addition, the following nodes are ignored by default and will not be processed:

  • Polygon
  • Star
  • Ellipse
  • Line
  • Text
  • Frame (Only Frames inside a Frame)
  • Group

To handle complex province shapes, consider simplifying the shape or flattening Group nodes.

Data Output

Currently, the only supported operation is the "Copy to Clipboard". Make sure that the Frame of the Map to be exported is selected before copying to clipboard. Otherwise, the first Frame in the first Page will be exported.

Map Data

{
  mapName: 'Philippines', // name of the Frame object
  size: {
    width: 69, // width of the Frame object
    height: 100, // height of the Frame object
  },
  provinces: [
    // Province data
  ],
  options: { // custom map options for future use
    initialZoom: 1.0,
  }
}

Province Data

{
  id: 'Baguio City', // name of the Node
  transform: 'translate(10 50)', // x y position of the Node
  drawPath: 'M 0 0 L 100 50 ....', // vectorData of the Node
}

Unsupported Properties

Most properties are not supported. Only vector path data is taken. As such, the following will not be preserved. The list is not exhaustive.

  • stroke style
  • fill
  • corner radius
  • rotation
  • boolean operations

License

This plugin is subject to the Community Free Resource License of Figma.