{"url": "https://maven.com/p/dea3f0/convert-figma-designs-to-code-with-claude-code", "core": {"title": "Convert Figma Designs to Code with Claude Code", "slug": "dea3f0", "id": 8915, "page_type": "workshop", "description": "AI prototyping transforms how teams ship products. By building reusable components and baselines, you'll cut development time from months to days. This means faster validation, less rework, and shared foundations your entire team can build on.", "start_datetime": "2026-04-09T16:00:00Z", "duration_min": 30, "is_recording_public": true, "has_internal_recording": true, "instructor_name": "Colin Matthews", "instructor_title": "Sold my first SaaS in 2021. Product Manager, 8500+ students, featured by Lenny.", "instructor_headline": "", "course_name": "AI Prototyping for Product Managers", "course_slug": "ai-prototyping-for-product-managers", "school_name": "Colin Matthews", "school_slug": "tech-for-product", "chapter_count": 8}, "next_data": {"props": {"pageProps": {"apiSchool": {"id": 3009, "slug": "tech-for-product", "name": "Colin Matthews", "is_stripe_connected": true, "stripe_connect_account_id": "acct_1MXsEmQPBMfFWS6c", "zoom_auth_version": 2, "verified": true, "timezone": "America/Toronto", "support_email": null, "school_tags": [{"id": 96, "tag_type": "internal_collection", "label": "Free lesson beta", "slug": "free-lesson-beta", "description": null, "parent_tag_id": null}, {"id": 254, "tag_type": "internal_collection", "label": "Upmarket CLP", "slug": "upmarket-clp", "description": null, "parent_tag_id": null}, {"id": 413, "tag_type": "internal_collection", "label": "[Beta] New SKU's Opt-in (2026)", "slug": "beta-new-skus-2026", "description": null, "parent_tag_id": null}], "instructor_bio": {"name": "Colin Matthews", "preferred_name": "Colin", "image_url": "https://d2426xcxuh3ht5.cloudfront.net/HSeMd11USTaicp00DEA1_M1WJfGjHT7agVvMSdipp_Colin.jpg", "image_url_no_bg": "https://user-assets.maven.com/instructor-no-bg/HSeMd11USTaicp00DEA1_M1WJfGjHT7agVvMSdipp_Colin.jpg", "bio_html": "

I'm a technical PM and builder who has taught more than 40k PMs, designers, and tech professionals the fundamentals of shipping software. I've been featured by Lenny four times, spoken at product conferences and events, and assisted Fortune 500 companies with technical upskilling and AI adoption.


My main goal with any course is to help you build your own mental model of how a technology or system works. Because of how fast the industry is changing, I think its more valuable to understand something from first principles than it is to learn a specific tool or product.

You can check out my courses and free lesson below!

", "headline": "", "title": "Founder of Tech for Product, Fractional PM leader", "linkedin_url": "https://www.linkedin.com/in/colin-matthews-2b414a71/", "x_handle": "", "custom_social_link": "", "logos": {"logos": [], "label": ""}, "expert_tagline": "will level up your technical skills", "primary_color": "", "contact_email": "", "show_contact": false}}, "pageType": "workshop", "school": {"id": 3009, "slug": "tech-for-product", "name": "Colin Matthews", "is_stripe_connected": true, "stripe_connect_account_id": "acct_1MXsEmQPBMfFWS6c", "zoom_auth_version": 2, "verified": true, "timezone": "America/Toronto", "support_email": null, "school_tags": [{"id": 96, "tag_type": "internal_collection", "label": "Free lesson beta", "slug": "free-lesson-beta", "description": null, "parent_tag_id": null}, {"id": 254, "tag_type": "internal_collection", "label": "Upmarket CLP", "slug": "upmarket-clp", "description": null, "parent_tag_id": null}, {"id": 413, "tag_type": "internal_collection", "label": "[Beta] New SKU's Opt-in (2026)", "slug": "beta-new-skus-2026", "description": null, "parent_tag_id": null}], "instructor_bio": {"name": "Colin Matthews", "preferred_name": "Colin", "image_url": "https://d2426xcxuh3ht5.cloudfront.net/HSeMd11USTaicp00DEA1_M1WJfGjHT7agVvMSdipp_Colin.jpg", "image_url_no_bg": "https://user-assets.maven.com/instructor-no-bg/HSeMd11USTaicp00DEA1_M1WJfGjHT7agVvMSdipp_Colin.jpg", "bio_html": "

I'm a technical PM and builder who has taught more than 40k PMs, designers, and tech professionals the fundamentals of shipping software. I've been featured by Lenny four times, spoken at product conferences and events, and assisted Fortune 500 companies with technical upskilling and AI adoption.


My main goal with any course is to help you build your own mental model of how a technology or system works. Because of how fast the industry is changing, I think its more valuable to understand something from first principles than it is to learn a specific tool or product.

You can check out my courses and free lesson below!

", "headline": "", "title": "Founder of Tech for Product, Fractional PM leader", "linkedin_url": "https://www.linkedin.com/in/colin-matthews-2b414a71/", "x_handle": "", "custom_social_link": "", "logos": {"logos": [], "label": ""}, "expert_tagline": "will level up your technical skills", "primary_color": "", "contact_email": "", "show_contact": false}}, "course": {"slug": "ai-prototyping-for-product-managers", "school_id": 3009, "name": "AI Prototyping for Product Managers", "id": 14248, "format": "full_course", "description": "Build your first AI prototype next week -- even if you have no coding skills", "attrs": {"courses_page_highlight_order_index": null, "custom_landing_page_url": null, "facebook_pixel_id": null, "is_course_application_enabled": false, "is_demoted_on_courses_page": false, "is_hidden_by_maven_staff": false, "is_live_on_courses_page": true, "short_description": null, "skip_landing_page": null, "satisfaction_guarantee_status": "unset"}, "social_image_url": "https://d2426xcxuh3ht5.cloudfront.net/DFo1oQymRJ2V9YwMDuFt_Group 5.jpg", "course_image_url": null, "clp_hero_media": {"media_type": "image_url", "image_url": "https://d2426xcxuh3ht5.cloudfront.net/gmNm826yTem4TclV0nlH_Group 5.png", "youtube_video_id": "dQw4w9WgXcQ", "vimeo_video_id": null}, "instructor_infos": [{"name": "Colin Matthews", "image_url": "https://d2426xcxuh3ht5.cloudfront.net/Hd8IoMgQRDu0Vj5CPXYU_Colin.jpg", "image_url_no_bg": "https://user-assets.maven.com/instructor-no-bg/Hd8IoMgQRDu0Vj5CPXYU_Colin.jpg", "uuid": "2ff8dfe5-678b-4892-b1e9-9e9fa9daee29", "bio_html": "

I’ve had my fair share of doubt when it came to technical skills. From flunking out of my first software engineering interview, to struggling to build my own SaaS products for years, I’ve always felt like an imposter.


In 2021, everything changed. I sold my first SaaS product as an independent developer.


Now, with AI tools, you can accomplish months of works in just hours using the right strategies. I want to help you use AI to build your software — whether thats for your own personal apps, work, or to sell a SaaS of your own. 

", "headline": "Build your first AI prototype next week", "title": "Sold my first SaaS in 2021. Product Manager, 8500+ students, featured by Lenny.", "linkedin_url": null, "twitter_handle": null, "custom_social_link": null, "logos": {"logos": [], "label": null}, "highlights": null, "highlights_html": "", "preferred_name": null}], "instructor_caption": "Sold my first SaaS in 2021. Product Manager, 8500+ students, featured by Lenny.", "course_tags": [{"id": 2, "tag_type": "category", "label": "Product", "slug": "product-ll", "description": null, "parent_tag_id": null}, {"id": 35, "tag_type": "category", "label": "AI", "slug": "ai-ll", "description": null, "parent_tag_id": null}, {"id": 78, "tag_type": "deprecated", "label": "AI product management", "slug": "x-subcategory-ai-product-management", "description": null, "parent_tag_id": 35}, {"id": 83, "tag_type": "deprecated", "label": "Product leadership", "slug": "x-subcategory-product-leadership", "description": null, "parent_tag_id": 2}, {"id": 85, "tag_type": "deprecated", "label": "Product for AI", "slug": "x-subcategory-product-for-ai", "description": null, "parent_tag_id": 2}, {"id": 88, "tag_type": "deprecated", "label": "Product strategy", "slug": "x-subcategory-product-strategy", "description": null, "parent_tag_id": 2}, {"id": 161, "tag_type": "public_collection", "label": "Lennys List Product", "slug": "lennys-list-product", "description": null, "parent_tag_id": null}, {"id": 172, "tag_type": "internal_collection", "label": "AI Affiliates", "slug": "ai-affiliates-nov-24", "description": null, "parent_tag_id": null}, {"id": 200, "tag_type": "internal_collection", "label": "Affiliate Aakash Gupta", "slug": "affiliate-aakash-gupta", "description": null, "parent_tag_id": null}, {"id": 213, "tag_type": "internal_collection", "label": "The AI-Powered Super IC", "slug": "ai-powered-super-ic", "description": null, "parent_tag_id": null}, {"id": 232, "tag_type": "public_collection", "label": "Maven 100 - Product 2025", "slug": "maven-100-product-2025", "description": null, "parent_tag_id": null}, {"id": 234, "tag_type": "public_collection", "label": "Maven 100 - AI 2025", "slug": "maven-100-ai-2025", "description": null, "parent_tag_id": null}, {"id": 244, "tag_type": "internal_collection", "label": "Courses filtered for recommendations", "slug": "courses-filtered-for-recommendations", "description": null, "parent_tag_id": null}, {"id": 245, "tag_type": "internal_collection", "label": "maven-100-2025", "slug": "maven-100-2025", "description": null, "parent_tag_id": null}, {"id": 275, "tag_type": "internal_collection", "label": "Maven Ads", "slug": "maven-ads", "description": null, "parent_tag_id": null}, {"id": 290, "tag_type": "persona", "label": "For Product Managers", "slug": "for-product-managers", "description": null, "parent_tag_id": null}, {"id": 313, "tag_type": "topic", "label": "AI", "slug": "ai", "description": null, "parent_tag_id": null}, {"id": 319, "tag_type": "topic", "label": "Prototyping", "slug": "prototyping", "description": null, "parent_tag_id": null}]}, "contentPageSlug": "dea3f0", "contentPage": {"id": 8915, "school_id": 3009, "slug": "dea3f0", "content_page_type": "workshop", "sections": [{"uuid": "fa9eb224-7406-4a24-a7fb-5cb315399ac6", "title": "Convert Figma Designs to Code with Claude Code", "version": 1, "image_url": "https://d2426xcxuh3ht5.cloudfront.net/YM8cAszTlCNspnUXcRcS_Single%20Instructor%20-%20theme%20a.png", "is_visible": true, "topic_desc": "AI prototyping transforms how teams ship products. By building reusable components and baselines, you'll cut development time from months to days. This means faster validation, less rework, and shared foundations your entire team can build on.", "brand_logos": {"label": "Previously at", "logos": []}, "section_type": "main", "instructor_infos": [{"name": "Colin Matthews", "uuid": "4d9abb60-217e-4ebe-947e-2c5928982c8b", "logos": null, "title": "Sold my first SaaS in 2021. Product Manager, 8500+ students, featured by Lenny.", "bio_html": "

I’ve had my fair share of doubt when it came to technical skills. From flunking out of my first software engineering interview, to struggling to build my own SaaS products for years, I’ve always felt like an imposter.


In 2021, everything changed. I sold my first SaaS product as an independent developer.


Now, with AI tools, you can accomplish months of works in just hours using the right strategies. I want to help you use AI to build your software — whether thats for your own personal apps, work, or to sell a SaaS of your own. 



", "headline": "", "image_url": "https://d2426xcxuh3ht5.cloudfront.net/B8PQJmbVRdaWBXP71ui7_Colorize.png", "highlights": null, "linkedin_url": null, "twitter_handle": null, "highlights_html": null, "image_url_no_bg": null, "custom_social_link": null}], "learning_outcomes": [{"uuid": "79f5ca8c-339d-4500-a0f9-82cd0352941c", "title": "Learn about the latest updates to Figma MCP", "description": "Discover the basics of Figma MCP, and how to use it to convert designs to code and vice versa"}, {"uuid": "883977d6-fe96-453e-9ce8-8676a569b692", "title": "Discover common challenges & pitfalls", "description": "See where the Figma MCP falls short and how to work around it's rough edges"}, {"uuid": "f1118b72-eaa3-4768-82cc-9a6f6ce23b5b", "title": "Learn how to ship a custom skill for Figma", "description": "Ship a custom skill for figma to improve the quality of your translations"}]}], "created_at": "2026-03-26T14:21:10.267953Z", "updated_at": "2026-03-26T14:40:34.758048Z", "theme": null, "attrs": {"type": "workshop", "is_canceled": false, "is_delisted": false, "connected_course_id": 14248, "course_stripe_promo_code_id": null}, "school_event": {"id": 8915, "slug": null, "title": "Convert Figma Designs to Code with Claude Code", "description": null, "start_datetime": "2026-04-09T16:00:00Z", "end_datetime": "2026-04-09T16:30:00Z", "start_date": "2026-04-09", "start_time": "12:00:00", "duration_min": 30, "timezone": "America/Toronto", "has_internal_recording": true, "is_recording_public": true}, "num_signups": 1000}, "relatedWorkshops": [{"id": 5597, "school_id": 7586, "is_visible_on_discovery_page": true, "is_canceled": false, "is_delisted": false, "connected_course_id": 8076, "workshop_tags": [{"id": 30, "tag_type": "category", "label": "Design", "slug": "design-ll", "description": null, "parent_tag_id": null}, {"id": 35, "tag_type": "category", "label": "AI", "slug": "ai-ll", "description": null, "parent_tag_id": null}, {"id": 296, "tag_type": "persona", "label": "For Designers", "slug": "for-designers", "description": null, "parent_tag_id": null}, {"id": 310, "tag_type": "persona", "label": "For User Researchers", "slug": "for-user-researchers", "description": null, "parent_tag_id": null}, {"id": 313, "tag_type": "topic", "label": "AI", "slug": "ai", "description": null, "parent_tag_id": null}, {"id": 322, "tag_type": "topic", "label": "Figma", "slug": "figma", "description": null, "parent_tag_id": null}], "published_content_page": {"id": 6441, "school_id": 7586, "slug": "4ecc6e", "content_page_type": "workshop", "sections": [{"uuid": "93b00283-216b-467a-a270-031549db019c", "title": "From Design to Coded Components With Figma MCP", "version": 1, "image_url": "https://d2426xcxuh3ht5.cloudfront.net/7If51fh9TkaWiShOZcfF_Cover%402x.jpg", "is_visible": true, "topic_desc": "Design is no longer just about visuals. Whether you want to become a design engineer, build your own apps, or collaborate more effectively with developers, the ability to move from design to real, coded components is quickly becoming essential.\n\nFigma MCP closes the gap between design and front-end code. I think every designer should hop on learning how to use leverage it in their work.", "brand_logos": {"label": "Products Featured In", "logos": [{"name": "Forbes", "type": "logo", "uuid": "0f1da1ac-6ff8-4635-aa67-075b381b94f6", "file_type": "svg", "image_url": "https://asset.brandfetch.io/idP48RNgRN/idyfVBs-Wp.svg"}, {"name": "CNBC", "type": "logo", "uuid": "78656e00-e057-44ba-9e0a-34a4861e3350", "file_type": "svg", "image_url": "https://asset.brandfetch.io/iddr-Ds11g/idrskdl8Ny.svg"}, {"name": "University of Waterloo", "type": "logo", "uuid": "f899b4d7-5695-4564-8d26-9e883c02bc99", "file_type": "svg", "image_url": "https://asset.brandfetch.io/idIfIi7wMZ/ida2LuNMbf.svg"}, {"name": "CBC", "type": "logo", "uuid": "17196a31-798a-45bf-a3b4-20f906359e6b", "file_type": "svg", "image_url": "https://asset.brandfetch.io/idQZEpzXw8/idoaxDdPAd.svg"}]}, "section_type": "main", "instructor_infos": [{"name": "Nima Tahami", "uuid": "093d1308-310f-4a57-8513-a779123bd2f6", "logos": null, "title": "Product Designer & Builder (ex-iOS Developer) Co-Founder at Mokline", "bio_html": "

Nima has been designing and developing products since 2011. He co-founded a car-sharing marketplace called ShiftRide, where he designed and developed one of the fastest car rental apps, featured in Forbes. Nima is now solo-building apps at Mokline and teaching online, helping over 18,000 students to become the best designers & builders they can be.

", "headline": "", "image_url": "https://d2426xcxuh3ht5.cloudfront.net/MDvoYLBSdGMOgQtKNCQ9_Profile.png", "highlights": null, "linkedin_url": null, "twitter_handle": null, "highlights_html": null, "image_url_no_bg": null, "custom_social_link": null}], "learning_outcomes": [{"uuid": "5ed3746c-1b7c-4f9a-b79c-d4f78d52a08a", "title": "Learn the best structure for your Figma Design", "description": "We'll learn how to use auto-layout to ensure the best layout for our designs before moving them into Cursor."}, {"uuid": "139ed2db-345d-409f-ab8d-036ac015067d", "title": "Set up Figma MCP", "description": "We'll learn how to set up MCP in Figma and Cursor AI to ensure design properties are accessible between the two."}, {"uuid": "919e154f-cc2c-4301-8279-ac2e86188531", "title": "Learn to prompt & polish the coded components", "description": "We'll learn how to prompt Cursor AI to turn the design into a coded component and make tweaks with prompts."}]}], "created_at": "2026-02-12T21:06:54.439827Z", "updated_at": null, "theme": null, "attrs": {"type": "workshop", "is_canceled": false, "is_delisted": false, "connected_course_id": 8076, "course_stripe_promo_code_id": null}, "school_event": {"id": 6441, "slug": null, "title": "From Design to Coded Components With Figma MCP", "description": null, "start_datetime": "2026-01-02T17:00:00Z", "end_datetime": "2026-01-02T17:30:00Z", "start_date": "2026-01-02", "start_time": "12:00:00", "duration_min": 30, "timezone": "America/Toronto", "has_internal_recording": true, "is_recording_public": true}, "num_signups": 771}}, {"id": 6915, "school_id": 16294, "is_visible_on_discovery_page": true, "is_canceled": false, "is_delisted": false, "connected_course_id": 18925, "workshop_tags": [{"id": 31, "tag_type": "category", "label": "Data & engineering", "slug": "engineering-ll", "description": null, "parent_tag_id": null}, {"id": 35, "tag_type": "category", "label": "AI", "slug": "ai-ll", "description": null, "parent_tag_id": null}, {"id": 159, "tag_type": "internal_collection", "label": "LL non-instructor", "slug": "ll-non-instructor", "description": null, "parent_tag_id": null}, {"id": 293, "tag_type": "persona", "label": "For Engineers", "slug": "for-engineers", "description": null, "parent_tag_id": null}, {"id": 313, "tag_type": "topic", "label": "AI", "slug": "ai", "description": null, "parent_tag_id": null}, {"id": 426, "tag_type": "topic", "label": "Claude Code", "slug": "claude-code", "description": null, "parent_tag_id": null}, {"id": 444, "tag_type": "topic", "label": "Vibe Coding", "slug": "vibe-coding", "description": null, "parent_tag_id": null}], "published_content_page": {"id": 7641, "school_id": 16294, "slug": "facf9a", "content_page_type": "workshop", "sections": [{"uuid": "8f5cd887-7950-4b01-8600-28df9acd3509", "title": "Build your first product with Claude Code", "version": 1, "image_url": "https://d2426xcxuh3ht5.cloudfront.net/3lJpkaToQSSd9asDt7GQ_Single%20Instructor%20-%20theme%20a.png", "is_visible": true, "topic_desc": "Tired of being nudged to \"do more with AI\", while simultaneously being intimidated by it? Claude Code can help non-technical people expand their skillset and capabilities. You'll walk away feeling inspired to do more.", "brand_logos": {"label": "As seen on", "logos": [{"name": "Digiday", "type": "logo", "uuid": "0b5be2c4-dea4-4358-9826-919b3bb18782", "file_type": "svg", "image_url": "https://asset.brandfetch.io/id50Wa4bMz/ideuO4Odkh.svg"}, {"name": "Ad Age", "type": "logo", "uuid": "a2c57d7e-c4cf-435d-83eb-213901c835f8", "file_type": "svg", "image_url": "https://asset.brandfetch.io/idk4bjBA9k/idDpWfc_4u.svg"}, {"name": "Forbes", "type": "logo", "uuid": "2f6181f7-dda7-4504-bd1d-8d1e60015fb1", "file_type": "svg", "image_url": "https://asset.brandfetch.io/idP48RNgRN/idyfVBs-Wp.svg"}, {"name": "TNW", "type": "logo", "uuid": "f3c93b07-b05e-4943-b401-be99f94e088d", "file_type": "svg", "image_url": "https://asset.brandfetch.io/idZORlcRWD/id3h-bQx5t.svg"}]}, "section_type": "main", "instructor_infos": [{"name": "Vishveshwar Jatain", "uuid": "e3d20259-eb6b-4c20-b016-41173070d316", "logos": null, "title": "Early-stage SaaS marketer, advisor & investor", "bio_html": "


", "headline": "", "image_url": "https://d2426xcxuh3ht5.cloudfront.net/drNYbETjQOCbjF8J0vPM_1765404597370.jpeg", "highlights": null, "linkedin_url": null, "twitter_handle": null, "highlights_html": null, "image_url_no_bg": null, "custom_social_link": null}], "learning_outcomes": [{"uuid": "ddb040e6-430f-4875-ab4c-72b1e1951a91", "title": "Master the lingo", "description": "CLI? MCP? Plugins? Context window? Get a crash course on AI jargon, so you can hold your own in any conversation."}, {"uuid": "e38674b2-771b-43f6-9342-ebf4a5919a63", "title": "Get a virtual CTO", "description": "Claude Code will be your trusty sidekick when it comes to developing technical solutions to any type of problem."}, {"uuid": "b3803751-7443-45d6-873d-ae6a8de71293", "title": "Ship real products", "description": "Start turning your ideas into reality by planning, building, and releasing fully-functional products into the market."}]}], "created_at": "2026-02-24T18:22:06.154774Z", "updated_at": "2026-02-24T18:26:08.587038Z", "theme": null, "attrs": {"type": "workshop", "is_canceled": false, "is_delisted": false, "connected_course_id": 18925, "course_stripe_promo_code_id": null}, "school_event": {"id": 7641, "slug": null, "title": "Build your first product with Claude Code", "description": null, "start_datetime": "2026-03-16T17:00:00Z", "end_datetime": "2026-03-16T17:30:00Z", "start_date": "2026-03-16", "start_time": "11:00:00", "duration_min": 30, "timezone": "America/Edmonton", "has_internal_recording": true, "is_recording_public": true}, "num_signups": 133}}, {"id": 4728, "school_id": 9340, "is_visible_on_discovery_page": true, "is_canceled": false, "is_delisted": false, "connected_course_id": 718, "workshop_tags": [{"id": 30, "tag_type": "category", "label": "Design", "slug": "design-ll", "description": null, "parent_tag_id": null}, {"id": 279, "tag_type": "internal_collection", "label": "Maven Marketing: Dive Club Series 10/25", "slug": "ai-workflows-for-design", "description": null, "parent_tag_id": null}, {"id": 296, "tag_type": "persona", "label": "For Designers", "slug": "for-designers", "description": null, "parent_tag_id": null}, {"id": 310, "tag_type": "persona", "label": "For User Researchers", "slug": "for-user-researchers", "description": null, "parent_tag_id": null}, {"id": 321, "tag_type": "topic", "label": "Design Systems", "slug": "design-systems", "description": null, "parent_tag_id": null}, {"id": 322, "tag_type": "topic", "label": "Figma", "slug": "figma", "description": null, "parent_tag_id": null}], "published_content_page": {"id": 5571, "school_id": 9340, "slug": "d221a3", "content_page_type": "workshop", "sections": [{"uuid": "a0bce303-61d1-4fda-ba00-ca58a1e546be", "title": "Doing More With Your Design System in Figma", "version": 1, "image_url": "https://d2426xcxuh3ht5.cloudfront.net/w5dxlxgrSsqqcFKjdXQZ_Frame%20454.png", "is_visible": true, "topic_desc": "Design systems are evolving fast, and Figma is becoming where design and code can meet. Joey Banks and TJ Pitre share how to build systems that scale and connect design and engineering. You will explore Dev Mode, MCP, and Figma Make and learn how to bridge design and production in smarter ways.", "brand_logos": {"label": "WITH STUDENTS FROM...", "logos": [{"name": "Microsoft", "type": "logo", "uuid": "952f67fa-e8b0-43ec-b82c-cb3c1c27286e", "file_type": "svg", "image_url": "https://asset.brandfetch.io/idchmboHEZ/idc7I0n_oy.svg"}, {"name": "Atlassian", "type": "logo", "uuid": "d934a26e-fb00-4235-9577-7515f2bf1003", "file_type": "svg", "image_url": "https://asset.brandfetch.io/idlQIwGMOK/id-zfVoXlz.svg"}, {"name": "Intuit Credit Karma", "type": "logo", "uuid": "498293d8-fdcb-4caa-a556-7688e5bad997", "file_type": "svg", "image_url": "https://asset.brandfetch.io/idPfpWxP3a/idkj5UnhAK.svg"}, {"name": "Adobe", "type": "logo", "uuid": "9c25db32-2079-40ee-af7a-5ad4b979e7b9", "file_type": "svg", "image_url": "https://asset.brandfetch.io/id_KsyK7J9/idqgHTh9pg.svg"}, {"name": "HubSpot", "type": "logo", "uuid": "fa44888e-7367-43ed-9565-a3d2dcf04406", "file_type": "svg", "image_url": "https://asset.brandfetch.io/idRt0LuzRf/id_Ox3lZVa.svg"}]}, "section_type": "main", "instructor_infos": [{"name": "TJ Pitre", "uuid": "8d5a1378-e25d-46df-a03e-9879ec56a8e8", "logos": null, "title": "Founder & CEO at Southleft", "bio_html": "

TJ is a front-end engineer and design systems strategist with over 15 years of experience helping product teams ship faster and more consistently. He’s the founder of Southleft, a front-end development and design systems consultancy trusted by teams at Caterpillar, NASDAQ, Indeed, IBM, and many others.


TJ’s work focuses on AI-assisted workflows that bridge design and engineering. He’s also the creator of tools like FigmaLint, Story UI, and Design Systems Assistant MCP. He regularly shares demos, frameworks, and in-progress ideas with the design systems community on LinkedIn.

", "image_url": "https://d2426xcxuh3ht5.cloudfront.net/CPFrORTLQEe9UKFzmAWg_1736825156541.jpeg", "highlights": null, "linkedin_url": null, "twitter_handle": null, "highlights_html": null, "image_url_no_bg": null, "custom_social_link": null}, {"name": "Joey Banks", "uuid": "d32448cb-36d8-4ac8-8b6b-b1cbe3c6a813", "logos": {"label": "", "logos": []}, "title": "Founder & CEO at Baseline Design", "bio_html": "

I'm a product designer who's worked for Webflow, Twitter, and Figma, and I focus on design systems at scale. I created this course because I love helping designers feel more comfortable and confident using Figma. I began using the design tool in 2016 and have only fallen more in love with it and its incredible capabilities.

I'm also the creator of many iOS and macOS UI kits for Figma, which have been downloaded over 500,000 times in the Figma Community. Teaching is my passion, and I'm grateful to have worked with designers of all levels and from companies of all sizes in my mentoring and specialized training sessions.

", "image_url": "https://d2426xcxuh3ht5.cloudfront.net/PVlHwVW3THW2jXHaP49b_joeyabanks.jpg", "highlights": [], "linkedin_url": "", "twitter_handle": "", "image_url_no_bg": null, "custom_social_link": ""}], "learning_outcomes": [{"uuid": "f8b86229-de80-4e3f-a26e-a3d5f2e6d9d6", "title": "Build components and libraries that scale", "description": "Learn how to structure components and libraries that stay flexible and are easy to maintain over time."}, {"uuid": "d4b7bf45-67d3-4933-aa46-f15ef3811acf", "title": "Connect design and engineering", "description": "Explore how Dev Mode and MCP bridge design and code to build more connected systems."}, {"uuid": "90674970-dbae-4f4d-847b-11140b51b22c", "title": "Explore your components beyond the canvas", "description": "See how components behave in context using Figma Make, MCP, and Storybook."}]}], "created_at": "2026-02-12T21:04:32.198370Z", "updated_at": null, "theme": null, "attrs": {"type": "workshop", "is_canceled": false, "is_delisted": false, "connected_course_id": 718, "course_stripe_promo_code_id": null}, "school_event": {"id": 5571, "slug": null, "title": "Doing More With Your Design System in Figma", "description": null, "start_datetime": "2025-10-30T15:00:00Z", "end_datetime": "2025-10-30T16:00:00Z", "start_date": "2025-10-30", "start_time": "11:00:00", "duration_min": 60, "timezone": "America/New_York", "has_internal_recording": true, "is_recording_public": true}, "num_signups": 2108}}], "exploreCourses": null, "workshopTags": [{"id": 137, "tag_type": "internal_collection", "label": "Instructor", "slug": "Instructor", "description": null, "parent_tag_id": null}, {"id": 293, "tag_type": "persona", "label": "For Engineers", "slug": "for-engineers", "description": null, "parent_tag_id": null}, {"id": 295, "tag_type": "persona", "label": "For Learning Designers", "slug": "for-learning-designers", "description": null, "parent_tag_id": null}, {"id": 310, "tag_type": "persona", "label": "For User Researchers", "slug": "for-user-researchers", "description": null, "parent_tag_id": null}, {"id": 319, "tag_type": "topic", "label": "Prototyping", "slug": "prototyping", "description": null, "parent_tag_id": null}, {"id": 322, "tag_type": "topic", "label": "Figma", "slug": "figma", "description": null, "parent_tag_id": null}, {"id": 313, "tag_type": "topic", "label": "AI", "slug": "ai", "description": null, "parent_tag_id": null}], "videoChapters": [{"title": "Introduction & Setting the Stage", "start_seconds": 0}, {"title": "Why Convert Designs to Code?", "start_seconds": 103}, {"title": "What is the Figma MCP?", "start_seconds": 267}, {"title": "First Attempt: A Simple Figma to Code Conversion", "start_seconds": 405}, {"title": "Analyzing the \"Naive\" Conversion", "start_seconds": 672}, {"title": "The Engineer's Perspective: Why the First Attempt Fails", "start_seconds": 1042}, {"title": "Advanced Conversion: Using an Existing Design System", "start_seconds": 1222}, {"title": "Q&A: User Flows, Design Systems, and Skills", "start_seconds": 1732}], "navPages": [{"category": {"slug": "ai", "href": "/courses/ai", "title": "AI", "palette": {"--palette-category-base": "#460952", "--palette-category-highlight": "#931FAA", "--palette-category-border": "#EDA6FB"}}, "topics": [{"title": "Agentic AI", "slug": "ai/agentic-ai", "href": "/courses/ai/agentic-ai"}, {"title": "Coding with AI", "slug": "ai/ai-coding", "href": "/courses/ai/ai-coding"}, {"title": "AI Workflows", "slug": "ai/ai-workflows", "href": "/courses/ai/ai-workflows"}, {"title": "Claude Code", "slug": "ai/claude-code", "href": "/courses/ai/claude-code"}, {"title": "OpenClaw", "slug": "ai/openclaw", "href": "/courses/ai/openclaw"}, {"title": "Vibe Coding", "slug": "ai/vibe-coding", "href": "/courses/ai/vibe-coding"}, {"title": "AI Evals", "slug": "ai/evals", "href": "/courses/ai/evals"}, {"title": "AI Transformation", "slug": "ai/ai-transformation", "href": "/courses/ai/ai-transformation"}, {"title": "RAG & Search", "slug": "ai/rag-search", "href": "/courses/ai/rag-search"}, {"title": "MCP", "slug": "ai/mcp", "href": "/courses/ai/mcp"}, {"title": "AI for PMs", "slug": "ai/for-product-managers", "href": "/courses/ai/for-product-managers"}, {"title": "AI for Engineers", "slug": "ai/for-engineers", "href": "/courses/ai/for-engineers"}, {"title": "AI for Designers", "slug": "ai/for-designers", "href": "/courses/ai/for-designers"}, {"title": "AI for Marketers", "slug": "ai/for-marketers", "href": "/courses/ai/for-marketers"}, {"title": "AI for Founders", "slug": "ai/for-founders", "href": "/courses/ai/for-founders"}]}, {"category": {"slug": "product", "href": "/courses/product", "title": "Product", "palette": {"--palette-category-base": "#510B00", "--palette-category-highlight": "#B33600", "--palette-category-border": "#F7804D"}}, "topics": [{"title": "AI for PMs", "slug": "for-product-managers/ai", "href": "/courses/for-product-managers/ai"}, {"title": "Agentic AI", "slug": "for-product-managers/agentic-ai", "href": "/courses/for-product-managers/agentic-ai"}, {"title": "AI Evals", "slug": "for-product-managers/ai-evals", "href": "/courses/for-product-managers/ai-evals"}, {"title": "Vibe Coding", "slug": "for-product-managers/vibe-coding", "href": "/courses/for-product-managers/vibe-coding"}, {"title": "Product Sense", "slug": "for-product-managers/product-sense", "href": "/courses/for-product-managers/product-sense"}, {"title": "Product Discovery", "slug": "for-product-managers/product-discovery", "href": "/courses/for-product-managers/product-discovery"}, {"title": "User Research", "slug": "for-product-managers/user-research", "href": "/courses/for-product-managers/user-research"}, {"title": "Prototyping", "slug": "for-product-managers/prototyping", "href": "/courses/for-product-managers/prototyping"}, {"title": "Growth", "slug": "for-product-managers/growth", "href": "/courses/for-product-managers/growth"}, {"title": "Analytics", "slug": "for-product-managers/analytics", "href": "/courses/for-product-managers/analytics"}, {"title": "Tech Foundations", "slug": "for-product-managers/technical-foundations", "href": "/courses/for-product-managers/technical-foundations"}, {"title": "Strategy", "slug": "for-product-managers/strategy", "href": "/courses/for-product-managers/strategy"}, {"title": "Influence", "slug": "for-product-managers/influence", "href": "/courses/for-product-managers/influence"}, {"title": "Leadership", "slug": "for-product-managers/leadership", "href": "/courses/for-product-managers/leadership"}, {"title": "Career Growth", "slug": "for-product-managers/career-growth", "href": "/courses/for-product-managers/career-growth"}]}, {"category": {"slug": "engineering", "href": "/courses/engineering", "title": "Engineering", "palette": {"--palette-category-base": "#00332F", "--palette-category-highlight": "#00746B", "--palette-category-border": "#88B7B2"}}, "topics": [{"title": "AI for Engineers", "slug": "for-engineers/ai", "href": "/courses/for-engineers/ai"}, {"title": "Agentic AI", "slug": "for-engineers/agentic-ai", "href": "/courses/for-engineers/agentic-ai"}, {"title": "Coding with AI", "slug": "for-engineers/ai-coding", "href": "/courses/for-engineers/ai-coding"}, {"title": "Claude Code", "slug": "for-engineers/claude-code", "href": "/courses/for-engineers/claude-code"}, {"title": "OpenClaw", "slug": "for-engineers/openclaw", "href": "/courses/for-engineers/openclaw"}, {"title": "MCP", "slug": "for-engineers/mcp", "href": "/courses/for-engineers/mcp"}, {"title": "RAG & Search", "slug": "for-engineers/rag-search", "href": "/courses/for-engineers/rag-search"}, {"title": "AI Evals", "slug": "for-engineers/ai-evals", "href": "/courses/for-engineers/ai-evals"}, {"title": "Machine Learning", "slug": "for-engineers/ml", "href": "/courses/for-engineers/ml"}, {"title": "LLM Ops", "slug": "for-engineers/llm-ops", "href": "/courses/for-engineers/llm-ops"}, {"title": "Context Eng", "slug": "for-engineers/context-engineering", "href": "/courses/for-engineers/context-engineering"}, {"title": "Security", "slug": "for-engineers/security", "href": "/courses/for-engineers/security"}, {"title": "System Design", "slug": "for-engineers/system-design", "href": "/courses/for-engineers/system-design"}, {"title": "Leadership", "slug": "for-engineers/leadership", "href": "/courses/for-engineers/leadership"}, {"title": "Career Growth", "slug": "for-engineers/career-growth", "href": "/courses/for-engineers/career-growth"}]}, {"category": {"slug": "design", "href": "/courses/design", "title": "Design", "palette": {"--palette-category-base": "#38085F", "--palette-category-highlight": "#772CBB", "--palette-category-border": "#B5A2D0"}}, "topics": [{"title": "AI for Designers", "slug": "for-designers/ai", "href": "/courses/for-designers/ai"}, {"title": "Agentic AI", "slug": "for-designers/agentic-ai", "href": "/courses/for-designers/agentic-ai"}, {"title": "Vibe Coding", "slug": "for-designers/vibe-coding", "href": "/courses/for-designers/vibe-coding"}, {"title": "Prototyping", "slug": "for-designers/prototyping", "href": "/courses/for-designers/prototyping"}, {"title": "Figma", "slug": "for-designers/figma", "href": "/courses/for-designers/figma"}, {"title": "Design Systems", "slug": "for-designers/design-systems", "href": "/courses/for-designers/design-systems"}, {"title": "User Research", "slug": "for-designers/user-research", "href": "/courses/for-designers/user-research"}, {"title": "Product Discovery", "slug": "for-designers/product-discovery", "href": "/courses/for-designers/product-discovery"}, {"title": "UX", "slug": "for-designers/ux", "href": "/courses/for-designers/ux"}, {"title": "UI", "slug": "for-designers/ui", "href": "/courses/for-designers/ui"}, {"title": "Visual Design", "slug": "for-designers/visual-design", "href": "/courses/for-designers/visual-design"}, {"title": "Design Strategy", "slug": "for-designers/strategy", "href": "/courses/for-designers/strategy"}, {"title": "Influence", "slug": "for-designers/influence", "href": "/courses/for-designers/influence"}, {"title": "Leadership", "slug": "for-designers/leadership", "href": "/courses/for-designers/leadership"}, {"title": "Career Growth", "slug": "for-designers/career-growth", "href": "/courses/for-designers/career-growth"}]}, {"category": {"slug": "marketing", "href": "/courses/marketing", "title": "Marketing", "palette": {"--palette-category-base": "#431532", "--palette-category-highlight": "#943170", "--palette-category-border": "#C99EB5"}}, "topics": [{"title": "AI for Marketers", "slug": "for-marketers/ai", "href": "/courses/for-marketers/ai"}, {"title": "Agentic AI", "slug": "for-marketers/agentic-ai", "href": "/courses/for-marketers/agentic-ai"}, {"title": "Vibe Coding", "slug": "for-marketers/vibe-coding", "href": "/courses/for-marketers/vibe-coding"}, {"title": "Automation", "slug": "for-marketers/marketing-automation", "href": "/courses/for-marketers/marketing-automation"}, {"title": "Content Marketing", "slug": "for-marketers/content-marketing", "href": "/courses/for-marketers/content-marketing"}, {"title": "Demand Gen", "slug": "for-marketers/demand-generation", "href": "/courses/for-marketers/demand-generation"}, {"title": "Go-to-Market", "slug": "for-marketers/gtm", "href": "/courses/for-marketers/gtm"}, {"title": "Product Marketing", "slug": "for-marketers/product-marketing", "href": "/courses/for-marketers/product-marketing"}, {"title": "Positioning", "slug": "for-marketers/positioning", "href": "/courses/for-marketers/positioning"}, {"title": "Social Media", "slug": "for-marketers/social-media", "href": "/courses/for-marketers/social-media"}, {"title": "Brand", "slug": "for-marketers/brand", "href": "/courses/for-marketers/brand"}, {"title": "B2B Marketing", "slug": "for-marketers/b2b", "href": "/courses/for-marketers/b2b"}, {"title": "SEO & AEO", "slug": "for-marketers/seo-aeo", "href": "/courses/for-marketers/seo-aeo"}, {"title": "Strategy", "slug": "for-marketers/strategy", "href": "/courses/for-marketers/strategy"}, {"title": "Leadership", "slug": "for-marketers/leadership", "href": "/courses/for-marketers/leadership"}]}, {"category": {"slug": "leadership", "href": "/courses/leadership", "title": "Leadership", "palette": {"--palette-category-base": "#50090E", "--palette-category-highlight": "#A9202A", "--palette-category-border": "#D49C98"}}, "topics": [{"title": "AI for Leaders", "slug": "for-leaders/ai", "href": "/courses/for-leaders/ai"}, {"title": "Agentic AI", "slug": "for-leaders/agentic-ai", "href": "/courses/for-leaders/agentic-ai"}, {"title": "AI Transformation", "slug": "for-leaders/ai-transformation", "href": "/courses/for-leaders/ai-transformation"}, {"title": "AI Governance", "slug": "for-leaders/ai-governance", "href": "/courses/for-leaders/ai-governance"}, {"title": "Communication", "slug": "for-leaders/communication", "href": "/courses/for-leaders/communication"}, {"title": "Influence", "slug": "for-leaders/influence", "href": "/courses/for-leaders/influence"}, {"title": "Strategy", "slug": "for-leaders/strategy", "href": "/courses/for-leaders/strategy"}, {"title": "Management", "slug": "for-leaders/management", "href": "/courses/for-leaders/management"}, {"title": "People Operations", "slug": "for-leaders/people-operations", "href": "/courses/for-leaders/people-operations"}, {"title": "Exec Presence", "slug": "for-leaders/executive-presence", "href": "/courses/for-leaders/executive-presence"}, {"title": "Storytelling", "slug": "for-leaders/storytelling", "href": "/courses/for-leaders/storytelling"}, {"title": "Goal-setting", "slug": "for-leaders/goal-setting", "href": "/courses/for-leaders/goal-setting"}, {"title": "Personal Brand", "slug": "for-leaders/personal-brand", "href": "/courses/for-leaders/personal-brand"}, {"title": "Career Growth", "slug": "for-leaders/career-growth", "href": "/courses/for-leaders/career-growth"}]}, {"category": {"slug": "founders", "href": "/courses/founders", "title": "Founders", "palette": {"--palette-category-base": "#0C3209", "--palette-category-highlight": "#077202", "--palette-category-border": "#69C662"}}, "topics": [{"title": "AI for Founders", "slug": "for-founders/ai", "href": "/courses/for-founders/ai"}, {"title": "Agentic AI", "slug": "for-founders/agentic-ai", "href": "/courses/for-founders/agentic-ai"}, {"title": "AI Workflows", "slug": "for-founders/ai-workflows", "href": "/courses/for-founders/ai-workflows"}, {"title": "Vibe Coding", "slug": "for-founders/vibe-coding", "href": "/courses/for-founders/vibe-coding"}, {"title": "Prototyping", "slug": "for-founders/prototyping", "href": "/courses/for-founders/prototyping"}, {"title": "Product Sense", "slug": "for-founders/product-sense", "href": "/courses/for-founders/product-sense"}, {"title": "Positioning", "slug": "for-founders/positioning", "href": "/courses/for-founders/positioning"}, {"title": "Product Discovery", "slug": "for-founders/product-discovery", "href": "/courses/for-founders/product-discovery"}, {"title": "Management", "slug": "for-founders/management", "href": "/courses/for-founders/management"}, {"title": "Strategy", "slug": "for-founders/strategy", "href": "/courses/for-founders/strategy"}, {"title": "Go-to-Market", "slug": "for-founders/gtm", "href": "/courses/for-founders/gtm"}, {"title": "Personal Brand", "slug": "for-founders/personal-brand", "href": "/courses/for-founders/personal-brand"}, {"title": "Leadership", "slug": "for-founders/leadership", "href": "/courses/for-founders/leadership"}, {"title": "Fundraising", "slug": "for-founders/fundraising", "href": "/courses/for-founders/fundraising"}, {"title": "PMF", "slug": "for-founders/product-market-fit", "href": "/courses/for-founders/product-market-fit"}]}, {"category": {"slug": "more", "href": "/courses/more", "title": "More", "palette": {"--palette-category-base": "#1E2C2B", "--palette-category-highlight": "#4A6361", "--palette-category-border": "#B9C1BE"}}, "topics": [{"title": "Everyone", "slug": "for-everyone", "href": "/courses/for-everyone"}, {"title": "Operators", "slug": "for-operators", "href": "/courses/for-operators"}, {"title": "Data Scientists", "slug": "for-data-scientists", "href": "/courses/for-data-scientists"}, {"title": "Business Analysts", "slug": "for-business-analysts", "href": "/courses/for-business-analysts"}, {"title": "User Researchers", "slug": "for-user-researchers", "href": "/courses/for-user-researchers"}, {"title": "Customer Success", "slug": "for-customer-success", "href": "/courses/for-customer-success"}, {"title": "Project Managers", "slug": "for-project-managers", "href": "/courses/for-project-managers"}, {"title": "HR Professionals", "slug": "for-hr-professionals", "href": "/courses/for-hr-professionals"}, {"title": "Sales People", "slug": "for-sales-people", "href": "/courses/for-sales-people"}, {"title": "Lawyers", "slug": "for-lawyers", "href": "/courses/for-lawyers"}, {"title": "Finance", "slug": "for-finance-professionals", "href": "/courses/for-finance-professionals"}, {"title": "Investors", "slug": "for-investors", "href": "/courses/for-investors"}, {"title": "Real Estate", "slug": "for-real-estate-agents", "href": "/courses/for-real-estate-agents"}, {"title": "Educators", "slug": "for-educators", "href": "/courses/for-educators"}, {"title": "Creators", "slug": "for-creators", "href": "/courses/for-creators"}]}], "navTagLinks": [{"tag": {"id": 293, "tag_type": "persona", "label": "For Engineers", "slug": "for-engineers", "description": null, "parent_tag_id": null}, "link_slug": "for-engineers"}, {"tag": {"id": 310, "tag_type": "persona", "label": "For User Researchers", "slug": "for-user-researchers", "description": null, "parent_tag_id": null}, "link_slug": "for-user-researchers"}], "now": "2026-05-19T22:53:20.142Z"}, "__N_SSG": true}, "page": "/p/[slug]/[...ignored]", "query": {"slug": "dea3f0", "ignored": ["convert-figma-designs-to-code-with-claude-code"]}, "buildId": "qPlLjBFLQ9fnkFKJ7n7E-", "isFallback": false, "isExperimentalCompile": false, "gsp": true, "scriptLoader": []}}