Framework: Creating a more connected design system with Code Connect

[@dandenney3046]

On top of being excited for the feature, I think this is the best product demo I've seen. Jake clearly outlined the problem, shared how Code Connect fixes it, and used it live to demonstrate it

[@bracebrace-m9y]

Can I understand 'code connect' feature like this: first, the component code has been written by the programmer. and there's an person who already know how to use the component, he built the bridge(the component.figma.tsx etc.), and so some other coworkers who doesn't know how to use the component , doesn't need to spend time to learn docs of the component anymore, and he can see how to implement in figma vividly. is my understanding right?

[@benjaminko7812]

The real problem is that developers often struggle to turn variables and components into code because Figma still lacks an official way to export variables as tokens. This issue needs to be resolved; otherwise, Dev Mode will remain just another normal visual inspection tool.

[@mryechkin]

This is so awesome. Seriously. I'm so excited to see where you guys take this, the opportunities this opens up are nearly endless. I was playing around with creating a simple codegen plugin for Dev Mode earlier, but the solution ended up being too convoluted for my liking, so I kind of gave up on the idea. Code Connect not only solves this out of the box, but it does it so elegantly, and with so much more to offer. Best part, I don't need to create and manage a separate plugin. Amazing job, team!

[@tomasdohnal]

Great explanation and walkthrough! really glad to see that you went beyond the most basic example and showed how to handle more complex ones as well!

[@angelozodda4449]

So cool!!.... This helps so much... Pushes UX and UI designers to think a bit more as developers and blends that line... is the right way to be more involved a good product creation process..

[@peppapig807]

another thing we struggle with in terms of having figma components match the way things are structured in code is that we can't put components inside other components e.g. we have a Card component, but if I want to put something inside that card, i have to detach the instance. I know there are workarounds by adding invisible "slots" in the Card, but that workaround is messy and also sometimes doesn't work (wonky autolayout behaviours)

[@midhunks5524]

Hey, I tried running the figma connect command to link Figma with VS Code, but I keep running into errors. First, I got an issue with PowerShell not recognizing the ampersand (&) in the URL, and after fixing that, I got an error saying 'figma' is not recognized as a command. Has anyone else faced similar issues? I've been stuck for a while, and any help would be appreciated!

[@mtfreytag]

Sooooooo glad you have the State example ❣

[@selinov]

That was Fig-tastic! Where can we find more information on the Storybook implementation, though? 🔍

[@Jon88938]

this is awesome, will it be come to Teams plans after beta?

[@suvadeepmajumdar4920]

This seems kind of what storybook offers. But great demo

[@imohanreddy]

Will it be coming to angular?

[@berrynut7035]

What is the difference between Code Connect and Code Snippet Editor plugin by figma? Both allow us to see the corresponding code for the components. So what makes Code Connect different than Code Snippet Editor?

[@saoirsethewanderer]

Having all kinds of trouble with the URL from Figma. It doesn't escape things properly and then when I escape it, it still gives errors for reserved characters. Any ideas how to get a URL from Figma for my component that actually works.

[@skeletoncr]

Use backslashes \

[@haraldskogland8630]

So.. only for Enterprise plans???

[@Cathal678]

Code Connect is be available in beta for Figma Organization and Enterprise plans :)

[@ytRap007]

great

[@nicholasprice5137]

Source of truth question: Has anyone figured out a way to always sync relevant figma design files with the visual portions of components in the code base, and vice versa, such that the design files and code base can be synced, regardless of whether it’s updated from the visual design file or from the code itself? I want the figma design file and ui portions of my code to be “two sides of the same coin” that are always in sync/reference the same source of truth. Is there a way for edits to xyz designs to be pushed from figma to the code base, too? Or is there a way to achieve that sync with storybook, or some other integration? More specially, here’s what would be magic: Authorized change to a figma design file can be pushed to relevant parts of ui component code in the code base. And Authorized changes to ui portions of code within a component can be pushed to the Figma design file. This way, the design portions of a component in Figma always reflect the ui portions of code in the code base, and vice versa. Obviously, I realize this introduces version control/auth issues, but if there’s a way to do it, I’m sure any third party CI/CD pipeline and repo could be utilized to handle all the version control and auth issues. Has anyone found a way to achieve such a sync? And/or does code connect provide the missing piece to push from repo to design file, and there’s some other feature or software that can push design file updates into xyz repo? Thanks all!!

[@MirkoSaugo]

a dream

[@MaxWeir]

Why is the sound so bad?

[@skeletoncr]

I have some problems who can successfuly publish something?