Actions / Interactions

Actions

In this step, Locofy.ai recognises & adds triggers and actions to your design elements based on your Figma protoype, allowing you to build fully featured apps and websites.

Auto sync with Figma prototype links

Locofy does a one-way sync with your Figma prototype links to generate on-click actions.

These are the Figma prototype interactions that Locofy currently supports as an onClick actions are as follows:

  • Scroll to
  • Open link
  • Navigate to
  • Open overlay
  • Close overlay

Select and Edit in Preview

You can select the element you wish to add actions to directly from the preview.

  1. Click the 'Edit' tab on top of the preview window.

  2. You can now click the element in preview that you wish to edit. You can also hover over the element to see their name.

  3. Once the item is selected, you can review & edit the decisions LocoAI made, present on the right panel, with regards to the selected element.

Reviewing an action

After the Locofy.ai wizard has scanned & added on-click actions, you can review and edit them.

  1. Click on the "Review" button next to "Actions"

  2. Click on the edit button next to any of the actions you want to edit or remove.

Editing Actions

  1. Choose an action: Decide what will happen when your element is clicked.

  2. Adjust settings: You can further define more details for the action.

  3. Adding actions:

  • Adding actions via the preview.
  • Adding actions via the layers view.

Write notes

These notes will show as comments inside the code base.

  • To add todos, write a note to the developers.
  • To add a custom code, paste the code snippet.