I made this site entirely in Figma using Locofy.ai Responsive layout, breakpoints, pages, animations. The code is near perfect and exportable to React w/ styles, components and variables. For simple sites like portfolios and landing pages, you can do everything in Figma.

5 steps to prepare your Figma design for code: 1. Use Frames, min/max and auto-layout wrap. This will ensure that it’ll work across mobile and desktop. 2. Set up the breakpoints in Locofy. Change the screen paddings: 30px for tablet, 20px for phone. Titles: roughly 40px for tablet, 34px for phone. 3. Tag your elements. Links, buttons, header, section, footer, h1, h2, paragraph, input. The rest are divs. 4. Set up states and animations. Buttons should have a hover stats, inputs focused state. You can set a simple appear animation for your landing page’s main content. 5. Link your buttons to pages. Select all your pages, make sure they’re linked. For React sites, they’ll use a router and you can easily deploy to Netlify or Vercel. For all these steps, Locofy provide AI-assisted suggestions which in my experience is pretty accurate and you can review before applying. This including auto layout recs, auto tagging, creating components, etc. It’s currently in free beta and you can export the entire code. You’re not locked on any platform.

We’re working on 2 courses on that will teach you to turn your figma designs to code and React sites. Also 2 courses for SwiftUI. This template is available on - we’re working to turn all our templates so they’re ready for exporting to code. Figma to code will allow designers will little to no code experience to create real web & mobile apps. With AI, you can get really far as an indie creator.

@locofy_ai When are we getting course on locofy

@locofy_ai Been obsessed with it for the past few days.

@locofy_ai Impressive! Are you planning to put together a tutorial for this?

@edwardgomey @locofy_ai We’re working on 2 courses around this. Also, all our future courses will rely on some flavor of figma to code workflow. It’s that good.

@locofy_ai 👀🔥

@locofy_ai Wow that’s very impressive.. will have to give it a try .. 🔥🔥

@locofy_ai That's actually nuts. Surprised that Figma themselves are not already doing this instead of a 3rd party plugin.

@locofy_ai Looks amazing!