Framework: Creating a more connected design system with Code Connect
Вставка
- Опубліковано 29 вер 2024
- At Framework, we announced Code Connect, our newest Dev Mode capability - now available in beta. Code Connect delivers code from your design system to Dev Mode, helping developers build with consistency and speed. In this session, Jake Albaugh, Figma developer advocate, shares an overview of Code Connect and some tips on how to get started.
Everything we launched at Framework → www.figma.com/...
More about Code Connect → www.figma.com/...
Get started with Code Connect → github.com/fig...
Figma is free to use. Sign up here: bit.ly/3msp0OV
____________________________________________________
Find us on ⬇️
X (formerly Twitter): / figma
Instagram: / figma
LinkedIn: / figma
Figma forum: forum.figma.com/
____________________________________________________
#Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems
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!
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!
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
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)
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..
Will it be coming to angular?
That was Fig-tastic! Where can we find more information on the Storybook implementation, though? 🔍
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!
I have some problems who can successfuly publish something?
this is awesome, will it be come to Teams plans after beta?
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?
This seems kind of what storybook offers. But great demo
Why is the sound so bad?
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!!
a dream
So.. only for Enterprise plans???
Code Connect is be available in beta for Figma Organization and Enterprise plans :)
Sooooooo glad you have the State example ❣
great
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.
Use backslashes \