From the course: Design to Code: Using AI to Build Faster

Unlock the full course today

Join today to access over 23,200 courses taught by industry experts.

Translating designs to code using Locofy

Translating designs to code using Locofy - Figma Tutorial

From the course: Design to Code: Using AI to Build Faster

Start my 1-month free trial Buy for my team

Translating designs to code using Locofy

“

Locofy's aim is to make it easier to get from design to code faster. What's incredible and unique is just how many technologies they support. Figma, Adobe XD, and storybook on the design side, a host of libraries, mobile and web frameworks all the way through to GitHub repo and deployments. This graph on their Home page is astounding when you see all the support that they have. And to top it all, this product is, as of recording of this course, still free in Beta. Suffice to say, there's a lot in there, so we're only really going to scratch the surface of it. But let's dive in. To start, you're going to need to have the plugin. There's a plugin available for Figma and also one for Adobe XD. I'm going to go over Figma, but it's basically the same in how they work. The plugins purpose is to ensure that it generates simple, usable code, so a lot of it is geared towards ensuring that Locofy knows how to generate the code. So let's go ahead and open the plugin. To do this, you're going to…

Contents