>>emilsj+(OP)
Wow, this is an amazing update!

Here is an overview of all the features + screenshots: https://twitter.com/Chris_Smeder/status/1671565267145748480?...

1. Component playground

2. Redlining

3. Links to github in components

4. React mode

5. https://animaapp.com plugin will build the component for you...

6. Tasks from Jira and Linear in Figma

7. Figma in VS code

8. Autocomplete fill in code when you select a layer

FYI: To learn more about Dev mode, check out the live (free) workshop from Figma at 2pm PST https://config.figma.com/agenda?d=day-2

And here is the keynote where the announcement preview was shown https://youtube.com/watch?v=-44qrQDnLMM

>>yewenj+0f
They bought an AI design tool company today https://twitter.com/jsngr/status/1671561341893742592

>>emilsj+(OP)
I found this link explains what it is better:

https://www.figma.com/dev-mode/

>>dsgnr+Ht
It will require a license https://twitter.com/Chris_Smeder/status/1671566245190303744

>>wdb+db
DOJ is planning to sue, but who knows.

UK antitrust regulator is looking at the merger as well. (the same people that blocked activision microsoft deal in UK)

https://assets.publishing.service.gov.uk/media/64523aa4faf4a...

>>zyang+7I
Hey, Akbar here (Dev Advocate for Figma). We have the Friends of Figma discord that has dedicated channels for plugin developers - https://discord.gg/xzQhe2Vcvx. When you join - get the @Developers role in #interest-roles and @Developer Announcements in # general-roles if you want to talk plugin development!

>>megama+9G
Hey, Akbar here (Dev Advocate for Figma) - variables are surfaced in CSS code snippets.

If you're looking for something more custom, you can take advantage of our new Variables Plugin API beta (https://www.figma.com/plugin-docs/working-with-variables) and export them with what you need!

>>emilsj+(OP)
From the Nim programming language community, this project is this feature: https://github.com/treeform/fidget

>>morten+IJ
I love Penpot!!!

They had Wrap before Figma. They have Flex and Grid!

https://www.youtube.com/watch?v=VchMDD0PrZE

>>view+De
Just added support for the inspect panel and codegen to my React Native -> Figma plugin.

You should see it in the From Community list or you can find it here:

https://www.figma.com/community/plugin/821138713091291738

>>yewenj+0f
I've been experimenting with using LLMs to map Figma designs directly into a working production-level codebase. There's quite a bit of compression you need to do in order to convert the raw Figma JSON into a format that an LLM can understand, but overall it actually performs quite well. Here's a quick demo: https://www.youtube.com/watch?v=s9JRBw7kR9g

>>a1o+eR
You can, actually. See "Mac-only license" in their pricing [0]. Just as before, you get one year of updates.

True, when Sketch started switching to a subscription model, they've buried the link to renew the license very deep so it was really hard to find, but I guess they've came back to their senses and it is now available right on the pricing page.

[0]: https://www.sketch.com/pricing/

>>Akrony+Ze1
And this M.O. would seem to make zero steps toward recognizing the tedium of their platform:

"By hovering and clicking around the Figma canvas, you can find and export all the information you need"

Because "hovering" over every shape or area in a screenful of design content to prospect for hidden goodies, then exporting them one by one, is a great way for developers to acquire a complete rundown of what they need to implement.

I guess I can't speak for all developers, but I don't want to dick around with an Advent calendar that's masquerading as a design document.

Meanwhile, has Figma fixed the absurd confusion that it presents in the UI between projects and teams? It seriously confuses those two things right there on the "home" page of your account.

And finally, for those who don't want to support Adobe's software-rental nonsense, there is an open-source alternative to Figma called Penpot: https://penpot.app

>>emilsj+(OP)
Framer [1] seems mind-blowing for small product teams. Or at least the idea of it if Framer can be adopted successfully by a small team. I tried it briefly on a small project, it felt powerful, but big disclaimer we never went to "prod" on that project. Also I am not sure about performance, etc. Any thoughts or anecdotes?

[1] https://www.framer.com/

>>ryanSr+s6
This is one of the reason we built Specify (specifyapp.com) which is a Design API that helps you sync design tokens and assets from Figma to any platforms.

For instance, let's say you're a React developer. Designers set their layers as exportable in SVG, and Specify can automatically export the SVG string, optimize it with SVGO, set the end filename, and generate a JSX component for React - automatically. Here's a short video that should help you understand the whole process (https://youtu.be/Z7fX0v3KFmY?t=353).

You basically just have to configure Specify once, and every time designers update icons in Figma you'll get automated pull requests with icons transformed exactly how you want.

>>eddier+7o1
I use this hack to turn mouse movements into scroll movements with Hammerspoon. It's one of the first things I need on a fresh install of MacOS.

https://github.com/reinier/dotfiles/blob/main/hammerspoon/er...

It let's you hold down the right click key and use your mouse to scroll any x/y direction.

Original source for this hack is offline, but Internet Archive to the rescue: https://web.archive.org/web/20200808000102/https://savouryti...

BTW I use Figma all the time, I have never any issues scrolling with this hack.

>>tharku+sm1
Yep, this is a problem that people have been working on in the Mechanical Drafting world for well over a hundred years.

I'm also surprised we don't see the utilization of some GD&T style language to specify design intent. (https://www.gdandtbasics.com/gdt-symbols/)

For the problem of:

"I have a design I would like produced. Please make it like this please."

I couldn't imagine giving a machinist or welder a drawing containing no annotations. (This would be something an intern does once and the shop calls them up to tell ask them questions about what they actually need for 45min. Probably sending them back to rework it)

Pulling from the mechanical world:

  * make 3d models (equivalent to HTML/CSS components)
  * put 3d models into an assembly (HTML components together on the page)
  * make variations of the assembly to show range of motion (variations on user activity)
  * make "drawings" that contain components that are broken down to the smallest practical level (this would map to: modal, tables)
    ** in software these are usually managed similarly to Spreadsheet tabs
    ** this would contain a reference to the 3d parts + dimensional annotations. This means updating the assembly/part geometry automatically updates the drawing
  * anytime significant changes are made, issue new "Revisions" of those "drawings" are committed, issued, and then sent to the shop
  * 3d modeling software has change management systems so you'll automatically know if your proposed changes to a 3d part will break a drawing or assembly that depends on it

>>jt_b+OK1
Hello,

We developed an open source plugin that let you go from Figma to tailwindcss + react. Feel free to check it out

https://www.figma.com/community/plugin/1178847414663679049/B...