Skip to content

Conversation

LinKCoding
Copy link
Contributor

@LinKCoding LinKCoding commented Aug 14, 2025

Overview

  • Adds a code-connect folder in /packages
  • Moves CLI generated Code Connect files inside the code-connect
  • Adds a MCP section to storybook and includes stories for Figma MCP and code connect usage

PR Checklist

  • Related to designs:
  • Related to JIRA ticket: GM-1194
  • I have run this code to verify it works
  • This PR includes unit tests for the code change
  • This PR includes testing instructions tests for the code change
  • The alpha package of this PR is passing end-to-end tests in all relevant Codecademy repositories

Testing Instructions

Don't make me tap the sign.

  1. Go to Meta/About /?path=/docs/meta-about--docs
  2. Click on the MCP card (and see that it links to the right page)
  3. Check the info
  4. Click on the new Figma MCP and Code Connect pages
  5. Check that the info is correct
  6. (Optionally) Go to Gamut Figma page
  7. Click around in Atoms and see that code connect looks (mostly?) accurate
  8. ...
  9. Finish and do a celebratory dance

—-
Would love feedback on:

  1. Organization of CodeConnect Atoms in particular
  2. Rules used for Cursor + Copilot
  3. Thoughts on the info provided in docs (anything else come to mind that we should add?)
  4. If certain files aren't necessary, e.g. the landing page example benchmarks

PR Links and Envs

N/A any changes are reflected in Storybook.
The code-connect directory isn't part of the gamut-kit package.

Copy link

nx-cloud bot commented Aug 14, 2025

View your CI Pipeline Execution ↗ for commit da261a9


☁️ Nx Cloud last updated this comment at 2025-09-15 16:10:11 UTC

@LinKCoding LinKCoding marked this pull request as ready for review August 28, 2025 20:07
@LinKCoding LinKCoding requested a review from a team as a code owner August 28, 2025 20:07
@@ -0,0 +1,45 @@
import { client } from '@figma/code-connect';
Copy link
Contributor Author

@LinKCoding LinKCoding Aug 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure if we actually need this entire file, it was a WIP from hackathon

Copy link
Contributor

@dreamwasp dreamwasp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

left a few comments but looks awesome, can't wait to start using it!

npx figma connect publish --token=PERSONAL_ACCESS_TOKEN
```

There are future plans to eliminate the need for individuals to publish these files and use GitHub Actions instead. Stay tuned!
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe we should keep this internal to Gamut for now? i don't really want other teams publishing to CodeConnect just yet

export const parameters = {
id: 'Meta/MCP',
title: 'MCP',
subtitle: 'Documentation related to the Figma Model Context Protocol.',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Myabe add soemthing like "exclusive to Codecademy + Skillsoft employees" or something like that

Comment on lines 49 to 53
}),
// placeholder: figma.nestedProps('placeholder', {
// true: 'Placeholder text',
// false: undefined,
// }),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

commented out code

Comment on lines 17 to 41
// No matching props could be found for these Figma properties:
// "size": figma.enum('size', {
// "Large": "large",
// "Medium": "medium",
// "Small": "small",
// "XL": "xl"
// }),
// "variant": figma.enum('variant', {
// "default": "default",
// "yellow": "yellow",
// "blue": "blue"
// }),
// "percent": figma.enum('percent', {
// "0%": "0-",
// "25%": "25-",
// "50%": "50-",
// "75%": "75-",
// "100%": "100-"
// }),
// "pattern": figma.boolean('pattern'),
// "flat": figma.enum('flat', {
// "n/a": "n-a",
// "flat-top": "flat-top",
// "flat-bottom": "flat-bottom"
// })
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can prob delete

Comment on lines 50 to 54
// defaultValue: figma.enum('type', {
// text: 'Input text',
// number: '0',
// file: undefined,
// }),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

whats up with the commented out code here? also noticing Input erroring in CodeConnect - m

Image

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah good catch, Stacey made an update, but I didn't update the code connect file, will do that now! thanks~

@codecademydev
Copy link
Collaborator

📬Published Alpha Packages:

@codecademy/[email protected]

@codecademydev
Copy link
Collaborator

🚀 Styleguide deploy preview ready!

https://68c838df5f69cb23b479a7f1--gamut-preview.netlify.app

Deploy Logs

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants