georges_gomes

You have Liquid Glass and then you have this!

My dear hackers,

We have been working on figma.to.website for the last 18 months.

The vision is to add the missing [Publish] button to Figma. Design in Figma and directly publish to the web.

When Figma added the "Autolayout wrap" feature, we saw that this could be a reality.

We think we have something that can be proudly presented here today :)

## Features

The feature list is intense:

  - Custom domain
  - Custom code
  - Embed HTML
  - Accessibility
  - Password protection
  - Redirects
  - Bring your own analytics
  - Open Graph metas
  - Favicon
  - ...

We recently added following major features:

  - Forms
  - Localization (with variables modes)
  - Notion as CMS (for blog post, changelogs, etc...)
  - RSS generation

## Performance

We generate static "vanilla" HTML, CSS and JavaScript for maximum performance.

Images are uploaded to a CDN and delivered in the best possible format (WebP/AVIF when possible) and best possible size for the device.

Everything is served from Cloudflare CDN 300+ edge locations.

In a world where everything is AI, this has been done in pure brute-force old-fashion engineering :D

## We use it ourselves

The website https://figma.to.website it self is made with it. The blog post are coming from a Notion database directly. It's a real pleasure to maintain content in Notion and design in Figma!!

## Thanks for reading!

I hope you will enjoy it as much we do.

Ask us anything.

Cheers,

Georges and the ‹div›RIOTS team (https://divRIOTS.com <- homepage also made with figma.to.website)

I need one today!

There is an app called RDM which can do that.

The keyboard controls are particularly satisfying. Well done.

A leaderboard for speed runners would be interesting :)

Yes, this is a perfect use case for Jampack. You have simple large images in HTML <img>. Jampack would make them responsive with multiple sizes so mobile phone get small images and desktop larger images. And images would be made lazy when outside the screen. Mobile phone would download 1/10th of the data I guess.

Do you have a link you can share? I think the project grid with thumbnails could benefit greatly from Jampack but I would need to see the page to confirm.

To back this up I would point to https://news.ycombinator.com/item?id=32587740

As user @lelandfe pointed out here, Jampack is using browser native loading="lazy".

There is currently no way to change this behavior but I could add an option that would preload the below-the-fold images in the background when all the page is loaded. It's actually a pretty nice idea.

I'm just afraid it will load unnecessary images at the bottom of the page but if it's an option, anybody can choose to have it or not!

I'm receiving lots of static websites by email from people who want to help me with real world examples :heart: you guys are awesome! Thank you so much!

Hi! If the static output of your Next.js project is `./build` then add `&& jampack ./build` to your build command.

If the site is 100% static then it should play nice. If it's hydrated with JS: results may vary. Let me know!

Hi! It's true that it you don't have images, the benefits are limited. Also, your CSS may become bigger at the end because we automatically improve compatibility with browser. You can disable this by setting browserlist to empty string. https://jampack.divriots.com/features/browser-compatibility/

Hi! Happy you enjoyed it! I would have expected better results for Performance metrics! If you don't mind sharing your static site output pre-jampack I would enjoy checking out. georges [at] divriots [dot] com

Needs a little bit of updates :) will do. If you can share your static website on GitHub repo or something I would love to have a look. georges [at] divriots [dot] com

Thanks for all the links! It's definitely bumping my excitement towards subset fonts!

Yes, lots of cool things to do around fonts! I have in TODO to add automatic system font fallback with the right metrics in order to improve CLS automatically. Is it what you call "freeze opentype axes based on font-feature-settings" or is it something else?

I would like to do the subset font optimization. I'm just not sure how much of an improvement it's going to be. Have you done it manually before?

Open source soon: https://github.com/atlassian/pragmatic-drag-and-drop

Like Unity's 5 Nanite!

To edit PDFs in Figma, it exists pdf.to.design now. https://pdf.to.design