Open caseybaggz opened 1 month ago
kelseyleftwich
commented
1 month ago Hi Code Connect team 👋 I'm also experiencing this issue. We experienced this last week and came across a similar issue that was resolved and that fix appeared to resolve it for us as well.
tomduncalf-figma
commented
1 month ago Hey @caseybaggz @kelseyleftwich, sorry to hear you're having issues!
Do either of you have a repro case you could share with us? Either a simple repro which we can follow (e.g. a screenshot of the props in Figma and the contents of the Code Connect doc), or if it's easier to share your whole Figma file, you can reach out to Figma supprt, who will be able to tell you how you can give us temporary access.
caseybaggz
commented
1 month ago @tomduncalf-figma I provided both the screenshots and our repo in my description. It's an OSS project.
Let me know if I'm missing something in there from your request. We are also an enterprise customer if it helps streamline things?
kelseyleftwich
commented
1 month ago Hey @caseybaggz @kelseyleftwich, sorry to hear you're having issues!
Do either of you have a repro case you could share with us? Either a simple repro which we can follow (e.g. a screenshot of the props in Figma and the contents of the Code Connect doc), or if it's easier to share your whole Figma file, you can reach out to Figma supprt, who will be able to tell you how you can give us temporary access.
Certainly.
Screenshot with props:
Code Connect file:
/* eslint-disable @typescript-eslint/no-empty-function */
import figma from "@figma/code-connect";
import { SearchInput } from ".";
/**
* -- This file was auto-generated by `figma connect create` --
* `props` includes a mapping from Figma properties and variants to
* suggested values. You should update this to match the props of your
* code component, and update the `example` function to return the
* code example you'd like to see in Figma
*/
figma.connect(
SearchInput,
"https://www.figma.com/design/nEOb1ShfdQ8RSnYlmcWhVV/02%E2%80%94Component-Library?node-id=0-6650&m=dev",
{
props: {
size: figma.enum("Size", {
small: "sm",
xs: "xs",
}),
},
example: (props) => (
<SearchInput size={props.size} value="input text" onChange={() => {}} />
),
}
);I've also tried including all the possible Size props but it doesn't seem to make a difference.
/* eslint-disable @typescript-eslint/no-empty-function */
import figma from "@figma/code-connect";
import { SearchInput } from ".";
/**
* -- This file was auto-generated by `figma connect create` --
* `props` includes a mapping from Figma properties and variants to
* suggested values. You should update this to match the props of your
* code component, and update the `example` function to return the
* code example you'd like to see in Figma
*/
figma.connect(
SearchInput,
"https://www.figma.com/design/nEOb1ShfdQ8RSnYlmcWhVV/02%E2%80%94Component-Library?node-id=0-6650&m=dev",
{
props: {
size: figma.enum("Size", {
small: "sm",
xs: "xs",
medium: "sm", 👈
large: "sm", 👈
}),
},
example: (props) => (
<SearchInput size={props.size} value="input text" onChange={() => {}} />
),
}
);@tomduncalf-figma confirmed our icons are still successfully working. Just published 2 new ones:
Our FieldMessage, Label, and Tooltip are still erroring though. Here is what we have tried:
Our Button and IconButton are also still working fine
caseybaggz
commented
1 month ago Ran the component fetch API on the FieldMessage just in case and also successfully getting that:
Fetching component information from Figma...
Successfully fetched component information from Figma
{
components: [
{
id: "9266:1663",
name: "FieldMessage",
type: "COMPONENT_SET",
scrollBehavior: "SCROLLS",
componentPropertyDefinitions: [Object ...],
blendMode: "PASS_THROUGH",
children: [
[Object ...], [Object ...]
],
absoluteBoundingBox: [Object ...],
absoluteRenderBounds: [Object ...],
constraints: [Object ...],
layoutSizingHorizontal: "FIXED",
layoutSizingVertical: "FIXED",
clipsContent: true,
background: [],
fills: [],
strokes: [
[Object ...]
],
cornerRadius: 5,
cornerSmoothing: 0,
strokeWeight: 1,
strokeAlign: "INSIDE",
backgroundColor: [Object ...],
layoutMode: "VERTICAL",
counterAxisSizingMode: "FIXED",
itemSpacing: 24,
primaryAxisSizingMode: "FIXED",
paddingLeft: 10,
paddingRight: 10,
paddingTop: 10,
paddingBottom: 10,
layoutWrap: "NO_WRAP",
strokeDashes: [ 10, 5 ],
exportSettings: [],
effects: [],
fileKey: "ducwqOCxoxcWc3ReV3FYd8",
figmaUrl: "https://figma.com/file/ducwqOCxoxcWc3ReV3FYd8/?node-id=9266-1663",
}
],
properties: [
{
Text: [Object ...],
invalid: [Object ...],
}
],
}@tomduncalf-figma Last one before I hear again. We created a new Page and new FieldMessage set - still getting same error.
EDIT
Also confirmed FieldMessage still errors during the following scenarios:
ptomas-figma
commented
1 month ago @caseybaggz hey thanks for the details, would you mind getting in touch with our support team to be able to share the design file that you're annotating privately with us. That would help us streamline the debugging. Thanks!
caseybaggz
commented
1 month ago @caseybaggz hey thanks for the details, would you mind getting in touch with our support team to be able to share the design file that you're annotating privately with us. That would help us streamline the debugging. Thanks!
Just in case you have some internal power to streamline:
We've received your request (ticket #1062332).
caseybaggz
commented
1 month ago @ptomas-figma @tomduncalf-figma latest update:
I will now escalate your ticket to our Technical Quality team to liaise with our engineering team on getting this issue fixed. Somebody from the TQ team will be in contact with you in due course.
caseybaggz
commented
1 month ago Heard back and it seems the problem was that we were using textContent which the fix was to switch to string. The (current) docs are not as detailed about this difference - so here is an alternate API:
figma.string(figmaPropertyName: string)Use this method when you need to access a Text Content property assigned to the Component and reflect that within your Code Connect Snippet.
Example:
{
props: {
text: figma.string('Text') // "Text" is the property name used in Figma
},
example: (props) => <Button>{props.text}</Button>
}figma.textContent(textContentValue: string)Use this method when you need to access the Text Content that is used within a component (not the property). If you want to get the value of a Text Content property - use figma.string instead.
Example:
{
props: {
text: figma.textContent('The Content In Figma') // This is the value of the Text Content property
},
example: (props) => <Button>{props.text}</Button>
}Hi @ptomas-figma. I opened a ticket with support. My organization has an Organization plan with Figma. I haven't heard anything yet but it looks like someone watched the Loom I shared.
I am noticing some other variants of components fail but I don't know why. For instance when the "Search" field in the variant object here is true, I get the "failed to load code connect" error in Figma. Other variants work without issue (I have "Search" as false in those). ¯_(ツ)_/¯
figma.connect(
PageHeader,
"https://www.figma.com/design/nEOb1ShfdQ8RSnYlmcWhVV/02%E2%80%94Component-Library?node-id=0-15466&m=dev",
{
variant: {
"Sub-controls": "none",
Search: true,
"Actions?": false,
},
props: {},
example: () => (
<PageHeader>
<PageHeader.HeaderContent>
<PageHeader.PageHeaderLeftSlot title="Page title" />
<PageHeader.PageHeaderRightSlot>
<SearchInput value="" onChange={console.info} />
</PageHeader.PageHeaderRightSlot>
</PageHeader.HeaderContent>
</PageHeader>
),
}
);It would be helpful to get more detailed error messages.
doozMen
commented
1 month ago Context: I'm integrating in SwiftUI components.
I like the idea but still a bit unstable product unfortunately. I first taught the failures where random but I can now reproduce them. I have 2
super which is a reserved keyword in swift and cannot be used. I added in code supers around that to make it compile and published. But that again resulted in the same error as described above.Now after adding multiple components it works quite well! So my initial conclusion that this is not worth a 1.0 release was wrong. Congrats on the product and I do hope you can remove node.js
jyyang0
commented
1 month ago Hi @doozMen -- on #1 -- Right now we only allow for linking to the top level component set rather than a single variant. For specifying specific variants, you could implement the optional var variant: [String: Any] which will allow you to specify which variants a specific code connect file is linked to.
on #2 -- Thanks for the feedback here -- As you've noticed, the code that is initially implemented in the comments usually will not compile, but it can serve as an example for how you would link your properties to code. Here you just need the string parameter to reflect the Figma property name (For example, for a string property you could do)
@FigmaString("super")
var myString: String = ""Note that the actual variable name can be anything, as the parser will automatically look for the swift variable name in your example code to substitute what your value in Figma is.
doozMen
commented
1 month ago @jyyang0 thanks for your reply and help with variants. This I have to test. I now look forward to using it more. I do hope in the future you plan to add versioning? but that is off topic. Just thanks for your informative response.
tomduncalf-figma
commented
1 month ago Hi @kelseyleftwich, are you still having issues here?
@caseybaggz was your original issue resolved?
caseybaggz
commented
1 month ago @tomduncalf-figma yup! Swapping over to use the .string method fixed it on our side!
"@figma/code-connect": "^1.0.1",- React parserProblem
For some reason we cannot figure out, CC is working with some components and not others. For the components that are not working, the CLI will pass validation and publish successfully but Figma will show an error in the UI (see attachments).
Components that do work
Components that do not work
These components will successfully pass validation and publish but for some reason, show an error in the Figma UI (see attached). If there is any way I can help outside of our public repo being linked above, please let me know.
Resources