Framework: Creating a more connected design system with Code Connect

  Рет қаралды 25,050

Figma

Figma

Күн бұрын

Пікірлер: 24
@dandenney3046
@dandenney3046 7 ай бұрын
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
@bracebrace-m9y 2 күн бұрын
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
@benjaminko7812 12 күн бұрын
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
@mryechkin 7 ай бұрын
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
@tomasdohnal 6 ай бұрын
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
@angelozodda4449 6 ай бұрын
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
@peppapig807 7 ай бұрын
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
@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
@mtfreytag 3 ай бұрын
Sooooooo glad you have the State example ❣
@selinov
@selinov 7 ай бұрын
That was Fig-tastic! Where can we find more information on the Storybook implementation, though? 🔍
@Jon88938
@Jon88938 6 ай бұрын
this is awesome, will it be come to Teams plans after beta?
@suvadeepmajumdar4920
@suvadeepmajumdar4920 6 ай бұрын
This seems kind of what storybook offers. But great demo
@imohanreddy
@imohanreddy 7 ай бұрын
Will it be coming to angular?
@berrynut7035
@berrynut7035 6 ай бұрын
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
@saoirsethewanderer 7 ай бұрын
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
@skeletoncr 6 ай бұрын
Use backslashes \
@haraldskogland8630
@haraldskogland8630 6 ай бұрын
So.. only for Enterprise plans???
@Cathal678
@Cathal678 6 ай бұрын
Code Connect is be available in beta for Figma Organization and Enterprise plans :)
@ytRap007
@ytRap007 3 ай бұрын
great
@nicholasprice5137
@nicholasprice5137 6 ай бұрын
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
@MirkoSaugo 7 ай бұрын
a dream
@MaxWeir
@MaxWeir 6 ай бұрын
Why is the sound so bad?
@skeletoncr
@skeletoncr 6 ай бұрын
I have some problems who can successfuly publish something?
Figma for Edu: Dev Mode collaboration
57:01
Figma
Рет қаралды 7 М.
Увеличили моцареллу для @Lorenzo.bagnati
00:48
Кушать Хочу
Рет қаралды 7 МЛН
Perfect Pitch Challenge? Easy! 🎤😎| Free Fire Official
00:13
Garena Free Fire Global
Рет қаралды 93 МЛН
Master Design Tokens - From Basics to Advanced
44:30
UI Collective
Рет қаралды 31 М.
Remix Austin Meetup - November 2024
32:25
Remix Austin Meetup
Рет қаралды 232
Every React Concept Explained in 12 Minutes
11:53
Code Bootcamp
Рет қаралды 790 М.
Config 2024: Design systems best practices | Figma
48:39
So, you want to be a programmer?
20:43
ForrestKnight
Рет қаралды 392 М.
Framework Opening & Welcome
28:07
Figma
Рет қаралды 10 М.