FrameQuery Figma plugin: Like CSS container queries in your Figma components and frames

I currently lead an enterprise digital Product Design team, and I'm also design co-lead (together with my dev co-lead) for our Design System. We already have multiple UI (code) components that use container queries. This is gonna be soooooooooo helpful on the design model side, because with this plugin, our designers don't have to remember when to manually swap layouts on our models.

First iteration took about 10-12 hours total, and about 100~ credits on my personal Pro account. Fixing the bugs took another 200 or so credits. Learned quite a bit of stuff along the way though. Adding support for components imported into libraries (without which the plugin is basically pointless) took another 300~ credits.

Still need to get it cleaned up, it's a mess, but at least the core bugs are fixed.

This is a working copy, and here's how to use it, if you're curious. :)

Load & use FrameQuery Figma Plugin

  1. In Figma desktop app ONLY, open a Figma file with components that you want frame queries on.
  2. Right-click on empty space in Figma canvas: Plugins > Development > Import Plugin from Manifest.
  3. In FrameQuery 1.0.30 > new-plugin > select manifest.json.
  4. Click on "Nugget's Frame Queries" and the plugin should load.
  5. In the component that you want to have frame queries on, add a new Property FQ-size. Needs to be exactly this string incl. capitalisation. You can name the variants anything you like, for a given value of "anything". Spaces are supported, but there are some other characters that might not be.
  6. FrameQuery should dynamically pull your variants from anything you set in FQ-size.
  7. With the component selected, turn FrameQuery on.
  8. Set your breakpoints. A max is needed for your biggest breakpoint, just make it something silly like 9999px.
  9. Pop a component instance onto the canvas, stick it in a frame, and resize the frame. The current version only cares about width, but I might enhance with height later.

FrameQuery appends 🤖 to component names that have FQ enabled, and prepends 🤖 to frames that contain component instances with FQ enabled, so we can keep track of 'em without messing up how our prototypes look in demos.

FrameQuery also works with components imported from libraries (1.0.30)

  1. Follow steps 1-8 from above in your library file, and publish the library.
  2. Close the library file (you don't need to have it open).
  3. In your target file, load FQ.
  4. Pop in the component instance from your library file, just like you normally would. This is the component with 🤖 appended to its name.
  5. Pop the component instance in a frame.
  6. 🤖 is prepended to the frame name, and the frame is now responsive.







BDO Barter Planner

Proliferate little web apps, proliferate! Doesn't make up for the crap that's polluting the interwebs in terms of content, but I guess at least I can have my own little web apps now.

I got sick of writing the same stuff in Notepad over and over, and realised that, "hey, now I can get an LLM (via Windsurf) to write this really simple thing for me!"

Behold, the Black Desert Online (BDO) Barter Planner!

Bartering is basically a trading (mini) game. You sail around trading stuff (...bartering it). BDO has a really really big map, and it's almost all non-instanced, so you can (literally) sail around for hours if (a) you want to for some reason; (b) you are bartering or hunting sea monsters.

In the "Item" column, I have the Item (survival kit) that I need to bring to a particular Location (Arakil island) to barter. It's grade "g" for green, and what I'll get in return for the barter is "box". The number of the item I need to bring is in the Quantity column.

This is a far from optimised setup. I don't even try to optimise distance and time, except to my own lackadaisical playstyle of "are those things in the same general vicinity". It doesn't have Margoria nor Valencia nodes because I've <.<; memorised all of those. Plus the "Crow Coin" option in the Barter UI in-game renders it unnecessary to track those nodes for trading. At least for me.

Features

  • Easily track the trade goods you need for your non-Margoria barters, grouped by proximity.
  • Search and filter by location names and codes.
  • View location codes (arbitrarily assigned by me) by clicking on "Location code" column header.
  • Clear rows when you've completed the barter.
  • Sort rows to the top as you fill them in, so your to-do barters are always visible.
  • Data is saved in LocalStorage, so you can open/close the file without worrying. Data is removed when you clear it.
  • Runs purely local on your machine.
  • No installation needed. Just unzip the file and open it in a web browser.

Download


Droplet aka ChatGPT (via Windsurf) wrote me a knock-off Airdrop/Snapdrop! :D

First iteration / MVP

Windsurf told me how to install Python, and wrote the base HTML and JS, plus the PY file needed to run the Droplet server locally. My original idea was to use the web browser's localstorage, but that didn't work out, not least because the amount of data I could store that way is puny. The first iteration was very ugly and unfriendly, as the text/instructions were written in a way that made sense only to me.

After testing with my partner helping with uploading files (it worked, yay MVP), then it was refinement time.

Later iterations

  • Add determinate loading bar during upload.
  • Make it prettier.
    Hm! I've heard about classless styling/boilerplate HTML frameworks, maybe I can use one of those!
    I ended up using the very lovely Water.css
  • Add understandable-to-humans instructions.
  • Support folder uploads.
  • Delete uploaded files.
    From the web app, instead of me deleting directly from Droplet's "upload" folder.
  • Display human-readable network device name of server.
  • Improved instructions (round 2).
  • Add QR code for easier mobile device access.
This was great fun, and I did manage to pick up a little bit about server side code, and improve my (very poor) JS knowledge a little to boot. And of course, now I have a Snapdrop replacement. ;)

Get a Droplet of your very own. :D