Embed HTML, CSS, and JavaScript

Because code components and layers are React-based, it’s better to work with React when possible. However, there may be times when you want to use vanilla HTML, CSS, and JavaScript from other projects you’ve worked on. In that case, we suggest you either insert an embed via the Figma Sites interface, or use the AI chat to convert your vanilla code to React. Another advantage of converting your code is that you can then iterate on the code with AI.

Insert an Embed

If you want to embed the HTML, JavaScript, and CSS for a whole website, especially if the website is already hosted somewhere on the public web, the easiest way to embed that site is using the Insert menu in Figma Sites. For more information, see the Help Center article: Insert blocks, embeds, webpages, and design libraries into a site

Prompt to convert your HTML, CSS, and JavaScript

You can paste your code directly into the AI chat and use prompts to convert the HTML, CSS, and JavaScript into valid React code. For example, suppose we had a button on a site for swapping between light and dark mode themes.

In this example, the code for the button looks like the following:

HTML

<div class="container">
    <button id="themeToggle" aria-label="Toggle dark mode">
        <span class="toggle-text">Switch to Dark Mode</span>
    </button>
    <p id="status">Current theme: Light Mode</p>
</div>

CSS

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    transition: background-color 0.3s ease;
}

.container {
    text-align: center;
}

#themeToggle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 30px;
    border: 2px solid #333;
    background-color: #f0f0f0;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
}

#themeToggle:hover {
    background-color: #e0e0e0;
}

#themeToggle.dark-mode {
    background-color: #333;
    color: white;
    border-color: #666;
}

#themeToggle.dark-mode:hover {
    background-color: #444;
}

.toggle-text {
    margin-left: 8px;
}

#status {
    margin-top: 20px;
    font-size: 14px;
    color: #666;
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {
    const themeToggle = document.getElementById('themeToggle');
    const toggleText = themeToggle.querySelector('.toggle-text');
    const statusText = document.getElementById('status');
    let isDarkMode = false;

    themeToggle.addEventListener('click', function() {
        isDarkMode = !isDarkMode;

        if (isDarkMode) {
            themeToggle.classList.add('dark-mode');
            toggleText.textContent = 'Switch to Light Mode';
            statusText.textContent = 'Current theme: Dark Mode';
            document.body.classList.add('dark-theme');
        } else {
            themeToggle.classList.remove('dark-mode');
            toggleText.textContent = 'Switch to Dark Mode';
            statusText.textContent = 'Current theme: Light Mode';
            document.body.classList.remove('dark-theme');
        }
    });
});

To convert the button into a code layer, we use the following prompt:

I have some code I want to convert into a code layer:

<paste the HTML>

<paste the CSS>

<paste the JavaScript>

---

Keep the functionality and styling as close as possible
while converting it.

If there are any issues, you can continue to iterate on the converted code by prompting in the AI chat.