Framework: Creating a more connected design system with Code Connect

  Рет қаралды 24,261

Figma

Figma

Күн бұрын

Пікірлер: 22
@dandenney3046
@dandenney3046 6 ай бұрын
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
@mryechkin
@mryechkin 6 ай бұрын
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!
@peppapig807
@peppapig807 6 ай бұрын
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)
@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..
@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 2 ай бұрын
Sooooooo glad you have the State example ❣
@Jon88938
@Jon88938 6 ай бұрын
this is awesome, will it be come to Teams plans after beta?
@selinov
@selinov 6 ай бұрын
That was Fig-tastic! Where can we find more information on the Storybook implementation, though? 🔍
@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?
@imohanreddy
@imohanreddy 6 ай бұрын
Will it be coming to angular?
@suvadeepmajumdar4920
@suvadeepmajumdar4920 5 ай бұрын
This seems kind of what storybook offers. But great demo
@saoirsethewanderer
@saoirsethewanderer 6 ай бұрын
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 5 ай бұрын
Code Connect is be available in beta for Figma Organization and Enterprise plans :)
@ytRap007
@ytRap007 3 ай бұрын
great
@MirkoSaugo
@MirkoSaugo 6 ай бұрын
a dream
@skeletoncr
@skeletoncr 6 ай бұрын
I have some problems who can successfuly publish something?
@nicholasprice5137
@nicholasprice5137 5 ай бұрын
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!!
@MaxWeir
@MaxWeir 6 ай бұрын
Why is the sound so bad?
Figma for Edu: Dev Mode collaboration
57:01
Figma
Рет қаралды 7 М.
I Turned My Mom into Anxiety Mode! 😆💥 #prank #familyfun #funny
00:32
How Strong is Tin Foil? 💪
00:25
Brianna
Рет қаралды 62 МЛН
Car Bubble vs Lamborghini
00:33
Stokes Twins
Рет қаралды 31 МЛН
UI Libraries Are Dying, Here's Why
13:28
Theo - t3․gg
Рет қаралды 318 М.
Master Design Tokens - From Basics to Advanced
44:30
UI Collective
Рет қаралды 29 М.
Config 2024: Design systems best practices | Figma
48:39
React UI Library Structure, Storybook and Tests
22:50
Jack Herrington
Рет қаралды 50 М.
Framework Opening & Welcome
28:07
Figma
Рет қаралды 10 М.
Bringing Figma to developers in VS Code
58:47
Visual Studio Code
Рет қаралды 41 М.
Figma for Edu: Auto layout components
58:17
Figma
Рет қаралды 40 М.
I Turned My Mom into Anxiety Mode! 😆💥 #prank #familyfun #funny
00:32