BlogsJune 2023 Updates
In this newsletter, we are thrilled to share some of the amazing launches we did in June, resources for the builders, as well as some fascinating news about the entire design-to-code space.
Figma recently announced the Dev Mode at the Figma Config 2023 which excited a lot of developers as it eased some of their pain points and the team at Locofy.ai burned the midnight oil to support it allowing you to take full advantage of the latest features offered by Figma.
Recently, we did a case study with Terraspaces - a web3 startup that saved over 90% of development time with Locofy.ai & Forga, a digital agency that used Locofy.ai to build 3 apps rapidly using Locofy.ai and saved 50% of development time.
Our team also created a list of top React UI libraries that aren’t just beautiful but also highly customisable to match your needs.
Feature Launches
Supporting Dev Mode
We are thrilled to announce that Locofy.ai now supports Figma Dev Mode. With our Dev Mode integration, developers can now easily get their hands on the Locofy.ai-generated code by simply switching to the Dev Mode in Figma where they can view live, responsive previews as well as the ability to copy and download the code powering that preview.
Introducing Figma to Vue
Generate pixel-perfect, production-ready Vue.js code from your Figma design. With this, Locofy now offers greater tech stack flexibility for the builders.
New Styling Options: CSS in JS and Styled Components
We're excited to announce the addition of two powerful styling options to our toolkit: Styled Components and Emotion (CSS in JS). With these advanced styling libraries at your disposal, you can effortlessly create stunning designs and customise your React components like never before.
Expanded React Native Tags
We have added 5 new React Native tags - Video, Audio, Lottie, Accordion, and Badge to help you turn your mobile design into code even more easily.
Auto-Fixes for Inconsistent Alignment
In our efforts to seamlessly handle any design file, we have recently improved our AI to go beyond guiding you to fix inconsistent alignment, but rather even suggest options to achieve a consistent alignment.
UX Improvements for Tagging
We’ve simplified the organisation of the tags present in the Locofy.ai plugin and added a search field so you can easily find the tags you need.
A Community in Motion
Webinar on Working with Custom UI Library
Explore how to bring your custom UI library components directly into your design files using Locofy.ai and Storybook.
WhatsApp Clone Speedrun - Figma Design to Next.js in 10 minutes
Experience the incredible speed and efficiency of converting Figma designs into high-quality frontend code with Locofy.ai. This video showcases the entire process, including making designs responsive, exporting code to your local repository, and iterating on the designs.
Messaging App Tutorial
This comprehensive tutorial guides you through the entire workflow of building a messaging app using Locofy.ai & Figma.
What our users are saying
See how Locofy.ai is enabling @uxsam_eth to convert designs into pixel-perfect React code.
@samuel_Twtt gives a quick overview of how Locofy.ai can boost development for teams.
Read what @Inhouse_system has to say about Locofy.ai’s ability to convert designs to code.
In Case You Missed It
A Quick Overview of Locofy.ai by YouTuber Tech with Tim
In this video, you will see Tim build a React app from scratch and keep his design and code in sync thanks to Locofy.ai.
Building an End-to-End Content Section
Discover how to create a responsive content section using Locofy.ai and seamlessly sync it with your existing application hosted on GitHub.
Building & Exporting Custom Forms
Learn how to effortlessly create a responsive form, export it as a component, and seamlessly integrate the generated code into your existing repository.
Getting Started with MDX in Next.js
Learn how to leverage markdown and JSX together, understand the benefits, integration, and customization of MDX, and use Locofy.ai to generate React components from design files.
