Blogs
Integrations

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

In this guide, you will learn how to quickly generate production-ready React code from your design files with Locofy.ai and extend it with Hypgrah as a CMS.

In this blog, we will demonstrate how to build a fully functional events page similar to Eventbrite. Specifically, we will showcase the usage of Locofy.ai for front-end development and Hypgrah as a headless CMS for a fully functional database. By following our step-by-step guide, you will be able to create a pixel-perfect, responsive, and fully functional web app.

We’ll also explore a much refined designer-developer handoff process and how to sync your design and code in sync with Locofy’s deep GitHub integrations.

Prerequisites:

  1. You will need your design ready in Figma.
  2. You will need a Locofy.ai account and have the plugin up and running on your Figma file.

Turn your designs into frontend code with Locofy.ai

Below is the design for the events app that we’ll be building. It consists of the following sections:

  1. Hero Section: Positioned at the top of the website, this section contains static text. It serves as an attention-grabbing introduction and may provide key information or highlights.
  2. Search Bar: Located below the hero section, the website features a search bar. Visitors can use this search bar to select a specific location, presumably for finding events or relevant information related to that location.
  3. Upcoming Events Component: This section displays upcoming events. Currently, the content is not populated dynamically but will be later on from a database. Users will be able to view and interact with the upcoming events showcased in this component.
  4. Footer: Positioned at the bottom of the website, the footer is a section that typically contains additional information, links, copyright notices, or navigation elements. It provides a consistent presence across the website's pages.

In summary, the website we are building includes a hero section, a search bar for selecting a location, an upcoming events component that will be populated dynamically from a database, and a footer section for additional information and navigation.

Figma file image

You can find the link to the Figma file here

  1. 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.

  2. 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.

  3. 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
  4. 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.

  5. 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.

    Actions present in the Locofy.ai plugin
  6. 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.

    Preview feature

    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.

  7. 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”.

  8. 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:

  9. 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.

  10. 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.

  11. 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.

Exported Code Overview

After cloning the project from GitHub once Locofy.ai has pushed the code, you can see how the React project is structured.

You can see the components you created in the Locofy builder have been placed inside the “components” folder and you have got our screens as pages inside the “pages” folder.

Folder structure
  1. To run the app, you need to first install the packages running the "npm i" command in your terminal. 
  2. Once the dependencies are installed, you can run the project in the development environment using "npm start".

Setting Up Hygraph

  1. To work with Hygraph, you need an account.

  2. 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.

  3. 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.
  4. 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.

Fetching Remote Data For Our App

The next step is to fetch our published data on Hygraph and utilise it in our app. We will do this by easily making queries to it using Apollo.

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

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

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

  4. 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.

Keeping Your Design and Code in Sync

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

  2. 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.

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

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

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

And that’s it!  In this guide, we not only saw how to build a fully functional events page but also saw how to keep your designs and code in sync.

By following the steps above, you can also turn your designs into production-ready React.js code with the ability to fetch data from Hygraph by making use of ApolloClient and GraphQL.

With the Locofy.ai plugin, you will be able to generate pixel-perfect frontend code that can be broken down into components that can accept props and pages. 

Generate pixel-perfect React.js code today with Locofy.ai.

Keep your loco mode on!
Stay updated on the latest Locofy announcements and product updates

© 2024, Locofy Pte Ltd. All Rights Reserved.