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-m9y2 күн бұрын
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?
@benjaminko781212 күн бұрын
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.
@mryechkin7 ай бұрын
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!
@tomasdohnal6 ай бұрын
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!
@angelozodda44496 ай бұрын
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..
@peppapig8077 ай бұрын
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!
@mtfreytag3 ай бұрын
Sooooooo glad you have the State example ❣
@selinov7 ай бұрын
That was Fig-tastic! Where can we find more information on the Storybook implementation, though? 🔍
@Jon889386 ай бұрын
this is awesome, will it be come to Teams plans after beta?
@suvadeepmajumdar49206 ай бұрын
This seems kind of what storybook offers. But great demo
@imohanreddy7 ай бұрын
Will it be coming to angular?
@berrynut70356 ай бұрын
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?
@saoirsethewanderer7 ай бұрын
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.
@skeletoncr6 ай бұрын
Use backslashes \
@haraldskogland86306 ай бұрын
So.. only for Enterprise plans???
@Cathal6786 ай бұрын
Code Connect is be available in beta for Figma Organization and Enterprise plans :)
@ytRap0073 ай бұрын
great
@nicholasprice51376 ай бұрын
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!!
@MirkoSaugo7 ай бұрын
a dream
@MaxWeir6 ай бұрын
Why is the sound so bad?
@skeletoncr6 ай бұрын
I have some problems who can successfuly publish something?