How to use Cursor AI to change Figma models to code.

Converting Figma models to script

For this article, I requested a graphic designer to create a Figma design for a website that promoted my Agile certification book. The patterns they delivered can be seen in the animated GIF below.

I’ll demonstrate how to use Cursor AI to create these models without writing a single line of code.

Before you begin,

Before converting your Figma style into a website, make sure you have the following at the set:

• the various logo people, colors, and gradients that were used in the Figma design.
• All required photo property, SVGs and icons
• Any desired frameworks or libraries, such as Respond, Bootstrap, or LineIcons?
• Cursor AI installed and configured

Step 1: Set up your Figma-to-Code job.

Your first swift to Cursor did fixed up the HTML and JavaScript task and generate a simple webpage with a flexible navigation bar. The layout and libraries are running smoothly with a thriving navigation bar.

Here’s the fast:

To develop a professional-looking website for my Scrum Master Certification Guide, I need Cursor to create a new HTML and JavaScript job.

This is just a basic HTML and JavaScript project I’ll examine directly on my desktop, but it will be expertly maintained, so it needs to use an industry standard file and folder structure.

I need folders for different assets like images, CSS, and scripts in order to make it reactive. I also need the free LineIcons collection and Bootstrap JS.

To start, the website needs a responsive, floating, bootstrap nav bar at the top with left aligned text that says” Be Scrumtous” and right aligned links for Home, Twitter, YouTube, TSS ( that’s www. Theserverside.com ) and Xennial ( www. xennial.com ). Every 10-15 seconds, the text” Become Scrumtuous” may arbitrarily animate itself in a way that’s somewhat obnoxious.

I will give guidelines on how to design the rest of the website page future.

Cursor may spend a few minutes creating the project and designing the site. When it’s done, just click’ Accept All’ and watch the generated website. Test especially to see if the navigation bar works both in mobile and desktop mode.

Build the general layout in Step 2.

The Figma layout includes seven different areas, plus a foot and the transportation bar we just created. We’ll produce all of these sections in this second fast by specifying the script family, colors, and gradients to use site-wide.

We’ll also provide simple instructions for how the curve across the hero section may appear.

I’d like to see separate sections for authors, warrior, testimonials, on, stats, video, and pricing under the navigation bar. Put a foot with a rights see as well.

A straight, 45 education gradient that runs from BlueViolet to DeepPink for the background should be used for the warrior, stats, and footer sections.

The about, videos and authors area may have a SnowWhite background. Good white should be used for the different parts.

Furthermore, the hero section should just take up 75 % of the window when the website loads.

I want to apply Poppins as the style. On a light colored background, the font colors should become DeepPurple for headings and MidnightBlue for smaller words.

The script colors on a differential history should be MidnightBlue for smaller words and White for topics.

Likewise, create a fun and simple site loading graphics to spice things up a bit.

See how I’m asking for site weight effects and even somewhat obnoxious animations while also having a little fun with the prompts? Cursor AI handles these effectively, adding JavaScript to produce components like images or words bounce or diminish at random. It’s a fun way to make an otherwise dynamic site more interesting.

Stage 3: Organize Your Resources

You’ll have set your photos, SVGs, and other property, as previously mentioned. In this phase, we’ll arrange them into an pictures files, with subfolders like writers, heros, and testimonials for better structure.

Next, we’ll ask Cursor AI to create a slider featuring the protagonists folder’s images.

Here’s the fast:

Update the warrior portion so it is split into two sides on a large screen.

On the left, it says in black, regular-sized language,” Stage up your Efficient game.”

Under that in great white papers it says:

• • Master Scrum
  • Getting Certified Fast

Under that, write in tiny, dark language,” Advance your career with PSM and PSPO qualifications.”

Under the text, include graphics that link to Twitter, YouTube, GitHub and Amazon.

A flat pale border and clear background should define the first and second icons. The second and fourth images may be DeepPurple on a light background and with a flat white border.

The background changes to DeepPurple and the symbol is light when the consumer hovers over it. Apply a top-to-bottom slide influence to make the change when the person hovers over an image.

Include a css slider on the right that loops through all the images that have just been added to the heros folder under images. The graphics both have a 500×513 amount.

The carousel may be visible, and it should be moving to a new photo every four seconds. Make the images in the gondola hold as much of the room on the right hand side as possible.

When the warrior part of Cursor AI code generation is finished, we can see that the font, color, and gradients are all very similar to those in Figma.

Step 4: The comments section

The stories area just displays the three photographs placed in the images folder on the last stage.

One tip for displaying images effectively is to tell Cursor AI their dimensions. This allows the tool to format them more effectively. Here’s the fast:

Remove everything now in the recommendations section.

Finally, for the testimonials section, I want you to put the three 455360 images from the most recent testimonials folder so they appear parallel and next to each other in device mode. Stack them for smaller monitors.

When an image enters the window, it may travel onto the screen.

Each image may have a distinct, fun and pleasant graphics that occurs when a user hovers over them.

Make certain there is some cushions in the comments section so that the photos are properly spaced between the areas above and below.

Step 5: The About Area

The About part has a traditional 50/50 design with words on the right and an image on the left.

In this phase, we’ll let Cursor AI generate a set of bullet points about the text. You don’t need to provide all the wording up front; you can always change or remove them at any time. Let the AI do the heavy hoisting!

Here’s the fast:

Totally update the information area.

Cut the page into two parts. Show the 500x625px scrum-guide-cover report on the left. that is in the graphics file .jpg.

Put a fun video to the picture that shows it flying onto the camera when it enters the window, and make a second animation when somebody hovers over it.

On the right half add a centered title that says “Getting Certified Fast!” and make the font white and put the title on a tightly wrapped background that uses the hero section’s gradient.

Therefore in gloomy words read in bold:” No another Scrum Master Certification Guide provides:”

Add seven bullet points about the contents of a fine certification book.

Lastly, centered under the bullet points in bold text that links to amazon.com read:

GET A COPY Today

You can see from the generated site that Cursor AI does a great job of filling in the Figma design’s Lorem Ipsum word

Step 6: Animated Counts

The automatically incrementing count, a set of statistics that alive from zero to their ultimate values when they appear on the screen, is a common web design feature.

While this can be a bit difficult to apply individually with JavaScript, a well-crafted quick makes it easy for Cursor AI to produce the component for you.

totally redesign the numbers section’s material.

Inside the part, display the following four data:

• • 323 Sites
  • 125+ Five-Star Testimonials
  • 325+ Issues
  • 585+ Qualifications

Include a and mark after the figures with them.

Each graph may contain a centered LineIcons image that makes sense, a strong quantity that counts up from 0 to its final value using JavaScript, and a tiny label underneath.

With a white, rounded background, style the icons. Center all content vertically and horizontally. Use a smooth animation for the counting numbers that are triggered when a section enters the viewport.

Step 7: Embed a YouTube video

Next, we’ll test whether Cursor can embed a YouTube video on the page. This section also uses a 50/50 layout—video on one side, text on the other.

We made explicit recommendations for how the desktop and mobile layout should be changed in earlier prompts. From this point forward, that level of detail isn’t always necessary. Without any prior notice, Courser AI typically creates responsive Bootstrap layouts that look great on all types of devices.

Now let’s redo the video section.

Add a title that reads” Scrum Made Easy,” place the title on a tightly woven background with the same gradient as the hero section, and place it centered at the top.

Then, under the heading, split the section into halves for desktop viewing, and stack the content on mobile.

This YouTube video is displayed in the left-hand corner:

https://youtu.be/fu2bvCTSd9U

On the right side add the following bolded text:

Get certified with the assistance of Darcy DeClute, the industry’s leading authority on Agile and Scrum, at Scrumtuous.

Then, in regular font, add the following bullet points:

• • Product Owner ( PSPO ), Scrum Devloper ( PSD ), Certified Scrum Master ( PSM1 ), and Product Owner ( PSD ) are all certifications.
  • Over 250, 000 followers on Twitter
  • Over 1 million YouTube views
  • Coaching experience in manufacturing, retail and finance

Then center, under the bullet points, add a call to action.

By the way, the video used in this section is from TheServerSide article It’s worthwhile to read.

Section 8: Pricing

The pricing section is one of the trickiest to prompt effectively.

I’m referring to reference cards, a Bootstrap feature intended to organize structured content. This is a good example of how some familiarity with the underlying technologies can lead to better results with AI tools.

Although the output is more consistent than the prompt, the output is in line with the original Figma design.

Now update the’ pricing’ section with a centered headline and a 3-column pricing table below it.

The title of the article should read:

A short description in small text:’ Choose the format that works best for you!’

A large title:” Paperback, Hardcover, Kindle,” center the title, and   place the title on a tightly woven background with the same gradient as the hero section;   center the title; make the font white; and use the gradient to center the title.

A call to action in smaller, bold text: ‘ Get Yours Now!’

A subtle shadow, rounded corners, and a completely white background should appear on each pricing card.

Display the price at the top of each card in large bold text. The costs are$ 54.99,$ 34.99, and$ 139.99.

Show the format HARDCOVER, SOFTCOVER, KINDLE under the price. Add a line after this as a final line.

Under the separator, list 2 benefits on each card, with the benefits being:

HARDCOVER:

signed by the author!

Most durable format

SOFTCOVER:

Hundreds of inquiries

Your best value!

KINDLE:

Get your book right away!

Only on Amazon.

The cards should be centered throughout the entire text.

Under the listed benefits on each card, responsively display the 500x625px file named scrum-guide-cover. that is in the images directory .jpg. The image’s width should expand to the width of the card.

Add a separator line following the book’s image, and a centered” Purchase Now” button at the bottom of each card that links to amazon.com and uses the same gradient as the hero.

Make sure the cards stack vertically on small screens but display 3 in a row on desktop.

I think the end result looks pretty good, aside from the fact that I should probably use a different image for each edition:

Step 9: The Authors

In this last section, Cursor pulls off a clever trick to provide us with relevant content.

We want to showcase the contributors to the book, using their images. The author’s name and job are listed in the filename of each JPG file in the images folder. In this prompt, we ask Cursor AI to extract that information and generate names, roles, and even a brief description of each contributor’s duties based solely on the filenames.

Here’s the fast:

Update the list of authors.

For this section you will be using the images placed in the images/authors folder so review the names of those files.

Make the title’s color white by centering it, covering it with the gradient used for the hero section, and centering it.

For the content, use a responsive grid and display the image of each team member in their own card, with the photo placed in a circular frame using Bootstrap’s rounded circle.

Add the names of the authors and the role they played in the book’s writing after the image.

Then add a separator and then write a single sentence that describes what someone in that role would do.

Use the name of each file to display the user’s name and the role they played since the naming format of the image files is loosely ‘firstname-lastname-role’.

Below each card, add social media icon buttons such as Linked In, Twitter, GitHub and YouTube and format them as the buttons were formatted in the hero section.

Step 10: Pay for a Cursor AI subscrpition

The social media icons appear correctly in the image above, but there was a problem with the original, which was that every second icon was rendered white on a white background.

I wrote a prompt to fix the issue, but my free tier of Cursor AI hit a usage limit, and the server decided to reserve its resources for paying users.

No problem— I quickly fixed the icons manually, dragged the updated files into my GitHub Pages repository, and saw the changes live after GitHub Actions deployed the site.

I’m genuinely impressed when I compare the final page to the original Figma design. Cursor AI makes turning a Figma design into a live webpage remarkably easy.

I did to my website despite the fact that this tutorial was the only one that was created. You can also find the Figma-to-Code this tutorial created on Git Hub.