search

figma / code-connect

A tool for connecting your design system components in code with your design system in Figma
MIT License
928 stars 67 forks source link

Guidance on Connecting Common Platform Component Designs for Multiple Platform Code #105

Open siddharthkul opened 3 months ago

siddharthkul commented 3 months ago

Hello CodeConnect Team,

We have a scenario where our design team maintains a single Figma library for all our component designs, such as Button, Card, Link, etc. However, most of these components are implemented on two platforms: web (React) and mobile (React Native). These components however share one Figma counterpart.

Here are our specific questions:

  1. Single Platform Components: We understand that if a component is only used on mobile, we should connect the mobile component, and if it is only used on the web, we should connect the web component. However, we need guidance on how to handle common components that are used on both platforms, eg Button, Link, etc.

  2. Differences in API Surfaces: While these common components share similar API surfaces, there are platform-specific differences. For example, React Native components use StyleProps, while React DOM components use React.CSSProperties. Does this difference matter when connecting components to Figma, unless they are mapped as Figma props? How should we proceed to ensure accurate mapping and functionality in Figma for these common components?

  3. Figma Libraries: Is there an expectation to maintain two separate Figma libraries, one for web components and one for mobile components, to handle these differences more effectively?

Your guidance on best practices for connecting these multi-platform components in Figma would be greatly appreciated.

Thank you for your support!

dentrado commented 3 months ago

Hi @siddharthkul! We recently added support for specifying custom labels, so you eg. can upload the web examples under the default label "React" and mobile under a custom "React Native" label.

You can either specify the label using "label": "React Native", in your config file, or using the --label flag for the figma connect publish command

siddharthkul commented 3 months ago

Thanks @dentrado!

I was able to figure out how to change the label in Figma UI, is there a way to auto-configure it? Say Button (when used in a mobile screen) to show the mobile component code-connect and likewise for web.

tomduncalf-figma commented 2 months ago

Hey @siddharthkul, we don't have anything like this right now but it could be an interesting feature. Is there something about the instance, or otherwise in the design file, which indicates that the component is being used in a mobile context?