Figma Sites : They Said ‘No Code.’ They Didn’t Say ‘No Problems.’

Since Figma was acquired by Adobe, the Adobe empire has become increasingly unshakeable... oh no, only in a parallel universe? In the universe I'm in now, Figma hasn't been acquired at all, and it's slowly becoming another Adobe, doing whatever it wants. Perhaps in the field of print design, Adobe's tail lights are still not visible, but in the field of digital design, it's absolutely a dominant force that cannot be ignored.

Last year in June 2024, Figma Config 2024 announced some new product features like Figma Slide.

Some people have found that in one of Figma's js programs, there are variables such as isDesignFile, isFigJamFile, isSlidesFile, these are all existing features, but mysteriously, there is also a variable named isSiteFile, this variable name makes people think that Figma will launch a website building function.

At that time, I thought, if there was a tech startup that was fully dedicated to developing what...a Figma Plugin that converts design drafts into some kind of web programming code? Reading Figma files and converting them into web pages? That would be something to escape from quickly...

After almost a year of waiting, this feature was officially released at Figma Config 2025 in early May 2025, and its name is indeed Figma Sites, to put it simply, it continues Figma's editing logic, after designing, just click publish, and it can become a website, no need to take the files to deploy myself, directly have a URL, and can also bind your own domain name.

That night, I was helping customers string logistics API, adding information to the order management backend and frontend apps on the website, and saw the news of Figma's release before going to bed, although this product has no help for what I do, but the next day I still came to explore this function, looking at its usage scenario, pros and cons, and suitable objects.

Free Until the Reaping Starts in 2026

Those who have used this kind of software suite know that although it seems to be full of functions, in reality, every detail has to be paid for separately. Figma is very kind and directly announced that this year, no extra money will be spent on custom domain names, traffic fees, and storage space, and we'll talk about it again in 2026.

Figma Sites. Design and publish websites. Included on Full seat. No charges for custom domains, bandwidth, or storage until 2026—Enterprise and Organization plans get unlimited custom domains, Professional plans get 10. Limits subject to change after 2025.

Currently, Figma Sites has no limits on the number of pages, websites, or blocks, and for just $20 a month, you can build an unlimited number of websites, with free HTTPS domains, and traffic/space/custom domains are all temporarily free website platforms, in some strange uses or illegal uses, it may make people have bold ideas.

The Art of Not Raising Prices in Tech Startups

Figma hasn't announced how the prices for customized domain names, traffic, and storage space will be calculated, some AI-generated image functions that were introduced last year, will also be charged in the future, the time is undetermined. So for those who want to use it, it's best to be psychologically prepared.

But we can learn from history, let's take a look at Figma Sites and other tech startups, how they showcase their amazing skills or sales techniques in recent years?

Webflow

In July 2024, the price change was announced Updates to Webflow’s Site and Workspace plans, it did not increase in price, but reduced the available quota for each plan, for example, the monthly traffic quota for the BASIC plan was reduced from 50GB to 10GB and so on.

Lunch boxes haven’t increased in price, but the practice of reducing the portion size or removing a dish has been seen by many. If one lunch box isn’t enough to satisfy you, you need to buy more, which has led some Webflow clients’ monthly bills to surge dramatically. Webflow needs to come out with various explanations to quell the fire.

Framer

There have been some fancy ways to increase prices between 2023 and 2024, instead of directly raising the payment amount number, they changed the plan names, visitor quota, edit history limits, team member collaboration limits, multi-language function features, and other fine-grained features that users really feel the pain about if they are using them. Basically, if it’s not good, don’t use it.

Wix

It recently increased its price in April 2025, and the monthly fee has increased by nearly double (for example, Business Elite increased from USD 74.5 to USD 159). This price increase policy began to be notified in 2024, giving users enough time to exit.

To avoid upsetting customers, Wix has offered a limited-time 50% off promotion (Reddit:Wix.com doubling their price?), but you must renew for several years to receive this offer.

This is just postponing the pain to future years when renewal contracts are coming up. Should I switch to a new platform and rebuild the website then? And even if I spend time and effort, the new website might not necessarily have any sales effect.

Figma

Figma has its own routine: releasing a new product ➜ offering a free open beta for everyone to use ➜ turning the product into a paid subscription ➜ finally incorporating the product into existing subscription plans, causing the original plans to become more expensive.

Figma pretend to be kind and calculate for everyone, saying that separate subscriptions were originally more expensive, and now they are packaged together and even cheaper. However, for some users, they have to pay for things they don't use, and the bundling sales make the subscription fee inexplicably more expensive.

In summary, choosing a platform can indeed solve some pain points, but sometimes it just means the pain is in a different place.
Some things are definitely cheaper than developing and purchasing them yourself, however, every item of saved development cost often hides a lack of functional flexibility, long-term costs, and a precarious balance of maintenance with the supplier.

Do not blindly pursue being cool or the lowest cost, but instead find a balance between goals, budget, and subsequent expansion, and pick out the solution that best fits the current needs.

Or maybe just don't think too much, man proposes, God disposes, be content and happy then. (How did it turn into a Buddhist channel style?)

Figma Sites Is for Paying Customers Only

Although Figma generously includes some necessary costs for website operation, as well as some items that similar online services often charge for, and makes them all free in 2025, so that everyone doesn't have to pay extra to purchase them, building a website with Figma Sites is not free, and you need to pay for a Figma subscription to use it.

• A Full seat is required to edit and publish site files.
• Users with Dev, Collab, or View seats can view site files.

ref: Config 2025: a guide for admins - Which seat types have access to Figma Sites?

Figma Sites is not that kind of sales method where the free version only allows operation, limits the number of websites, limits functions, has a 7-day trial, and prohibits publishing websites, but rather it is not entirely available for free users.

• Free (Starter) accounts on Figma will only see an "Upgrade to Professional" prompt when trying to add new Sites files in the top right corner.
• When accessing someone else's shared Figma Sites editing file link, you can only see the layer names and leave comments, but cannot view detailed object properties, let alone edit content and publish the website.

It is necessary to pay for a Full Seat plan subscription to use Figma Sites to edit and publish websites, that is, the Full Seat plan with all the features and the highest level.

That's right, it's the Full Seat plan that originally only used Figma Design for drawing, but from March 2025, some unused software was forcibly added, and the price was increased. (Updates to our pricing, seats, and billing experience)🥲🥲

There are also new account plans

Only the Full Seat plan can use Figma Sites to edit websites, while other plans cannot, allowing everyone to see the power of Figma. However, this time it also previews a new Content seat plan, which is expected to cost $8–$25 per month per account, but it is not yet known when it will be officially launched.

It's suspicious that Content seat contains Figma Sites CMS, rather than Figma Sites.
The official introduction of Figma Sites CMS only mentions that it is a:

Update website content dynamically with an easy-to-use no-code CMS

However, I think Figma Sites is still based on the logic of a drawing software, and it doesn't seem to be suitable for editing website content, such as writing blog posts or creating product specification tables that require fixed fields for users to fill in data. Maybe Figma Sites CMS is for those pure posting purposes? Anyway, it hasn't been released yet, let's wait and see.

I've heard that the Figma education version cannot use Figma Sites, but I don't have an education account, so I have no way to verify this personally.

Unexpected Bill Events May Happen Again

Figma Design has a classic case of unexpected billing, where a Figma free account requests editing permissions in a shared Figma file, and if the file owner clicks Approve, it will automatically pay for the free account. Although the screen will clearly display Approving adds one paid Full seat at $XXX/mo., there have been many cases where people only discover the problem when they are suddenly charged a large amount of money, and it is only when the payment is deducted that they realize what happened...

The file sharing operation logic of Sites is similar to Design, so it is likely that you think you are just allowing file editing permissions, but as a result, you end up helping others pay to upgrade to a Full Seat. Such things may continue to happen in the future.

What website editing features does Figma Sites have?

Figma Sites is not just about switching between modes like Dev Mode or Figma Draw at the bottom of the design interface, but rather, like FigJam/Figma Slides, Sites is another file type, another editing interface. So, if some design functions cannot be found in Sites, or materials or plugins cannot be called, don't be too surprised, just follow the rules, the platform doesn't provide it, you can't have it.

(This is a template provided in Figma Sites)

The website editing file (local copy) has a new file extension .site, but the actual web page file that is finally launched does not directly provide a full-site download for people, and some other bold thinkers seem to have to work harder.

Aside from Figma's own visual design functions, each webpage can also modify the following content

• Page Title and Meta Description
• Social sharing information
• Language code (lang attribute value of html tag)
• Can be set to prevent search engine indexing (meta noindex)
• Set Favicon
• Page url name, but does not allow the use of Chinese, anyway, as long as you enter a character that is not allowed, it will be automatically corrected after completion

Currently Figma Sites does not have a limit on the number of pages, you can create as many pages as you want, and manually testing up to 100 pages did not encounter any problems. But if someone says they want to create a game wiki website, and after creating 500,000 pages they can no longer add new ones, and it causes them trouble. I indeed did not test that many pages, so that's my fault. (Can you hear the absurdity of our line of work?)

Building Multilingual Websites with Figma Sites?

It was just mentioned that the website and general Design functions are completely separate, so the new Draw function in Figma Config 2025, although very impressive, cannot be invoked in the Sites editing interface, which is a shame.

However, Figma Sites' toolbar also has an Actions feature, so you can easily use one of its functions to translate the text on the page into other languages.

The translations? Let’s just say it’s like machine-translating a Chinese menu: you get gems like “Explosive Duck” or “Hair Bread.” Even switching between Simplified and Traditional Chinese causes hiccups. If this ever gets fed into Japanese, I’m sure someone on YouTube will make a video laughing at it.

However, design translation has always been a laughingstock of machine translation, and it is common for designers to be responsible for copywriting, translation, and other tasks. Originally, when designers encountered the need to translate something, they might have had to copy and paste the text segment by segment into Google Translate and then paste it back, or apply for some language translation API. Now, with Figma Sites and this text block translation function, they can get the job done more efficiently.

Want to use Figma Sites to create a multi-language website, but there are other issues, currently the URL of the page seems to only be able to be set to one level (such as /about, /page), don't know how to create a second level (such as /en/about, /en/page, /cn/page).

So if you want to use Figma Sites to create a multilingual website and want all the weight to be concentrated under the same domain name, currently there is no way to create a website structure that uses subdirectories to distinguish languages. At most, you can only open a separate Sites project for each language, and then set a different subdomain for each project, such as en.domain.com, fr.domain.com and so on.

Because the initial function had lines, it is now impossible to insert link hreflang on a single page (to let search engines know about the links of other languages for this page), and at most, only the html tag's lang property can be modified, so those with this requirement should use it with caution.

Cannot Upload Other Files Arbitrarily

Figma Sites is in its public beta and does not charge traffic fees or storage fees, but if we need to put product catalogs, PDFs, product manuals, software installation packages, driver zip files, pptx or xlsx files for earnings reports, or malicious files that can be downloaded and harm user device, it is currently not possible.

Figma Sites currently can only upload image-related formats in principle, and other files cannot be uploaded. If you forcibly select unsupported file formats in the Place image section, you will only get an import failed result.

So with the above requirements, at most we can only put a hyperlink, linking to the cloud drive.

Publish Version

After the site file is modified and saved, the webpage will not be updated immediately, and there will be a Publish process in between. If there are problems with the objects in the draft, obvious issue prompts will be displayed, such as "Hug contents can't be set when all child layers are set to Fill", but these warnings can be ignored and the webpage can still be published.

Sometimes after clicking, it gets stuck in the publishing state for several minutes, during which time the publishing status is still running, and editing operations can be performed as usual, but it's still unsettling, and there's a fear that it might crash and lose work progress.

Regarding the issue of long release runs, users cannot upgrade their computers or switch to other build tools when the local build is slow, like in traditional web project construction. When the CI/CD is slow, they can check which step in the pipeline is stuck. Figma Sites, with its fully managed cloud black box operation mode, leaves users in the dark about what is happening, and all they can do is wait.

Figma Sites also has a special function: Publish history, which can restore the entire website to a previous version, this is a different function from the original version history.

But it seems that the list only retains about 20 recently published versions, not infinite. If we encounter a Figma design draft that looks good, but after publishing the website, some actual devices will display abnormalities, and then we modify and publish to test, the old versions will be washed away quickly, and this version record does not have a deletion function.

This is not a single page arbitrary switching online version, for example, the website is doing an activity, and in addition to the visual elements related to the activity, there are other content modifications, after the activity ends, it is not possible to just switch back a particular page, the entire website's all pages can ONLY be restored to a certain old version.

Sites does not work like some cloud PaaS platforms, it will not generate an independent public URL for each deployment version, and it is also impossible to put multiple historical versions online at the same time.

Currently there is no function to schedule release time, customers say they want to go online at 00:00 in the middle of the night, so we have to manually press the Publish button.

It is possible to use Unpublish Sites to shut down the entire online website with one click, but there is no function to limit IP browsing or lock passwords.

Image Auto Compression

One of the biggest differences between web design and graphic design is that graphic design cares about the visual effect and resolution, and the file size is usually not a problem. However, on a website, each additional image and larger file directly translates to increased server storage capacity, backup capacity, processing time, CDN/balancing load, and other transmission traffic, which is reflected in the monthly cloud bill, and of course, also affects the speed at which users open web pages and network transmission usage. For such a large platform, if each image can be compressed by a few dozen KB, it will also be quite significant when accumulated.

Those who use Figma Sites to design websites probably want to create image-rich and visually engaging websites, so the various image processing mechanisms, whether images are automatically compressed, and whether the image quality after compression is acceptable, will all impact the operating experience of web designers and the experience of browsers.

This is to test how Figma Sites handles user-uploaded images, first upload a 5907px*5434px, 300dpi, 5.51MB jpg file, then adjust the image display to a width of 600px on the screen.

After actually publishing it as a web page, check the pictures on the front-end page:

• Convert to png
• Have a mechanism for automatically generating srcset images
• Although the image display area is set to 600px, the minimum version width generated is still 1000px, and does not change to 600px.
• Images are compressed to around 100KB, if webp can be used, it can be compressed even more.

Next, test uploading a 800px*10410px jpg file, like some manufacturers will ask people to design long product introduction graphics, but after completion, they don't cut it, and just give this long graphic, on many platforms, direct uploading will be proportionally compressed or cropped, at this time, someone has to come out to cut the graphic for free.

After uploading, it directly hits the Figma's 4096px image width and height limit, becoming a tiny picture that can't even be read, so when encountering this situation, it's still necessary to cut it first.

Design Logic

Like Framer, Webflow, these tools often turn CSS properties into a plethora of clickable panels, but if the operator lacks knowledge of web programming logic, they still don't know how to use them. For example, to center something vertically and horizontally, or to make several things the same height, sometimes it's not about directly dragging or resizing objects, but rather adjusting some properties of the parent container.

While in Figma, there are some special features created by Figma, such as Auto Layout, and the Hug unit. In the past, it was often said that many concepts and logic in visual design tools or prototype tools are unique to design tools, and in actual programming, these things don't exist. No matter how well the design team does their job, the engineering team can't use it directly. Even after the webpage or APP is actually made, it will still undergo various fine-tuning, but these fine-tuning adjustments are not continuously updated in the design files, forming a parallel universe of the design draft.

Now Figma Sites tries to skip these traditional steps and directly produce website products. As for whether Figma Sites can continue to develop to a more perfect level, it depends on Figma's business model. Hope it won't become:

• Spending the whole day on social media, marketing, or saying that the product system architecture needs a major update, but the product functions are not updated.
• Sites have several generations of versions, each version is incompatible with the others, and directly upgrading will cause a lot of pages and functions to fail, but to use new functions, you must upgrade and tolerate the pain.
• There are still many online tools or human services on the market that can convert Figma design files into web pages. Figma's main business is not in this area, and after one or two years, it will close down unprofitable businesses, and then people who have used Figma Sites to build websites will have to find ways to move.
• Making a website is a means, not an end, it may be for online promotion, or for having an interface for people to shop or perform various operations. To achieve the goal, there may be more drastically different new methods in the future, but Figma can only stick to the process that originated from visual design tools, and may not be able to keep up with new methods.

This is a common development situation for existing products on the market.

Someone may worry that Figma will go bankrupt, after all, many internet technology startups are not self-sufficient due to their products, but rely on investments to sustain themselves. But there's no need to worry, according to the information provided by Adobe when it announced the acquisition of Figma in 2022 (Adobe to Acquire Figma), Figma has a gross margin of up to 90%, and the company is already cash-flow positive, not the kind of tech startup that keeps burning money and relies on external investments to barely survive.

Figma is also not a publicly traded company, so it doesn't have to force itself to do strange things just to make the numbers look good or to meet the demands of the board of directors. However, last month (2025/4) there was news that Figma is preparing for an IPO CNBC - Figma confidentially files for IPO more than a year after ditching Adobe deal, it can be imagined that there will be many commercial operations in the future, users can only hope that they will not forget their original intentions.

Custom Domain

Figma Sites will be assigned a free domain name ending in figma.site with HTTPS after publication, you can then search for site:figma.site in search engines to see what kinds of websites everyone else has made.

It is now announced that you can bind your own domain, either root domain or subdomain, and you only need to set a CNAME record pointing to sites.figma.net and a corresponding TXT record. You don't need to move all your DNS records to their platform, or deal with issues like only providing IPv6, or not being able to modify DNS settings directly with some domain name registrars, you can set it up by yourself, which is very convenient.

Figma Sites binding a custom domain is free and also comes with a free SSL certificate (the URL will have HTTPS). Binding a custom domain name in Notion Sites costs $10 per month, and the fee is charged separately for each domain name. Purchasing an SSL certificate can cost hundreds of dollars per year in some places, but these are all included in Figma Sites without extra charge.

However, a Figma Sites website can only be bound to one domain name, so the operation of buying N domain names and having them all point to the same website cannot be easily achieved here.

Figma itself does not directly sell domain names, unlike Elementor Hosting which does business by offering the first year of domain name for free as a selling point, actually it's like sending a coupon, letting people go to a dedicated domain name vendor to purchase and so on. It feels like the crowd that will use Figma Sites are also not familiar with domain names and other things, if in the future it can be a one-stop comprehensive purchase, maybe it can increase some attractiveness.

Figma Sites' Global Templates and Page Templates

When creating a new Figma Sites website, there are some template lists to choose from

• Simple Wedding
• Hip Fashion Sale
• Charming Natural Wedding
• Retro-Industrial Music Event
• Minimalist Art Gallery
• Dreamy Band EPK
• Group event
• Community Event
• Performance-Driven Gym
• Moody Dance Studio
• Sincere, Professional Legal Services
• Inclusive After-School Club
• Trustworthy App Download
• Modern Product Launch
• Friendly Accounting Services
• Sweet Flower Shop
• Modern-Retro Beverage Brand
• Sophisticated Vacation House Rental
• Elegant Landscaping Business
• Read.cv template
• Minimalist Model Portfolio
• Nature inspired visual essay
• Fresh Recipe Blog
• Minimalist Design Student Portfolio
• Clean personal resume
• Modern Brand Design Studio
• Personality-Driven Designer Portfolio
• Straightforward Brand Guidelines
• Personal Collectors Items
• Cozy restaurant
• Serene Wellness Coaching
• Classic dance studio

Whether it looks good or not, whether it is suitable for Chinese, whether it is practical, these are subjective, but at least each template has considered desktop/tablet/mobile RWD layout, with at least two versions for desktop and mobile.

Then when editing the page, there are some other template blocks to choose from (as shown below).

can be memorized first, and then when you see the design, you will know if it is made by some lazy businesses using Figma templates.

Using Special Fonts in Figma Sites

Fonts are extremely important for webpage visuals, as is well known, Meta, NVIDIA and some companies have such high stock prices because they use Roboto and some modern sans-serif fonts on their official websites; some large companies go bankrupt because when designing webpages, designers only use Roboto and some boring sans-serif fonts, which leads to poor business operations.

Having finished talking nonsense about design inexplicably taking the blame for business strategy and market, let's take a look at how Figma Sites handles web fonts.

Figma Sites' font selection feature is similar to Figma Design, with a built-in list of Google Fonts, so the previously introduced other beautiful Google Fonts Chinese fonts can be used in Figma Sites.

Figma Site can also use fonts installed locally on your computer in the Installed by you menu, but an awkward situation occurs...

From top to bottom, the fonts used are: Gensen font (local font), Tear font (local font), Source Han Sans (built-in font in Figma), and the text is manually converted to outline.

When converting text to outlines, some characters mysteriously disappeared. The outlined text gets rendered as an SVG image on the web, and it doesn't include any alt text by default — you’ll have to add it manually.

After actually publishing as a web page, the text are not converted to images, and are still plain text, although they can be machine-readable and selected and copied by humans. However, the font is not displayed correctly. Check the elements to see what's going on? There is a font name setting in CSS, but when checking from the Network Panel, the font file is not loaded at all.

Text using the Source Han Sans font is displayed normally, and in the Network Panel, it can be seen that the loaded font file has been processed and is only a few hundred KB in size, unlike the Bunny Font which requires downloading several MB of font files to the viewer's computer even when using only a few characters. The font file is loaded under its own Figma Sites domain name, rather than being directly linked to a Google Fonts or other CDN CSS path.

Let's check if Figma Sites has solved the common problem of using Chinese special fonts on the web

Currently other competitors can still directly upload font files, or import Adobe Fonts (by entering the Adobe Fonts API token), Figma Sites is relatively less functional in this regard.

Since local fonts cannot be used in Sites, and due to the good relationship between Figma and Adobe, don't even think about the possibility of directly integrating Adobe Fonts one day. As for other Chinese and Japanese webfont manufacturers, it's even more unlikely.

In traditional professional division of labor workflows, font issues on web pages are sometimes a problem that engineers have to worry about, but now the person in charge of drawing Figma drafts has to handle it themselves.

Figma Sites can insert custom code throughout the entire site

If you want to create an online booking or contact form type webpage, Figma Sites has an "Embed component" that can embed an iframe form into individual pages.

Figma Sites platform itself does not have visitor statistics reports and other functions, it may have to wait until 2026 when it starts charging according to traffic before it will be done. At present, it can only bury GA4 and other third-party tools by itself.

Figma Sites provides a field to input GA ID, and also provides a field to insert tracking code for the entire site, with these 4 fields:

• Start of <head>
• End of <head>
• Start of <body>
• End of <body>

After actual testing, adding some js scripts or external links does not seem to be blocked. The allowed length of the field seems to be quite large, and adding a few thousand characters does not result in any warnings.

However, this is a global setting and cannot be set individually for each page. There is also no way to directly insert HTML/CSS/JS into any section of the page, is this important? I'm too lazy to say, anyway, you'll know when you really encounter a problem.

If you must insert custom code in a specific editing area on a single page, one of the functions released this year, Figma Make, has a "Code layers" function, looking at the official operation demo video, apart from relying on AI to generate some web page special effects, it seems there is a chance to use this function to directly insert code on the page, however, this function is still coming soon, and it is not known what it will be like in actual use.

Effects of Figma Sites

In Publish your designs on the web with Figma Sites several sections and demo videos are used to describe the special effects functions of Figma Sites.

If we look at the operation interface of Figma Sites, we can see the familiar Scroll behavior and Interactions menu, which also exists in Figma Design's Prototype, but the submenu details on the Sites side are completely different from those on the Prototype side.

It is coincidental that other competitors of Figma Sites have other web animation libraries supporting them, such as Webflow having GSAP (which acquired GreenSock in 2024), and Framer having its own Framer Motion. Generally, developers can use their packages within a reasonable range, even if they don't use their platforms, to add special effects to their websites. Developers who have already used GSAP can also understand what demands GSAP can meet, and continue to use their experience on the platform without having to re-explore the platform's exclusive special effects functions.

Since it's someone else's child, we'd better not dream that Figma's official will directly introduce GSAP or Framer Motion, which is a competitor's child, into Figma Sites. Figma doesn't seem to have this kind of relationship with anyone at the moment, so for now, we can only wait and see what features Figma comes up with and use them, or observe the ecosystem of Plugins, or dream that Figma might cooperate with some well-known package in the future, or import things made by other animation software directly into Sites.

It's common to see many web design courses advertised on the internet, and they often showcase certain attention-grabbing web effects in their promotions. However, students may not realize that by following the teacher's materials or the platform's functions, and adhering to a fixed set of steps, they can easily create those effects. But, for example, when it comes to creating a scrolling effect that moves the background scene, and then adjusting the foreground content so that the images and text don't overlap, interfere, or clash with the background content, and ensuring that everything displays normally on screens of various sizes, that's where the most time is spent...

Then in reality, the boss may suddenly realize: for those few segments of cool animation, production time is longer, the price is higher, the page loading time is also increased, and maintenance and replacement of content is very troublesome, and being tied to a certain hosting platform; but the final conversion rate, registration number, all remain unchanged. Cool is cool, but KPI has no fluctuation, this disparity is the most ironic reality.

Implementing Web Components in Figma Sites

In the operation screenshot of Figma Sites template block just now, maybe someone has found the doubt, in the template block, there are no some common components of web design, such as tabs, various forms of accordion menus, carousels, dialog boxes, various form objects (input/textarea/radio/select/checkbox...), so how to achieve these functions in Figma Sites?

When it comes to creating a table, Figma Sites lacks a table function, but it is still possible to use a third-party table plugin commonly used in Figma Design, draw the table, and then paste it over, however, in Accessibility, there are no options like table, thead, tr, td, th, and the end result is a bunch of divs on the webpage.

Accordion menus or carousel effects, from the current Figma official free templates, we can find that several effects have been implemented, we can learn from them, the following are a few:

Clicking the arrows will switch the text content of the carousel in the Sincere, Professional Legal Services template.

Clicking on the arrow will switch the picture content of the carousel in the Modern Product Launch template.

The mobile collapsible menu, with three lines turning into a cross and a transition animation, is available in the Sweet Flower Shop template.

Friendly Accounting Services homepage has a section called Hear From Our Happy Clients with a tab-like effect.

Basically, it starts with basic shapes such as circles and rectangles, and then slowly pulls them, and then specifies the interaction mode of the object (for example, designing two sets of objects for the menu to hide and expand, and then setting the click on a certain object to switch the state value), you need to have a certain degree of understanding and proficiency in Figma's purple layer-related functions, as well as state, component property&instances, interactions and other functions. Otherwise, some seemingly simple web effects may not be achievable in Figma Sites.

However, using Figma Sites to create a webpage is still different from actually writing code to create a webpage, for example, the display on large and small screens shows completely different content. When writing code to create a webpage, it is usually done by using CSS to set media queries, and displaying or hiding certain parts at different viewport width ranges, with all blocks always being on the page from top to bottom. In Figma Sites, you usually don't need to control which block to hide on which device, you just need to put the content specialized for mobile or computer on the corresponding breakpoint page, without having to think about how to hide the same object on different breakpoints.

Figma Sites may have solved a common problem in traditional UI design processes: the discrepancy between design drafts and actual programming implementation, for example, when a design proposal looks great, but after it's actually made into a webpage, it looks bad and is difficult to use on screens of different widths and ratios, with real text and images of varying lengths and sizes, and after adding a lot of strange dynamic effects.

In the cruel industry scene where upstream is responsible for messing around and downstream is responsible for cleaning up the mess, it used to be possible to say that outsourcing personnel or web design companies did a poor job. Now, everyone can try using Figma Sites to directly turn visual designs into websites, except for complaining that Figma is not intuitive enough and has a learning curve, there is no one else to blame for those fantasies and unrealistic ideas.

The front-end pages generated by Figma Sites are made using React

Figma Sites comes with the usual limitations — no search bar, no filters, no login system, no cart. But hey, it's not trying to be Shopify.

Here we come to check the web page it generates, what technology architecture is used?

Open Devtools' Console, in the foreground there is a sites-runtime.js that reports a bunch of React errors (as shown in the top half of the figure below).

The __REACT_DEVTOOLS_GLOBAL_HOOK__ can be found in sites-runtime.js, and then the components of React Devtools can see the object structure (as shown in the lower half of the figure above), it seems to be using React without a doubt. However, there is no trace of Next.js or some well-known frameworks on the page, and no common route package keywords can be found, I don't know if Figma's engineering team has reinvented the wheel somewhere.

Figma Sites creates websites with SSL certificates issued by Google Trust Services, but the Figma service itself is based on AWS. The official introduction to Figma Sites doesn't mention React, SSR, CSR, RSC, or any infrastructure-related explanations, or even the speed of the servers, possibly because the target audience is designers and discussing these topics may not be helpful. The biggest selling point of this product is that Figma Full Seat plan users can now turn their designs into websites without extra costs......(there are more than millions of words of terms and conditions that follow, which are not included here)

A casual check reveals no common problems found in modern front-end development.

• ✅Disabling browser JavaScript does not result in a blank webpage
• ✅The browser's translation function will not cause a blank webpage due to a hydration error, or display the classic message a client-side exception has occurred (see the browser console for more information)
• ✅After navigating to a new page, using the browser's back and forward buttons works normally, and copying the URL to open in a new tab also takes you to the correct page

Figma Sites generated web pages have CSS Class names like class=css-c7ar6c css-7js8wp css-v27th6, this kind of CSS-in-JS output has poor readability, and is not like TailwindCSS, however, at least the structure is relatively simple (compared to some WordPress third-party page editors).

Potential Dangers

If you want to use GTM to track the click event of a specific element, there may be several css-c7ar6c css-7js8wp css-v27th6 on the page, and if the style is slightly adjusted and republished, the CSS class name of the element or its parent element will change, and the XPath will also be broken.

Currently Figma Sites cannot directly specify ID or class names on objects itself, if someone receives the demand for Figma Sites tracking code, good luck to them.

Because this cloud-based full-service platform cannot provide project source files, what if one day you want to leave Figma, even if you use a third-party tool to download the website made with Figma Sites, can you directly modify the web programming files yourself? It's also not easy to find someone to take over...

How to tell if a website is built using Figma Sites

Like Wix or some platforms, there are some platform ads or links at the bottom or side, but Figma Sites does not have these ads or watermarks, so you can't see them directly with the naked eye. The website's meta author/generator tag, Response Header information, also do not have any Figma words. The website IP's ASN also belongs to Cloudflare.

Currently determinable points:

• The site's sites-runtime.js will have the words figma.react.props.
• If the page domain is .figma.site, it is its default free domain.
• The DOM of the webpage will find a script segment as follows, which will have www.figma.com's reportingDomain, and even after binding its own domain, this segment will still exist:

<script type="module">
import { SitesRuntime } from '/_runtimes/sites-runtime.xxx.js';

const sitesRuntime = new SitesRuntime({
container: document.getElementById('container'),
env: 'published',
bundleId: 'xxx',

loadComponentsOverNetwork: true,
assetsVersion: 'v8',
codeComponentsVersion: 'v1',
wasServerRendered: true,
withBaseStyles: true,
reportingDomain: "https://www.figma.com:,
});
</script>

Knowing what language/tools/platform someone else's website is built with, is it useful? There is a web design myth called someone's website is built with XXX, so I also want to build my website with XXX, and the result will definitely be as good as theirs, although it's very inexplicable, but many people have this belief. This kind of thinking often ignores key factors such as design and content, true success comes from suitable tools and a reasonable strategy, rather than simply imitating the tools used by others.

Figma Sites SEO Settings

It's all about writing web page programs, but some modern web front-end features are considered unbearable to SEO personnel:

• For example, certain unconventional approaches like Flutter web render the entire content as a large canvas element, causing many normal web functions to fail.
• On the surface, it seems like there are many pages, but in reality, the URL remains the same for single-page application (SPA) websites, so no matter which page is shared on social media, only the home page title will be displayed.
• When developing programs, they only know how to use <router-link to=... or <Link to=... to create links, without considering what elements will be generated in the browser. Those non-a tag links are extremely problematic in terms of search engine content processing, accessibility, and normal browser operations.
• Web pages lack semantic tags and document structure, with dozens of layers of div and fragmented text span, making it impossible for crawlers to distinguish between titles and content, main and secondary content, and decorative elements.
• In order to reduce the consumption of system resources by crawlers and lower security risks, some mechanisms are added, but this often results in search engine crawlers being unable to normally index the website.

Fortunately, Figma Sites did not learn from the bad parts of modern front-end, at least the basic SEO conditions and functions of the website are still normal.

Figma Sites creates websites with a default meta noindex, which prohibits search engines from indexing, and both the entire site and each page have the Exclude webpages from search engine results setting checked, allowing for individual adjustment of search engine indexing settings. After adjusting the settings, if the original code still has a meta noindex that prohibits indexing, you need to check the settings for each page individually.

(using some official templates to test PageSpeed)

Each page can modify the Title and Meta Description, social sharing information (Open Graph), language code (lang attribute value of html tag), and has basic functions.

Figma Sites can change objects into various heading tags, easily achieving title-like semantic tags (as shown in the figure above), reducing the chance of being blamed by SEO vendors.

Figma Sites' hyperlinks are all handled with the a tag by default (as shown in the figure), although the structure looks not clean enough, at least it is still the a tag.

Figma Sites produce web pages that can be normally crawled by search engines to see the inner text, if it's bad, it's not its turn yet.

Currently Figma Sites does not produce structured data markup for its web pages, Figma Sites also does not open a bunch of fields for people to fill in Organization/Brand/LocalBusiness type structured data information, nor can JSON-LD source code be inserted directly into a single page or block.

However, most of the structured data types (articles, products, navigation, ratings, etc.) are not very suitable for production in Figma Sites, I guess many people will pick this point out and criticize it, thinking it is a functional lack of Figma Sites.

But old leeks all know, this thing is sometimes more like adding flowers to brocade (making good content better), rather than putting lipstick on a pig (a pig with lipstick is still a pig). For example, adding a bunch of structured data marks on the product's official website, often the ranking is still not as good as large e-commerce platform websites, product trial experience articles. In some industries, old websites that do not have structured data at all, on the other hand, because they have existed for a long time and have accumulated backlinks naturally, they are steadily ranked in the top few. Will AI's answers quote structured data? It's better to first worry about whether the page content has the content that users really want to ask.

Overall, Figma Sites has done a good job with basic SEO functions, and sitemap.xml is also automatically generated. I think Figma Sites is aimed at those who want to focus on visual design, allowing users to focus on creating content, rather than being distracted by keyword stuffing, researching and writing front-end and back-end code, brushing up on basic web knowledge, adjusting server settings, handling program data transmission logic, solving cross-browser compatibility issues, and feeling that the ranking is not good because some meta tags are not added, and therefore cannot focus on the design content itself.

Content Management Policy and Compensation Regulations

Although Figma Sites is a platform, publishing a website does not require uploading ID for real-name authentication KYC, there is no Figma PM to review content, and there won't be a review process that takes several weeks, basically it is still very free now.

This article mentioned at the beginning, providing certain functional website building tools, it's easy for people with bad intentions to have bold ideas, it's their business if others have bold ideas, but in order to suppress these bold ideas, the platform's defensive measures may affect us normal users.

Previously, there were some cases of Figma accounts being locked online, some of which were quite bizarre. When using someone else's platform to host a site, this kind of centralized thing is most afraid of being controlled, praying that Figma Sites will not suddenly start deleting everyone's things for security reasons one day, and even block users from posting links to other websites?

Figma Sites current content management policy should still continue to follow the original:

• Figma Legal
• How does Figma approach content and account moderation?

Uploaded materials will be automatically scanned, and others can also report by email. No erotic content, no publication of hate content, etc.

Now that we've come to the terms, since Figma Sites is a fully managed platform website, if the platform malfunctions, causing the official website content to not be updated in time, or if the website is down for several days during an exhibition, and the QR code can only display empty space, or if editing data is lost, will there be compensation? Not at all. Figma's Terms of Service, Article 9, Limitations of Liability has it all written out.

There's a new generative AI feature: Figma Make

After seeing these, do you think Figma Sites is a very outdated product? Some AI gods on social media can create a website in a few minutes just by speaking, while Figma Sites requires learning Auto Layout and various Figma-specific tools, manual production, manual operation of the mouse and keyboard, and organizing data from scratch, thinking about the manuscript from the beginning.

ps. Figma Sites' Action has AI functions for text, including Rewrite and Shorten, and you must have a piece of content to operate, there is no function to create something out of nothing.

The Historical Evolution of Figma's AI-Generated Drafting Function

Actually, Figma originally had this kind of functionality to generate designs with just a few words, at the Config conference in 2024, they released a feature called "Make Designs", which allowed users to input text prompts and let AI create UI design drafts, although it was not fully opened to the public, due to some controversies, for example, asking AI to design a weather APP, but no matter how AI designed it, the result was very similar to some existing APPs on the market.

For entrepreneurs who love plagiarism, it is a godlike function, but Figma's positioning is a product development collaboration tool, the main users are all creative people, and there is also an educational version, which is very idealistic, how can they tolerate such controversy? Will Figma's image become the first brand of UI plagiarism in the future? This feature was probably only available for a week before being taken down by Figma. For Figma's own statement, you can refer to this article: An update on our Make Designs feature

A few months later, in 2024/9, Figma relaunched another feature called First Draft, to help users create from scratch, and claimed that the content will not be used for training (First Draft doesn't train on customer content. It uses off-the-shelf AI models (like OpenAI’s GPT-4 and Amazon Titan).

First Draft this function's first step is to choose the desired app/web wireframe or a more complete design, then enter a piece of text, and then AI will generate a design content out of thin air. This function can only be used in Design, it is not available in Sites. (There is a picture above this article that captures the content of the Actions menu in Sites, and there is indeed no First Draft in it).

From this operation, it can be understood that, as the name suggests, this function is used for generation from scratch, and it is not possible to ask AI to modify and fine-tune existing drafts, nor can it imitate and complete a half-finished draft, in actual design work, its practicality is very limited.

Of course, there are also many third-party Figma Plugins that can generate AI, but they usually require extra paid subscriptions.

New AI-gen Features Released by Figma in 2025

This time in 2025, an AI painting UI function was re-released, specifically for Sites, called Figma Make, which has an AI chat conversation window that can interact with design drafts, using the AI model Claude 3.7.

Figma Make currently uses Claude 3.7 Sonnet; we will begin introducing other models in the future.

ref:Introducing Figma Make: A new way to test, edit, and prompt designs

Currently, the official statement is that it will be gradually pushed to Full Seat paid users, who need to go to team settings, turn on the setting Let your team use Figma’s AI features, and then wait patiently, my account can't be used now, wait until it's opened, and I'll share my experience later. (Adjust access to AI features across Figma)

The switch to train designs with your team's content: Let Figma use your team’s content to train AI models, Figma takes steps to de-identify data and protect your privacy, is located below that setting, at least there is a switch, which is already very conscience.

Figma also has the function of generating images from text and the like, Make or edit an image with AI, which can be used in Sites, and is currently free for everyone to use, but this function will be paid in the future (Figma AI will become a paid feature. We'll update you on pricing before that happens.), and it is not known when it will start charging.

Figma in the MCP Era

In the midst of the AI wave, there's a thing called MCP, which has set several universal standards, one of which is to allow AI to decide whether to use external data, some people have ideas about Figma, for example, asking AI to combine Figma's text file content and design drafts to produce a website; or asking AI to draw Figma design drafts. Although it sounds magical, it can be understood as needing to develop an additional layer of intermediate program, so that AI can call Figma's API and perform various operations.

But unfortunately, since Figma provides a design tool, allowing external programs to come in and automate operations is not the main business, Figma's own REST API only provides reading file content, file comment related operations, reading & writing Dev resources (those things like design tokens), Webhooks (such as when a file is updated, a FILE_UPDATE event will be sent to external programs), according to the REST API developed folk MCP application is figma-mcp.

Want to edit various objects in the design draft? These functions are available in Figma Plugins API, but the usage scenarios of MCP and Plugin are a bit different, so I thought it was okay to leave it like that.

Later, a folk project cursor-talk-to-figma-mcp emerged, one of the setup steps is to let people open a single file in Figma Desktop, then import a customized Figma plugin...this way, it connected to the Figma Plugin API, circumventing the insufficient functionality of the Figma REST API.

Although this Figma MCP can control only a few things at the beginning, (you can refer to its src/cursor_mcp_plugin/code.js file, which can only set a few attributes, such as corner radius, fill color, and create basic text, basic shapes, etc.), but at least it is a new milestone

Figma Config 2025 this time doesn't care about MCP, and continues to introduce more using AI within its own software functions, for users, with the same subscription fee, they can use more functions, enjoy a more powerful AI assistant, and improve work efficiency, perhaps this is the reasonable commercial development direction: continuously enhancing product value through a subscription model.

After all, in the industrialized scene of design, it is the AI function with stable, efficient, and deeply integrated industry knowledge that everyone wants, rather than letting business companies waste development capacity, thinking of ways to please the open source community every day, nor is it letting users spend all day piecing together free open source tools.

Who Shouldn’t Use Figma Sites

Figma Sites may be useful in some situations, such as when someone who has never used Figma before says "my requirements are simple, I don't think it will take much time to use Figma Sites", and then starts to lower the budget and working hours. Or they can directly use it as a target for comparison, without needing to understand whether the tool can actually meet the requirements.

This is a bit off track, but to start using Figma Sites to build a website, the first step is to ensure that the company network does not block Figma, as this tool has a high degree of dependence on the internet, and its offline operation function is very weak.

Next, the person assigned to edit the website needs to purchase a Figma Full Seat plan, as the free account cannot edit and publish websites.

Depending on whether you choose the Professional, Organization, or Enterprise plan, a full seat costs between $16 and $90 per user per month — and that’s with annual billing. Monthly billing is even more expensive.

Currently the official has not particularly explained if without renewing Full Seat, after downgrading to the Starter plan, will the website be automatically taken offline? If not, just to keep the website alive, the annual cost of that account will be at least over USD $200.

If you also need to add an extra admin account — say, a client wants to edit the site content themselves — it's manageable if they already have a paid Figma full seat. But if you have to cover the cost and purchase one (or several) additional full seats for them, it gets expensive. Whether billed monthly or annually, each seat starts from around $200 to $1,000 USD per year.

This thing, if spoken from some people's mouths, may become Huh? I just wanted to modify a couple of lines of text, and as a result, I have to pay a few more thousand dollars every year for an account?!

Figma's official promotion specifically mentions three types of websites that are suitable for using Figma Sites:

• Personal portfolio
• Event site
• Product landing page

But I couldn't help but want to complain a bit...

• Do you need a portfolio or resume? The functions and usage logic of Figma, a UI design tool, are mainly for creating web pages or developing APPs, which are different from Word's pagination logic from top to bottom and left to right, PowerPoint's random object insertion, and Notion's block-based content composition. If you are not familiar with Figma, it's better to use Canva...
• Originally, there was a paid Adobe subscription, and Adobe has a website function specifically for portfolios or resumes: Adobe Portfolio. If you already have a paid Adobe subscription, you might as well make the most of it. For designers who are struggling to make a living, there's no need to pay extra subscription fees just to create a website, right?
• It's already 2025, and there are still people who believe that putting up a website can easily attract a lot of visitors. It's like believing that pulling a lion's mane can cure baldness? If you need exposure, consider the Behance platform, which has tracking, comments, and other social exposure attributes.
• Using Figma Sites to create an event website? It can only display event information and cannot provide other functions like event registration. At most, it can only insert iframes or links that jump to other websites, and then it costs $20 per month?
• A product page that cannot directly check out, has no membership function, and requires jumping to another website to make a purchase... When the effect is not good, the tracking data is lost, and you are ready to be blamed by advertisers or others.
• In situations where administrative personnel need to maintain landing pages or event information, they will use Canva to create a graphic and upload it to the backend, which is already good enough. Now, using Figma Sites to create a website, don't you need to teach others how to operate this all-English Figma interface?
• Following the previous point, Figma Sites has all pages and RWD layouts in a large canvas operation interface. If there are many pages or complex layouts, some office computers may not be able to handle this kind of operation.

Figma Sites can't handle a bunch of website functions, but bosses or supervisors may still have all sorts of fantasies, in the lengthy meetings of back-and-forth between infinite expectations and limited actual functions, which is very helpful in increasing personnel turnover rates.

Conclusion

We web engineers and designers have been driven crazy by Figma Sites, feeling that this function is not complete, that function has too many restrictions, who would actually use it to build a formal website? We even can't help but write articles and make videos to detail its shortcomings.

But interestingly, just as we are using various real-case requirements to review Figma's new products, on the other side of the world, design tools are competing to launch the function of importing finished products into Figma files with one click. For example, another tool that also claims to use AI design is demonstrating how to design on their platform and then import the design into Figma Sites, putting the website online.

Relume now works with @figma Sites!

You can generate a site in Relume and import it straight into Figma Sites, or build directly with our Figma Library.

Learn more: https://t.co/OM0Tv2Xz9q pic.twitter.com/DoSw0krvCL

— Relume (@relume_io) May 21, 2025

Relume now works with figma Sites!

Two weeks after Figma Config 2025, Google I/O 2025 was held, and a UI tool called Google Stitch was released, which also allows content to be copied to Figma.

As Figma becomes an essential tool in the industry, everyone will find ways to integrate with it, so whether Figma Sites' own functions are well-done or meet all the website functional requirements in the world is not that important anymore.

The highlight of this launch is not just Figma Sites, I reluctantly only discussed this web function, and the result is still a long article that nobody wants to finish reading.

After talking about some pitfalls, how to explain which websites can or cannot be made with Figma Sites in a way that everyone can understand immediately? Honestly, I gave up.

Because the scale is too different, a three-page introduction site with rich effects, a 100-page content site, a multilingual e-commerce site, and an SEO emergency plan use completely different functions; a simple yes or no will only be misleading.

Because products are always being updated, what we say today - that Figma Sites absolutely cannot create a scoring webpage for psychological tests - may be contradicted tomorrow when a complete feature is launched.
Sometimes, expecting a function to be completed quickly, but waiting for several years and still seeing no progress, this is both the advantage and disadvantage of using a platform to build a website, the platform doesn't provide it, we cannot have it.

I'm not selling online courses, nor do I promote quick fixes, I'm more likely to work on unusual demands that platforms don't want to touch and that packaged software can't achieve, so I won't use exaggerated titles like How to create a sales page using Figma Sites in just 5 minutes, nor will I spend too much discussing what other functions are beyond the scope of Figma Sites, after all, in the end, you still have to go back to traditional full-stack web development or use a specialized SaaS platform.

I don't want to be like some so-called experts, saying what the future will definitely be like or what functions it will definitely have. I just hope this sharing of experience can help everyone avoid a few pitfalls, and I'll continue to supplement it as needed in the future.