Figma just made adding a glass effect super easy.

It looks nice and lots of designers will be using it.

Add effect > glass > play with params 🫰

Just overrode the Monokai theme background and not sure why I didn’t do this 10 years ago

👉 Advanced styles

- Pointer events none so you can hover over the globe and it registers as hovering over the stats
- Calcs to use a consistent offset and move things around
- Using --ease-squish-3 from Open Props
- The only custom CSS was keyframes for the live indicator

Updating my template starter kit with these styles 🙂

What do you do when implementing a Figma design that has images that go to the edge of the design and then are cut off? How should this be handled on larger screens?

I personally export the non-clipped image and on larger screens show the full image outside of the container.

Figma to WS update: Color vars!

1 Feed it CSS from Figma
2 Suggest the Open Props color groups
3 AI maps colors to palette variables (—gray-12)
4 Human intervention lets you customize the mappings
5 AI maps the color vars to semantic vars by interpreting their usage from the CSS

New AI SaaS template coming soon 🔥

I’m using Preview mode 5x more with the new shortcut…

⌘ + Shift + D

All with the left hand.

This shortcut is for toggling to Design mode, but if you’re already in it, it’ll take you to Preview.

Woah, I just learned that if you hold option while taking a screenshot, it grows outwards from the center point.

This makes it a lot easier to take a screenshot with the desired focal point in the middle.

Figma → Webstudio update:

Added support for Local Styles! Including:
- Grid template columns based on what it sees
- Flex with direction and Craft gap vars
- Background colors (on `section`)

Also added a CLI and some other helpful tasks 😉

Figma to Webstudio update:

Now using OpenAI API in the local script to convert the image to HTML.

Then the usual code converts the HTML to Webstudio AST and copies it to the clipboard.

Note: I trimmed the video, the API takes longer than that :)

Updated Figma to Webstudio with improved process:

- ChatGPT for screenshot to HTML with attributes.
- Custom script for HTML to Webstudio AST.

ChatGPT is very reliable for the HTML but too inconsistent with the AST.

Also added support for:
- Alt text
- Grid columns
- Cards

Working on a Figma to Webstudio ChatGPT prompt.

It outputs Craft-compliant* Webstudio AST (format for pasting)

It adds:
- Components
- Existing Tokens (section, container, grid, headings, buttons)
- Renames instance labels
- Sets box tag like h2 or section

*most of the time😉