Skip to content

In this hackathon, Locofy gives a problem statement to freely use its Locofy plugin with Figma and create a good visual web/app by generating front-end code with A.I. So, I created an educational website with Figma and then used the Locofy plugin to tag some elements (you can check the explanation video below)

Notifications You must be signed in to change notification settings

cypherakshay/Locofy.ai_hackathon_eductaional_website-non-responsive-

Repository files navigation

Akshay_Logo

AKSHAY MISHRA

(Aspiring Full Stack Javscript Web Developer)

 

 

 

FINDCODER HACKATHON - Generate code with A.I. powered Plugin Locofy.ai in few minutes

 

 

CYPHER EDUCATION -Education website generated with figma plugin - Locofy.ai (static page website demo)

 

Project Description

 

In this hackathon, Locofy gives a problem statement to freely use its Locofy plugin with Figma and create a good visual web/app by generating front-end code with A.I.

So, I created an educational website with Figma and then used the Locofy plugin to tag some elements (you can check the explanation video below). And the whole frontend code is generated in a few minutes. then I push this to the GitHub repo and deploy it on Netlify.

Now, there is a new slang on the internet :  

" FIGMA to LOCOFY "

 

Disclaimer :

Please consider a laptop screen of 1440px to check this website. This is not mobile responsive and the best visual will fit on the laptop screen. Locofy is new to me so, I was a little confused about how to configure responsiveness and many options like hover effects and so on. but I will consider it my prior wishlist to learn this technology precisely.  

Time Duration : 12 minutes to complete this project

 

Explanation Video

Click below on thumbnail to watch my youtube video of this hackathon :

Explanation Video

 

You can also like my LinkedIn post also - Click Here

 

 

TECH STACK

 

Locofy.ai

image

 

PROJECT SNAPSHOT

 

Project Snapshot

 

LIVE PROJECT

 

Go Live

( !! Please consider a laptop screen of 1440px to check this website this website is not mobile responsive and best visual will fit in laptop screen. Locofy is new to me so, I was little confuse how to configure responsiveness and many option like hover-effects and so on. but I will consider it as my prior wishlist to learn this technology precisely.)

 

Badge

Locofy prototype preview



 

 

CHECK MY OTHER LIVE PROJECTS :

Fincoder Portfolio

(Click on Findcoder logo to check my portfolio of other projects.)

 

Follow me on :

Hashnode Linkedin Twitter

(Follow me on Hashnode to read my articles on web development and lots of tips and tricks are coming soon for the coder community.)

About

In this hackathon, Locofy gives a problem statement to freely use its Locofy plugin with Figma and create a good visual web/app by generating front-end code with A.I. So, I created an educational website with Figma and then used the Locofy plugin to tag some elements (you can check the explanation video below)

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published