You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I've created an icons.figma.tsx file like the docs suggest using the sample script, and everything is working great as far as Figma goes. The generated code is exactly what I want, ie:
import{Button}from'@acme/ui';import{IconName}from'@acme/icons';<Button><IconName/>
Button Text
</Button>
Where @acme/ui are all the design system React components, and @acme/icons are icon React components specifically. These two are separate packages that live in two separate repos.
I'm trying to add the Figma files to the source repo of the React UI lib, so component imports are local files, but the icon imports come from the separate icons package (ie. they're in the node_modules).
The generated code is correct. However, I'm seeing this warning in the output when publishing:
Import for IconName could not be resolved, make sure that your `include` globs in `figma.config.json` matches the component source file (in addition to the Code Connect file). If you're using path aliases, make sure to include the same aliases in `figma.config.json` with the `paths` option.
Where IconName is the name of my React component icon, which comes from a separate library:
Hey! In this case the warning likely means we're not able to resolve the import, in practice this means you won't see a valid github URL to the source component in Figma, even though the code snippet displays the correct import. It's possible you can get around this by providing an alias mapping using the paths option instead of importPaths for icons here, e.g:
This is obviously not ideal, we'll work on improving this usage of imports as it feels like a common use case. Also I realise this can be a tad confusing since paths and importPaths are quite similar, keen to hear your feedback on this and whether this works.
Another thing, "@acme/icons": "@acme/icons" I don't think will do anything in this case, importPaths is for when you want to transform e.g import { Icon } from './' to import { Icon } from '@acme/icons' - but you're already using the desired import in the code connect file.
Got it, thank you @karlpetersson! That makes sense. I will say that the usage of paths vs importPaths isn't very clear in the current docs, so that definitely helps.
I've created an
icons.figma.tsx
file like the docs suggest using the sample script, and everything is working great as far as Figma goes. The generated code is exactly what I want, ie:Where
@acme/ui
are all the design system React components, and@acme/icons
are icon React components specifically. These two are separate packages that live in two separate repos.I'm trying to add the Figma files to the source repo of the React UI lib, so component imports are local files, but the icon imports come from the separate icons package (ie. they're in the
node_modules
).The generated code is correct. However, I'm seeing this warning in the output when publishing:
Where
IconName
is the name of my React component icon, which comes from a separate library:My
figma.config.json
looks like this:And the component Figma files (ie.
Button.figma.tsx
look like this:What am I missing?
The text was updated successfully, but these errors were encountered: