Create an Events App With Locofy.ai, Figma, and Hygraph

The Locofy.ai plugin offers a step-by-step process to convert your designs into responsive, extensible code. But before diving into that, create the project by clicking on “Select project” and selecting “Create new”. Our project uses React.js with JavaScript & TailwindCSS.The first step is to make our designs responsive. For this, we need to apply an auto layout to our frames.

After this, you will notice the first step in the plugin is the Design Optimiser feature to generate responsive and clean code by cleaning the structure of your app and then applying auto layout. Click on it to run the Design Optimiser.

The next step is to tag our designs. Tagging allows us to turn our designs into working components, for example, buttons, dropdowns, inputs, and more. You can also use our Auto-Tagging feature which will scan your design files and suggest you tags.
You can also work with popular UI libraries such as Material and Bootstrap by tagging your elements. For this app, you’ll notice items like:

1. Buttons
2. Input fields
3. Dropdown Menus

Now you can manually make your designs responsive and configure styles in Step 3. In this step, you can configure the styling and layout for different screen sizes and states. You will find different media queries & states once you click on it. Select the breakpoint to which you want to make your design responsive and then change the styles and layout accordingly.

You can also use auto layout to make your designs responsive and use the Locofy.ai plugin to take care of layouts on different screen sizes.

You can trigger actions to build fully featured apps and websites. This is where Step 4: Add Actions comes in. You can go back to home and now click on Step 4 to assign actions for click events.
You can scroll into view and open popups and URLs amongst other actions.

Now that our designs are tagged correctly and responsive, we can preview them. To preview your design, select the frame or layer that you want to view, and click the “Preview” button.

Once you are satisfied with your preview, you can move on to the next step, which is Step 5: Sync to Locofy Builder to sync your designs to Locofy Builder which will allow you to add more advanced settings, share your live prototype, and export code.

Click the “Sync to Builder” button at the bottom right corner of the plugin & select the frames. In our case, we’ll be syncing both frames.

Once the sync is complete, click on “View code in the Builder”.

While using the builder, you will find the final steps to get production-ready code from Locofy.ai.

To improve code maintenance and reduce duplicate code, it is recommended to convert certain code generated by Locofy into components within the Locofy Builder, which is Step 6: Make Components.
By clicking on it, you will find the Auto-Components features which use AI to scan your design files and suggest files. Our project's suggestions for components are shown below:

You can also add the props quickly in the Locofy builder so you can easily extend your components with dynamic as well as create components manually.

Moving on to the next step, Step 7: Configure Code, you can configure your code settings such as framework, CSS styling and style guides before exporting it.

Once the prototype matches the product vision, you can view & share the live responsive prototype that looks and feels like your end product. Lastly, you can export, deploy or sync the code. In this blog, we are pushing our code to GitHub and cloning it to our system with the GitHub CLI.

To work with Hygraph, you need an account.

Upon account creation, we need to do the following:

1. Create a project by following the quickstart guide.
2. Create a model in your project schema.
3. Add fields to the model.
4.  Use the content editor to create content entries.
5. Publish the content.
6. Query content using GraphQL in the API Playground.
7. Enable and manage external API access to your content API endpoint.

For a more detailed guide refer to the Hygraph documentation here.

Now you need to install the following packages:

1. apollo/client: This single package contains virtually everything you need to set up Apollo Client. It includes the in-memory cache, local state management, error handling, and a React-based view layer.
2. graphql: This package provides logic for parsing GraphQL queries.

To use our packages, we have to create a folder called “apis” in the “src” folder and add a file called ApolloClient.js which will contain the following:

The code above ensures that our client is ready to fetch data from whichever part of our application.

Firstly navigate to src/index.js and add some code to fetch data: 

Finally, let's navigate to src/pages/LocoeventsHomepage.js and modify our code to match what's below:

With this in place, we are able to dynamically alter the contents in our application.

Thanks to Locofy.ai, we were able to create components with relevant props which makes code extension a piece of cake.

This made it quite straightforward to implement a database with Hygraph & pass props to our components.

Once you have extended your code, you can commit the changes to GitHub.

Now you can go back to Figma and edit your designs and sync the project again with Locofy.ai. Finally, click on the “View code in builder” button to hop onto our Locofy Builder.

Click on “Export/Deploy”. Choose “Push to GitHub” and select the same repository we used earlier to push our code.

Now you can select the same branch and resolve the conflicts(if any) just as you would do on GitHub.

Finally, run the following command on your local IDE and you will see the updated code generated by Locofy.ai on your local machine.