Building a Full Stack App from a Figma Design with & Hasura

Learn how to go from Figma designs to a full stack app by using to generate frontend code, and Hasura to generate your backend.

Goal: Build your front end using and connect with the backend built using Hasura.

This guide will take you step-by-step through the tasks required to turn your design into a full-stack app.

  1. We will be using to convert your designs into front-end code.
  2. Then, using Hasura we’ll build a backend service.
  3. Finally, we’ll extend the code from to connect with our APIs built on Hasura.


  1. You will need your app design ready on Figma
  2. You will need a Locofy account and have the Locofy plugin running on your file
  3. You will need a Hasura account 

Turn your designs into frontend code with

This is the design for the sample Travel app that we’ll be building. It consists of 3 main pages, the “Homepage”, “Results page”, and “Hotels page”. Here's a link to the Figma file that you can duplicate and follow along.

Image of Figma template
  1. The first 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 work with popular UI libraries such as Chakra, Ant, Material, and Bootstrap by tagging your elements. 

    Image of the search component

    For this app, you’ll notice items like

    1. Autocomplete dropdown for Arrival and Departure fields
    2. Date & Time pickers
    3. Buttons
    4. Text Input fields
    5. Radios
    6. Popups with videos

    Ensure that these elements are tagged for them to become working components in the final app. The Locofy plugin also has LocoAI which uses AI to scan the design and suggest tags, making it easier to quickly tag designs.

  2. Now you can make your designs responsive by configuring the styles in the Styling & Layouts tab.

    Select your components that need to be responsive. On the Locofy plugin, under the Styling & Layouts tab, you will find different media queries & states. Select the breakpoint you want to make your design responsive to and then change the styles and layout accordingly.

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

  3. Next is adding actions to create user flows such as linking between pages, opening popups, scrolling to another part of the page, and more.

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

    Once you are satisfied with your preview, you can sync your designs to Locofy Builder to add more advanced settings, share your live prototype, and export code.

  5. Click the “View Code” 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”.

  6. We need to turn some of the code generated by Locofy into components inside the Locofy Builder.  

    In our design, we need to make the search form container on the “Home page” a component because we might reuse it across multiple pages. Once done, we can go to the “Results page” and click on the search form container, and this time instead of creating a new component, we can reuse the existing search component we just created.

    Next, we can turn the destination cards present in the ‘Most Popular Destinations’ section into components.

    Image of the Locofy Builder

    This time, for each card, we expect certain props such as location, image, and price. We can quickly add these props to components on the Locofy builder.

  7. Before exporting, you can view and share a live responsive prototype that looks and feels like your end product would even before writing your code.

  8. Once you've checked that the prototype matches your product vision, we can export the code.

    Make sure to select all the screens you need, as well as the correct framework and project settings. Once done, you can download your code in a Zip File by hitting the “Download Zip File button” at the bottom right corner.

Exported Code Overview

After extracting the zip file we downloaded, we can see how our React project is structured.

We can see the components we created in the Locofy builder have been placed inside the components/ folder and we have got our screens as pages inside the pages/ folder.

Image of project structure
  1. To run the app, you need to first install the packages running the "npm i" command in your terminal. Once the dependencies are installed, you can run the project in the development environment using "npm start".
  2. Now that our application is up and running, we can check the responsiveness as well as the styles we added using the Locofy plugin by visiting https://localhost:3000 URL on your browser.

Creating your backend with Hasura

Hasura provides us with instant GraphQL API on our databases. In other words, you can go from a database to a unified GraphQL API in a matter of minutes.

Let’s see how we can connect our database with Hasura.

  1. Log in to your Hasura account and if you don’t have one, you can quickly sign up by clicking here.

  2. Click on the ‘Connect Database’ button, which will take you to a new page where you get two options: Connect to an existing database or create a new one.

  3. Fill in the details of your database such as the URL, any connection parameters, and so on to successfully connect your database to Hasura.

  4. Now that we have connected our database, we need to create tables or schemas. To do so, click on the ‘public’ button on the left side.

  5. Let’s add our first table by clicking the ‘Create Table’ button. You can configure your tables here.

  6. You can also insert rows, set relationships, and assign permissions to your database. For this tutorial, we have created a “popular_destinations” table and added columns for ‘code’, ‘image’, ‘name’ & ‘price’, making ‘code’ a primary key for the table. We have also created tables such as ‘airports’, ‘routes’, and ’airlines’ based on the data we need in our application.

  7. Since the tables are ready now, the next step is to test them with the API explorer provided by Hasura. To open it, click on the ‘API’ tab, present next to the ‘Data’ tab.

    Over here, you can run queries, subscriptions, and mutations against your database by hitting the URL provided by Hasura.

    Now, we have everything configured here. Let’s move to our code to populate it with the data that Hasura will provide us.

Extending the code with Hasura

You can use your favorite GraphQL client to fetch the data. Some of the top ones available in the market are React Query, URQL, & Apollo. Regardless of the client, it won’t make a difference to the GraphQL queries.

Now, let’s jump into the code and start fetching the data to populate the ‘Popular Destination’ cards

Image of a section in the Figma file
  1. Go to the page where you want to fetch the data. In our case, we will be starting with the ‘PopDestinationsSection.tsx’ file and fetching the data there.

    We create a variable and then store the response we get from Hasura in it. 

  2. Then we’ll pass this data to our component that will digest it. In our case, we will be getting an array as a response that we can map as shown below:

  3. In the code snippet above, we are using the ‘destination card’ component we created using the Locofy Builder and since it is already configured to accept props, we just pass the data from our array into it.

  4. In our app, we also want to pull in real-time data to show a list of recent bookings to help create urgency among our users to book a flight.

    Image of recently booked section
  5. We can head back to the API explorer offered by Hasura, and this time, we need to use a “Subscription” instead of “Query”.

  6. A subscription query helps us to pull live data from the database in real-time. We'll create a query named "getRecentBookings" to pull in the data we need to populate the card. Here's what the request body looks like:

    We have used a batch size of 3, which means we are grouping 3 requests, combining them into one, and making a single request with the same data that all of the other queries would have made.

    For our pagination, we are setting our cursor’s initial value to the “start_from” argument and sorting it in ascending order. We are then specifying all the data fields we need.

  7. In our app, we will be creating a variable similar to last time, but instead, we’ll be using the subscription query above.

  8. Different clients handle subscription & real-time data flow differently. Our client provides us with a “useSubscription” hook. 

    The “useSubscription()” hook returns us two variables to check the loading state and data response. Note that this code has to be present inside our functional component.

    We will be creating a variable called “bookings” to store the list of flights booked.

    We’ll be using “useEffect” hook to monitor the lifecycle of the real-time data stored in our ‘data’ variable and based on that, updating the “bookings” variable.

  9. Now that we have our data ready and subscribed, we can map them to our components.

With that, we've successfully created a live feed of bookings streaming into the user's screen as other people make new flight bookings.

By following similar steps above, we can also link up the other sections of our websites using the APIs we create on Hasura.

You can view the full repository for the sample Travel App website at this link, as well as the deployment on Netlify.

Image of the full stack

Just like that, with this step-by-step guide, frontend code which would typically take 3-4 weeks to write manually, can be generated in just half a day with Locofy, and can easily be extended to seamlessly integrate a backend service like Hasura.

This enables you to create full-stack applications 5-10x faster using a combination of these two low-code tools.

If you want to learn more about how to convert your Figma design to React, React Native, HTML/CSS, Nextjs, Vue, and more, check out our docs.

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

© 2024, Locofy Pte Ltd. All Rights Reserved.