Custom Component support in Figma import

[emarc]

Description

Allow importing Figma designs that contain “custom components”, matching to the implementation in the project.

Tier

Plus

License

Proprietary

Motivation

Background

We’ve introduced a copy & paste based way to import Figma designs that are made using the Vaadin Design System. This is fairly limited, as it only allows for using the components provided OOTB.

Problem

Copilot can import Figma UIs that are using the Vaadin Design System, but custom components are not yet supported.

Solution

Add a way to map own Figma “components” to code components in the project.
AcmeCard in the Figma file should end up as AcmeCard in the UI when pasted into Copilot.

Stretch goal:
Ask to update UI (instead of add) if N% match.

Notes

Probably loosely base on Figma Code Connect API.

Requirements

• Match custom Figma components to custom project components when pasting (user configurable)

• Documentation

• License check

Nice-to-haves

• Ask whether to add or update UI when pasted components match those in the paste location
• Improve layout heuristics

Risks, limitations and breaking changes

Risks

The best way to make this user configurable is unclear.

Using the Figma API would be easier and guaranteed to work, but may impact the easy use. Can we have both?

These considerations may require a rewrite.

Limitations

We might accept the need to access Figma API or create a plug-in.

Breaking changes

(no breaking changes expected, unless we have to drop the Figma paste in favor of some other import method)

Out of scope

No response

Materials

No response

Metrics

No response

Pre-implementation checklist

• Estimated (estimate entered into Estimate custom field)
• Product Manager sign-off
• Engineering Manager sign-off

Pre-release checklist

• Documented (link to documentation provided in sub-issue or comment)
• UX/DX tests conducted and blockers addressed
• Approved for release by Product Manager

Security review

None