CINXE.COM

<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"/><link rel="stylesheet" href="/_next/static/css/c4b0bd4f87e92aeb.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/1ea9739f23a3b69e.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/38f7d385ab6d9f22.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/75b23a08f18ae450.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/c99d6c2024146960.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/639ca35bc51610d3.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/1571eeb1adaac6eb.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/eee391e54f3127f3.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/fcda3aac4677cad7.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/52c78cbf7408e1af.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/6a29de96c920f097.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/c7820bf0de1097b1.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/0a0d922ec8281d19.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/b0e0dd11aa1ac818.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-d90e1724055c1418.js"/><script src="/_next/static/chunks/fd9d1056-96a9c9a805849b31.js" async=""></script><script src="/_next/static/chunks/19948-c36f71a920d62304.js" async=""></script><script src="/_next/static/chunks/main-app-4a2013aec1c9af59.js" async=""></script><script src="/_next/static/chunks/53877-51c4a285eb192ef0.js" async=""></script><script src="/_next/static/chunks/46403-e33a58cdfbb894e8.js" async=""></script><script src="/_next/static/chunks/58056-751c28e77ae5a19a.js" async=""></script><script src="/_next/static/chunks/87138-0346ed4de56c8f41.js" async=""></script><script src="/_next/static/chunks/48191-5065c49d069bd01c.js" async=""></script><script src="/_next/static/chunks/14604-45e3a9aa74635210.js" async=""></script><script src="/_next/static/chunks/55579-59b56c16d22d5e09.js" async=""></script><script src="/_next/static/chunks/94531-936a58903208c445.js" async=""></script><script src="/_next/static/chunks/7851-391d4a68ffe47521.js" async=""></script><script src="/_next/static/chunks/21235-52de316c2c816f3f.js" async=""></script><script src="/_next/static/chunks/50570-f5cbfddf7e09b62f.js" async=""></script><script src="/_next/static/chunks/69558-1b9bff93d908a3d5.js" async=""></script><script src="/_next/static/chunks/63761-17f7fa9792e0fc0c.js" async=""></script><script src="/_next/static/chunks/2934-e092570a1d425008.js" async=""></script><script src="/_next/static/chunks/38671-a00c12e0adc7b39f.js" async=""></script><script src="/_next/static/chunks/app/(main)/products/%5Bslug%5D/(layout)/layout-7227e78fe9f9e9b2.js" async=""></script><script src="/_next/static/chunks/28051-6c99bb1ef2e7af63.js" async=""></script><script src="/_next/static/chunks/23714-107263d1137b8b64.js" async=""></script><script src="/_next/static/chunks/65777-aff863a0e93abf71.js" async=""></script><script src="/_next/static/chunks/50634-f1ac8006859630a3.js" async=""></script><script src="/_next/static/chunks/86996-2b4aad33e5a2cdf7.js" async=""></script><script src="/_next/static/chunks/app/(main)/layout-35d187729779b08c.js" async=""></script><script src="/_next/static/chunks/74468-913b2d3a1cd26fb3.js" async=""></script><script src="/_next/static/chunks/app/(main)/not-found-9a7ee980d0bcf220.js" async=""></script><script src="/_next/static/chunks/1997-8c211c482f7f1b80.js" async=""></script><script src="/_next/static/chunks/87620-cdf22e94cf823402.js" async=""></script><script src="/_next/static/chunks/17436-7d847d18b236a58e.js" async=""></script><script src="/_next/static/chunks/app/layout-b4b05c6c40f22aea.js" async=""></script><script src="/_next/static/chunks/app/(cards)/layout-ed869996799e05ab.js" async=""></script><script src="/_next/static/chunks/25058-f2b5f735f386b605.js" async=""></script><script src="/_next/static/chunks/app/global-error-c3fd97e3c9c07406.js" async=""></script><script src="/_next/static/chunks/17873-c31f11c5f34602f7.js" async=""></script><script src="/_next/static/chunks/86224-d84904eb72b0dfed.js" async=""></script><script src="/_next/static/chunks/36422-1c5dd639d5c50d96.js" async=""></script><script src="/_next/static/chunks/48567-8ef86e02b791c3da.js" async=""></script><script src="/_next/static/chunks/59539-b936a597ce4d310d.js" async=""></script><script src="/_next/static/chunks/60732-5d81a22df49fe823.js" async=""></script><script src="/_next/static/chunks/26410-c1ceb75766380452.js" async=""></script><script src="/_next/static/chunks/69898-24e06823acd563bf.js" async=""></script><script src="/_next/static/chunks/41790-d16b26401942af4f.js" async=""></script><script src="/_next/static/chunks/32076-411013037556488b.js" async=""></script><script src="/_next/static/chunks/app/(main)/products/%5Bslug%5D/(layout)/page-f0c562bead5798b0.js" async=""></script><link rel="preload" href="https://www.googletagmanager.com/gtag/js?id=G-WZ46833KH9" as="script"/><link rel="preload" href="https://www.googletagmanager.com/gtm.js?id=G-WZ46833KH9" as="script"/><meta property="fb:app_id" content="1467820943460899"/><link rel="search" type="application/opensearchdescription+xml" title="ProductHunt" href="/osd.xml"/><meta name="theme-color" content="#ffffff"/><title> Overlay - Product Information, Latest Updates, and Reviews 2024 | Product Hunt</title><meta name="description" content="Overlay helps designers and developers convert their Figma components into clean and reusable React, Vue.js and Html code. 💎 Flex attributes ⭐️ Props 👌 Minimum CSS lines 🖌 Style variables 💅SCSS, Styled Components 🔗 No dependencies, just copy-paste."/><link rel="author" href="https://www.producthunt.com/@kevin_jean"/><meta name="author" content="Kevin Jean"/><link rel="manifest" href="/manifest.json" crossorigin="use-credentials"/><meta name="fb:app_id" content="1467820943460899"/><link rel="alternate" type="application/atom+xml" title="Product Hunt - All newest Products" href="https://www.producthunt.com/feed"/><meta property="og:title" content=" Overlay - Product Information, Latest Updates, and Reviews 2024 | Product Hunt"/><meta property="og:description" content="Overlay helps designers and developers convert their Figma components into clean and reusable React, Vue.js and Html code. 💎 Flex attributes ⭐️ Props 👌 Minimum CSS lines 🖌 Style variables 💅SCSS, Styled Components 🔗 No dependencies, just copy-paste."/><meta property="og:url" content="https://www.producthunt.com/products/overlay"/><meta property="og:site_name" content="Product Hunt"/><meta property="og:locale" content="en_US"/><meta property="og:image" content="https://ph-files.imgix.net/91443f8b-d8ab-4a54-8315-f7137dab2127.png?auto=format&fit=crop&frame=1&h=512&w=1024"/><meta property="og:type" content="article"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:site" content="@producthunt"/><meta name="twitter:creator" content="@kevin_jean"/><meta name="twitter:title" content=" Overlay - Product Information, Latest Updates, and Reviews 2024 | Product Hunt"/><meta name="twitter:description" content="Overlay helps designers and developers convert their Figma components into clean and reusable React, Vue.js and Html code. 💎 Flex attributes ⭐️ Props 👌 Minimum CSS lines 🖌 Style variables 💅SCSS, Styled Components 🔗 No dependencies, just copy-paste."/><meta name="twitter:image" content="https://ph-files.imgix.net/91443f8b-d8ab-4a54-8315-f7137dab2127.png?auto=format&fit=crop&frame=1&h=512&w=1024"/><link rel="icon" href="https://ph-static.imgix.net/ph-favicon-brand-500.ico?auto=format"/><link rel="apple-touch-icon-precomposed" href="https://ph-static.imgix.net/ph-ios-icon.png?auto=format"/><link rel="chrome-webstore-item" href="https://producthunt.app.link/extension"/><script src="/_next/static/chunks/polyfills-42372ed130431b0a.js" noModule=""></script><script>(window[Symbol.for("ApolloSSRDataTransport")] ??= []).push({"rehydrate":{":R1kq:":{"data":{},"complete":false,"missing":"Dangling reference to missing Viewer object"},":R5kq:":{"data":{},"complete":false,"missing":"Dangling reference to missing Viewer object"},":R8ocutkq:":{"data":{},"complete":false,"missing":"Dangling reference to missing Viewer object"},":R18cutkq:":{"data":undefined,"loading":true,"networkStatus":1,"called":true},":R9ocutkq:":{"data":{},"complete":false,"missing":"Dangling reference to missing Viewer object"},":Ra8cutkq:":{"data":{},"complete":false,"missing":"Dangling reference to missing Viewer object"},":Rkutkq:":{"data":{},"complete":false,"missing":"Dangling reference to missing Viewer object"},":Rsutkq:":{"data":{},"complete":false,"missing":"Dangling reference to missing Viewer object"},":R14utkq:":{"data":{},"complete":false,"missing":"Dangling reference to missing Viewer object"},":R1kutkq:":{"data":{},"complete":false,"missing":"Dangling reference to missing Viewer object"},":R2sutkq:":{"data":{},"complete":false,"missing":"Dangling reference to missing Viewer object"},":R34utkq:":{"data":{},"complete":false,"missing":"Dangling reference to missing Viewer object"},":R3cutkq:":{"data":{},"complete":false,"missing":"Dangling reference to missing Viewer object"},":R1dkq:":{"data":{},"complete":false,"missing":"Dangling reference to missing Viewer object"},":R1tkq:":{"data":{},"complete":false,"missing":"Dangling reference to missing Viewer object"},":Rccutkq:":{"data":{"viewer":{"__typename":"Viewer","id":null,"email":null,"emailVerified":false,"isImpersonated":false,"analyticsIdentifyJson":{},"deviceType":"desktop","showCookiePolicy":false,"showCommentWarning":false,"showCaptcha":false,"showPhoneVerification":false,"isAdmin":false,"features":["ph_top_product_badge","ph_hub_top_badges","ph_phone_verification","ph_verify_usa_phone_number","ph_verify_with_targeted_friction","ph_score_events_enabled","ph_mega_ads"],"notificationFeedItemsUnreadCount":0,"flashAlert":null,"notice":null,"otpRequiredFrom":null,"user":null,"abTestActiveParticipations":[],"visitStreak":{"__typename":"VisitStreak","id":"2fa3f85b-614a-456d-8030-6589de3d83be","emoji":null,"duration":1},"recentLaunch":null,"intercomUserHash":null,"ifVisitedFromMobile":false,"newsletterSettings":{"__typename":"ViewerNewsletterSettings","hasNewsletterSubscription":false}}},"networkStatus":7},":RccutkqH1:":{"data":{"__typename":"Viewer","id":null,"email":null,"emailVerified":false,"isImpersonated":false,"analyticsIdentifyJson":{},"deviceType":"desktop","showCookiePolicy":false,"showCommentWarning":false,"showCaptcha":false,"showPhoneVerification":false,"isAdmin":false,"features":["ph_top_product_badge","ph_hub_top_badges","ph_phone_verification","ph_verify_usa_phone_number","ph_verify_with_targeted_friction","ph_score_events_enabled","ph_mega_ads"],"notificationFeedItemsUnreadCount":0,"flashAlert":null,"notice":null,"otpRequiredFrom":null,"user":null,"abTestActiveParticipations":[],"visitStreak":{"__typename":"VisitStreak","id":"2fa3f85b-614a-456d-8030-6589de3d83be","emoji":null,"duration":1},"recentLaunch":null,"intercomUserHash":null,"ifVisitedFromMobile":false,"newsletterSettings":{"__typename":"ViewerNewsletterSettings","hasNewsletterSubscription":false}},"complete":true,"missing":undefined},":R17rrqkutkq:":{"data":{"product":{"__typename":"Product","id":"448263","slug":"overlay","reviewsCount":29,"addonsCount":0,"canClaim":false,"badges":{"__typename":"Connection","totalCount":1},"shoutoutsToCount":0,"name":"Overlay","tagline":"Turn Figma components into clean and reusable React/Vue.js","isNoLongerOnline":false,"canEdit":false,"followersCount":53,"activeUpcomingEvent":null,"upcomingBannerFollowers":{"__typename":"UserConnection","edges":[{"__typename":"UserEdge","node":{"__typename":"User","id":"406686","name":"Sany","username":"sanine_moreira","avatarUrl":"https://ph-avatars.imgix.net/406686/2046d366-c85d-42b3-8625-9721d7bc879e.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"74377","name":"Mark Thien","username":"markthien","avatarUrl":"https://ph-avatars.imgix.net/74377/original.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"917589","name":"Muhammad Azeem","username":"azeemkafridi","avatarUrl":"https://ph-avatars.imgix.net/917589/9dd86523-2886-4dba-87df-f6ff5172c89b.jpeg"}}]},"alternativesCount":19,"targetedAd":null,"followers":{"__typename":"UserConnection","edges":[{"__typename":"UserEdge","node":{"__typename":"User","id":"3525107","name":"Nandhini Senthilvelan","username":"nandhini_senthilvelan","avatarUrl":"https://ph-avatars.imgix.net/3525107/718a5d08-7552-49f0-b6d4-671e66c9a10c.png"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"7450395","name":"Gayathri","username":"gayathri4","avatarUrl":"https://ph-avatars.imgix.net/7450395/original.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"5766124","name":"Frédéric Barthelet","username":"fredisterik","avatarUrl":"https://ph-avatars.imgix.net/5766124/original.png"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"6287197","name":"Samuel Pius","username":"wiltafgod","avatarUrl":"https://ph-avatars.imgix.net/6287197/8a751a19-de17-4a0a-86c8-2542d2a67f28.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"5276875","name":"Manuel Gil","username":"imgildev","avatarUrl":"https://ph-avatars.imgix.net/5276875/original.png"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"6264635","name":"Habila Amos ⭐⭐✅","username":"habilaamos222","avatarUrl":"https://ph-avatars.imgix.net/6264635/3269e8da-e8f0-4ade-88ee-1d7321d8f84d.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"1975985","name":"iEngineer","username":"iengineer","avatarUrl":"https://ph-avatars.imgix.net/1975985/original.png"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"6240259","name":"Manu Yeremian","username":"manu_yeremian","avatarUrl":"https://ph-avatars.imgix.net/6240259/original.png"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"1996202","name":"Garen Orchyan ","username":"orchyan","avatarUrl":"https://ph-avatars.imgix.net/1996202/605143d4-9c09-4cc0-8fb2-dcdbcf9cc632.png"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"5739040","name":"Nikita Nikitin","username":"nikitinho_jr","avatarUrl":"https://ph-avatars.imgix.net/5739040/original.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"5118250","name":"Kiran Mannem","username":"kiran_mannem","avatarUrl":null}},{"__typename":"UserEdge","node":{"__typename":"User","id":"2579614","name":"Can Sofyalioglu","username":"can_sofyalioglu","avatarUrl":"https://ph-avatars.imgix.net/2579614/4157cc54-c71c-4fff-9ce3-3f12948f4b61.png"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"5383251","name":"Miloš","username":"milosstar999","avatarUrl":"https://ph-avatars.imgix.net/5383251/original.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"2316351","name":"nanzhi","username":"nanzhi","avatarUrl":"https://ph-avatars.imgix.net/2316351/cb427ac8-069b-413f-b988-6ffecb76b8d1.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"5381127","name":"Eric Day","username":"ericday","avatarUrl":"https://ph-avatars.imgix.net/5381127/f9cc8648-bbfe-4295-a902-67ede633fd60.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"4830057","name":"Omkar Abnave","username":"ucheeha","avatarUrl":"https://ph-avatars.imgix.net/4830057/75d92335-935c-4b52-8689-da608223bb5b.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"5206647","name":"Oleksandr Sendziuk","username":"oleksandr_sendziuk","avatarUrl":"https://ph-avatars.imgix.net/5206647/b4d6f5f5-f562-4d48-b424-e2b50974b890.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"5237595","name":"Serhii Yehorov","username":"serhii_yehorov","avatarUrl":"https://ph-avatars.imgix.net/5237595/original.png"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"5047413","name":"Asdemars","username":"asdemars","avatarUrl":"https://ph-avatars.imgix.net/5047413/df9e81f5-7539-4627-9790-ad7cab9e455e.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"2822795","name":"Ton Savenije","username":"ton_savenije","avatarUrl":"https://ph-avatars.imgix.net/2822795/original.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"406686","name":"Sany","username":"sanine_moreira","avatarUrl":"https://ph-avatars.imgix.net/406686/2046d366-c85d-42b3-8625-9721d7bc879e.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"4660601","name":"nika garashvili","username":"nika_garashvili","avatarUrl":"https://ph-avatars.imgix.net/4660601/original.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"3385397","name":"Rahul Arandhara","username":"rahul_arandhara","avatarUrl":"https://ph-avatars.imgix.net/3385397/original.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"3288431","name":"Daniel T","username":"daniel_tch","avatarUrl":"https://ph-avatars.imgix.net/3288431/5ae61ee6-4c62-49bb-97ae-6183ca9ea474.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"2780382","name":"JinBaek Choi","username":"tf2keras","avatarUrl":"https://ph-avatars.imgix.net/2780382/original.png"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"2340429","name":"khamal ismadie","username":"ismadie_pro","avatarUrl":"https://ph-avatars.imgix.net/2340429/86f29309-bf91-45f3-ba87-a5eff2c0715b.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"917589","name":"Muhammad Azeem","username":"azeemkafridi","avatarUrl":"https://ph-avatars.imgix.net/917589/9dd86523-2886-4dba-87df-f6ff5172c89b.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"3147135","name":"Ken Cheney","username":"ken_cheney1","avatarUrl":"https://ph-avatars.imgix.net/3147135/original.png"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"3185194","name":"Kevin Keeland","username":"kevin_keeland1","avatarUrl":"https://ph-avatars.imgix.net/3185194/original.png"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"2941523","name":"Daniyal abbaszadeh","username":"daniyal_abbaszadeh","avatarUrl":"https://ph-avatars.imgix.net/2941523/ee5375dd-bef1-4e4b-8675-c68416bcc58b.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"2331031","name":"Александр Старинский","username":"new_user_22db07c8cd","avatarUrl":"https://ph-avatars.imgix.net/2331031/f63335f8-e80e-4add-a69b-2d2dad7e78fe.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"1663510","name":"Huaiyu Khaw","username":"huaiyukhaw","avatarUrl":"https://ph-avatars.imgix.net/1663510/original.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"4458832","name":"Nahid Mahamud","username":"nmh47","avatarUrl":"https://ph-avatars.imgix.net/4458832/original.png"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"4458734","name":"Enisa Dzafic","username":"enisa_dzafic","avatarUrl":"https://ph-avatars.imgix.net/4458734/original.png"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"4453026","name":"久保和則","username":"new_user_20220228e24b4d2b6","avatarUrl":null}},{"__typename":"UserEdge","node":{"__typename":"User","id":"4447226","name":"Abdulrahman Abdi","username":"abdulrahman_abdi","avatarUrl":"https://ph-avatars.imgix.net/4447226/original.png"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"4445769","name":"rs_daniel daniel","username":"rs_daniel_daniel","avatarUrl":"https://ph-avatars.imgix.net/4445769/39e926a0-dd21-4ac8-93b1-5103ac7e47d9.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"4445551","name":"Дмитрий Митяшкин","username":"new_user_1992022e1b83ff1d8","avatarUrl":null}},{"__typename":"UserEdge","node":{"__typename":"User","id":"4445352","name":"Louie Jay Balbon","username":"louie_jay_balbon","avatarUrl":"https://ph-avatars.imgix.net/4445352/original.png"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"4445304","name":"Ashish Thomas Shaji","username":"ashish_thomas_shaji","avatarUrl":"https://ph-avatars.imgix.net/4445304/original.png"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"4445118","name":"Pinki Roy","username":"pinki_roy4","avatarUrl":"https://ph-avatars.imgix.net/4445118/original.png"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"74377","name":"Mark Thien","username":"markthien","avatarUrl":"https://ph-avatars.imgix.net/74377/original.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"4441832","name":"Bryan Garcia","username":"bryan_garcia","avatarUrl":"https://ph-avatars.imgix.net/4441832/original.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"3778660","name":"Eoin Bara","username":"eoin","avatarUrl":"https://ph-avatars.imgix.net/3778660/original.png"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"4342151","name":"Poiraudau Guillaume","username":"poiraudau_guillaume","avatarUrl":"https://ph-avatars.imgix.net/4342151/original.png"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"4381621","name":"Eric Lee","username":"elee03","avatarUrl":"https://ph-avatars.imgix.net/4381621/2e48db6e-96eb-4a99-89ad-ad3ddf7f7aa4.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"4388836","name":"Mousumi Mukherjee","username":"mousumi_mukherjee","avatarUrl":"https://ph-avatars.imgix.net/4388836/original.png"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"4444108","name":"Shubham","username":"sms_vlog","avatarUrl":"https://ph-avatars.imgix.net/4444108/original.png"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"3724255","name":"Mr. P","username":"mr_p2","avatarUrl":"https://ph-avatars.imgix.net/3724255/original.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"4340845","name":"Theodor Barczyk","username":"theodor_barczyk","avatarUrl":"https://ph-avatars.imgix.net/4340845/original.jpeg"}}]},"categories":[{"__typename":"ProductCategory","id":"75","article":null},{"__typename":"ProductCategory","id":"200","article":null},{"__typename":"ProductCategory","id":"235","article":null}],"url":"https://www.producthunt.com/products/overlay","logoUuid":"5e44758a-f944-4dae-951c-6750d2edc4a7.gif","featuredShoutoutsToCount":0,"reviewsRating":5,"websiteUrl":"https://overlay-tech.com","totalVotesCount":717,"postsCount":1,"isSubscribed":false,"promo":null,"isMuted":false,"description":"Overlay helps designers and developers convert their Figma components into clean and reusable React, Vue.js and Html code. 💎 Flex attributes ⭐️ Props 👌 Minimum CSS lines 🖌 Style variables 💅SCSS, Styled Components 🔗 No dependencies, just copy-paste.","pricingType":null,"cleanUrl":"overlay-tech.com","iosUrl":null,"androidUrl":null,"instagramUrl":null,"facebookUrl":null,"twitterUrl":"https://twitter.com/Overlay_app","linkedinUrl":null,"githubUrl":null,"mediumUrl":null,"angellistUrl":null,"threadsUrl":null,"isClaimed":false,"isTopProduct":false,"isGoldenKittyWinner":false,"viewerPendingTeamRequest":null,"makers":{"__typename":"UserConnection","edges":[{"__typename":"UserEdge","node":{"__typename":"User","id":"2585688","name":"Côme Sabran","username":"come_sabran","avatarUrl":"https://ph-avatars.imgix.net/2585688/28b36d24-6fb7-422f-bde8-1408397667f4.png"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"2965082","name":"Kevin Jean","username":"kevin_jean","avatarUrl":"https://ph-avatars.imgix.net/2965082/30db04e1-3e1b-4625-9fb5-274b684ab9be.png"}}]},"alternativeAssociations":{"__typename":"ProductAssociationConnection","edges":[{"__typename":"ProductAssociationEdge","node":{"__typename":"ProductAssociation","id":"550200","alternative":{"__typename":"Product","id":"483584","slug":"locofy-ai","name":"Locofy.ai","tagline":"Build frontend 10x faster with design-to-code AI","logoUuid":"91516fe5-b5ed-44d7-a7e9-1be99e8c2e2b.gif","isNoLongerOnline":false}}},{"__typename":"ProductAssociationEdge","node":{"__typename":"ProductAssociation","id":"305890","alternative":{"__typename":"Product","id":"111800","slug":"anima-app","name":"Anima App","tagline":"Design to Code, Automated","logoUuid":"9e13de2b-cde7-4d32-be80-bfb7f1b3b055.png","isNoLongerOnline":false}}},{"__typename":"ProductAssociationEdge","node":{"__typename":"ProductAssociation","id":"549412","alternative":{"__typename":"Product","id":"487188","slug":"figma-component-library","name":"Figma Component Library","tagline":"Find and copy free Figma components in one place.","logoUuid":"4f5e4096-3fcb-42ec-a8fa-bae1a3182350.png","isNoLongerOnline":false}}},{"__typename":"ProductAssociationEdge","node":{"__typename":"ProductAssociation","id":"518462","alternative":{"__typename":"Product","id":"476179","slug":"flex-ui-library-for-figma","name":"Flex UI library for Figma","tagline":"700+ free Figma sections built for Tailwind CSS","logoUuid":"ce6913f3-7cc2-470b-9455-f4bb396fc911.png","isNoLongerOnline":false}}},{"__typename":"ProductAssociationEdge","node":{"__typename":"ProductAssociation","id":"691111","alternative":{"__typename":"Product","id":"499477","slug":"story-to-design","name":"story.to.design","tagline":"Keep your Figma components up to date with code","logoUuid":"8c45d8ef-c80f-4640-aa08-b6532f9d479b.png","isNoLongerOnline":false}}},{"__typename":"ProductAssociationEdge","node":{"__typename":"ProductAssociation","id":"410491","alternative":{"__typename":"Product","id":"464163","slug":"quickr-design-system","name":"Quickr Design System","tagline":"2000+ Figma components library to design web app \u0026 SaaS","logoUuid":"4e20218f-5fe7-46d0-9f9c-a219d5428b27.png","isNoLongerOnline":false}}},{"__typename":"ProductAssociationEdge","node":{"__typename":"ProductAssociation","id":"305894","alternative":{"__typename":"Product","id":"440619","slug":"figma-to-code","name":"Figma to Code","tagline":"Generate responsive pages/apps from Figma designs","logoUuid":"4007d6ae-4126-45fb-9f44-5faa2bce2213.png","isNoLongerOnline":false}}},{"__typename":"ProductAssociationEdge","node":{"__typename":"ProductAssociation","id":"308515","alternative":{"__typename":"Product","id":"449089","slug":"figside","name":"Figside","tagline":"Ship Websites with Figma","logoUuid":"008e0812-a71c-412a-b896-6139f4a813e5.png","isNoLongerOnline":false}}},{"__typename":"ProductAssociationEdge","node":{"__typename":"ProductAssociation","id":"399603","alternative":{"__typename":"Product","id":"462904","slug":"browser-kit-for-figma","name":"Browser Kit for Figma","tagline":"One smart component to rule them all","logoUuid":"e6ed8ab8-2c29-42d5-97ce-1d9caceaa27f.gif","isNoLongerOnline":false}}}]},"topics":{"__typename":"TopicConnection","edges":[{"__typename":"TopicEdge","node":{"__typename":"Topic","id":"44","slug":"design-tools","name":"Design Tools"}},{"__typename":"TopicEdge","node":{"__typename":"Topic","id":"46","slug":"productivity","name":"Productivity"}}]},"isMaker":false}},"networkStatus":7},":R17rrqkutkqH1:":{"data":{"viewer":{"__typename":"Viewer","id":null,"email":null,"emailVerified":false,"isImpersonated":false,"analyticsIdentifyJson":{},"deviceType":"desktop","showCookiePolicy":false,"showCommentWarning":false,"showCaptcha":false,"showPhoneVerification":false,"isAdmin":false,"features":["ph_top_product_badge","ph_hub_top_badges","ph_phone_verification","ph_verify_usa_phone_number","ph_verify_with_targeted_friction","ph_score_events_enabled","ph_mega_ads"],"notificationFeedItemsUnreadCount":0,"flashAlert":null,"notice":null,"otpRequiredFrom":null,"user":null,"abTestActiveParticipations":[],"visitStreak":{"__typename":"VisitStreak","id":"2fa3f85b-614a-456d-8030-6589de3d83be","emoji":null,"duration":1},"recentLaunch":null,"intercomUserHash":null,"ifVisitedFromMobile":false,"newsletterSettings":{"__typename":"ViewerNewsletterSettings","hasNewsletterSubscription":false}}},"networkStatus":7},":R1jn7rrqkutkq:":{"data":{"__typename":"Viewer","id":null,"email":null,"emailVerified":false,"isImpersonated":false,"analyticsIdentifyJson":{},"deviceType":"desktop","showCookiePolicy":false,"showCommentWarning":false,"showCaptcha":false,"showPhoneVerification":false,"isAdmin":false,"features":["ph_top_product_badge","ph_hub_top_badges","ph_phone_verification","ph_verify_usa_phone_number","ph_verify_with_targeted_friction","ph_score_events_enabled","ph_mega_ads"],"notificationFeedItemsUnreadCount":0,"flashAlert":null,"notice":null,"otpRequiredFrom":null,"user":null,"abTestActiveParticipations":[],"visitStreak":{"__typename":"VisitStreak","id":"2fa3f85b-614a-456d-8030-6589de3d83be","emoji":null,"duration":1},"recentLaunch":null,"intercomUserHash":null,"ifVisitedFromMobile":false,"newsletterSettings":{"__typename":"ViewerNewsletterSettings","hasNewsletterSubscription":false}},"complete":true,"missing":undefined},":R1jn7rrqkutkqH1:":{"data":{"__typename":"Viewer","id":null,"email":null,"emailVerified":false,"isImpersonated":false,"analyticsIdentifyJson":{},"deviceType":"desktop","showCookiePolicy":false,"showCommentWarning":false,"showCaptcha":false,"showPhoneVerification":false,"isAdmin":false,"features":["ph_top_product_badge","ph_hub_top_badges","ph_phone_verification","ph_verify_usa_phone_number","ph_verify_with_targeted_friction","ph_score_events_enabled","ph_mega_ads"],"notificationFeedItemsUnreadCount":0,"flashAlert":null,"notice":null,"otpRequiredFrom":null,"user":null,"abTestActiveParticipations":[],"visitStreak":{"__typename":"VisitStreak","id":"2fa3f85b-614a-456d-8030-6589de3d83be","emoji":null,"duration":1},"recentLaunch":null,"intercomUserHash":null,"ifVisitedFromMobile":false,"newsletterSettings":{"__typename":"ViewerNewsletterSettings","hasNewsletterSubscription":false}},"complete":true,"missing":undefined},":R2jn7rrqkutkq:":{"data":{"__typename":"Viewer","id":null,"email":null,"emailVerified":false,"isImpersonated":false,"analyticsIdentifyJson":{},"deviceType":"desktop","showCookiePolicy":false,"showCommentWarning":false,"showCaptcha":false,"showPhoneVerification":false,"isAdmin":false,"features":["ph_top_product_badge","ph_hub_top_badges","ph_phone_verification","ph_verify_usa_phone_number","ph_verify_with_targeted_friction","ph_score_events_enabled","ph_mega_ads"],"notificationFeedItemsUnreadCount":0,"flashAlert":null,"notice":null,"otpRequiredFrom":null,"user":null,"abTestActiveParticipations":[],"visitStreak":{"__typename":"VisitStreak","id":"2fa3f85b-614a-456d-8030-6589de3d83be","emoji":null,"duration":1},"recentLaunch":null,"intercomUserHash":null,"ifVisitedFromMobile":false,"newsletterSettings":{"__typename":"ViewerNewsletterSettings","hasNewsletterSubscription":false}},"complete":true,"missing":undefined},":R2jn7rrqkutkqH1:":{"data":{"__typename":"Viewer","id":null,"email":null,"emailVerified":false,"isImpersonated":false,"analyticsIdentifyJson":{},"deviceType":"desktop","showCookiePolicy":false,"showCommentWarning":false,"showCaptcha":false,"showPhoneVerification":false,"isAdmin":false,"features":["ph_top_product_badge","ph_hub_top_badges","ph_phone_verification","ph_verify_usa_phone_number","ph_verify_with_targeted_friction","ph_score_events_enabled","ph_mega_ads"],"notificationFeedItemsUnreadCount":0,"flashAlert":null,"notice":null,"otpRequiredFrom":null,"user":null,"abTestActiveParticipations":[],"visitStreak":{"__typename":"VisitStreak","id":"2fa3f85b-614a-456d-8030-6589de3d83be","emoji":null,"duration":1},"recentLaunch":null,"intercomUserHash":null,"ifVisitedFromMobile":false,"newsletterSettings":{"__typename":"ViewerNewsletterSettings","hasNewsletterSubscription":false}},"complete":true,"missing":undefined},":R3jn7rrqkutkq:":{"data":{"__typename":"Viewer","id":null,"email":null,"emailVerified":false,"isImpersonated":false,"analyticsIdentifyJson":{},"deviceType":"desktop","showCookiePolicy":false,"showCommentWarning":false,"showCaptcha":false,"showPhoneVerification":false,"isAdmin":false,"features":["ph_top_product_badge","ph_hub_top_badges","ph_phone_verification","ph_verify_usa_phone_number","ph_verify_with_targeted_friction","ph_score_events_enabled","ph_mega_ads"],"notificationFeedItemsUnreadCount":0,"flashAlert":null,"notice":null,"otpRequiredFrom":null,"user":null,"abTestActiveParticipations":[],"visitStreak":{"__typename":"VisitStreak","id":"2fa3f85b-614a-456d-8030-6589de3d83be","emoji":null,"duration":1},"recentLaunch":null,"intercomUserHash":null,"ifVisitedFromMobile":false,"newsletterSettings":{"__typename":"ViewerNewsletterSettings","hasNewsletterSubscription":false}},"complete":true,"missing":undefined},":R3jn7rrqkutkqH1:":{"data":{"__typename":"Viewer","id":null,"email":null,"emailVerified":false,"isImpersonated":false,"analyticsIdentifyJson":{},"deviceType":"desktop","showCookiePolicy":false,"showCommentWarning":false,"showCaptcha":false,"showPhoneVerification":false,"isAdmin":false,"features":["ph_top_product_badge","ph_hub_top_badges","ph_phone_verification","ph_verify_usa_phone_number","ph_verify_with_targeted_friction","ph_score_events_enabled","ph_mega_ads"],"notificationFeedItemsUnreadCount":0,"flashAlert":null,"notice":null,"otpRequiredFrom":null,"user":null,"abTestActiveParticipations":[],"visitStreak":{"__typename":"VisitStreak","id":"2fa3f85b-614a-456d-8030-6589de3d83be","emoji":null,"duration":1},"recentLaunch":null,"intercomUserHash":null,"ifVisitedFromMobile":false,"newsletterSettings":{"__typename":"ViewerNewsletterSettings","hasNewsletterSubscription":false}},"complete":true,"missing":undefined},":R2kv7rrqkutkq:":{"data":{"__typename":"Viewer","id":null,"email":null,"emailVerified":false,"isImpersonated":false,"analyticsIdentifyJson":{},"deviceType":"desktop","showCookiePolicy":false,"showCommentWarning":false,"showCaptcha":false,"showPhoneVerification":false,"isAdmin":false,"features":["ph_top_product_badge","ph_hub_top_badges","ph_phone_verification","ph_verify_usa_phone_number","ph_verify_with_targeted_friction","ph_score_events_enabled","ph_mega_ads"],"notificationFeedItemsUnreadCount":0,"flashAlert":null,"notice":null,"otpRequiredFrom":null,"user":null,"abTestActiveParticipations":[],"visitStreak":{"__typename":"VisitStreak","id":"2fa3f85b-614a-456d-8030-6589de3d83be","emoji":null,"duration":1},"recentLaunch":null,"intercomUserHash":null,"ifVisitedFromMobile":false,"newsletterSettings":{"__typename":"ViewerNewsletterSettings","hasNewsletterSubscription":false}},"complete":true,"missing":undefined},":Rqakv7rrqkutkq:":{"data":{"__typename":"Viewer","id":null,"email":null,"emailVerified":false,"isImpersonated":false,"analyticsIdentifyJson":{},"deviceType":"desktop","showCookiePolicy":false,"showCommentWarning":false,"showCaptcha":false,"showPhoneVerification":false,"isAdmin":false,"features":["ph_top_product_badge","ph_hub_top_badges","ph_phone_verification","ph_verify_usa_phone_number","ph_verify_with_targeted_friction","ph_score_events_enabled","ph_mega_ads"],"notificationFeedItemsUnreadCount":0,"flashAlert":null,"notice":null,"otpRequiredFrom":null,"user":null,"abTestActiveParticipations":[],"visitStreak":{"__typename":"VisitStreak","id":"2fa3f85b-614a-456d-8030-6589de3d83be","emoji":null,"duration":1},"recentLaunch":null,"intercomUserHash":null,"ifVisitedFromMobile":false,"newsletterSettings":{"__typename":"ViewerNewsletterSettings","hasNewsletterSubscription":false}},"complete":true,"missing":undefined},":Rmkkv7rrqkutkq:":{"data":{"__typename":"Viewer","id":null,"email":null,"emailVerified":false,"isImpersonated":false,"analyticsIdentifyJson":{},"deviceType":"desktop","showCookiePolicy":false,"showCommentWarning":false,"showCaptcha":false,"showPhoneVerification":false,"isAdmin":false,"features":["ph_top_product_badge","ph_hub_top_badges","ph_phone_verification","ph_verify_usa_phone_number","ph_verify_with_targeted_friction","ph_score_events_enabled","ph_mega_ads"],"notificationFeedItemsUnreadCount":0,"flashAlert":null,"notice":null,"otpRequiredFrom":null,"user":null,"abTestActiveParticipations":[],"visitStreak":{"__typename":"VisitStreak","id":"2fa3f85b-614a-456d-8030-6589de3d83be","emoji":null,"duration":1},"recentLaunch":null,"intercomUserHash":null,"ifVisitedFromMobile":false,"newsletterSettings":{"__typename":"ViewerNewsletterSettings","hasNewsletterSubscription":false}},"complete":true,"missing":undefined},":R16kkv7rrqkutkq:":{"data":{"__typename":"Viewer","id":null,"email":null,"emailVerified":false,"isImpersonated":false,"analyticsIdentifyJson":{},"deviceType":"desktop","showCookiePolicy":false,"showCommentWarning":false,"showCaptcha":false,"showPhoneVerification":false,"isAdmin":false,"features":["ph_top_product_badge","ph_hub_top_badges","ph_phone_verification","ph_verify_usa_phone_number","ph_verify_with_targeted_friction","ph_score_events_enabled","ph_mega_ads"],"notificationFeedItemsUnreadCount":0,"flashAlert":null,"notice":null,"otpRequiredFrom":null,"user":null,"abTestActiveParticipations":[],"visitStreak":{"__typename":"VisitStreak","id":"2fa3f85b-614a-456d-8030-6589de3d83be","emoji":null,"duration":1},"recentLaunch":null,"intercomUserHash":null,"ifVisitedFromMobile":false,"newsletterSettings":{"__typename":"ViewerNewsletterSettings","hasNewsletterSubscription":false}},"complete":true,"missing":undefined},":R1mkkv7rrqkutkq:":{"data":{"__typename":"Viewer","id":null,"email":null,"emailVerified":false,"isImpersonated":false,"analyticsIdentifyJson":{},"deviceType":"desktop","showCookiePolicy":false,"showCommentWarning":false,"showCaptcha":false,"showPhoneVerification":false,"isAdmin":false,"features":["ph_top_product_badge","ph_hub_top_badges","ph_phone_verification","ph_verify_usa_phone_number","ph_verify_with_targeted_friction","ph_score_events_enabled","ph_mega_ads"],"notificationFeedItemsUnreadCount":0,"flashAlert":null,"notice":null,"otpRequiredFrom":null,"user":null,"abTestActiveParticipations":[],"visitStreak":{"__typename":"VisitStreak","id":"2fa3f85b-614a-456d-8030-6589de3d83be","emoji":null,"duration":1},"recentLaunch":null,"intercomUserHash":null,"ifVisitedFromMobile":false,"newsletterSettings":{"__typename":"ViewerNewsletterSettings","hasNewsletterSubscription":false}},"complete":true,"missing":undefined},":R26kkv7rrqkutkq:":{"data":{"__typename":"Viewer","id":null,"email":null,"emailVerified":false,"isImpersonated":false,"analyticsIdentifyJson":{},"deviceType":"desktop","showCookiePolicy":false,"showCommentWarning":false,"showCaptcha":false,"showPhoneVerification":false,"isAdmin":false,"features":["ph_top_product_badge","ph_hub_top_badges","ph_phone_verification","ph_verify_usa_phone_number","ph_verify_with_targeted_friction","ph_score_events_enabled","ph_mega_ads"],"notificationFeedItemsUnreadCount":0,"flashAlert":null,"notice":null,"otpRequiredFrom":null,"user":null,"abTestActiveParticipations":[],"visitStreak":{"__typename":"VisitStreak","id":"2fa3f85b-614a-456d-8030-6589de3d83be","emoji":null,"duration":1},"recentLaunch":null,"intercomUserHash":null,"ifVisitedFromMobile":false,"newsletterSettings":{"__typename":"ViewerNewsletterSettings","hasNewsletterSubscription":false}},"complete":true,"missing":undefined},":R2mkkv7rrqkutkq:":{"data":{"__typename":"Viewer","id":null,"email":null,"emailVerified":false,"isImpersonated":false,"analyticsIdentifyJson":{},"deviceType":"desktop","showCookiePolicy":false,"showCommentWarning":false,"showCaptcha":false,"showPhoneVerification":false,"isAdmin":false,"features":["ph_top_product_badge","ph_hub_top_badges","ph_phone_verification","ph_verify_usa_phone_number","ph_verify_with_targeted_friction","ph_score_events_enabled","ph_mega_ads"],"notificationFeedItemsUnreadCount":0,"flashAlert":null,"notice":null,"otpRequiredFrom":null,"user":null,"abTestActiveParticipations":[],"visitStreak":{"__typename":"VisitStreak","id":"2fa3f85b-614a-456d-8030-6589de3d83be","emoji":null,"duration":1},"recentLaunch":null,"intercomUserHash":null,"ifVisitedFromMobile":false,"newsletterSettings":{"__typename":"ViewerNewsletterSettings","hasNewsletterSubscription":false}},"complete":true,"missing":undefined},":R36kkv7rrqkutkq:":{"data":{"__typename":"Viewer","id":null,"email":null,"emailVerified":false,"isImpersonated":false,"analyticsIdentifyJson":{},"deviceType":"desktop","showCookiePolicy":false,"showCommentWarning":false,"showCaptcha":false,"showPhoneVerification":false,"isAdmin":false,"features":["ph_top_product_badge","ph_hub_top_badges","ph_phone_verification","ph_verify_usa_phone_number","ph_verify_with_targeted_friction","ph_score_events_enabled","ph_mega_ads"],"notificationFeedItemsUnreadCount":0,"flashAlert":null,"notice":null,"otpRequiredFrom":null,"user":null,"abTestActiveParticipations":[],"visitStreak":{"__typename":"VisitStreak","id":"2fa3f85b-614a-456d-8030-6589de3d83be","emoji":null,"duration":1},"recentLaunch":null,"intercomUserHash":null,"ifVisitedFromMobile":false,"newsletterSettings":{"__typename":"ViewerNewsletterSettings","hasNewsletterSubscription":false}},"complete":true,"missing":undefined},":R3mkkv7rrqkutkq:":{"data":{"__typename":"Viewer","id":null,"email":null,"emailVerified":false,"isImpersonated":false,"analyticsIdentifyJson":{},"deviceType":"desktop","showCookiePolicy":false,"showCommentWarning":false,"showCaptcha":false,"showPhoneVerification":false,"isAdmin":false,"features":["ph_top_product_badge","ph_hub_top_badges","ph_phone_verification","ph_verify_usa_phone_number","ph_verify_with_targeted_friction","ph_score_events_enabled","ph_mega_ads"],"notificationFeedItemsUnreadCount":0,"flashAlert":null,"notice":null,"otpRequiredFrom":null,"user":null,"abTestActiveParticipations":[],"visitStreak":{"__typename":"VisitStreak","id":"2fa3f85b-614a-456d-8030-6589de3d83be","emoji":null,"duration":1},"recentLaunch":null,"intercomUserHash":null,"ifVisitedFromMobile":false,"newsletterSettings":{"__typename":"ViewerNewsletterSettings","hasNewsletterSubscription":false}},"complete":true,"missing":undefined},":R46kkv7rrqkutkq:":{"data":{"__typename":"Viewer","id":null,"email":null,"emailVerified":false,"isImpersonated":false,"analyticsIdentifyJson":{},"deviceType":"desktop","showCookiePolicy":false,"showCommentWarning":false,"showCaptcha":false,"showPhoneVerification":false,"isAdmin":false,"features":["ph_top_product_badge","ph_hub_top_badges","ph_phone_verification","ph_verify_usa_phone_number","ph_verify_with_targeted_friction","ph_score_events_enabled","ph_mega_ads"],"notificationFeedItemsUnreadCount":0,"flashAlert":null,"notice":null,"otpRequiredFrom":null,"user":null,"abTestActiveParticipations":[],"visitStreak":{"__typename":"VisitStreak","id":"2fa3f85b-614a-456d-8030-6589de3d83be","emoji":null,"duration":1},"recentLaunch":null,"intercomUserHash":null,"ifVisitedFromMobile":false,"newsletterSettings":{"__typename":"ViewerNewsletterSettings","hasNewsletterSubscription":false}},"complete":true,"missing":undefined},":R4mkkv7rrqkutkq:":{"data":{"__typename":"Viewer","id":null,"email":null,"emailVerified":false,"isImpersonated":false,"analyticsIdentifyJson":{},"deviceType":"desktop","showCookiePolicy":false,"showCommentWarning":false,"showCaptcha":false,"showPhoneVerification":false,"isAdmin":false,"features":["ph_top_product_badge","ph_hub_top_badges","ph_phone_verification","ph_verify_usa_phone_number","ph_verify_with_targeted_friction","ph_score_events_enabled","ph_mega_ads"],"notificationFeedItemsUnreadCount":0,"flashAlert":null,"notice":null,"otpRequiredFrom":null,"user":null,"abTestActiveParticipations":[],"visitStreak":{"__typename":"VisitStreak","id":"2fa3f85b-614a-456d-8030-6589de3d83be","emoji":null,"duration":1},"recentLaunch":null,"intercomUserHash":null,"ifVisitedFromMobile":false,"newsletterSettings":{"__typename":"ViewerNewsletterSettings","hasNewsletterSubscription":false}},"complete":true,"missing":undefined},":Rakkv7rrqkutkq:":{"data":{"__typename":"Viewer","id":null,"email":null,"emailVerified":false,"isImpersonated":false,"analyticsIdentifyJson":{},"deviceType":"desktop","showCookiePolicy":false,"showCommentWarning":false,"showCaptcha":false,"showPhoneVerification":false,"isAdmin":false,"features":["ph_top_product_badge","ph_hub_top_badges","ph_phone_verification","ph_verify_usa_phone_number","ph_verify_with_targeted_friction","ph_score_events_enabled","ph_mega_ads"],"notificationFeedItemsUnreadCount":0,"flashAlert":null,"notice":null,"otpRequiredFrom":null,"user":null,"abTestActiveParticipations":[],"visitStreak":{"__typename":"VisitStreak","id":"2fa3f85b-614a-456d-8030-6589de3d83be","emoji":null,"duration":1},"recentLaunch":null,"intercomUserHash":null,"ifVisitedFromMobile":false,"newsletterSettings":{"__typename":"ViewerNewsletterSettings","hasNewsletterSubscription":false}},"complete":true,"missing":undefined}},"events":[{"type":"started","options":{"skip":false,"fetchPolicy":"cache-first","query":"query Context{viewer{...UseCurrentUserFragment}}fragment ViewerNoticeFragment on Notice{type invite{id product{id slug}}makerSuggestion{id post{id slug}}dismissable{id isDismissed dismissableKey dismissableGroup}}fragment AbTestFragment on AbTestAssignment{name variant}fragment LaunchTipsFragment on Post{id canComment commentsCount featuredAt makerInviteUrl name url slug createdAt isMaker isHunter launchState shoutouts{id}}fragment UseCurrentUserFragment on Viewer{id email emailVerified isImpersonated analyticsIdentifyJson deviceType showCookiePolicy showCommentWarning showCaptcha showPhoneVerification isAdmin features notificationFeedItemsUnreadCount flashAlert notice{...ViewerNoticeFragment}otpRequiredFrom user{id avatarUrl isMaker name username}abTestActiveParticipations{...AbTestFragment}visitStreak{id emoji duration}recentLaunch{id ...LaunchTipsFragment}intercomUserHash ifVisitedFromMobile newsletterSettings{hasNewsletterSubscription}}","notifyOnNetworkStatusChange":false,"nextFetchPolicy":undefined},"id":"2"},{"type":"started","options":{"variables":{"slug":"overlay"},"skip":false,"fetchPolicy":"cache-first","query":"query PagesProductLayout($slug:String!){product(slug:$slug excludeTrashed:true){id slug reviewsCount addonsCount canClaim badges{totalCount}shoutoutsToCount ...PagesProductLayoutHeaderFragment ...ProductLayoutFirstLaunchFragment ...ProductLayoutSidebarPagesRouterFragment}}fragment FacebookShareButtonFragment on Shareable{id url}fragment ShareModalSubjectFragment on Shareable{id url ...FacebookShareButtonFragment}fragment ProductThumbnailFragment on Product{id name logoUuid isNoLongerOnline}fragment ProductLayoutHeaderStatsFragment on Product{id slug name reviewsCount featuredShoutoutsToCount reviewsRating followersCount websiteUrl totalVotesCount postsCount}fragment ProductFollowButtonFragment on Product{id followersCount isSubscribed}fragment ProductPromoCodeFragment on Product{id promo{text code}}fragment ProductMuteButtonFragment on Product{id isMuted}fragment ReviewStarRatingCTAFragment on Product{id slug name isMaker reviewsRating}fragment ProductItemFragment on Product{id slug name tagline followersCount reviewsCount topics(first:2){edges{node{id slug name}}}...ProductFollowButtonFragment ...ProductThumbnailFragment ...ProductMuteButtonFragment ...FacebookShareButtonFragment ...ReviewStarRatingCTAFragment}fragment CollectionAddButtonFragment on Product{id name description ...ProductItemFragment}fragment UpcomingEventFollowButtonFragment on UpcomingEvent{id isSubscribed truncatedDescription product{id isSubscribed followersCount}}fragment UserImage on User{id name username avatarUrl}fragment UserCircleListFragment on User{id ...UserImage}fragment UpcomingBannerFragment on Product{id logoUuid followersCount activeUpcomingEvent{id title description bannerUuid bannerMobileUuid ...UpcomingEventFollowButtonFragment}upcomingBannerFollowers:followers(first:3 order:friends excludeViewer:true){edges{node{id ...UserCircleListFragment}}}}fragment ProductLayoutHeaderAdminBarFragment on Product{id slug}fragment MetaTags on SEOInterface{id meta{canonicalUrl creator description image mobileAppUrl oembedUrl robots title type author authorUrl}}fragment PostVoteButtonFragment on Post{id featuredAt updatedAt createdAt embargoPreviewAt product{id isSubscribed}disabledWhenScheduled hasVoted ...on Votable{id votesCount}}fragment HomefeedItemPostItemCommentsButtonFragment on Post{id slug commentsCount}fragment HomefeedItemPostItemVoteButtonFragment on Post{id hideVotesCount featuredAt createdAt disabledWhenScheduled embargoPreviewAt ...on Votable{id hasVoted votesCount}}fragment HomefeedItemPostItemTopicTagsFragment on Post{id topics(first:3){edges{node{id slug name}}}}fragment AdFragment on Ad{id subject post{id slug featuredComment{id body:bodyText user{id ...UserImage}}name updatedAt commentsCount topics(first:3){edges{node{id slug name}}}...PostVoteButtonFragment ...HomefeedItemPostItemCommentsButtonFragment ...HomefeedItemPostItemVoteButtonFragment ...HomefeedItemPostItemTopicTagsFragment}name tagline thumbnailUuid largeAssetUuid smallAssetUuid url variationId}fragment UserGridCardFragment on User{id ...UserImage}fragment CategorySidebarCardFragment on ProductCategoryArticle{id contentOverview user{id name username headline ...UserImage}category{id name path}}fragment ProductSidebarInfoPagesRouterFragment on Product{id slug pricingType websiteUrl cleanUrl iosUrl androidUrl instagramUrl facebookUrl twitterUrl linkedinUrl githubUrl mediumUrl angellistUrl threadsUrl canClaim canEdit isClaimed isTopProduct isGoldenKittyWinner viewerPendingTeamRequest{id}makers(order:karma_desc first:7){edges{node{id ...UserImage}}}}fragment AlternativeProductsCardProductItemFragment on Product{id slug name tagline ...ProductThumbnailFragment}fragment ProductLayoutSidebarAlternativesFragment on Product{id slug alternativeAssociations(first:9){edges{node{id alternative:associatedProduct{id ...AlternativeProductsCardProductItemFragment}}}}}fragment PagesProductLayoutHeaderFragment on Product{id name tagline isNoLongerOnline canEdit ...ShareModalSubjectFragment ...ProductThumbnailFragment ...ProductLayoutHeaderStatsFragment ...ProductFollowButtonFragment ...ProductPromoCodeFragment ...ProductMuteButtonFragment ...CollectionAddButtonFragment ...UpcomingBannerFragment ...ProductLayoutHeaderAdminBarFragment}fragment ProductLayoutFirstLaunchFragment on Product{id slug canEdit followersCount activeUpcomingEvent{id title description bannerUuid bannerMobileUuid isFirstLaunch ...MetaTags ...UpcomingEventFollowButtonFragment}upcomingBannerFollowers:followers(first:3 order:friends excludeViewer:true){edges{node{id ...UserCircleListFragment}}}}fragment ProductLayoutSidebarPagesRouterFragment on Product{id alternativesCount targetedAd(kind:\"sidebar\"){id ...AdFragment}followers(first:50){edges{node{id ...UserGridCardFragment}}}categories{id article{id ...CategorySidebarCardFragment}}...ProductSidebarInfoPagesRouterFragment ...ProductLayoutSidebarAlternativesFragment}","notifyOnNetworkStatusChange":false,"nextFetchPolicy":undefined},"id":"3"},{"type":"data","id":"2","result":{"data":{"viewer":{"__typename":"Viewer","id":null,"email":null,"emailVerified":false,"isImpersonated":false,"analyticsIdentifyJson":{},"deviceType":"desktop","showCookiePolicy":false,"showCommentWarning":false,"showCaptcha":false,"showPhoneVerification":false,"isAdmin":false,"features":["ph_top_product_badge","ph_hub_top_badges","ph_phone_verification","ph_verify_usa_phone_number","ph_verify_with_targeted_friction","ph_score_events_enabled","ph_mega_ads"],"notificationFeedItemsUnreadCount":0,"flashAlert":null,"notice":null,"otpRequiredFrom":null,"user":null,"abTestActiveParticipations":[],"visitStreak":{"__typename":"VisitStreak","id":"2fa3f85b-614a-456d-8030-6589de3d83be","emoji":null,"duration":1},"recentLaunch":null,"intercomUserHash":null,"ifVisitedFromMobile":false,"newsletterSettings":{"__typename":"ViewerNewsletterSettings","hasNewsletterSubscription":false}}}}},{"type":"complete","id":"2"},{"type":"data","id":"3","result":{"data":{"product":{"__typename":"Product","id":"448263","slug":"overlay","reviewsCount":29,"addonsCount":0,"canClaim":false,"badges":{"__typename":"Connection","totalCount":1},"shoutoutsToCount":0,"name":"Overlay","tagline":"Turn Figma components into clean and reusable React/Vue.js","isNoLongerOnline":false,"canEdit":false,"followersCount":53,"activeUpcomingEvent":null,"upcomingBannerFollowers":{"__typename":"UserConnection","edges":[{"__typename":"UserEdge","node":{"__typename":"User","id":"406686","name":"Sany","username":"sanine_moreira","avatarUrl":"https://ph-avatars.imgix.net/406686/2046d366-c85d-42b3-8625-9721d7bc879e.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"74377","name":"Mark Thien","username":"markthien","avatarUrl":"https://ph-avatars.imgix.net/74377/original.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"917589","name":"Muhammad Azeem","username":"azeemkafridi","avatarUrl":"https://ph-avatars.imgix.net/917589/9dd86523-2886-4dba-87df-f6ff5172c89b.jpeg"}}]},"alternativesCount":19,"targetedAd":null,"followers":{"__typename":"UserConnection","edges":[{"__typename":"UserEdge","node":{"__typename":"User","id":"3525107","name":"Nandhini Senthilvelan","username":"nandhini_senthilvelan","avatarUrl":"https://ph-avatars.imgix.net/3525107/718a5d08-7552-49f0-b6d4-671e66c9a10c.png"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"7450395","name":"Gayathri","username":"gayathri4","avatarUrl":"https://ph-avatars.imgix.net/7450395/original.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"5766124","name":"Frédéric Barthelet","username":"fredisterik","avatarUrl":"https://ph-avatars.imgix.net/5766124/original.png"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"6287197","name":"Samuel Pius","username":"wiltafgod","avatarUrl":"https://ph-avatars.imgix.net/6287197/8a751a19-de17-4a0a-86c8-2542d2a67f28.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"5276875","name":"Manuel Gil","username":"imgildev","avatarUrl":"https://ph-avatars.imgix.net/5276875/original.png"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"6264635","name":"Habila Amos ⭐⭐✅","username":"habilaamos222","avatarUrl":"https://ph-avatars.imgix.net/6264635/3269e8da-e8f0-4ade-88ee-1d7321d8f84d.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"1975985","name":"iEngineer","username":"iengineer","avatarUrl":"https://ph-avatars.imgix.net/1975985/original.png"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"6240259","name":"Manu Yeremian","username":"manu_yeremian","avatarUrl":"https://ph-avatars.imgix.net/6240259/original.png"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"1996202","name":"Garen Orchyan ","username":"orchyan","avatarUrl":"https://ph-avatars.imgix.net/1996202/605143d4-9c09-4cc0-8fb2-dcdbcf9cc632.png"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"5739040","name":"Nikita Nikitin","username":"nikitinho_jr","avatarUrl":"https://ph-avatars.imgix.net/5739040/original.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"5118250","name":"Kiran Mannem","username":"kiran_mannem","avatarUrl":null}},{"__typename":"UserEdge","node":{"__typename":"User","id":"2579614","name":"Can Sofyalioglu","username":"can_sofyalioglu","avatarUrl":"https://ph-avatars.imgix.net/2579614/4157cc54-c71c-4fff-9ce3-3f12948f4b61.png"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"5383251","name":"Miloš","username":"milosstar999","avatarUrl":"https://ph-avatars.imgix.net/5383251/original.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"2316351","name":"nanzhi","username":"nanzhi","avatarUrl":"https://ph-avatars.imgix.net/2316351/cb427ac8-069b-413f-b988-6ffecb76b8d1.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"5381127","name":"Eric Day","username":"ericday","avatarUrl":"https://ph-avatars.imgix.net/5381127/f9cc8648-bbfe-4295-a902-67ede633fd60.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"4830057","name":"Omkar Abnave","username":"ucheeha","avatarUrl":"https://ph-avatars.imgix.net/4830057/75d92335-935c-4b52-8689-da608223bb5b.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"5206647","name":"Oleksandr Sendziuk","username":"oleksandr_sendziuk","avatarUrl":"https://ph-avatars.imgix.net/5206647/b4d6f5f5-f562-4d48-b424-e2b50974b890.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"5237595","name":"Serhii Yehorov","username":"serhii_yehorov","avatarUrl":"https://ph-avatars.imgix.net/5237595/original.png"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"5047413","name":"Asdemars","username":"asdemars","avatarUrl":"https://ph-avatars.imgix.net/5047413/df9e81f5-7539-4627-9790-ad7cab9e455e.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"2822795","name":"Ton Savenije","username":"ton_savenije","avatarUrl":"https://ph-avatars.imgix.net/2822795/original.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"406686","name":"Sany","username":"sanine_moreira","avatarUrl":"https://ph-avatars.imgix.net/406686/2046d366-c85d-42b3-8625-9721d7bc879e.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"4660601","name":"nika garashvili","username":"nika_garashvili","avatarUrl":"https://ph-avatars.imgix.net/4660601/original.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"3385397","name":"Rahul Arandhara","username":"rahul_arandhara","avatarUrl":"https://ph-avatars.imgix.net/3385397/original.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"3288431","name":"Daniel T","username":"daniel_tch","avatarUrl":"https://ph-avatars.imgix.net/3288431/5ae61ee6-4c62-49bb-97ae-6183ca9ea474.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"2780382","name":"JinBaek Choi","username":"tf2keras","avatarUrl":"https://ph-avatars.imgix.net/2780382/original.png"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"2340429","name":"khamal ismadie","username":"ismadie_pro","avatarUrl":"https://ph-avatars.imgix.net/2340429/86f29309-bf91-45f3-ba87-a5eff2c0715b.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"917589","name":"Muhammad Azeem","username":"azeemkafridi","avatarUrl":"https://ph-avatars.imgix.net/917589/9dd86523-2886-4dba-87df-f6ff5172c89b.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"3147135","name":"Ken Cheney","username":"ken_cheney1","avatarUrl":"https://ph-avatars.imgix.net/3147135/original.png"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"3185194","name":"Kevin Keeland","username":"kevin_keeland1","avatarUrl":"https://ph-avatars.imgix.net/3185194/original.png"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"2941523","name":"Daniyal abbaszadeh","username":"daniyal_abbaszadeh","avatarUrl":"https://ph-avatars.imgix.net/2941523/ee5375dd-bef1-4e4b-8675-c68416bcc58b.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"2331031","name":"Александр Старинский","username":"new_user_22db07c8cd","avatarUrl":"https://ph-avatars.imgix.net/2331031/f63335f8-e80e-4add-a69b-2d2dad7e78fe.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"1663510","name":"Huaiyu Khaw","username":"huaiyukhaw","avatarUrl":"https://ph-avatars.imgix.net/1663510/original.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"4458832","name":"Nahid Mahamud","username":"nmh47","avatarUrl":"https://ph-avatars.imgix.net/4458832/original.png"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"4458734","name":"Enisa Dzafic","username":"enisa_dzafic","avatarUrl":"https://ph-avatars.imgix.net/4458734/original.png"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"4453026","name":"久保和則","username":"new_user_20220228e24b4d2b6","avatarUrl":null}},{"__typename":"UserEdge","node":{"__typename":"User","id":"4447226","name":"Abdulrahman Abdi","username":"abdulrahman_abdi","avatarUrl":"https://ph-avatars.imgix.net/4447226/original.png"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"4445769","name":"rs_daniel daniel","username":"rs_daniel_daniel","avatarUrl":"https://ph-avatars.imgix.net/4445769/39e926a0-dd21-4ac8-93b1-5103ac7e47d9.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"4445551","name":"Дмитрий Митяшкин","username":"new_user_1992022e1b83ff1d8","avatarUrl":null}},{"__typename":"UserEdge","node":{"__typename":"User","id":"4445352","name":"Louie Jay Balbon","username":"louie_jay_balbon","avatarUrl":"https://ph-avatars.imgix.net/4445352/original.png"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"4445304","name":"Ashish Thomas Shaji","username":"ashish_thomas_shaji","avatarUrl":"https://ph-avatars.imgix.net/4445304/original.png"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"4445118","name":"Pinki Roy","username":"pinki_roy4","avatarUrl":"https://ph-avatars.imgix.net/4445118/original.png"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"74377","name":"Mark Thien","username":"markthien","avatarUrl":"https://ph-avatars.imgix.net/74377/original.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"4441832","name":"Bryan Garcia","username":"bryan_garcia","avatarUrl":"https://ph-avatars.imgix.net/4441832/original.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"3778660","name":"Eoin Bara","username":"eoin","avatarUrl":"https://ph-avatars.imgix.net/3778660/original.png"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"4342151","name":"Poiraudau Guillaume","username":"poiraudau_guillaume","avatarUrl":"https://ph-avatars.imgix.net/4342151/original.png"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"4381621","name":"Eric Lee","username":"elee03","avatarUrl":"https://ph-avatars.imgix.net/4381621/2e48db6e-96eb-4a99-89ad-ad3ddf7f7aa4.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"4388836","name":"Mousumi Mukherjee","username":"mousumi_mukherjee","avatarUrl":"https://ph-avatars.imgix.net/4388836/original.png"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"4444108","name":"Shubham","username":"sms_vlog","avatarUrl":"https://ph-avatars.imgix.net/4444108/original.png"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"3724255","name":"Mr. P","username":"mr_p2","avatarUrl":"https://ph-avatars.imgix.net/3724255/original.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"4340845","name":"Theodor Barczyk","username":"theodor_barczyk","avatarUrl":"https://ph-avatars.imgix.net/4340845/original.jpeg"}}]},"categories":[{"__typename":"ProductCategory","id":"75","article":null},{"__typename":"ProductCategory","id":"200","article":null},{"__typename":"ProductCategory","id":"235","article":null}],"url":"https://www.producthunt.com/products/overlay","logoUuid":"5e44758a-f944-4dae-951c-6750d2edc4a7.gif","featuredShoutoutsToCount":0,"reviewsRating":5,"websiteUrl":"https://overlay-tech.com","totalVotesCount":717,"postsCount":1,"isSubscribed":false,"promo":null,"isMuted":false,"description":"Overlay helps designers and developers convert their Figma components into clean and reusable React, Vue.js and Html code. 💎 Flex attributes ⭐️ Props 👌 Minimum CSS lines 🖌 Style variables 💅SCSS, Styled Components 🔗 No dependencies, just copy-paste.","pricingType":null,"cleanUrl":"overlay-tech.com","iosUrl":null,"androidUrl":null,"instagramUrl":null,"facebookUrl":null,"twitterUrl":"https://twitter.com/Overlay_app","linkedinUrl":null,"githubUrl":null,"mediumUrl":null,"angellistUrl":null,"threadsUrl":null,"isClaimed":false,"isTopProduct":false,"isGoldenKittyWinner":false,"viewerPendingTeamRequest":null,"makers":{"__typename":"UserConnection","edges":[{"__typename":"UserEdge","node":{"__typename":"User","id":"2585688","name":"Côme Sabran","username":"come_sabran","avatarUrl":"https://ph-avatars.imgix.net/2585688/28b36d24-6fb7-422f-bde8-1408397667f4.png"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"2965082","name":"Kevin Jean","username":"kevin_jean","avatarUrl":"https://ph-avatars.imgix.net/2965082/30db04e1-3e1b-4625-9fb5-274b684ab9be.png"}}]},"alternativeAssociations":{"__typename":"ProductAssociationConnection","edges":[{"__typename":"ProductAssociationEdge","node":{"__typename":"ProductAssociation","id":"550200","alternative":{"__typename":"Product","id":"483584","slug":"locofy-ai","name":"Locofy.ai","tagline":"Build frontend 10x faster with design-to-code AI","logoUuid":"91516fe5-b5ed-44d7-a7e9-1be99e8c2e2b.gif","isNoLongerOnline":false}}},{"__typename":"ProductAssociationEdge","node":{"__typename":"ProductAssociation","id":"305890","alternative":{"__typename":"Product","id":"111800","slug":"anima-app","name":"Anima App","tagline":"Design to Code, Automated","logoUuid":"9e13de2b-cde7-4d32-be80-bfb7f1b3b055.png","isNoLongerOnline":false}}},{"__typename":"ProductAssociationEdge","node":{"__typename":"ProductAssociation","id":"549412","alternative":{"__typename":"Product","id":"487188","slug":"figma-component-library","name":"Figma Component Library","tagline":"Find and copy free Figma components in one place.","logoUuid":"4f5e4096-3fcb-42ec-a8fa-bae1a3182350.png","isNoLongerOnline":false}}},{"__typename":"ProductAssociationEdge","node":{"__typename":"ProductAssociation","id":"518462","alternative":{"__typename":"Product","id":"476179","slug":"flex-ui-library-for-figma","name":"Flex UI library for Figma","tagline":"700+ free Figma sections built for Tailwind CSS","logoUuid":"ce6913f3-7cc2-470b-9455-f4bb396fc911.png","isNoLongerOnline":false}}},{"__typename":"ProductAssociationEdge","node":{"__typename":"ProductAssociation","id":"691111","alternative":{"__typename":"Product","id":"499477","slug":"story-to-design","name":"story.to.design","tagline":"Keep your Figma components up to date with code","logoUuid":"8c45d8ef-c80f-4640-aa08-b6532f9d479b.png","isNoLongerOnline":false}}},{"__typename":"ProductAssociationEdge","node":{"__typename":"ProductAssociation","id":"410491","alternative":{"__typename":"Product","id":"464163","slug":"quickr-design-system","name":"Quickr Design System","tagline":"2000+ Figma components library to design web app \u0026 SaaS","logoUuid":"4e20218f-5fe7-46d0-9f9c-a219d5428b27.png","isNoLongerOnline":false}}},{"__typename":"ProductAssociationEdge","node":{"__typename":"ProductAssociation","id":"305894","alternative":{"__typename":"Product","id":"440619","slug":"figma-to-code","name":"Figma to Code","tagline":"Generate responsive pages/apps from Figma designs","logoUuid":"4007d6ae-4126-45fb-9f44-5faa2bce2213.png","isNoLongerOnline":false}}},{"__typename":"ProductAssociationEdge","node":{"__typename":"ProductAssociation","id":"308515","alternative":{"__typename":"Product","id":"449089","slug":"figside","name":"Figside","tagline":"Ship Websites with Figma","logoUuid":"008e0812-a71c-412a-b896-6139f4a813e5.png","isNoLongerOnline":false}}},{"__typename":"ProductAssociationEdge","node":{"__typename":"ProductAssociation","id":"399603","alternative":{"__typename":"Product","id":"462904","slug":"browser-kit-for-figma","name":"Browser Kit for Figma","tagline":"One smart component to rule them all","logoUuid":"e6ed8ab8-2c29-42d5-97ce-1d9caceaa27f.gif","isNoLongerOnline":false}}}]},"topics":{"__typename":"TopicConnection","edges":[{"__typename":"TopicEdge","node":{"__typename":"Topic","id":"44","slug":"design-tools","name":"Design Tools"}},{"__typename":"TopicEdge","node":{"__typename":"Topic","id":"46","slug":"productivity","name":"Productivity"}}]},"isMaker":false}}}},{"type":"complete","id":"3"},{"type":"started","options":{"variables":{"productSlug":"overlay"},"skip":false,"fetchPolicy":"cache-first","query":"query ProductPageRouterPage($productSlug:String!){product(slug:$productSlug excludeTrashed:true){id slug ...ProductPageAboutPageRouterFragment ...StructuredDataFromProduct ...MetaTags}viewer{...ShoutoutPromptViewerFragment}}fragment UserImage on User{id name username avatarUrl}fragment UserCircleListFragment on User{id ...UserImage}fragment ProductStackButtonFragment on Product{id name isStacked stacksCount isMaker isViewerTeamMember}fragment ProductStackAlternativeButtonFragment on Product{id name isStacked}fragment ProductStackPromptFragment on Product{id name isMaker isStacked isViewerTeamMember stacksCount stackers(first:3){edges{node{id ...UserCircleListFragment}}}...ProductStackButtonFragment ...ProductStackAlternativeButtonFragment}fragment ProductPageAboutReviewSummatyUserLinkFragment on User{id username name ...UserImage}fragment ProductThumbnailFragment on Product{id name logoUuid isNoLongerOnline}fragment FacebookShareButtonFragment on Shareable{id url}fragment ReviewCTASharePromptFragment on Product{id name tagline slug ...ProductThumbnailFragment ...FacebookShareButtonFragment}fragment ReviewCTAPromptFragment on Product{id isMaker viewerReview{id}...ReviewCTASharePromptFragment}fragment ProductPageReviewSummaryFragment on Product{id name slug postsCount reviewsCount reviewersCount reviewsRating isMaker reviewers(first:3){edges{node{id username name ...UserImage ...ProductPageAboutReviewSummatyUserLinkFragment}}}...ReviewCTAPromptFragment}fragment PostVoteButtonFragment on Post{id featuredAt updatedAt createdAt embargoPreviewAt product{id isSubscribed}disabledWhenScheduled hasVoted ...on Votable{id votesCount}}fragment HomefeedItemPostItemCommentsButtonFragment on Post{id slug commentsCount}fragment HomefeedItemPostItemVoteButtonFragment on Post{id hideVotesCount featuredAt createdAt disabledWhenScheduled embargoPreviewAt ...on Votable{id hasVoted votesCount}}fragment HomefeedItemPostItemTopicTagsFragment on Post{id topics(first:3){edges{node{id slug name}}}}fragment AdFragment on Ad{id subject post{id slug featuredComment{id body:bodyText user{id ...UserImage}}name updatedAt commentsCount topics(first:3){edges{node{id slug name}}}...PostVoteButtonFragment ...HomefeedItemPostItemCommentsButtonFragment ...HomefeedItemPostItemVoteButtonFragment ...HomefeedItemPostItemTopicTagsFragment}name tagline thumbnailUuid largeAssetUuid smallAssetUuid url variationId}fragment ProductSidebarInfoPagesRouterFragment on Product{id slug pricingType websiteUrl cleanUrl iosUrl androidUrl instagramUrl facebookUrl twitterUrl linkedinUrl githubUrl mediumUrl angellistUrl threadsUrl canClaim canEdit isClaimed isTopProduct isGoldenKittyWinner viewerPendingTeamRequest{id}makers(order:karma_desc first:7){edges{node{id ...UserImage}}}}fragment ProductPromoCodeFragment on Product{id promo{text code}}fragment ProductPageAboutInfoPageRouterFragment on Product{id name description media{id imageUuid mediaType originalHeight originalWidth metadata{platform url videoId interactiveDemoId interactiveDemoType}}latestPost{id primaryLink{id url}}targetedAd(kind:\"sidebar\"){id ...AdFragment}screenshots(first:3){edges{node{id imageUuid altText}}}categories{id name path}...ProductSidebarInfoPagesRouterFragment ...ProductPromoCodeFragment}fragment ProductPageAboutQuestionsFragment on Product{id name questions(first:20){edges{node{id title answer slug}}}}fragment ProductTopPostBadgeFragment on TopPostBadge{id post{id name}position period date}fragment ProductGoldenKittyBadgeFragment on GoldenKittyAwardBadge{id year position category post{id name}}fragment ProductTopPostTopicBadgeFragment on TopPostTopicBadge{id}fragment ProductBadgeFragment on Badge{...on TopPostBadge{id ...ProductTopPostBadgeFragment}...on GoldenKittyAwardBadge{id ...ProductGoldenKittyBadgeFragment}...on TopPostTopicBadge{id ...ProductTopPostTopicBadgeFragment}}fragment ProductPageLatestGoldenKittyFragment on Product{id badges(types:GoldenKittyAwardBadge sort:date first:1){edges{node{...ProductBadgeFragment}}}}fragment ProductPageAboutRecentLaunches on Product{id slug postsCount posts(first:2 order:DATE filter:VISIBLE){edges{node{id slug name description createdAt media{id imageUuid mediaType}redirectToProduct{id slug}}}}}fragment AlternativeProductsCardProductItemFragment on Product{id slug name tagline ...ProductThumbnailFragment}fragment ProductLayoutSidebarAlternativesFragment on Product{id slug alternativeAssociations(first:9){edges{node{id alternative:associatedProduct{id ...AlternativeProductsCardProductItemFragment}}}}}fragment PostStatusIconFragment on Post{id productState}fragment PostThumbnailFragment on Post{id name thumbnailImageUuid ...PostStatusIconFragment}fragment BadgeIconTopPostBadgeFragment on TopPostBadge{id position period date}fragment BadgeIconFragment on Post{id name badges(first:1 types:[TopPostBadge]sort:position){edges{node{__typename ...on TopPostBadge{id ...BadgeIconTopPostBadgeFragment}}}}}fragment ShoutoutVoteButtonFragment on PostShoutout{id hasVoted votesCount}fragment ShoutoutItemFragment on PostShoutout{id note url from{id isTopProduct}to{id name slug}post{id slug name tagline createdAt isTopLaunch votesCount redirectToProduct{id slug}...PostThumbnailFragment ...BadgeIconFragment}...ShoutoutVoteButtonFragment}fragment ProductPageShoutoutsFragment on Product{id slug shoutoutsToCount postShoutoutsTo(first:4){edges{node{id ...ShoutoutItemFragment}}}}fragment ShoutoutPromptFragment on Product{id name slug}fragment ProductPageAboutPageRouterFragment on Product{id ...ProductStackPromptFragment ...ProductPageReviewSummaryFragment ...ProductPageAboutInfoPageRouterFragment ...ProductPageAboutQuestionsFragment ...ProductPageLatestGoldenKittyFragment ...ProductPageAboutRecentLaunches ...ProductLayoutSidebarAlternativesFragment ...ProductPageShoutoutsFragment ...ShoutoutPromptFragment}fragment StructuredDataFromProduct on Product{id structuredData}fragment MetaTags on SEOInterface{id meta{canonicalUrl creator description image mobileAppUrl oembedUrl robots title type author authorUrl}}fragment ShoutoutPromptViewerFragment on Viewer{id isFeaturedPostMaker recentLaunch(includeAllTime:true){id slug}}","notifyOnNetworkStatusChange":false,"nextFetchPolicy":undefined},"id":"4"}]})</script></head><body><div id="root-container"><header class="w-full border-b-2 border-gray-200 bg-white sticky top-0 z-20 "><div class="mx-auto grid max-w-[1216px] grid-cols-[1fr_2fr_1fr] items-center gap-2 bg-white px-6 py-5 sm:grid-cols-[auto_1fr_auto] lg:px-0"><div class="flex flex-row items-center gap-6 md:gap-8"><a aria-label="Product Hunt Logo" href="/"><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" class="size-10"><g fill="none" fill-rule="evenodd"><path fill="#FF6154" d="M40 20c0 11.046-8.954 20-20 20S0 31.046 0 20 8.954 0 20 0s20 8.954 20 20"></path><path fill="#FFF" d="M22.667 20H17v-6h5.667a3 3 0 0 1 0 6m0-10H13v20h4v-6h5.667a7 7 0 1 0 0-14"></path></g></svg></a><div class="text-14 font-normal text-dark-gray relative"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" class="absolute left-4 top-3 size-4"><path fill="#4B587C" d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7M7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5m8.707 12.293L13.314 11.9a8 8 0 0 1-1.414 1.414l2.393 2.393a.997.997 0 0 0 1.414 0 1 1 0 0 0 0-1.414" opacity="0.5"></path></svg><input data-hj-allow="true" data-test="header-search-input" autoComplete="off" class="input box-border h-10 w-full min-w-[164px] max-w-full appearance-none rounded-full border-0 border-white bg-gray-100 px-10 pl-[40px] text-light-gray focus:outline-none sm:w-full sm:max-w-[216px] sm:text-base" placeholder="Search" title="Search" name="q"/></div></div><nav aria-label="Main Navigation"><ul class="flex flex-row items-center justify-center gap-6 md:gap-7 lg:gap-8"><li class="group relative list-none" data-test="header-nav-link-launches"><a class="cursor-pointer text-16 group flex flex-row items-center gap-1 font-semibold text-gray-700 transition-all duration-300 group-hover:text-brand-500" href="/leaderboard/daily/2024/11/27?ref=header_nav">Launches<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 14 14" class="size-4 stroke-gray-500 transition-all duration-300 group-hover:-rotate-90 group-hover:stroke-brand-500"><path d="M3.5 6.25 7 9.75l3.5-3.5"></path></svg></a><div class="styles_dropdown__6p8ZV hidden group-hover:block group-hover:translate-y-0 group-hover:opacity-100 styles_left__zme_r"><div class="bg-white styles_shadow__RlOHG"><div class="z-100 px-4 py-2"><a href="/coming-soon?ref=header_nav"><div class="my-2 flex flex-row gap-4 styles_container__K6Yj1" style="background:linear-gradient(to right, rgba(213, 243, 221, 0.25) 50%, rgba(255, 255, 255, 0.3) 50%)"><div style="background-color:#d5f3dd" class="styles_container__T4TJj"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><g stroke="#599D6B" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" clip-path="url(#ComingSoon_svg__a)"><path d="M12 21.25a8.25 8.25 0 1 0 0-16.5 8.25 8.25 0 0 0 0 16.5m-6.75-18-3 3m16.5-3 3 3"></path><path d="M12 7.75V13h5.25"></path></g><defs><clipPath id="ComingSoon_svg__a"><path fill="#fff" d="M0 0h24v24H0z"></path></clipPath></defs></svg></div><div class="flex flex-1 flex-col"><div class="text-14 font-normal text-dark-gray">Coming soon</div><div class="text-12 font-normal text-light-gray">Upcoming launches to watch</div></div></div></a><a href="/leaderboard/daily/2024/11/27?ref=header_nav"><div class="my-2 flex flex-row gap-4 styles_container__K6Yj1" style="background:linear-gradient(to right, rgba(255, 230, 228, 0.25) 50%, rgba(255, 255, 255, 0.3) 50%)"><div style="background-color:#ffe6e4" class="styles_container__T4TJj"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><g stroke="#F86C60" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" clip-path="url(#LaunchArchive_svg__a)"><path d="M9 17.25s-.75 3-5.25 3c0-4.5 3-5.25 3-5.25m11.167-4.416c2.25-2.25 2.39-4.927 2.32-6.12a.75.75 0 0 0-.7-.7c-1.194-.071-3.869.068-6.12 2.32L7.5 12l4.5 4.5zM12.75 6.75H6.97a.75.75 0 0 0-.53.22l-3.22 3.22a.75.75 0 0 0 .425 1.272L7.5 12"></path><path d="M17.25 11.25v5.78a.75.75 0 0 1-.22.53l-3.22 3.22a.75.75 0 0 1-1.272-.425L12 16.5"></path></g><defs><clipPath id="LaunchArchive_svg__a"><path fill="#fff" d="M0 0h24v24H0z"></path></clipPath></defs></svg></div><div class="flex flex-1 flex-col"><div class="text-14 font-normal text-dark-gray">Launch archive</div><div class="text-12 font-normal text-light-gray">Most-loved launches by the community</div></div></div></a><a href="/launch?ref=header_nav"><div class="my-2 flex flex-row gap-4 styles_container__K6Yj1" style="background:linear-gradient(to right, rgba(229, 239, 255, 0.25) 50%, rgba(255, 255, 255, 0.3) 50%)"><div style="background-color:#e5efff" class="styles_container__T4TJj"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><g stroke="#3979E3" stroke-width="1.5" clip-path="url(#LaunchGuide_svg__a)"><path stroke-miterlimit="10" d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z"></path><path stroke-linecap="round" stroke-linejoin="round" d="m16.5 7.5-6 3-3 6 6-3z"></path></g><defs><clipPath id="LaunchGuide_svg__a"><path fill="#fff" d="M0 0h24v24H0z"></path></clipPath></defs></svg></div><div class="flex flex-1 flex-col"><div class="text-14 font-normal text-dark-gray">Launch Guide</div><div class="text-12 font-normal text-light-gray">Checklists and pro tips for launching</div></div></div></a></div></div></div></li><li class="group relative"><a class="group flex flex-row items-center gap-1 text-16 font-semibold text-gray-700 transition-all duration-300 group-hover:text-brand-500" href="/categories?ref=header_nav">Products<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 14 14" class="size-4 stroke-gray-500 transition-all duration-300 group-hover:-rotate-90 group-hover:stroke-brand-500"><path d="M3.5 6.25 7 9.75l3.5-3.5"></path></svg></a></li><li class="group relative list-none" data-test="header-nav-link-news"><a class="cursor-pointer text-16 group flex flex-row items-center gap-1 font-semibold text-gray-700 transition-all duration-300 group-hover:text-brand-500" href="/newsletters?ref=header_nav">News<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 14 14" class="size-4 stroke-gray-500 transition-all duration-300 group-hover:-rotate-90 group-hover:stroke-brand-500"><path d="M3.5 6.25 7 9.75l3.5-3.5"></path></svg></a><div class="styles_dropdown__6p8ZV hidden group-hover:block group-hover:translate-y-0 group-hover:opacity-100 styles_left__zme_r"><div class="bg-white styles_shadow__RlOHG"><div class="z-100 px-4 py-2"><a href="/newsletters?ref=header_nav"><div class="my-2 flex flex-row gap-4 styles_container__K6Yj1" style="background:linear-gradient(to right, rgba(234, 233, 255, 0.25) 50%, rgba(255, 255, 255, 0.3) 50%)"><div style="background-color:#eae9ff" class="styles_container__T4TJj"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><g stroke="#6D68D4" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" clip-path="url(#Newsletter_svg__a)"><path d="M3 5.25h18V18a.75.75 0 0 1-.75.75H3.75A.75.75 0 0 1 3 18z"></path><path d="m21 5.25-9 8.25-9-8.25"></path></g><defs><clipPath id="Newsletter_svg__a"><path fill="#fff" d="M0 0h24v24H0z"></path></clipPath></defs></svg></div><div class="flex flex-1 flex-col"><div class="text-14 font-normal text-dark-gray">Newsletter</div><div class="text-12 font-normal text-light-gray">The best of Product Hunt, every day</div></div></div></a><a href="/stories?ref=header_nav"><div class="my-2 flex flex-row gap-4 styles_container__K6Yj1" style="background:linear-gradient(to right, rgba(255, 233, 244, 0.25) 50%, rgba(255, 255, 255, 0.3) 50%)"><div style="background-color:#ffe9f4" class="styles_container__T4TJj"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><g stroke="#F468AC" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" clip-path="url(#Stories_svg__a)"><path d="M12 8.25a3 3 0 0 1 3-3h6a.75.75 0 0 1 .75.75v12a.75.75 0 0 1-.75.75h-6a3 3 0 0 0-3 3M2.25 18a.75.75 0 0 0 .75.75h6a3 3 0 0 1 3 3V8.25a3 3 0 0 0-3-3H3a.75.75 0 0 0-.75.75zM15 9h3.75M15 12h3.75M15 15h3.75"></path></g><defs><clipPath id="Stories_svg__a"><path fill="#fff" d="M0 0h24v24H0z"></path></clipPath></defs></svg></div><div class="flex flex-1 flex-col"><div class="text-14 font-normal text-dark-gray">Stories</div><div class="text-12 font-normal text-light-gray">Tech news, interviews, and tips from makers</div></div></div></a><a href="/changes?ref=header_nav"><div class="my-2 flex flex-row gap-4 styles_container__K6Yj1" style="background:linear-gradient(to right, rgba(207, 252, 219, 0.25) 50%, rgba(255, 255, 255, 0.3) 50%)"><div style="background-color:#cffcdb" class="styles_container__T4TJj"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><g stroke="#579167" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" clip-path="url(#Changelog_svg__a)"><path d="M10.5 10.5h6m-6 3h6m3-9.75h-15a.75.75 0 0 0-.75.75v15c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75v-15a.75.75 0 0 0-.75-.75m-12 0v16.5"></path></g><defs><clipPath id="Changelog_svg__a"><path fill="#fff" d="M0 0h24v24H0z"></path></clipPath></defs></svg></div><div class="flex flex-1 flex-col"><div class="text-14 font-normal text-dark-gray">Changelog</div><div class="text-12 font-normal text-light-gray">New Product Hunt features and releases</div></div></div></a></div></div></div></li><li class="group relative list-none" data-test="header-nav-link-community"><a class="cursor-pointer text-16 group flex flex-row items-center gap-1 font-semibold text-gray-700 transition-all duration-300 group-hover:text-brand-500" href="/discussions?ref=header_nav">Community<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 14 14" class="size-4 stroke-gray-500 transition-all duration-300 group-hover:-rotate-90 group-hover:stroke-brand-500"><path d="M3.5 6.25 7 9.75l3.5-3.5"></path></svg></a><div class="styles_dropdown__6p8ZV hidden group-hover:block group-hover:translate-y-0 group-hover:opacity-100 styles_left__zme_r"><div class="bg-white styles_shadow__RlOHG"><div class="z-100 px-4 py-2"><a href="/discussions?ref=header_nav"><div class="my-2 flex flex-row gap-4 styles_container__K6Yj1" style="background:linear-gradient(to right, rgba(255, 233, 248, 0.25) 50%, rgba(255, 255, 255, 0.3) 50%)"><div style="background-color:#ffe9f8" class="styles_container__T4TJj"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><g stroke="#DE62B6" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" clip-path="url(#Discussions_svg__a)"><path d="M6.71 13.5 3 16.5v-12a.75.75 0 0 1 .75-.75h12a.75.75 0 0 1 .75.75v8.25a.75.75 0 0 1-.75.75z"></path><path d="M7.5 13.5v3.75a.75.75 0 0 0 .75.75h9.04L21 21V9a.75.75 0 0 0-.75-.75H16.5"></path></g><defs><clipPath id="Discussions_svg__a"><path fill="#fff" d="M0 0h24v24H0z"></path></clipPath></defs></svg></div><div class="flex flex-1 flex-col"><div class="text-14 font-normal text-dark-gray">Discussions</div><div class="text-12 font-normal text-light-gray">Ask questions, find support, and connect</div></div></div></a><a href="/visit-streaks?ref=header_nav"><div class="my-2 flex flex-row gap-4 styles_container__K6Yj1" style="background:linear-gradient(to right, rgba(255, 228, 228, 0.25) 50%, rgba(255, 255, 255, 0.3) 50%)"><div style="background-color:#ffe4e4" class="styles_container__T4TJj"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><g stroke="#F10202" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" clip-path="url(#Streaks_svg__a)"><path d="M12.75 18c1.875-.316 3.432-1.875 3.75-3.75"></path><path d="m10.5 9 2.463-6.75C14.987 3.93 19.5 8.264 19.5 13.5a7.5 7.5 0 0 1-15 0c0-2.866 1.352-5.462 2.906-7.5z"></path></g><defs><clipPath id="Streaks_svg__a"><path fill="#fff" d="M0 0h24v24H0z"></path></clipPath></defs></svg></div><div class="flex flex-1 flex-col"><div class="text-14 font-normal text-dark-gray">Streaks</div><div class="text-12 font-normal text-light-gray">The most active community members</div></div></div></a><a href="https://lu.ma/producthunt" target="_blank"><div class="my-2 flex flex-row gap-4 styles_container__K6Yj1" style="background:linear-gradient(to right, rgba(207, 242, 216, 0.25) 50%, rgba(255, 255, 255, 0.3) 50%)"><div style="background-color:#cff2d8" class="styles_container__T4TJj"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><g stroke="#3F9E58" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" clip-path="url(#Event_svg__a)"><path d="M19.5 3.75h-15a.75.75 0 0 0-.75.75v15c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75v-15a.75.75 0 0 0-.75-.75m-3-1.5v3m-9-3v3m-3.75 3h16.5"></path><path d="m8.625 14.25 2.25 2.25 4.5-4.5"></path></g><defs><clipPath id="Event_svg__a"><path fill="#fff" d="M0 0h24v24H0z"></path></clipPath></defs></svg></div><div class="flex flex-1 flex-col"><div class="text-14 font-normal text-dark-gray">Events</div><div class="text-12 font-normal text-light-gray">Meet others online and in-person</div></div></div></a></div></div></div></li><li class="group relative list-none" data-test="header-nav-link-advertise"><a class="cursor-pointer text-16 group flex flex-row items-center gap-1 font-semibold text-gray-700 transition-all duration-300 group-hover:text-brand-500" href="/sponsor?ref=header_nav">Advertise</a></li></ul></nav><div class="flex flex-row items-center justify-end gap-4"><a class="text-16 font-normal text-dark-gray flex h-10 items-center gap-1 rounded-full border-2 border-gray-200 px-4 align-middle text-16 font-semibold text-gray-700 transition-all duration-300 hover:border-gray-300 hover:bg-gray-50" data-test="header-nav-link-subscribe" href="/newsletters?ref=header_nav&campaign=weekly_newsletter&source=header_nav"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20" class="size-4"><path stroke="#344054" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.667" d="m11.453 2.195 6.274 4.077c.221.144.332.216.412.313a.8.8 0 0 1 .158.289c.036.12.036.252.036.516v6.11c0 1.4 0 2.1-.272 2.635a2.5 2.5 0 0 1-1.093 1.092c-.535.273-1.235.273-2.635.273H5.667c-1.4 0-2.1 0-2.635-.273a2.5 2.5 0 0 1-1.093-1.092c-.272-.535-.272-1.235-.272-2.635V7.39c0-.264 0-.396.036-.516a.8.8 0 0 1 .157-.29c.08-.096.192-.168.413-.312l6.274-4.077m2.906 0c-.526-.342-.789-.513-1.072-.58a1.7 1.7 0 0 0-.762 0c-.283.067-.546.238-1.072.58m2.906 0 5.16 3.354c.574.372.86.559.96.795a.83.83 0 0 1 0 .645c-.1.237-.386.423-.96.796l-5.16 3.354c-.526.342-.789.513-1.072.58a1.7 1.7 0 0 1-.762 0c-.283-.067-.546-.238-1.072-.58l-5.16-3.354c-.574-.373-.86-.56-.96-.796a.83.83 0 0 1 0-.645c.1-.236.386-.423.96-.795l5.16-3.354m9.37 13.638-5.536-5m-4.762 0-5.536 5"></path></svg>Subscribe</a><div class="text-16 font-semibold text-white flex h-10 cursor-pointer items-center gap-1 rounded-full bg-brand-500 px-4" data-test="header-nav-link-sign-in"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20" class="size-4"><g clip-path="url(#SignInIcon_svg__a)"><path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.667" d="M2.782 5.833a8.333 8.333 0 1 1 0 8.333M10 13.334 13.333 10m0 0L10 6.667M13.333 10H1.667"></path></g><defs><clipPath id="SignInIcon_svg__a"><path fill="#fff" d="M0 0h20v20H0z"></path></clipPath></defs></svg>Sign in</div></div></div></header><div class="flex flex-col"><div class="styles_container__NuzEI flex flex-col pb-4"><div class="styles_layout__4bPmV styles_container__eS_WB"><div class="styles_content__6_orh flex flex-col"><div class="mt-5 flex flex-col sm:mt-10 md:mt-10 md:flex-row"><div class="flex flex-row"><div class="styles_thumbnailWrapper__lpArK mr-5 flex flex-col"><video style="width:64px;height:64px" class="rounded styles_thumbnail__RJxBq styles_video__b8SeA" aria-label="Overlay" width="64" height="64" poster="https://ph-files.imgix.net/5e44758a-f944-4dae-951c-6750d2edc4a7.gif?auto=compress&codec=mozjpeg&cs=strip&fm=webp&w=64&h=64&fit=max&frame=1&dpr=2" muted="" loop="" disableRemotePlayback="" disablePictureInPicture="" playsInline="" preload="none"><source src="https://ph-files.imgix.net/5e44758a-f944-4dae-951c-6750d2edc4a7.gif?fm=mp4&crop=max&w=64&h=64&dpr=2#t=0.001" type="video/mp4"/><source src="https://ph-files.imgix.net/5e44758a-f944-4dae-951c-6750d2edc4a7.gif?fm=webm&crop=max&w=64&h=64&dpr=2#t=0.001" type="video/webm"/></video></div><div class="flex flex-col items-start justify-center sm:justify-start"><div class="flex flex-row items-center"><h1 class="text-18 sm:text-32 md:text-32 font-bold text-dark-gray">Overlay</h1></div><div class="text-18 font-normal text-light-gray">Turn Figma components into clean and reusable React/Vue.js</div><div class="flex flex-row items-center justify-center gap-4"><div><div class="flex flex-row"><label data-test="star-1-readonly" class="styles_smallStar__INWcE"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="23" viewBox="0 0 24 23" data-test="star-1-filled" class="fill-light-blue pl-1 !fill-[#f5a623]"><path d="m12 0 3.709 7.514L24 8.718l-6 5.848 1.416 8.26-7.416-3.9-7.416 3.9L6 14.566 0 8.718l8.291-1.204z"></path></svg></label><label data-test="star-2-readonly" class="styles_smallStar__INWcE"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="23" viewBox="0 0 24 23" data-test="star-2-filled" class="fill-light-blue pl-1 !fill-[#f5a623]"><path d="m12 0 3.709 7.514L24 8.718l-6 5.848 1.416 8.26-7.416-3.9-7.416 3.9L6 14.566 0 8.718l8.291-1.204z"></path></svg></label><label data-test="star-3-readonly" class="styles_smallStar__INWcE"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="23" viewBox="0 0 24 23" data-test="star-3-filled" class="fill-light-blue pl-1 !fill-[#f5a623]"><path d="m12 0 3.709 7.514L24 8.718l-6 5.848 1.416 8.26-7.416-3.9-7.416 3.9L6 14.566 0 8.718l8.291-1.204z"></path></svg></label><label data-test="star-4-readonly" class="styles_smallStar__INWcE"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="23" viewBox="0 0 24 23" data-test="star-4-filled" class="fill-light-blue pl-1 !fill-[#f5a623]"><path d="m12 0 3.709 7.514L24 8.718l-6 5.848 1.416 8.26-7.416-3.9-7.416 3.9L6 14.566 0 8.718l8.291-1.204z"></path></svg></label><label data-test="star-5-readonly" class="styles_smallStar__INWcE"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="23" viewBox="0 0 24 23" data-test="star-5-filled" class="fill-light-blue pl-1 !fill-[#f5a623]"><path d="m12 0 3.709 7.514L24 8.718l-6 5.848 1.416 8.26-7.416-3.9-7.416 3.9L6 14.566 0 8.718l8.291-1.204z"></path></svg></label></div></div><a class="text-14 font-normal text-light-gray styles_count__wajxP" href="/products/overlay/reviews"><b>29</b>reviews</a><div class="text-14 font-normal text-light-gray styles_count__wajxP"><b>53</b>followers</div></div></div></div><div class="styles_buttons__H2C5n mt-6 flex flex-row items-center gap-3 sm:gap-4 justify-start"><button class="styles_button__0Kw1Q styles_collectButton__rJiCS textButton_textButton__SIhmH" data-test="collection-product-448263-collect-text" aria-label="Add to Collection"><svg xmlns="http://www.w3.org/2000/svg" width="10" height="13" fill="none"><path stroke="#4B587C" stroke-linecap="round" stroke-linejoin="round" d="M9 12 5 9.5 1 12V1a.5.5 0 0 1 .5-.5h7A.5.5 0 0 1 9 1z"></path></svg><div class="text-14 font-semibold text-light-gray">Save</div></button><button type="button" data-test="product-follow-button" class="styles_reset__0clCw styles_button__BmLM4 styles_secondary__zB2Yb styles_button__0Kw1Q">Follow</button><a href="https://overlay-tech.com?ref=producthunt" target="_blank" data-test="product-header-visit-button" class="styles_reset__0clCw styles_button__BmLM4 styles_primary__o9u3f styles_button__0Kw1Q" rel="noreferrer">Visit website</a></div></div></div></div></div><div class="w-full border-b border-light-sky" data-test="sub-navigation"><div class="styles_navigation__SPkFh gap-1 flex flex-row"><div class="px-5 sm:px-4 styles_link__NWpW1 styles_active__jmduo"><a class="text-14 sm:text-16 font-semibold text-dark-gray py-3" data-test="sub-nav-Overview" href="/products/overlay">Overview</a></div><div class="px-5 sm:px-4 styles_link__NWpW1"><a class="text-14 sm:text-16 font-semibold text-light-gray py-3" data-test="sub-nav-Launches" href="/products/overlay/launches">Launches</a></div><div class="px-5 sm:px-4 styles_link__NWpW1"><a class="text-14 sm:text-16 font-semibold text-light-gray py-3" data-test="sub-nav-Reviews" href="/products/overlay/reviews">Reviews</a></div><div class="px-5 sm:px-4 styles_link__NWpW1"><a class="text-14 sm:text-16 font-semibold text-light-gray py-3" data-test="sub-nav-Team" href="/products/overlay/makers">Team</a></div><div class="px-5 sm:px-4 styles_link__NWpW1"><a class="text-14 sm:text-16 font-semibold text-light-gray py-3" data-test="sub-nav-Awards" href="/products/overlay/awards">Awards</a></div><div class="gap-1 flex flex-row items-center"><a href="#" data-test="product-more-btn" class="mb-1 py-3"><div class="text-14 sm:text-16 font-semibold text-light-gray flex flex-row items-center gap-2 transition-colors duration-200 hover:text-dark-gray">More<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 6" class="mt-1 w-3 fill-light-gray"><path fill="currentColor" d="M6.854.866 3.992 3.728 1.13.866a.667.667 0 0 0-.943.943L3.52 5.14c.26.26.683.26.943 0l3.333-3.33a.667.667 0 1 0-.942-.944"></path></svg></div></a></div></div></div><div class="styles_layout__9P_dy pt-6 sm:pt-10 styles_container__eS_WB"><main class="styles_main__osJg3"><template id="B:0"></template><div class="styles_container__lNjYm"><div class="styles_loader__IcPYn" style="width:30px;height:30px"></div></div></main><aside class="styles_sidebar__e9RX0 styles_right__N5KnM"><div class="flex flex-col gap-5 pb-4"><div class="styles_container__kvL6C mb-6 flex flex-col px-5 py-6"><div class="flex flex-col border-b border-light-sky py-3 first:pt-0 last:border-none last:pb-0"><div class="mb-1 flex flex-1 flex-row items-center gap-1"><div class="text-14 font-semibold text-dark-gray">Product status</div></div><div class="flex min-h-8 flex-row items-center text-14 font-semibold text-light-gray"><span class="flex-1">Unclaimed</span></div></div><div class="flex flex-col border-b border-light-sky py-3 first:pt-0 last:border-none last:pb-0"><div class="text-14 font-semibold text-dark-gray mb-1">Links</div><div class="mb-2 flex flex-row break-words last:mb-0"><a href="https://overlay-tech.com?ref=producthunt" rel="noreferrer" class="text-14 font-semibold text-light-gray box-border flex min-w-0 items-center" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" fill="none" viewBox="0 0 21 20" class="mr-2 shrink-0"><path fill="#4B587C" d="M18.102 6.46a4.05 4.05 0 0 1-1.196 2.876l-2.21 2.21a4.063 4.063 0 0 1-5.743 0 .625.625 0 1 1 .883-.882 2.82 2.82 0 0 0 3.976 0l2.211-2.21a2.813 2.813 0 1 0-3.976-3.977L10.5 6.023a.625.625 0 0 1-.883-.882l1.547-1.547a4.07 4.07 0 0 1 6.938 2.867ZM10.5 13.977l-1.547 1.547a2.813 2.813 0 0 1-3.976-3.976l2.21-2.211a2.82 2.82 0 0 1 3.977 0 .625.625 0 0 0 .883-.883 4.06 4.06 0 0 0-5.742 0l-2.211 2.211a4.063 4.063 0 1 0 5.742 5.742l1.547-1.547a.625.625 0 0 0-.883-.883"></path></svg><span class="truncate">overlay-tech.com</span></a></div></div><div class="flex flex-col border-b border-light-sky py-3 first:pt-0 last:border-none last:pb-0"><div class="text-14 font-semibold text-dark-gray mb-1">Social</div><div class="flex flex-row items-center gap-4"><a href="https://twitter.com/Overlay_app" rel="noreferrer" class="text-16 font-normal text-dark-gray" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="19" fill="none" viewBox="0 0 20 19"><path fill="#4B587C" d="M18.735 5.767 16.495 8c-.446 5.188-4.825 9.218-10.058 9.218-1.076 0-1.966-.17-2.642-.505-.542-.274-.764-.564-.824-.653a.593.593 0 0 1 .29-.883c.015-.008 1.766-.676 2.902-1.96a8 8 0 0 1-1.833-1.81C3.313 10.026 2.237 7.63 2.882 4.051a.601.601 0 0 1 1.01-.319c.022.03 2.494 2.464 5.514 3.251V6.53a3.585 3.585 0 0 1 3.607-3.562 3.58 3.58 0 0 1 3.043 1.781h2.256a.59.59 0 0 1 .55.364.62.62 0 0 1-.127.653Z"></path></svg><div class="styles_screenReader___13hu">Twitter</div></a></div></div><div class="gap-2 flex flex-col border-b border-light-sky py-3 first:pt-0 last:border-none last:pb-0"><div class="text-14 font-semibold text-dark-gray mb-1">Makers</div><div class="flex flex-row items-center gap-3"><div class="flex flex-row"><div class=""><a data-test="user-image-link-2585688" aria-label="Côme Sabran" class="styles_userImage__PmH_6" href="/@come_sabran"><img loading="lazy" srcSet="https://ph-avatars.imgix.net/2585688/28b36d24-6fb7-422f-bde8-1408397667f4.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=32&h=32&fit=crop&dpr=1 1x, https://ph-avatars.imgix.net/2585688/28b36d24-6fb7-422f-bde8-1408397667f4.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=32&h=32&fit=crop&dpr=2 2x, https://ph-avatars.imgix.net/2585688/28b36d24-6fb7-422f-bde8-1408397667f4.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=32&h=32&fit=crop&dpr=3 3x" src="https://ph-avatars.imgix.net/2585688/28b36d24-6fb7-422f-bde8-1408397667f4.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=32&h=32&fit=crop" style="width:32px;height:32px" alt="Côme Sabran" class="rounded-full"/></a></div><div class=""><a data-test="user-image-link-2965082" aria-label="Kevin Jean" class="styles_userImage__PmH_6" href="/@kevin_jean"><img loading="lazy" srcSet="https://ph-avatars.imgix.net/2965082/30db04e1-3e1b-4625-9fb5-274b684ab9be.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=32&h=32&fit=crop&dpr=1 1x, https://ph-avatars.imgix.net/2965082/30db04e1-3e1b-4625-9fb5-274b684ab9be.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=32&h=32&fit=crop&dpr=2 2x, https://ph-avatars.imgix.net/2965082/30db04e1-3e1b-4625-9fb5-274b684ab9be.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=32&h=32&fit=crop&dpr=3 3x" src="https://ph-avatars.imgix.net/2965082/30db04e1-3e1b-4625-9fb5-274b684ab9be.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=32&h=32&fit=crop" style="width:32px;height:32px" alt="Kevin Jean" class="rounded-full"/></a></div></div></div><a class="text-14 font-normal text-dark-gray styles_allMakersLink__hfVwu mt-2" href="/products/overlay/makers">All makers</a></div></div><div class="mb-8 flex flex-col gap-4"><div class="text-18 font-semibold text-dark-gray">Alternative Products</div><div class="flex flex-col gap-8"><div class="flex flex-col gap-5"><a class="text-16 font-normal text-dark-gray" target="_blank" href="/products/locofy-ai"><div class="flex flex-row gap-2"><video style="width:60px;height:60px" class="rounded styles_video__b8SeA" aria-label="Locofy.ai" width="60" height="60" poster="https://ph-files.imgix.net/91516fe5-b5ed-44d7-a7e9-1be99e8c2e2b.gif?auto=compress&codec=mozjpeg&cs=strip&fm=webp&w=60&h=60&fit=max&frame=1&dpr=2" muted="" loop="" disableRemotePlayback="" disablePictureInPicture="" playsInline="" preload="none"><source src="https://ph-files.imgix.net/91516fe5-b5ed-44d7-a7e9-1be99e8c2e2b.gif?fm=mp4&crop=max&w=60&h=60&dpr=2#t=0.001" type="video/mp4"/><source src="https://ph-files.imgix.net/91516fe5-b5ed-44d7-a7e9-1be99e8c2e2b.gif?fm=webm&crop=max&w=60&h=60&dpr=2#t=0.001" type="video/webm"/></video><div class="flex flex-col"><div class="text-12 font-semibold text-dark-gray">Locofy.ai</div><div class="text-12 font-normal text-light-gray">Build frontend 10x faster with design-to-code AI</div></div></div></a><a class="text-16 font-normal text-dark-gray" target="_blank" href="/products/anima-app"><div class="flex flex-row gap-2"><img loading="lazy" srcSet="https://ph-files.imgix.net/9e13de2b-cde7-4d32-be80-bfb7f1b3b055.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=60&h=60&fit=crop&dpr=1 1x, https://ph-files.imgix.net/9e13de2b-cde7-4d32-be80-bfb7f1b3b055.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=60&h=60&fit=crop&dpr=2 2x, https://ph-files.imgix.net/9e13de2b-cde7-4d32-be80-bfb7f1b3b055.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=60&h=60&fit=crop&dpr=3 3x" src="https://ph-files.imgix.net/9e13de2b-cde7-4d32-be80-bfb7f1b3b055.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=60&h=60&fit=crop" style="width:60px;height:60px" alt="Anima App" class="rounded" data-test="Anima App-thumbnail"/><div class="flex flex-col"><div class="text-12 font-semibold text-dark-gray">Anima App</div><div class="text-12 font-normal text-light-gray">Design to Code, Automated</div></div></div></a><a class="text-16 font-normal text-dark-gray" target="_blank" href="/products/figma-component-library"><div class="flex flex-row gap-2"><img loading="lazy" srcSet="https://ph-files.imgix.net/4f5e4096-3fcb-42ec-a8fa-bae1a3182350.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=60&h=60&fit=crop&dpr=1 1x, https://ph-files.imgix.net/4f5e4096-3fcb-42ec-a8fa-bae1a3182350.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=60&h=60&fit=crop&dpr=2 2x, https://ph-files.imgix.net/4f5e4096-3fcb-42ec-a8fa-bae1a3182350.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=60&h=60&fit=crop&dpr=3 3x" src="https://ph-files.imgix.net/4f5e4096-3fcb-42ec-a8fa-bae1a3182350.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=60&h=60&fit=crop" style="width:60px;height:60px" alt="Figma Component Library" class="rounded" data-test="Figma Component Library-thumbnail"/><div class="flex flex-col"><div class="text-12 font-semibold text-dark-gray">Figma Component Library</div><div class="text-12 font-normal text-light-gray">Find and copy free Figma components in one place.</div></div></div></a><a class="text-16 font-normal text-dark-gray" target="_blank" href="/products/flex-ui-library-for-figma"><div class="flex flex-row gap-2"><img loading="lazy" srcSet="https://ph-files.imgix.net/ce6913f3-7cc2-470b-9455-f4bb396fc911.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=60&h=60&fit=crop&dpr=1 1x, https://ph-files.imgix.net/ce6913f3-7cc2-470b-9455-f4bb396fc911.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=60&h=60&fit=crop&dpr=2 2x, https://ph-files.imgix.net/ce6913f3-7cc2-470b-9455-f4bb396fc911.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=60&h=60&fit=crop&dpr=3 3x" src="https://ph-files.imgix.net/ce6913f3-7cc2-470b-9455-f4bb396fc911.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=60&h=60&fit=crop" style="width:60px;height:60px" alt="Flex UI library for Figma" class="rounded" data-test="Flex UI library for Figma-thumbnail"/><div class="flex flex-col"><div class="text-12 font-semibold text-dark-gray">Flex UI library for Figma</div><div class="text-12 font-normal text-light-gray">700+ free Figma sections built for Tailwind CSS</div></div></div></a><a class="text-16 font-normal text-dark-gray" target="_blank" href="/products/story-to-design"><div class="flex flex-row gap-2"><img loading="lazy" srcSet="https://ph-files.imgix.net/8c45d8ef-c80f-4640-aa08-b6532f9d479b.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=60&h=60&fit=crop&dpr=1 1x, https://ph-files.imgix.net/8c45d8ef-c80f-4640-aa08-b6532f9d479b.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=60&h=60&fit=crop&dpr=2 2x, https://ph-files.imgix.net/8c45d8ef-c80f-4640-aa08-b6532f9d479b.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=60&h=60&fit=crop&dpr=3 3x" src="https://ph-files.imgix.net/8c45d8ef-c80f-4640-aa08-b6532f9d479b.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=60&h=60&fit=crop" style="width:60px;height:60px" alt="story.to.design" class="rounded" data-test="story.to.design-thumbnail"/><div class="flex flex-col"><div class="text-12 font-semibold text-dark-gray">story.to.design</div><div class="text-12 font-normal text-light-gray">Keep your Figma components up to date with code</div></div></div></a><a class="text-16 font-normal text-dark-gray" target="_blank" href="/products/quickr-design-system"><div class="flex flex-row gap-2"><img loading="lazy" srcSet="https://ph-files.imgix.net/4e20218f-5fe7-46d0-9f9c-a219d5428b27.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=60&h=60&fit=crop&dpr=1 1x, https://ph-files.imgix.net/4e20218f-5fe7-46d0-9f9c-a219d5428b27.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=60&h=60&fit=crop&dpr=2 2x, https://ph-files.imgix.net/4e20218f-5fe7-46d0-9f9c-a219d5428b27.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=60&h=60&fit=crop&dpr=3 3x" src="https://ph-files.imgix.net/4e20218f-5fe7-46d0-9f9c-a219d5428b27.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=60&h=60&fit=crop" style="width:60px;height:60px" alt="Quickr Design System" class="rounded" data-test="Quickr Design System-thumbnail"/><div class="flex flex-col"><div class="text-12 font-semibold text-dark-gray">Quickr Design System</div><div class="text-12 font-normal text-light-gray">2000+ Figma components library to design web app & SaaS</div></div></div></a><a class="text-16 font-normal text-dark-gray" target="_blank" href="/products/figma-to-code"><div class="flex flex-row gap-2"><img loading="lazy" srcSet="https://ph-files.imgix.net/4007d6ae-4126-45fb-9f44-5faa2bce2213.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=60&h=60&fit=crop&dpr=1 1x, https://ph-files.imgix.net/4007d6ae-4126-45fb-9f44-5faa2bce2213.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=60&h=60&fit=crop&dpr=2 2x, https://ph-files.imgix.net/4007d6ae-4126-45fb-9f44-5faa2bce2213.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=60&h=60&fit=crop&dpr=3 3x" src="https://ph-files.imgix.net/4007d6ae-4126-45fb-9f44-5faa2bce2213.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=60&h=60&fit=crop" style="width:60px;height:60px" alt="Figma to Code" class="rounded" data-test="Figma to Code-thumbnail"/><div class="flex flex-col"><div class="text-12 font-semibold text-dark-gray">Figma to Code</div><div class="text-12 font-normal text-light-gray">Generate responsive pages/apps from Figma designs</div></div></div></a><a class="text-16 font-normal text-dark-gray" target="_blank" href="/products/figside"><div class="flex flex-row gap-2"><img loading="lazy" srcSet="https://ph-files.imgix.net/008e0812-a71c-412a-b896-6139f4a813e5.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=60&h=60&fit=crop&dpr=1 1x, https://ph-files.imgix.net/008e0812-a71c-412a-b896-6139f4a813e5.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=60&h=60&fit=crop&dpr=2 2x, https://ph-files.imgix.net/008e0812-a71c-412a-b896-6139f4a813e5.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=60&h=60&fit=crop&dpr=3 3x" src="https://ph-files.imgix.net/008e0812-a71c-412a-b896-6139f4a813e5.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=60&h=60&fit=crop" style="width:60px;height:60px" alt="Figside" class="rounded" data-test="Figside-thumbnail"/><div class="flex flex-col"><div class="text-12 font-semibold text-dark-gray">Figside</div><div class="text-12 font-normal text-light-gray">Ship Websites with Figma</div></div></div></a><a class="text-16 font-normal text-dark-gray" target="_blank" href="/products/browser-kit-for-figma"><div class="flex flex-row gap-2"><video style="width:60px;height:60px" class="rounded styles_video__b8SeA" aria-label="Browser Kit for Figma" width="60" height="60" poster="https://ph-files.imgix.net/e6ed8ab8-2c29-42d5-97ce-1d9caceaa27f.gif?auto=compress&codec=mozjpeg&cs=strip&fm=webp&w=60&h=60&fit=max&frame=1&dpr=2" muted="" loop="" disableRemotePlayback="" disablePictureInPicture="" playsInline="" preload="none"><source src="https://ph-files.imgix.net/e6ed8ab8-2c29-42d5-97ce-1d9caceaa27f.gif?fm=mp4&crop=max&w=60&h=60&dpr=2#t=0.001" type="video/mp4"/><source src="https://ph-files.imgix.net/e6ed8ab8-2c29-42d5-97ce-1d9caceaa27f.gif?fm=webm&crop=max&w=60&h=60&dpr=2#t=0.001" type="video/webm"/></video><div class="flex flex-col"><div class="text-12 font-semibold text-dark-gray">Browser Kit for Figma</div><div class="text-12 font-normal text-light-gray">One smart component to rule them all</div></div></div></a></div><a class="text-16 font-normal text-dark-gray" href="/products/overlay/alternatives"><div class="text-12 font-normal text-light-gray mt-5">View all alternatives →</div></a></div></div><div class="mb-10 border-none"><ul class="m-0 flex flex-row flex-wrap gap-1 p-0"><li class="text-12 text-light-gray hover:underline"><a href="/stories">Blog</a></li><span class="relative -top-px text-12 text-light-gray opacity-45">•</span><li class="text-12 text-light-gray hover:underline"><a href="/newsletters">Newsletter</a></li><span class="relative -top-px text-12 text-light-gray opacity-45">•</span><li class="text-12 text-light-gray hover:underline"><a href="/questions">Questions</a></li><span class="relative -top-px text-12 text-light-gray opacity-45">•</span><li class="text-12 text-light-gray hover:underline"><a href="/categories">Product Categories</a></li><span class="relative -top-px text-12 text-light-gray opacity-45">•</span><li class="text-12 text-light-gray hover:underline"><a href="/apps">Apps</a></li><span class="relative -top-px text-12 text-light-gray opacity-45">•</span><li class="text-12 text-light-gray hover:underline"><a href="/about">About</a></li><span class="relative -top-px text-12 text-light-gray opacity-45">•</span><li class="text-12 text-light-gray hover:underline"><a href="https://help.producthunt.com">FAQ</a></li><span class="relative -top-px text-12 text-light-gray opacity-45">•</span><li class="text-12 text-light-gray hover:underline"><a href="/legal#terms">Terms</a></li><span class="relative -top-px text-12 text-light-gray opacity-45">•</span><li class="text-12 text-light-gray hover:underline"><a href="/legal#privacy">Privacy and Cookies</a></li><span class="relative -top-px text-12 text-light-gray opacity-45">•</span><li class="text-12 text-light-gray hover:underline"><a href="https://twitter.com/ProductHunt" target="_blank" rel="nofollow noopener noreferrer">X.com</a></li><span class="relative -top-px text-12 text-light-gray opacity-45">•</span><li class="text-12 text-light-gray hover:underline"><a href="https://www.facebook.com/producthunt" target="_blank" rel="nofollow noopener noreferrer">Facebook</a></li><span class="relative -top-px text-12 text-light-gray opacity-45">•</span><li class="text-12 text-light-gray hover:underline"><a href="https://www.instagram.com/producthunt" target="_blank" rel="nofollow noopener noreferrer">Instagram</a></li><span class="relative -top-px text-12 text-light-gray opacity-45">•</span><li class="text-12 text-light-gray hover:underline"><a href="https://www.linkedin.com/company/producthunt" target="_blank" rel="nofollow noopener noreferrer">LinkedIn</a></li><span class="relative -top-px text-12 text-light-gray opacity-45">•</span><li class="text-12 text-light-gray hover:underline"><a href="https://www.youtube.com/channel/UCOtU18DT8csQVqHPT1wtYzw" target="_blank" rel="nofollow noopener noreferrer">YouTube</a></li><span class="relative -top-px text-12 text-light-gray opacity-45">•</span><li class="text-12 text-light-gray hover:underline"><a href="/sponsor?utm_content=sf">Advertise</a></li></ul><div class="text-10 font-normal text-light-gray uppercase mt-2">© 2024 Product Hunt</div></div></div></aside></div></div></div><div id="root-portal"></div><script>(self.__next_s=self.__next_s||[]).push([0,{"children":"\n !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error(\"Segment snippet included twice.\");else{analytics.invoked=!0;analytics.methods=[\"trackSubmit\",\"trackClick\",\"trackLink\",\"trackForm\",\"pageview\",\"identify\",\"reset\",\"group\",\"track\",\"ready\",\"alias\",\"debug\",\"page\",\"once\",\"off\",\"on\",\"addSourceMiddleware\",\"addIntegrationMiddleware\",\"setAnonymousId\",\"addDestinationMiddleware\"];analytics.factory=function(e){return function(){var t=Array.prototype.slice.call(arguments);t.unshift(e);analytics.push(t);return analytics}};for(var e=0;e<analytics.methods.length;e++){var key=analytics.methods[e];analytics[key]=analytics.factory(key)}analytics.load=function(key,e){var t=document.createElement(\"script\");t.type=\"text/javascript\";t.defer=!0;t.src=\"https://segment-cdn.producthunt.com/\";var n=document.getElementsByTagName(\"script\")[0];n.parentNode.insertBefore(t,n);analytics._loadOptions=e};analytics._writeKey=\"dtyjquswuq\";analytics.SNIPPET_VERSION=\"4.15.2\";\n analytics.load(\"dtyjquswuq\");\n }}();\n","id":"segment"}])</script><script src="/_next/static/chunks/webpack-d90e1724055c1418.js" async=""></script><div hidden id="S:0"><template id="P:1"></template><script type="application/ld+json">[{"@context":"http://schema.org","@type":"WebApplication","name":"Overlay","description":"Overlay helps designers and developers convert their Figma components into clean and reusable React, Vue.js and Html code. 💎 Flex attributes ⭐️ Props 👌 Minimum CSS lines 🖌 Style variables 💅SCSS, Styled Components 🔗 No dependencies, just copy-paste.","datePublished":"2022-04-14T08:32:40.604-07:00","dateModified":"2024-11-05T08:01:49.819-08:00","image":"https://ph-files.imgix.net/5e44758a-f944-4dae-951c-6750d2edc4a7.gif?auto=format","screenshot":["https://ph-files.imgix.net/91443f8b-d8ab-4a54-8315-f7137dab2127.png?auto=format&fit=crop","https://ph-files.imgix.net/e57b1fcd-c87f-4b57-9247-9b1429ea4c60.png?auto=format&fit=crop","https://ph-files.imgix.net/f4c0a141-e787-4dce-b4e8-39f62ee43ad5.png?auto=format&fit=crop","https://ph-files.imgix.net/8aa087c8-254b-4396-90d2-2baa8102b499.png?auto=format&fit=crop","https://ph-files.imgix.net/f7435511-0ab1-4806-8cc4-4cd672e2f37d.png?auto=format&fit=crop","https://ph-files.imgix.net/450bd806-4bce-4f4e-9cd5-a95fbfc2f9c1.png?auto=format&fit=crop"],"aggregateRating":{"@type":"AggregateRating","ratingCount":29,"ratingValue":"5.0","worstRating":1,"bestRating":5},"applicationCategory":"Design Tools","author":[{"@type":"Person","name":"Kevin Jean","image":"https://ph-avatars.imgix.net/2965082/30db04e1-3e1b-4625-9fb5-274b684ab9be.png?auto=format&fit=crop&crop=faces&w=100&h=100","url":"https://www.producthunt.com/@kevin_jean"},{"@type":"Person","name":"Côme Sabran","image":"https://ph-avatars.imgix.net/2585688/28b36d24-6fb7-422f-bde8-1408397667f4.png?auto=format&fit=crop&crop=faces&w=100&h=100","url":"https://www.producthunt.com/@come_sabran"}]},{"@context":"http://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://www.producthunt.com/"},{"@type":"ListItem","position":2,"name":"Overlay","item":"https://www.producthunt.com/products/overlay"}]}]</script></div><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/_next/static/css/c4b0bd4f87e92aeb.css\",\"style\"]\n2:HL[\"/_next/static/css/1ea9739f23a3b69e.css\",\"style\"]\n3:HL[\"/_next/static/css/38f7d385ab6d9f22.css\",\"style\"]\n4:HL[\"/_next/static/css/75b23a08f18ae450.css\",\"style\"]\n5:HL[\"/_next/static/css/c99d6c2024146960.css\",\"style\"]\n6:HL[\"/_next/static/css/639ca35bc51610d3.css\",\"style\"]\n7:HL[\"/_next/static/css/1571eeb1adaac6eb.css\",\"style\"]\n8:HL[\"/_next/static/css/eee391e54f3127f3.css\",\"style\"]\n9:HL[\"/_next/static/css/fcda3aac4677cad7.css\",\"style\"]\na:HL[\"/_next/static/css/52c78cbf7408e1af.css\",\"style\"]\nb:HL[\"/_next/static/css/6a29de96c920f097.css\",\"style\"]\nc:HL[\"/_next/static/css/c7820bf0de1097b1.css\",\"style\"]\nd:HL[\"/_next/static/css/0a0d922ec8281d19.css\",\"style\"]\ne:HL[\"/_next/static/css/b0e0dd11aa1ac818.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"f:I[95751,[],\"\"]\n12:I[2558,[\"53877\",\"static/chunks/53877-51c4a285eb192ef0.js\",\"46403\",\"static/chunks/46403-e33a58cdfbb894e8.js\",\"58056\",\"static/chunks/58056-751c28e77ae5a19a.js\",\"87138\",\"static/chunks/87138-0346ed4de56c8f41.js\",\"48191\",\"static/chunks/48191-5065c49d069bd01c.js\",\"14604\",\"static/chunks/14604-45e3a9aa74635210.js\",\"55579\",\"static/chunks/55579-59b56c16d22d5e09.js\",\"94531\",\"static/chunks/94531-936a58903208c445.js\",\"7851\",\"static/chunks/7851-391d4a68ffe47521.js\",\"21235\",\"static/chunks/21235-52de316c2c816f3f.js\",\"50570\",\"static/chunks/50570-f5cbfddf7e09b62f.js\",\"69558\",\"static/chunks/69558-1b9bff93d908a3d5.js\",\"63761\",\"static/chunks/63761-17f7fa9792e0fc0c.js\",\"2934\",\"static/chunks/2934-e092570a1d425008.js\",\"38671\",\"static/chunks/38671-a00c12e0adc7b39f.js\",\"32493\",\"static/chunks/app/(main)/products/%5Bslug%5D/(layout)/layout-7227e78fe9f9e9b2.js\"],\"default\",1]\n13:I[39275,[],\"\"]\n15:I[61343,[],\"\"]\n16:I[73200,[\"53877\",\"static/chunks/53877-51c4a285eb192ef0.js\",\"46403\",\"static/chunks/46403-e33a58cdfbb894e8.js\",\"58056\",\"static/chunks/58056-751c28e77ae5a19a.js\",\"87138\",\"static/chunks/87138-0346ed4de56c8f41.js\",\"48191\",\"static/chunks/48191-5065c49d069bd01c.js\",\"14604\",\"static/chunks/14604-45e3a9aa74635210.js\",\"55579\",\"static/chunks/55579-59b56c16d22d5e09.js\",\"94531\",\"static/chunks/94531-936a58903208c445.js\",\"7851\",\"static/chunks/7851-391d4a68ffe47521.js\",\"28051\",\"static/chunks/28051-6c99bb1ef2e7af63.js\",\"23714\",\"static/chunks/23714-107263d1137b8b64.js\",\"65777\",\"static/chunks/65777-aff863a0e93abf71.js\",\"50634\",\"static/chunks/50634-f1ac8006859630a3.js\",\"50570\",\"static/chunks/50570-f5cbfddf7e09b62f.js\",\"69558\",\"static/chunks/69558-1b9bff93d908a3d5.js\",\"63761\",\"static/chunks/63761-17f7fa9792e0fc0c.js\",\"2934\",\"static/chunks/2934-e092570a1d425008.js\",\"86996\",\"static/chunks/86996-2b4aad33e5a2cdf7.js\",\"4095\",\"static/chunks/app/(main)/layout-35d187729779b08c.js\"],\"default\",1]\n17:I[64417,[\"53877\",\"static/chunks/53877-51c4a285eb192ef0.js\",\"46403\",\"static/chunks/46403-e33a58cdfbb894e8.js\",\"58056\",\"static/chunks/58056-751c28e77"])</script><script>self.__next_f.push([1,"ae5a19a.js\",\"87138\",\"static/chunks/87138-0346ed4de56c8f41.js\",\"14604\",\"static/chunks/14604-45e3a9aa74635210.js\",\"55579\",\"static/chunks/55579-59b56c16d22d5e09.js\",\"74468\",\"static/chunks/74468-913b2d3a1cd26fb3.js\",\"50570\",\"static/chunks/50570-f5cbfddf7e09b62f.js\",\"69558\",\"static/chunks/69558-1b9bff93d908a3d5.js\",\"86883\",\"static/chunks/app/(main)/not-found-9a7ee980d0bcf220.js\"],\"default\"]\n18:I[66914,[\"53877\",\"static/chunks/53877-51c4a285eb192ef0.js\",\"46403\",\"static/chunks/46403-e33a58cdfbb894e8.js\",\"58056\",\"static/chunks/58056-751c28e77ae5a19a.js\",\"87138\",\"static/chunks/87138-0346ed4de56c8f41.js\",\"48191\",\"static/chunks/48191-5065c49d069bd01c.js\",\"14604\",\"static/chunks/14604-45e3a9aa74635210.js\",\"55579\",\"static/chunks/55579-59b56c16d22d5e09.js\",\"1997\",\"static/chunks/1997-8c211c482f7f1b80.js\",\"87620\",\"static/chunks/87620-cdf22e94cf823402.js\",\"17436\",\"static/chunks/17436-7d847d18b236a58e.js\",\"50570\",\"static/chunks/50570-f5cbfddf7e09b62f.js\",\"69558\",\"static/chunks/69558-1b9bff93d908a3d5.js\",\"63185\",\"static/chunks/app/layout-b4b05c6c40f22aea.js\"],\"AppRouter\"]\n19:I[76236,[\"53877\",\"static/chunks/53877-51c4a285eb192ef0.js\",\"46403\",\"static/chunks/46403-e33a58cdfbb894e8.js\",\"58056\",\"static/chunks/58056-751c28e77ae5a19a.js\",\"87138\",\"static/chunks/87138-0346ed4de56c8f41.js\",\"48191\",\"static/chunks/48191-5065c49d069bd01c.js\",\"14604\",\"static/chunks/14604-45e3a9aa74635210.js\",\"55579\",\"static/chunks/55579-59b56c16d22d5e09.js\",\"1997\",\"static/chunks/1997-8c211c482f7f1b80.js\",\"87620\",\"static/chunks/87620-cdf22e94cf823402.js\",\"17436\",\"static/chunks/17436-7d847d18b236a58e.js\",\"50570\",\"static/chunks/50570-f5cbfddf7e09b62f.js\",\"69558\",\"static/chunks/69558-1b9bff93d908a3d5.js\",\"63185\",\"static/chunks/app/layout-b4b05c6c40f22aea.js\"],\"UserAgentProvider\"]\n1a:I[39342,[\"53877\",\"static/chunks/53877-51c4a285eb192ef0.js\",\"46403\",\"static/chunks/46403-e33a58cdfbb894e8.js\",\"58056\",\"static/chunks/58056-751c28e77ae5a19a.js\",\"87138\",\"static/chunks/87138-0346ed4de56c8f41.js\",\"48191\",\"static/chunks/48191-5065c49d069bd01c.js\",\"14604\",\"static/chunks/14604-45"])</script><script>self.__next_f.push([1,"e3a9aa74635210.js\",\"55579\",\"static/chunks/55579-59b56c16d22d5e09.js\",\"1997\",\"static/chunks/1997-8c211c482f7f1b80.js\",\"87620\",\"static/chunks/87620-cdf22e94cf823402.js\",\"17436\",\"static/chunks/17436-7d847d18b236a58e.js\",\"50570\",\"static/chunks/50570-f5cbfddf7e09b62f.js\",\"69558\",\"static/chunks/69558-1b9bff93d908a3d5.js\",\"63185\",\"static/chunks/app/layout-b4b05c6c40f22aea.js\"],\"NavigationProgressProvider\"]\n1b:I[3374,[\"53877\",\"static/chunks/53877-51c4a285eb192ef0.js\",\"46403\",\"static/chunks/46403-e33a58cdfbb894e8.js\",\"58056\",\"static/chunks/58056-751c28e77ae5a19a.js\",\"87138\",\"static/chunks/87138-0346ed4de56c8f41.js\",\"48191\",\"static/chunks/48191-5065c49d069bd01c.js\",\"14604\",\"static/chunks/14604-45e3a9aa74635210.js\",\"55579\",\"static/chunks/55579-59b56c16d22d5e09.js\",\"1997\",\"static/chunks/1997-8c211c482f7f1b80.js\",\"87620\",\"static/chunks/87620-cdf22e94cf823402.js\",\"17436\",\"static/chunks/17436-7d847d18b236a58e.js\",\"50570\",\"static/chunks/50570-f5cbfddf7e09b62f.js\",\"69558\",\"static/chunks/69558-1b9bff93d908a3d5.js\",\"63185\",\"static/chunks/app/layout-b4b05c6c40f22aea.js\"],\"default\"]\n1c:I[79395,[\"53877\",\"static/chunks/53877-51c4a285eb192ef0.js\",\"48191\",\"static/chunks/48191-5065c49d069bd01c.js\",\"1997\",\"static/chunks/1997-8c211c482f7f1b80.js\",\"87620\",\"static/chunks/87620-cdf22e94cf823402.js\",\"31462\",\"static/chunks/app/(cards)/layout-ed869996799e05ab.js\"],\"default\"]\n1d:I[75299,[\"53877\",\"static/chunks/53877-51c4a285eb192ef0.js\",\"46403\",\"static/chunks/46403-e33a58cdfbb894e8.js\",\"58056\",\"static/chunks/58056-751c28e77ae5a19a.js\",\"87138\",\"static/chunks/87138-0346ed4de56c8f41.js\",\"48191\",\"static/chunks/48191-5065c49d069bd01c.js\",\"14604\",\"static/chunks/14604-45e3a9aa74635210.js\",\"55579\",\"static/chunks/55579-59b56c16d22d5e09.js\",\"1997\",\"static/chunks/1997-8c211c482f7f1b80.js\",\"87620\",\"static/chunks/87620-cdf22e94cf823402.js\",\"17436\",\"static/chunks/17436-7d847d18b236a58e.js\",\"50570\",\"static/chunks/50570-f5cbfddf7e09b62f.js\",\"69558\",\"static/chunks/69558-1b9bff93d908a3d5.js\",\"63185\",\"static/chunks/app/layout-b4b05c6c40f22aea.js\"],\"ErrorBoundary\"]\n1"])</script><script>self.__next_f.push([1,"e:I[84080,[\"53877\",\"static/chunks/53877-51c4a285eb192ef0.js\",\"46403\",\"static/chunks/46403-e33a58cdfbb894e8.js\",\"58056\",\"static/chunks/58056-751c28e77ae5a19a.js\",\"87138\",\"static/chunks/87138-0346ed4de56c8f41.js\",\"48191\",\"static/chunks/48191-5065c49d069bd01c.js\",\"14604\",\"static/chunks/14604-45e3a9aa74635210.js\",\"55579\",\"static/chunks/55579-59b56c16d22d5e09.js\",\"1997\",\"static/chunks/1997-8c211c482f7f1b80.js\",\"87620\",\"static/chunks/87620-cdf22e94cf823402.js\",\"17436\",\"static/chunks/17436-7d847d18b236a58e.js\",\"50570\",\"static/chunks/50570-f5cbfddf7e09b62f.js\",\"69558\",\"static/chunks/69558-1b9bff93d908a3d5.js\",\"63185\",\"static/chunks/app/layout-b4b05c6c40f22aea.js\"],\"\"]\n20:I[64404,[\"53877\",\"static/chunks/53877-51c4a285eb192ef0.js\",\"46403\",\"static/chunks/46403-e33a58cdfbb894e8.js\",\"58056\",\"static/chunks/58056-751c28e77ae5a19a.js\",\"87138\",\"static/chunks/87138-0346ed4de56c8f41.js\",\"48191\",\"static/chunks/48191-5065c49d069bd01c.js\",\"14604\",\"static/chunks/14604-45e3a9aa74635210.js\",\"55579\",\"static/chunks/55579-59b56c16d22d5e09.js\",\"1997\",\"static/chunks/1997-8c211c482f7f1b80.js\",\"87620\",\"static/chunks/87620-cdf22e94cf823402.js\",\"17436\",\"static/chunks/17436-7d847d18b236a58e.js\",\"50570\",\"static/chunks/50570-f5cbfddf7e09b62f.js\",\"69558\",\"static/chunks/69558-1b9bff93d908a3d5.js\",\"63185\",\"static/chunks/app/layout-b4b05c6c40f22aea.js\"],\"GoogleAnalytics\"]\n21:I[27640,[\"53877\",\"static/chunks/53877-51c4a285eb192ef0.js\",\"46403\",\"static/chunks/46403-e33a58cdfbb894e8.js\",\"58056\",\"static/chunks/58056-751c28e77ae5a19a.js\",\"87138\",\"static/chunks/87138-0346ed4de56c8f41.js\",\"48191\",\"static/chunks/48191-5065c49d069bd01c.js\",\"14604\",\"static/chunks/14604-45e3a9aa74635210.js\",\"55579\",\"static/chunks/55579-59b56c16d22d5e09.js\",\"1997\",\"static/chunks/1997-8c211c482f7f1b80.js\",\"87620\",\"static/chunks/87620-cdf22e94cf823402.js\",\"17436\",\"static/chunks/17436-7d847d18b236a58e.js\",\"50570\",\"static/chunks/50570-f5cbfddf7e09b62f.js\",\"69558\",\"static/chunks/69558-1b9bff93d908a3d5.js\",\"63185\",\"static/chunks/app/layout-b4b05c6c40f22aea.js\"],\"GoogleTagManager\"]\n23:I[963"])</script><script>self.__next_f.push([1,"14,[\"53877\",\"static/chunks/53877-51c4a285eb192ef0.js\",\"46403\",\"static/chunks/46403-e33a58cdfbb894e8.js\",\"58056\",\"static/chunks/58056-751c28e77ae5a19a.js\",\"87138\",\"static/chunks/87138-0346ed4de56c8f41.js\",\"14604\",\"static/chunks/14604-45e3a9aa74635210.js\",\"55579\",\"static/chunks/55579-59b56c16d22d5e09.js\",\"25058\",\"static/chunks/25058-f2b5f735f386b605.js\",\"50570\",\"static/chunks/50570-f5cbfddf7e09b62f.js\",\"69558\",\"static/chunks/69558-1b9bff93d908a3d5.js\",\"16470\",\"static/chunks/app/global-error-c3fd97e3c9c07406.js\"],\"default\"]\n14:[\"slug\",\"overlay\",\"d\"]\n1f:T449,\n !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console\u0026\u0026console.error\u0026\u0026console.error(\"Segment snippet included twice.\");else{analytics.invoked=!0;analytics.methods=[\"trackSubmit\",\"trackClick\",\"trackLink\",\"trackForm\",\"pageview\",\"identify\",\"reset\",\"group\",\"track\",\"ready\",\"alias\",\"debug\",\"page\",\"once\",\"off\",\"on\",\"addSourceMiddleware\",\"addIntegrationMiddleware\",\"setAnonymousId\",\"addDestinationMiddleware\"];analytics.factory=function(e){return function(){var t=Array.prototype.slice.call(arguments);t.unshift(e);analytics.push(t);return analytics}};for(var e=0;e\u003canalytics.methods.length;e++){var key=analytics.methods[e];analytics[key]=analytics.factory(key)}analytics.load=function(key,e){var t=document.createElement(\"script\");t.type=\"text/javascript\";t.defer=!0;t.src=\"https://segment-cdn.producthunt.com/\";var n=document.getElementsByTagName(\"script\")[0];n.parentNode.insertBefore(t,n);analytics._loadOptions=e};analytics._writeKey=\"dtyjquswuq\";analytics.SNIPPET_VERSION=\"4.15.2\";\n analytics.load(\"dtyjquswuq\");\n }}();\n24:[]\n"])</script><script>self.__next_f.push([1,"0:[\"$\",\"$Lf\",null,{\"buildId\":\"DN8ffwNoPip0nzpemQv37\",\"assetPrefix\":\"\",\"urlParts\":[\"\",\"products\",\"overlay\"],\"initialTree\":[\"\",{\"children\":[\"(main)\",{\"children\":[\"products\",{\"children\":[[\"slug\",\"overlay\",\"d\"],{\"children\":[\"(layout)\",{\"children\":[\"__PAGE__\",{}]}]}]}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[\"(main)\",{\"children\":[\"products\",{\"children\":[[\"slug\",\"overlay\",\"d\"],{\"children\":[\"(layout)\",{\"children\":[\"__PAGE__\",{},[[\"$L10\",\"$L11\",[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/52c78cbf7408e1af.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/6a29de96c920f097.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"2\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/c7820bf0de1097b1.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"3\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/0a0d922ec8281d19.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"4\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/b0e0dd11aa1ac818.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]],null],null]},[[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/fcda3aac4677cad7.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L12\",null,{\"children\":[\"$\",\"$L13\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"(main)\",\"children\",\"products\",\"children\",\"$14\",\"children\",\"(layout)\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L15\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\"}],\"params\":{\"slug\":\"overlay\"}}]],null],null]},[null,[\"$\",\"$L13\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"(main)\",\"children\",\"products\",\"children\",\"$14\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L15\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\"}]],null]},[null,[\"$\",\"$L13\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"(main)\",\"children\",\"products\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L15\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\"}]],null]},[[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/639ca35bc51610d3.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/1571eeb1adaac6eb.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"2\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/eee391e54f3127f3.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L16\",null,{\"children\":[\"$\",\"$L13\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"(main)\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L15\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[\"$\",\"$L17\",null,{\"code\":404}],\"notFoundStyles\":[]}],\"params\":{}}]],null],null]},[[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/c4b0bd4f87e92aeb.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/1ea9739f23a3b69e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"2\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/38f7d385ab6d9f22.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"3\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/75b23a08f18ae450.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"4\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/c99d6c2024146960.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[[\"$\",\"head\",null,{\"children\":[[\"$\",\"meta\",null,{\"property\":\"fb:app_id\",\"content\":\"1467820943460899\"}],[\"$\",\"link\",null,{\"rel\":\"search\",\"type\":\"application/opensearchdescription+xml\",\"title\":\"ProductHunt\",\"href\":\"/osd.xml\"}]]}],[\"$\",\"body\",null,{\"className\":\"$undefined\",\"children\":[[\"$\",\"div\",null,{\"id\":\"root-container\",\"children\":[\"$\",\"$L18\",null,{\"children\":[\"$\",\"$L19\",null,{\"userAgent\":\"$undefined\",\"children\":[\"$\",\"$L1a\",null,{\"children\":[\"$\",\"$L1b\",null,{\"ApolloWrapper\":\"$1c\",\"serverSideRendered\":true,\"children\":[\"$\",\"$L1d\",null,{\"children\":[\"$\",\"$L13\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L15\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[]}]}]}]}]}]}]}],[\"$\",\"div\",null,{\"id\":\"root-portal\"}],[[\"$\",\"$L1e\",null,{\"id\":\"intercom\",\"strategy\":\"afterInteractive\",\"dangerouslySetInnerHTML\":{\"__html\":\"\\n (function() {\\n if (window.innerWidth \u003c= 576) {\\n return;\\n }\\n window.intercomSettings = {\\n app_id: \\\"fe4ce68d4a8352909f553b276994db414d33a55c\\\"\\n };\\n (function(){var w=window;var ic=w.Intercom;if(typeof ic===\\\"function\\\"){ic('reattach_activator');ic('update',w.intercomSettings);}else{var d=document;var i=function(){i.c(arguments);};i.q=[];i.c=function(args){i.q.push(args);};w.Intercom=i;var l=function(){setTimeout(function(){var s=d.createElement('script');s.type='text/javascript';s.defer=true;s.src='https://widget.intercom.io/widget/fe4ce68d4a8352909f553b276994db414d33a55c';var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);}, 4000);};if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})();\\n })()\\n\"}}],[\"$\",\"$L1e\",null,{\"id\":\"segment\",\"strategy\":\"beforeInteractive\",\"dangerouslySetInnerHTML\":{\"__html\":\"$1f\"}}],false,[[\"$\",\"$L20\",null,{\"gaId\":\"G-WZ46833KH9\"}],[\"$\",\"$L21\",null,{\"gtmId\":\"G-WZ46833KH9\"}]]]]}]]}]],null],null],\"couldBeIntercepted\":false,\"initialHead\":[null,\"$L22\"],\"globalErrorComponent\":\"$23\",\"missingSlots\":\"$W24\"}]\n"])</script><script>self.__next_f.push([1,"25:I[75192,[\"53877\",\"static/chunks/53877-51c4a285eb192ef0.js\",\"46403\",\"static/chunks/46403-e33a58cdfbb894e8.js\",\"58056\",\"static/chunks/58056-751c28e77ae5a19a.js\",\"87138\",\"static/chunks/87138-0346ed4de56c8f41.js\",\"48191\",\"static/chunks/48191-5065c49d069bd01c.js\",\"14604\",\"static/chunks/14604-45e3a9aa74635210.js\",\"55579\",\"static/chunks/55579-59b56c16d22d5e09.js\",\"94531\",\"static/chunks/94531-936a58903208c445.js\",\"7851\",\"static/chunks/7851-391d4a68ffe47521.js\",\"28051\",\"static/chunks/28051-6c99bb1ef2e7af63.js\",\"23714\",\"static/chunks/23714-107263d1137b8b64.js\",\"17873\",\"static/chunks/17873-c31f11c5f34602f7.js\",\"1997\",\"static/chunks/1997-8c211c482f7f1b80.js\",\"65777\",\"static/chunks/65777-aff863a0e93abf71.js\",\"86224\",\"static/chunks/86224-d84904eb72b0dfed.js\",\"36422\",\"static/chunks/36422-1c5dd639d5c50d96.js\",\"50570\",\"static/chunks/50570-f5cbfddf7e09b62f.js\",\"48567\",\"static/chunks/48567-8ef86e02b791c3da.js\",\"86996\",\"static/chunks/86996-2b4aad33e5a2cdf7.js\",\"59539\",\"static/chunks/59539-b936a597ce4d310d.js\",\"60732\",\"static/chunks/60732-5d81a22df49fe823.js\",\"26410\",\"static/chunks/26410-c1ceb75766380452.js\",\"69898\",\"static/chunks/69898-24e06823acd563bf.js\",\"41790\",\"static/chunks/41790-d16b26401942af4f.js\",\"32076\",\"static/chunks/32076-411013037556488b.js\",\"919\",\"static/chunks/app/(main)/products/%5Bslug%5D/(layout)/page-f0c562bead5798b0.js\"],\"default\"]\n26:T7ba,[{\"@context\":\"http://schema.org\",\"@type\":\"WebApplication\",\"name\":\"Overlay\",\"description\":\"Overlay helps designers and developers convert their Figma components into clean and reusable React, Vue.js and Html code. 💎 Flex attributes ⭐️ Props 👌 Minimum CSS lines 🖌 Style variables 💅SCSS, Styled Components 🔗 No dependencies, just copy-paste.\",\"datePublished\":\"2022-04-14T08:32:40.604-07:00\",\"dateModified\":\"2024-11-05T08:01:49.819-08:00\",\"image\":\"https://ph-files.imgix.net/5e44758a-f944-4dae-951c-6750d2edc4a7.gif?auto=format\",\"screenshot\":[\"https://ph-files.imgix.net/91443f8b-d8ab-4a54-8315-f7137dab2127.png?auto=format\u0026fit=crop\",\"https://ph-files.imgix.net/e57b1f"])</script><script>self.__next_f.push([1,"cd-c87f-4b57-9247-9b1429ea4c60.png?auto=format\u0026fit=crop\",\"https://ph-files.imgix.net/f4c0a141-e787-4dce-b4e8-39f62ee43ad5.png?auto=format\u0026fit=crop\",\"https://ph-files.imgix.net/8aa087c8-254b-4396-90d2-2baa8102b499.png?auto=format\u0026fit=crop\",\"https://ph-files.imgix.net/f7435511-0ab1-4806-8cc4-4cd672e2f37d.png?auto=format\u0026fit=crop\",\"https://ph-files.imgix.net/450bd806-4bce-4f4e-9cd5-a95fbfc2f9c1.png?auto=format\u0026fit=crop\"],\"aggregateRating\":{\"@type\":\"AggregateRating\",\"ratingCount\":29,\"ratingValue\":\"5.0\",\"worstRating\":1,\"bestRating\":5},\"applicationCategory\":\"Design Tools\",\"author\":[{\"@type\":\"Person\",\"name\":\"Kevin Jean\",\"image\":\"https://ph-avatars.imgix.net/2965082/30db04e1-3e1b-4625-9fb5-274b684ab9be.png?auto=format\u0026fit=crop\u0026crop=faces\u0026w=100\u0026h=100\",\"url\":\"https://www.producthunt.com/@kevin_jean\"},{\"@type\":\"Person\",\"name\":\"Côme Sabran\",\"image\":\"https://ph-avatars.imgix.net/2585688/28b36d24-6fb7-422f-bde8-1408397667f4.png?auto=format\u0026fit=crop\u0026crop=faces\u0026w=100\u0026h=100\",\"url\":\"https://www.producthunt.com/@come_sabran\"}]},{\"@context\":\"http://schema.org\",\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https://www.producthunt.com/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Overlay\",\"item\":\"https://www.producthunt.com/products/overlay\"}]}]11:[[\"$\",\"$L25\",null,{}],[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"$26\"}}]]\n"])</script><script>self.__next_f.push([1,"22:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1, minimum-scale=1\"}],[\"$\",\"meta\",\"1\",{\"name\":\"theme-color\",\"content\":\"#ffffff\"}],[\"$\",\"meta\",\"2\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"3\",{\"children\":\" Overlay - Product Information, Latest Updates, and Reviews 2024 | Product Hunt\"}],[\"$\",\"meta\",\"4\",{\"name\":\"description\",\"content\":\"Overlay helps designers and developers convert their Figma components into clean and reusable React, Vue.js and Html code. 💎 Flex attributes ⭐️ Props 👌 Minimum CSS lines 🖌 Style variables 💅SCSS, Styled Components 🔗 No dependencies, just copy-paste.\"}],[\"$\",\"link\",\"5\",{\"rel\":\"author\",\"href\":\"https://www.producthunt.com/@kevin_jean\"}],[\"$\",\"meta\",\"6\",{\"name\":\"author\",\"content\":\"Kevin Jean\"}],[\"$\",\"link\",\"7\",{\"rel\":\"manifest\",\"href\":\"/manifest.json\",\"crossOrigin\":\"use-credentials\"}],[\"$\",\"meta\",\"8\",{\"name\":\"fb:app_id\",\"content\":\"1467820943460899\"}],[\"$\",\"link\",\"9\",{\"rel\":\"alternate\",\"type\":\"application/atom+xml\",\"title\":\"Product Hunt - All newest Products\",\"href\":\"https://www.producthunt.com/feed\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:title\",\"content\":\" Overlay - Product Information, Latest Updates, and Reviews 2024 | Product Hunt\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:description\",\"content\":\"Overlay helps designers and developers convert their Figma components into clean and reusable React, Vue.js and Html code. 💎 Flex attributes ⭐️ Props 👌 Minimum CSS lines 🖌 Style variables 💅SCSS, Styled Components 🔗 No dependencies, just copy-paste.\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:url\",\"content\":\"https://www.producthunt.com/products/overlay\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:site_name\",\"content\":\"Product Hunt\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:locale\",\"content\":\"en_US\"}],[\"$\",\"meta\",\"15\",{\"property\":\"og:image\",\"content\":\"https://ph-files.imgix.net/91443f8b-d8ab-4a54-8315-f7137dab2127.png?auto=format\u0026fit=crop\u0026frame=1\u0026h=512\u0026w=1024\"}],[\"$\",\"meta\",\"16\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"17\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"18\",{\"name\":\"twitter:site\",\"content\":\"@producthunt\"}],[\"$\",\"meta\",\"19\",{\"name\":\"twitter:creator\",\"content\":\"@kevin_jean\"}],[\"$\",\"meta\",\"20\",{\"name\":\"twitter:title\",\"content\":\" Overlay - Product Information, Latest Updates, and Reviews 2024 | Product Hunt\"}],[\"$\",\"meta\",\"21\",{\"name\":\"twitter:description\",\"content\":\"Overlay helps designers and developers convert their Figma components into clean and reusable React, Vue.js and Html code. 💎 Flex attributes ⭐️ Props 👌 Minimum CSS lines 🖌 Style variables 💅SCSS, Styled Components 🔗 No dependencies, just copy-paste.\"}],[\"$\",\"meta\",\"22\",{\"name\":\"twitter:image\",\"content\":\"https://ph-files.imgix.net/91443f8b-d8ab-4a54-8315-f7137dab2127.png?auto=format\u0026fit=crop\u0026frame=1\u0026h=512\u0026w=1024\"}],[\"$\",\"link\",\"23\",{\"rel\":\"icon\",\"href\":\"https://ph-static.imgix.net/ph-favicon-brand-500.ico?auto=format\"}],[\"$\",\"link\",\"24\",{\"rel\":\"apple-touch-icon-precomposed\",\"href\":\"https://ph-static.imgix.net/ph-ios-icon.png?auto=format\"}],[\"$\",\"link\",\"25\",{\"rel\":\"chrome-webstore-item\",\"href\":\"https://producthunt.app.link/extension\"}]]\n"])</script><script>self.__next_f.push([1,"10:null\n"])</script><script>(window[Symbol.for("ApolloSSRDataTransport")] ??= []).push({"rehydrate":{":R1jqv7rrqkutkq:":{"data":{"product":{"__typename":"Product","id":"448263","slug":"overlay","structuredData":{"@context":"http://schema.org","@type":"WebApplication","name":"Overlay","description":"Overlay helps designers and developers convert their Figma components into clean and reusable React, Vue.js and Html code. 💎 Flex attributes ⭐️ Props 👌 Minimum CSS lines 🖌 Style variables 💅SCSS, Styled Components 🔗 No dependencies, just copy-paste.","datePublished":"2022-04-14T08:32:40.604-07:00","dateModified":"2024-11-05T08:01:49.819-08:00","image":"https://ph-files.imgix.net/5e44758a-f944-4dae-951c-6750d2edc4a7.gif?auto=format","screenshot":["https://ph-files.imgix.net/91443f8b-d8ab-4a54-8315-f7137dab2127.png?auto=format\u0026fit=crop","https://ph-files.imgix.net/e57b1fcd-c87f-4b57-9247-9b1429ea4c60.png?auto=format\u0026fit=crop","https://ph-files.imgix.net/f4c0a141-e787-4dce-b4e8-39f62ee43ad5.png?auto=format\u0026fit=crop","https://ph-files.imgix.net/8aa087c8-254b-4396-90d2-2baa8102b499.png?auto=format\u0026fit=crop","https://ph-files.imgix.net/f7435511-0ab1-4806-8cc4-4cd672e2f37d.png?auto=format\u0026fit=crop","https://ph-files.imgix.net/450bd806-4bce-4f4e-9cd5-a95fbfc2f9c1.png?auto=format\u0026fit=crop"],"aggregateRating":{"@type":"AggregateRating","ratingCount":29,"ratingValue":"5.0","worstRating":1,"bestRating":5},"applicationCategory":"Design Tools","author":[{"@type":"Person","name":"Kevin Jean","image":"https://ph-avatars.imgix.net/2965082/30db04e1-3e1b-4625-9fb5-274b684ab9be.png?auto=format\u0026fit=crop\u0026crop=faces\u0026w=100\u0026h=100","url":"https://www.producthunt.com/@kevin_jean"},{"@type":"Person","name":"Côme Sabran","image":"https://ph-avatars.imgix.net/2585688/28b36d24-6fb7-422f-bde8-1408397667f4.png?auto=format\u0026fit=crop\u0026crop=faces\u0026w=100\u0026h=100","url":"https://www.producthunt.com/@come_sabran"}]},"meta":{"__typename":"MetaTags","canonicalUrl":"https://www.producthunt.com/products/overlay","creator":"@kevin_jean","description":"Overlay helps designers and developers convert their Figma components into clean and reusable React, Vue.js and Html code. 💎 Flex attributes ⭐️ Props 👌 Minimum CSS lines 🖌 Style variables 💅SCSS, Styled Components 🔗 No dependencies, just copy-paste.","image":"https://ph-files.imgix.net/91443f8b-d8ab-4a54-8315-f7137dab2127.png?auto=format\u0026fit=crop\u0026frame=1\u0026h=512\u0026w=1024","mobileAppUrl":null,"oembedUrl":"https://www.producthunt.com/products/overlay","robots":null,"title":"Overlay - Product Information, Latest Updates, and Reviews 2024","type":"product","author":"Kevin Jean","authorUrl":"https://www.producthunt.com/@kevin_jean"},"name":"Overlay","isMaker":false,"isStacked":false,"isViewerTeamMember":null,"stacksCount":8,"stackers":{"__typename":"UserConnection","edges":[{"__typename":"UserEdge","node":{"__typename":"User","id":"6572979","name":"the legend","username":"the_legend5","avatarUrl":"https://ph-avatars.imgix.net/6572979/original.png"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"6681018","name":"DAHIRU GAMBO DAHIRU","username":"dahiru_gambo_dahiru1","avatarUrl":"https://ph-avatars.imgix.net/6681018/original.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"6269238","name":"Erin Eaman","username":"erin_eaman","avatarUrl":"https://ph-avatars.imgix.net/6269238/original.gif"}}]},"postsCount":1,"reviewsCount":29,"reviewersCount":29,"reviewsRating":5,"reviewers":{"__typename":"UserConnection","edges":[{"__typename":"UserEdge","node":{"__typename":"User","id":"1677272","username":"tasos_valtinos","name":"Tasos Valtinos","avatarUrl":"https://ph-avatars.imgix.net/1677272/a15c3a05-f626-4028-b490-b19469d396c5.png"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"407483","username":"deleted-407483","name":"Sergio Ruiz","avatarUrl":"https://ph-avatars.imgix.net/407483/original.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"2524191","username":"nazim_zidi","name":"Nazim Zidi","avatarUrl":"https://ph-avatars.imgix.net/2524191/a8fbf663-a075-43e0-af28-031b40a46f2b.jpeg"}}]},"description":"Overlay helps designers and developers convert their Figma components into clean and reusable React, Vue.js and Html code. 💎 Flex attributes ⭐️ Props 👌 Minimum CSS lines 🖌 Style variables 💅SCSS, Styled Components 🔗 No dependencies, just copy-paste.","media":[{"__typename":"Media","id":"847793","imageUuid":"c34fea7d-6a06-4159-9b1c-5b33067a005b.jpeg","mediaType":"video","originalHeight":270,"originalWidth":480,"metadata":{"__typename":"MediaMetadata","platform":"youtube","url":"https://www.youtube.com/watch?v=3OwXHGPDW80\u0026feature=youtu.be\u0026ab_channel=C%C3%B4meSabran","videoId":"3OwXHGPDW80","interactiveDemoId":null,"interactiveDemoType":null}},{"__typename":"Media","id":"847803","imageUuid":"91443f8b-d8ab-4a54-8315-f7137dab2127.png","mediaType":"image","originalHeight":1140,"originalWidth":1905,"metadata":{"__typename":"MediaMetadata","platform":null,"url":null,"videoId":null,"interactiveDemoId":null,"interactiveDemoType":null}},{"__typename":"Media","id":"847802","imageUuid":"e57b1fcd-c87f-4b57-9247-9b1429ea4c60.png","mediaType":"image","originalHeight":1140,"originalWidth":1905,"metadata":{"__typename":"MediaMetadata","platform":null,"url":null,"videoId":null,"interactiveDemoId":null,"interactiveDemoType":null}},{"__typename":"Media","id":"847801","imageUuid":"f4c0a141-e787-4dce-b4e8-39f62ee43ad5.png","mediaType":"image","originalHeight":1140,"originalWidth":1905,"metadata":{"__typename":"MediaMetadata","platform":null,"url":null,"videoId":null,"interactiveDemoId":null,"interactiveDemoType":null}},{"__typename":"Media","id":"847800","imageUuid":"8aa087c8-254b-4396-90d2-2baa8102b499.png","mediaType":"image","originalHeight":1140,"originalWidth":1905,"metadata":{"__typename":"MediaMetadata","platform":null,"url":null,"videoId":null,"interactiveDemoId":null,"interactiveDemoType":null}},{"__typename":"Media","id":"847799","imageUuid":"f7435511-0ab1-4806-8cc4-4cd672e2f37d.png","mediaType":"image","originalHeight":1140,"originalWidth":1905,"metadata":{"__typename":"MediaMetadata","platform":null,"url":null,"videoId":null,"interactiveDemoId":null,"interactiveDemoType":null}},{"__typename":"Media","id":"847798","imageUuid":"450bd806-4bce-4f4e-9cd5-a95fbfc2f9c1.png","mediaType":"image","originalHeight":1140,"originalWidth":1905,"metadata":{"__typename":"MediaMetadata","platform":null,"url":null,"videoId":null,"interactiveDemoId":null,"interactiveDemoType":null}}],"latestPost":{"__typename":"Post","id":"276075","primaryLink":{"__typename":"ProductLink","id":"388968","url":"https://overlay-tech.com"}},"targetedAd":null,"screenshots":{"__typename":"ProductScreenshotConnection","edges":[]},"categories":[{"__typename":"ProductCategory","id":"75","name":"Code editors","path":"/categories/code-editors"},{"__typename":"ProductCategory","id":"200","name":"Figma Plugins","path":"/categories/figma-plugins"},{"__typename":"ProductCategory","id":"235","name":"Design resources","path":"/categories/design-resources"}],"questions":{"__typename":"QuestionConnection","edges":[]},"badges":{"__typename":"Connection","edges":[]},"posts":{"__typename":"PostConnection","edges":[{"__typename":"PostEdge","node":{"__typename":"Post","id":"276075","slug":"overlay","name":"Overlay","description":"\u003cdiv\u003e\u003cstrong\u003eOverlay\u003c/strong\u003e helps designers and developers convert their Figma components into \u003cstrong\u003eclean\u003c/strong\u003e and \u003cstrong\u003ereusable\u003c/strong\u003e React, Vue.js and Html code. \u003cbr\u003e.\u003c/div\u003e\u003cdiv\u003e💎 \u003cstrong\u003eFlex\u003c/strong\u003e attributes\u003c/div\u003e\u003cdiv\u003e⭐️\u003cstrong\u003e Props\u003c/strong\u003e\u003c/div\u003e\u003cdiv\u003e👌 \u003cstrong\u003eMinimum CSS lines\u003c/strong\u003e\u003c/div\u003e\u003cdiv\u003e🖌\u003cstrong\u003e Style variables\u003c/strong\u003e\u003c/div\u003e\u003cdiv\u003e💅\u003cstrong\u003eSCSS, Styled Components\u003c/strong\u003e\u003c/div\u003e\u003cdiv\u003e🔗 \u003cstrong\u003eNo dependencies\u003c/strong\u003e, just copy-paste.\u003c/div\u003e","createdAt":"2020-12-01T01:25:06-08:00","media":[{"__typename":"Media","id":"847793","imageUuid":"c34fea7d-6a06-4159-9b1c-5b33067a005b.jpeg","mediaType":"video"},{"__typename":"Media","id":"847803","imageUuid":"91443f8b-d8ab-4a54-8315-f7137dab2127.png","mediaType":"image"},{"__typename":"Media","id":"847802","imageUuid":"e57b1fcd-c87f-4b57-9247-9b1429ea4c60.png","mediaType":"image"},{"__typename":"Media","id":"847801","imageUuid":"f4c0a141-e787-4dce-b4e8-39f62ee43ad5.png","mediaType":"image"},{"__typename":"Media","id":"847800","imageUuid":"8aa087c8-254b-4396-90d2-2baa8102b499.png","mediaType":"image"},{"__typename":"Media","id":"847799","imageUuid":"f7435511-0ab1-4806-8cc4-4cd672e2f37d.png","mediaType":"image"},{"__typename":"Media","id":"847798","imageUuid":"450bd806-4bce-4f4e-9cd5-a95fbfc2f9c1.png","mediaType":"image"}],"redirectToProduct":{"__typename":"Product","id":"448263","slug":"overlay"}}}]},"alternativeAssociations":{"__typename":"ProductAssociationConnection","edges":[{"__typename":"ProductAssociationEdge","node":{"__typename":"ProductAssociation","id":"550200","alternative":{"__typename":"Product","id":"483584","slug":"locofy-ai","name":"Locofy.ai","tagline":"Build frontend 10x faster with design-to-code AI","logoUuid":"91516fe5-b5ed-44d7-a7e9-1be99e8c2e2b.gif","isNoLongerOnline":false}}},{"__typename":"ProductAssociationEdge","node":{"__typename":"ProductAssociation","id":"305890","alternative":{"__typename":"Product","id":"111800","slug":"anima-app","name":"Anima App","tagline":"Design to Code, Automated","logoUuid":"9e13de2b-cde7-4d32-be80-bfb7f1b3b055.png","isNoLongerOnline":false}}},{"__typename":"ProductAssociationEdge","node":{"__typename":"ProductAssociation","id":"549412","alternative":{"__typename":"Product","id":"487188","slug":"figma-component-library","name":"Figma Component Library","tagline":"Find and copy free Figma components in one place.","logoUuid":"4f5e4096-3fcb-42ec-a8fa-bae1a3182350.png","isNoLongerOnline":false}}},{"__typename":"ProductAssociationEdge","node":{"__typename":"ProductAssociation","id":"518462","alternative":{"__typename":"Product","id":"476179","slug":"flex-ui-library-for-figma","name":"Flex UI library for Figma","tagline":"700+ free Figma sections built for Tailwind CSS","logoUuid":"ce6913f3-7cc2-470b-9455-f4bb396fc911.png","isNoLongerOnline":false}}},{"__typename":"ProductAssociationEdge","node":{"__typename":"ProductAssociation","id":"691111","alternative":{"__typename":"Product","id":"499477","slug":"story-to-design","name":"story.to.design","tagline":"Keep your Figma components up to date with code","logoUuid":"8c45d8ef-c80f-4640-aa08-b6532f9d479b.png","isNoLongerOnline":false}}},{"__typename":"ProductAssociationEdge","node":{"__typename":"ProductAssociation","id":"410491","alternative":{"__typename":"Product","id":"464163","slug":"quickr-design-system","name":"Quickr Design System","tagline":"2000+ Figma components library to design web app \u0026 SaaS","logoUuid":"4e20218f-5fe7-46d0-9f9c-a219d5428b27.png","isNoLongerOnline":false}}},{"__typename":"ProductAssociationEdge","node":{"__typename":"ProductAssociation","id":"305894","alternative":{"__typename":"Product","id":"440619","slug":"figma-to-code","name":"Figma to Code","tagline":"Generate responsive pages/apps from Figma designs","logoUuid":"4007d6ae-4126-45fb-9f44-5faa2bce2213.png","isNoLongerOnline":false}}},{"__typename":"ProductAssociationEdge","node":{"__typename":"ProductAssociation","id":"308515","alternative":{"__typename":"Product","id":"449089","slug":"figside","name":"Figside","tagline":"Ship Websites with Figma","logoUuid":"008e0812-a71c-412a-b896-6139f4a813e5.png","isNoLongerOnline":false}}},{"__typename":"ProductAssociationEdge","node":{"__typename":"ProductAssociation","id":"399603","alternative":{"__typename":"Product","id":"462904","slug":"browser-kit-for-figma","name":"Browser Kit for Figma","tagline":"One smart component to rule them all","logoUuid":"e6ed8ab8-2c29-42d5-97ce-1d9caceaa27f.gif","isNoLongerOnline":false}}}]},"shoutoutsToCount":0,"postShoutoutsTo":{"__typename":"PostShoutoutConnection","edges":[]},"viewerReview":null,"pricingType":null,"websiteUrl":"https://overlay-tech.com","cleanUrl":"overlay-tech.com","iosUrl":null,"androidUrl":null,"instagramUrl":null,"facebookUrl":null,"twitterUrl":"https://twitter.com/Overlay_app","linkedinUrl":null,"githubUrl":null,"mediumUrl":null,"angellistUrl":null,"threadsUrl":null,"canClaim":false,"canEdit":false,"isClaimed":false,"isTopProduct":false,"isGoldenKittyWinner":false,"viewerPendingTeamRequest":null,"makers":{"__typename":"UserConnection","edges":[{"__typename":"UserEdge","node":{"__typename":"User","id":"2585688","name":"Côme Sabran","username":"come_sabran","avatarUrl":"https://ph-avatars.imgix.net/2585688/28b36d24-6fb7-422f-bde8-1408397667f4.png"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"2965082","name":"Kevin Jean","username":"kevin_jean","avatarUrl":"https://ph-avatars.imgix.net/2965082/30db04e1-3e1b-4625-9fb5-274b684ab9be.png"}}]},"promo":null,"tagline":"Turn Figma components into clean and reusable React/Vue.js","logoUuid":"5e44758a-f944-4dae-951c-6750d2edc4a7.gif","isNoLongerOnline":false,"url":"https://www.producthunt.com/products/overlay"},"viewer":{"__typename":"Viewer","id":null,"isFeaturedPostMaker":false,"recentLaunch":null}},"networkStatus":7},":R1jqv7rrqkutkqH1:":{"data":{"viewer":{"__typename":"Viewer","id":null,"email":null,"emailVerified":false,"isImpersonated":false,"analyticsIdentifyJson":{},"deviceType":"desktop","showCookiePolicy":false,"showCommentWarning":false,"showCaptcha":false,"showPhoneVerification":false,"isAdmin":false,"features":["ph_top_product_badge","ph_hub_top_badges","ph_phone_verification","ph_verify_usa_phone_number","ph_verify_with_targeted_friction","ph_score_events_enabled","ph_mega_ads"],"notificationFeedItemsUnreadCount":0,"flashAlert":null,"notice":null,"otpRequiredFrom":null,"user":null,"abTestActiveParticipations":[],"visitStreak":{"__typename":"VisitStreak","id":"2fa3f85b-614a-456d-8030-6589de3d83be","emoji":null,"duration":1},"recentLaunch":null,"intercomUserHash":null,"ifVisitedFromMobile":false,"newsletterSettings":{"__typename":"ViewerNewsletterSettings","hasNewsletterSubscription":false}}},"networkStatus":7},":R1jqv7rrqkutkqH2:":{"data":undefined,"loading":false,"networkStatus":7,"called":false},":R31ljqv7rrqkutkq:":{"data":{"__typename":"Viewer","id":null,"email":null,"emailVerified":false,"isImpersonated":false,"analyticsIdentifyJson":{},"deviceType":"desktop","showCookiePolicy":false,"showCommentWarning":false,"showCaptcha":false,"showPhoneVerification":false,"isAdmin":false,"features":["ph_top_product_badge","ph_hub_top_badges","ph_phone_verification","ph_verify_usa_phone_number","ph_verify_with_targeted_friction","ph_score_events_enabled","ph_mega_ads"],"notificationFeedItemsUnreadCount":0,"flashAlert":null,"notice":null,"otpRequiredFrom":null,"user":null,"abTestActiveParticipations":[],"visitStreak":{"__typename":"VisitStreak","id":"2fa3f85b-614a-456d-8030-6589de3d83be","emoji":null,"duration":1},"recentLaunch":null,"intercomUserHash":null,"ifVisitedFromMobile":false,"newsletterSettings":{"__typename":"ViewerNewsletterSettings","hasNewsletterSubscription":false}},"complete":true,"missing":undefined},":R31ljqv7rrqkutkqH1:":{"data":{"__typename":"Viewer","id":null,"email":null,"emailVerified":false,"isImpersonated":false,"analyticsIdentifyJson":{},"deviceType":"desktop","showCookiePolicy":false,"showCommentWarning":false,"showCaptcha":false,"showPhoneVerification":false,"isAdmin":false,"features":["ph_top_product_badge","ph_hub_top_badges","ph_phone_verification","ph_verify_usa_phone_number","ph_verify_with_targeted_friction","ph_score_events_enabled","ph_mega_ads"],"notificationFeedItemsUnreadCount":0,"flashAlert":null,"notice":null,"otpRequiredFrom":null,"user":null,"abTestActiveParticipations":[],"visitStreak":{"__typename":"VisitStreak","id":"2fa3f85b-614a-456d-8030-6589de3d83be","emoji":null,"duration":1},"recentLaunch":null,"intercomUserHash":null,"ifVisitedFromMobile":false,"newsletterSettings":{"__typename":"ViewerNewsletterSettings","hasNewsletterSubscription":false}},"complete":true,"missing":undefined},":Rb1ljqv7rrqkutkq:":{"data":{"__typename":"Viewer","id":null,"email":null,"emailVerified":false,"isImpersonated":false,"analyticsIdentifyJson":{},"deviceType":"desktop","showCookiePolicy":false,"showCommentWarning":false,"showCaptcha":false,"showPhoneVerification":false,"isAdmin":false,"features":["ph_top_product_badge","ph_hub_top_badges","ph_phone_verification","ph_verify_usa_phone_number","ph_verify_with_targeted_friction","ph_score_events_enabled","ph_mega_ads"],"notificationFeedItemsUnreadCount":0,"flashAlert":null,"notice":null,"otpRequiredFrom":null,"user":null,"abTestActiveParticipations":[],"visitStreak":{"__typename":"VisitStreak","id":"2fa3f85b-614a-456d-8030-6589de3d83be","emoji":null,"duration":1},"recentLaunch":null,"intercomUserHash":null,"ifVisitedFromMobile":false,"newsletterSettings":{"__typename":"ViewerNewsletterSettings","hasNewsletterSubscription":false}},"complete":true,"missing":undefined},":Rb1ljqv7rrqkutkqH1:":{"data":{"__typename":"Viewer","id":null,"email":null,"emailVerified":false,"isImpersonated":false,"analyticsIdentifyJson":{},"deviceType":"desktop","showCookiePolicy":false,"showCommentWarning":false,"showCaptcha":false,"showPhoneVerification":false,"isAdmin":false,"features":["ph_top_product_badge","ph_hub_top_badges","ph_phone_verification","ph_verify_usa_phone_number","ph_verify_with_targeted_friction","ph_score_events_enabled","ph_mega_ads"],"notificationFeedItemsUnreadCount":0,"flashAlert":null,"notice":null,"otpRequiredFrom":null,"user":null,"abTestActiveParticipations":[],"visitStreak":{"__typename":"VisitStreak","id":"2fa3f85b-614a-456d-8030-6589de3d83be","emoji":null,"duration":1},"recentLaunch":null,"intercomUserHash":null,"ifVisitedFromMobile":false,"newsletterSettings":{"__typename":"ViewerNewsletterSettings","hasNewsletterSubscription":false}},"complete":true,"missing":undefined},":R51ljqv7rrqkutkq:":{"data":{"__typename":"Viewer","id":null,"email":null,"emailVerified":false,"isImpersonated":false,"analyticsIdentifyJson":{},"deviceType":"desktop","showCookiePolicy":false,"showCommentWarning":false,"showCaptcha":false,"showPhoneVerification":false,"isAdmin":false,"features":["ph_top_product_badge","ph_hub_top_badges","ph_phone_verification","ph_verify_usa_phone_number","ph_verify_with_targeted_friction","ph_score_events_enabled","ph_mega_ads"],"notificationFeedItemsUnreadCount":0,"flashAlert":null,"notice":null,"otpRequiredFrom":null,"user":null,"abTestActiveParticipations":[],"visitStreak":{"__typename":"VisitStreak","id":"2fa3f85b-614a-456d-8030-6589de3d83be","emoji":null,"duration":1},"recentLaunch":null,"intercomUserHash":null,"ifVisitedFromMobile":false,"newsletterSettings":{"__typename":"ViewerNewsletterSettings","hasNewsletterSubscription":false}},"complete":true,"missing":undefined},":Rd1ljqv7rrqkutkq:":{"data":{"__typename":"Viewer","id":null,"email":null,"emailVerified":false,"isImpersonated":false,"analyticsIdentifyJson":{},"deviceType":"desktop","showCookiePolicy":false,"showCommentWarning":false,"showCaptcha":false,"showPhoneVerification":false,"isAdmin":false,"features":["ph_top_product_badge","ph_hub_top_badges","ph_phone_verification","ph_verify_usa_phone_number","ph_verify_with_targeted_friction","ph_score_events_enabled","ph_mega_ads"],"notificationFeedItemsUnreadCount":0,"flashAlert":null,"notice":null,"otpRequiredFrom":null,"user":null,"abTestActiveParticipations":[],"visitStreak":{"__typename":"VisitStreak","id":"2fa3f85b-614a-456d-8030-6589de3d83be","emoji":null,"duration":1},"recentLaunch":null,"intercomUserHash":null,"ifVisitedFromMobile":false,"newsletterSettings":{"__typename":"ViewerNewsletterSettings","hasNewsletterSubscription":false}},"complete":true,"missing":undefined},":Rd1ljqv7rrqkutkqH1:":{"data":{"__typename":"Viewer","id":null,"email":null,"emailVerified":false,"isImpersonated":false,"analyticsIdentifyJson":{},"deviceType":"desktop","showCookiePolicy":false,"showCommentWarning":false,"showCaptcha":false,"showPhoneVerification":false,"isAdmin":false,"features":["ph_top_product_badge","ph_hub_top_badges","ph_phone_verification","ph_verify_usa_phone_number","ph_verify_with_targeted_friction","ph_score_events_enabled","ph_mega_ads"],"notificationFeedItemsUnreadCount":0,"flashAlert":null,"notice":null,"otpRequiredFrom":null,"user":null,"abTestActiveParticipations":[],"visitStreak":{"__typename":"VisitStreak","id":"2fa3f85b-614a-456d-8030-6589de3d83be","emoji":null,"duration":1},"recentLaunch":null,"intercomUserHash":null,"ifVisitedFromMobile":false,"newsletterSettings":{"__typename":"ViewerNewsletterSettings","hasNewsletterSubscription":false}},"complete":true,"missing":undefined},":R23ljqv7rrqkutkq:":{"data":{"__typename":"Viewer","id":null,"email":null,"emailVerified":false,"isImpersonated":false,"analyticsIdentifyJson":{},"deviceType":"desktop","showCookiePolicy":false,"showCommentWarning":false,"showCaptcha":false,"showPhoneVerification":false,"isAdmin":false,"features":["ph_top_product_badge","ph_hub_top_badges","ph_phone_verification","ph_verify_usa_phone_number","ph_verify_with_targeted_friction","ph_score_events_enabled","ph_mega_ads"],"notificationFeedItemsUnreadCount":0,"flashAlert":null,"notice":null,"otpRequiredFrom":null,"user":null,"abTestActiveParticipations":[],"visitStreak":{"__typename":"VisitStreak","id":"2fa3f85b-614a-456d-8030-6589de3d83be","emoji":null,"duration":1},"recentLaunch":null,"intercomUserHash":null,"ifVisitedFromMobile":false,"newsletterSettings":{"__typename":"ViewerNewsletterSettings","hasNewsletterSubscription":false}},"complete":true,"missing":undefined},":R35ljqv7rrqkutkq:":{"data":{"__typename":"Viewer","id":null,"email":null,"emailVerified":false,"isImpersonated":false,"analyticsIdentifyJson":{},"deviceType":"desktop","showCookiePolicy":false,"showCommentWarning":false,"showCaptcha":false,"showPhoneVerification":false,"isAdmin":false,"features":["ph_top_product_badge","ph_hub_top_badges","ph_phone_verification","ph_verify_usa_phone_number","ph_verify_with_targeted_friction","ph_score_events_enabled","ph_mega_ads"],"notificationFeedItemsUnreadCount":0,"flashAlert":null,"notice":null,"otpRequiredFrom":null,"user":null,"abTestActiveParticipations":[],"visitStreak":{"__typename":"VisitStreak","id":"2fa3f85b-614a-456d-8030-6589de3d83be","emoji":null,"duration":1},"recentLaunch":null,"intercomUserHash":null,"ifVisitedFromMobile":false,"newsletterSettings":{"__typename":"ViewerNewsletterSettings","hasNewsletterSubscription":false}},"complete":true,"missing":undefined},":R6ljqv7rrqkutkq:":{"data":undefined,"loading":true,"networkStatus":1,"called":true}},"events":[{"type":"data","id":"4","result":{"data":{"product":{"__typename":"Product","id":"448263","slug":"overlay","structuredData":{"@context":"http://schema.org","@type":"WebApplication","name":"Overlay","description":"Overlay helps designers and developers convert their Figma components into clean and reusable React, Vue.js and Html code. 💎 Flex attributes ⭐️ Props 👌 Minimum CSS lines 🖌 Style variables 💅SCSS, Styled Components 🔗 No dependencies, just copy-paste.","datePublished":"2022-04-14T08:32:40.604-07:00","dateModified":"2024-11-05T08:01:49.819-08:00","image":"https://ph-files.imgix.net/5e44758a-f944-4dae-951c-6750d2edc4a7.gif?auto=format","screenshot":["https://ph-files.imgix.net/91443f8b-d8ab-4a54-8315-f7137dab2127.png?auto=format\u0026fit=crop","https://ph-files.imgix.net/e57b1fcd-c87f-4b57-9247-9b1429ea4c60.png?auto=format\u0026fit=crop","https://ph-files.imgix.net/f4c0a141-e787-4dce-b4e8-39f62ee43ad5.png?auto=format\u0026fit=crop","https://ph-files.imgix.net/8aa087c8-254b-4396-90d2-2baa8102b499.png?auto=format\u0026fit=crop","https://ph-files.imgix.net/f7435511-0ab1-4806-8cc4-4cd672e2f37d.png?auto=format\u0026fit=crop","https://ph-files.imgix.net/450bd806-4bce-4f4e-9cd5-a95fbfc2f9c1.png?auto=format\u0026fit=crop"],"aggregateRating":{"@type":"AggregateRating","ratingCount":29,"ratingValue":"5.0","worstRating":1,"bestRating":5},"applicationCategory":"Design Tools","author":[{"@type":"Person","name":"Kevin Jean","image":"https://ph-avatars.imgix.net/2965082/30db04e1-3e1b-4625-9fb5-274b684ab9be.png?auto=format\u0026fit=crop\u0026crop=faces\u0026w=100\u0026h=100","url":"https://www.producthunt.com/@kevin_jean"},{"@type":"Person","name":"Côme Sabran","image":"https://ph-avatars.imgix.net/2585688/28b36d24-6fb7-422f-bde8-1408397667f4.png?auto=format\u0026fit=crop\u0026crop=faces\u0026w=100\u0026h=100","url":"https://www.producthunt.com/@come_sabran"}]},"meta":{"__typename":"MetaTags","canonicalUrl":"https://www.producthunt.com/products/overlay","creator":"@kevin_jean","description":"Overlay helps designers and developers convert their Figma components into clean and reusable React, Vue.js and Html code. 💎 Flex attributes ⭐️ Props 👌 Minimum CSS lines 🖌 Style variables 💅SCSS, Styled Components 🔗 No dependencies, just copy-paste.","image":"https://ph-files.imgix.net/91443f8b-d8ab-4a54-8315-f7137dab2127.png?auto=format\u0026fit=crop\u0026frame=1\u0026h=512\u0026w=1024","mobileAppUrl":null,"oembedUrl":"https://www.producthunt.com/products/overlay","robots":null,"title":"Overlay - Product Information, Latest Updates, and Reviews 2024","type":"product","author":"Kevin Jean","authorUrl":"https://www.producthunt.com/@kevin_jean"},"name":"Overlay","isMaker":false,"isStacked":false,"isViewerTeamMember":null,"stacksCount":8,"stackers":{"__typename":"UserConnection","edges":[{"__typename":"UserEdge","node":{"__typename":"User","id":"6572979","name":"the legend","username":"the_legend5","avatarUrl":"https://ph-avatars.imgix.net/6572979/original.png"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"6681018","name":"DAHIRU GAMBO DAHIRU","username":"dahiru_gambo_dahiru1","avatarUrl":"https://ph-avatars.imgix.net/6681018/original.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"6269238","name":"Erin Eaman","username":"erin_eaman","avatarUrl":"https://ph-avatars.imgix.net/6269238/original.gif"}}]},"postsCount":1,"reviewsCount":29,"reviewersCount":29,"reviewsRating":5,"reviewers":{"__typename":"UserConnection","edges":[{"__typename":"UserEdge","node":{"__typename":"User","id":"1677272","username":"tasos_valtinos","name":"Tasos Valtinos","avatarUrl":"https://ph-avatars.imgix.net/1677272/a15c3a05-f626-4028-b490-b19469d396c5.png"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"407483","username":"deleted-407483","name":"Sergio Ruiz","avatarUrl":"https://ph-avatars.imgix.net/407483/original.jpeg"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"2524191","username":"nazim_zidi","name":"Nazim Zidi","avatarUrl":"https://ph-avatars.imgix.net/2524191/a8fbf663-a075-43e0-af28-031b40a46f2b.jpeg"}}]},"description":"Overlay helps designers and developers convert their Figma components into clean and reusable React, Vue.js and Html code. 💎 Flex attributes ⭐️ Props 👌 Minimum CSS lines 🖌 Style variables 💅SCSS, Styled Components 🔗 No dependencies, just copy-paste.","media":[{"__typename":"Media","id":"847793","imageUuid":"c34fea7d-6a06-4159-9b1c-5b33067a005b.jpeg","mediaType":"video","originalHeight":270,"originalWidth":480,"metadata":{"__typename":"MediaMetadata","platform":"youtube","url":"https://www.youtube.com/watch?v=3OwXHGPDW80\u0026feature=youtu.be\u0026ab_channel=C%C3%B4meSabran","videoId":"3OwXHGPDW80","interactiveDemoId":null,"interactiveDemoType":null}},{"__typename":"Media","id":"847803","imageUuid":"91443f8b-d8ab-4a54-8315-f7137dab2127.png","mediaType":"image","originalHeight":1140,"originalWidth":1905,"metadata":{"__typename":"MediaMetadata","platform":null,"url":null,"videoId":null,"interactiveDemoId":null,"interactiveDemoType":null}},{"__typename":"Media","id":"847802","imageUuid":"e57b1fcd-c87f-4b57-9247-9b1429ea4c60.png","mediaType":"image","originalHeight":1140,"originalWidth":1905,"metadata":{"__typename":"MediaMetadata","platform":null,"url":null,"videoId":null,"interactiveDemoId":null,"interactiveDemoType":null}},{"__typename":"Media","id":"847801","imageUuid":"f4c0a141-e787-4dce-b4e8-39f62ee43ad5.png","mediaType":"image","originalHeight":1140,"originalWidth":1905,"metadata":{"__typename":"MediaMetadata","platform":null,"url":null,"videoId":null,"interactiveDemoId":null,"interactiveDemoType":null}},{"__typename":"Media","id":"847800","imageUuid":"8aa087c8-254b-4396-90d2-2baa8102b499.png","mediaType":"image","originalHeight":1140,"originalWidth":1905,"metadata":{"__typename":"MediaMetadata","platform":null,"url":null,"videoId":null,"interactiveDemoId":null,"interactiveDemoType":null}},{"__typename":"Media","id":"847799","imageUuid":"f7435511-0ab1-4806-8cc4-4cd672e2f37d.png","mediaType":"image","originalHeight":1140,"originalWidth":1905,"metadata":{"__typename":"MediaMetadata","platform":null,"url":null,"videoId":null,"interactiveDemoId":null,"interactiveDemoType":null}},{"__typename":"Media","id":"847798","imageUuid":"450bd806-4bce-4f4e-9cd5-a95fbfc2f9c1.png","mediaType":"image","originalHeight":1140,"originalWidth":1905,"metadata":{"__typename":"MediaMetadata","platform":null,"url":null,"videoId":null,"interactiveDemoId":null,"interactiveDemoType":null}}],"latestPost":{"__typename":"Post","id":"276075","primaryLink":{"__typename":"ProductLink","id":"388968","url":"https://overlay-tech.com"}},"targetedAd":null,"screenshots":{"__typename":"ProductScreenshotConnection","edges":[]},"categories":[{"__typename":"ProductCategory","id":"75","name":"Code editors","path":"/categories/code-editors"},{"__typename":"ProductCategory","id":"200","name":"Figma Plugins","path":"/categories/figma-plugins"},{"__typename":"ProductCategory","id":"235","name":"Design resources","path":"/categories/design-resources"}],"questions":{"__typename":"QuestionConnection","edges":[]},"badges":{"__typename":"Connection","edges":[]},"posts":{"__typename":"PostConnection","edges":[{"__typename":"PostEdge","node":{"__typename":"Post","id":"276075","slug":"overlay","name":"Overlay","description":"\u003cdiv\u003e\u003cstrong\u003eOverlay\u003c/strong\u003e helps designers and developers convert their Figma components into \u003cstrong\u003eclean\u003c/strong\u003e and \u003cstrong\u003ereusable\u003c/strong\u003e React, Vue.js and Html code. \u003cbr\u003e.\u003c/div\u003e\u003cdiv\u003e💎 \u003cstrong\u003eFlex\u003c/strong\u003e attributes\u003c/div\u003e\u003cdiv\u003e⭐️\u003cstrong\u003e Props\u003c/strong\u003e\u003c/div\u003e\u003cdiv\u003e👌 \u003cstrong\u003eMinimum CSS lines\u003c/strong\u003e\u003c/div\u003e\u003cdiv\u003e🖌\u003cstrong\u003e Style variables\u003c/strong\u003e\u003c/div\u003e\u003cdiv\u003e💅\u003cstrong\u003eSCSS, Styled Components\u003c/strong\u003e\u003c/div\u003e\u003cdiv\u003e🔗 \u003cstrong\u003eNo dependencies\u003c/strong\u003e, just copy-paste.\u003c/div\u003e","createdAt":"2020-12-01T01:25:06-08:00","media":[{"__typename":"Media","id":"847793","imageUuid":"c34fea7d-6a06-4159-9b1c-5b33067a005b.jpeg","mediaType":"video"},{"__typename":"Media","id":"847803","imageUuid":"91443f8b-d8ab-4a54-8315-f7137dab2127.png","mediaType":"image"},{"__typename":"Media","id":"847802","imageUuid":"e57b1fcd-c87f-4b57-9247-9b1429ea4c60.png","mediaType":"image"},{"__typename":"Media","id":"847801","imageUuid":"f4c0a141-e787-4dce-b4e8-39f62ee43ad5.png","mediaType":"image"},{"__typename":"Media","id":"847800","imageUuid":"8aa087c8-254b-4396-90d2-2baa8102b499.png","mediaType":"image"},{"__typename":"Media","id":"847799","imageUuid":"f7435511-0ab1-4806-8cc4-4cd672e2f37d.png","mediaType":"image"},{"__typename":"Media","id":"847798","imageUuid":"450bd806-4bce-4f4e-9cd5-a95fbfc2f9c1.png","mediaType":"image"}],"redirectToProduct":{"__typename":"Product","id":"448263","slug":"overlay"}}}]},"alternativeAssociations":{"__typename":"ProductAssociationConnection","edges":[{"__typename":"ProductAssociationEdge","node":{"__typename":"ProductAssociation","id":"550200","alternative":{"__typename":"Product","id":"483584","slug":"locofy-ai","name":"Locofy.ai","tagline":"Build frontend 10x faster with design-to-code AI","logoUuid":"91516fe5-b5ed-44d7-a7e9-1be99e8c2e2b.gif","isNoLongerOnline":false}}},{"__typename":"ProductAssociationEdge","node":{"__typename":"ProductAssociation","id":"305890","alternative":{"__typename":"Product","id":"111800","slug":"anima-app","name":"Anima App","tagline":"Design to Code, Automated","logoUuid":"9e13de2b-cde7-4d32-be80-bfb7f1b3b055.png","isNoLongerOnline":false}}},{"__typename":"ProductAssociationEdge","node":{"__typename":"ProductAssociation","id":"549412","alternative":{"__typename":"Product","id":"487188","slug":"figma-component-library","name":"Figma Component Library","tagline":"Find and copy free Figma components in one place.","logoUuid":"4f5e4096-3fcb-42ec-a8fa-bae1a3182350.png","isNoLongerOnline":false}}},{"__typename":"ProductAssociationEdge","node":{"__typename":"ProductAssociation","id":"518462","alternative":{"__typename":"Product","id":"476179","slug":"flex-ui-library-for-figma","name":"Flex UI library for Figma","tagline":"700+ free Figma sections built for Tailwind CSS","logoUuid":"ce6913f3-7cc2-470b-9455-f4bb396fc911.png","isNoLongerOnline":false}}},{"__typename":"ProductAssociationEdge","node":{"__typename":"ProductAssociation","id":"691111","alternative":{"__typename":"Product","id":"499477","slug":"story-to-design","name":"story.to.design","tagline":"Keep your Figma components up to date with code","logoUuid":"8c45d8ef-c80f-4640-aa08-b6532f9d479b.png","isNoLongerOnline":false}}},{"__typename":"ProductAssociationEdge","node":{"__typename":"ProductAssociation","id":"410491","alternative":{"__typename":"Product","id":"464163","slug":"quickr-design-system","name":"Quickr Design System","tagline":"2000+ Figma components library to design web app \u0026 SaaS","logoUuid":"4e20218f-5fe7-46d0-9f9c-a219d5428b27.png","isNoLongerOnline":false}}},{"__typename":"ProductAssociationEdge","node":{"__typename":"ProductAssociation","id":"305894","alternative":{"__typename":"Product","id":"440619","slug":"figma-to-code","name":"Figma to Code","tagline":"Generate responsive pages/apps from Figma designs","logoUuid":"4007d6ae-4126-45fb-9f44-5faa2bce2213.png","isNoLongerOnline":false}}},{"__typename":"ProductAssociationEdge","node":{"__typename":"ProductAssociation","id":"308515","alternative":{"__typename":"Product","id":"449089","slug":"figside","name":"Figside","tagline":"Ship Websites with Figma","logoUuid":"008e0812-a71c-412a-b896-6139f4a813e5.png","isNoLongerOnline":false}}},{"__typename":"ProductAssociationEdge","node":{"__typename":"ProductAssociation","id":"399603","alternative":{"__typename":"Product","id":"462904","slug":"browser-kit-for-figma","name":"Browser Kit for Figma","tagline":"One smart component to rule them all","logoUuid":"e6ed8ab8-2c29-42d5-97ce-1d9caceaa27f.gif","isNoLongerOnline":false}}}]},"shoutoutsToCount":0,"postShoutoutsTo":{"__typename":"PostShoutoutConnection","edges":[]},"viewerReview":null,"pricingType":null,"websiteUrl":"https://overlay-tech.com","cleanUrl":"overlay-tech.com","iosUrl":null,"androidUrl":null,"instagramUrl":null,"facebookUrl":null,"twitterUrl":"https://twitter.com/Overlay_app","linkedinUrl":null,"githubUrl":null,"mediumUrl":null,"angellistUrl":null,"threadsUrl":null,"canClaim":false,"canEdit":false,"isClaimed":false,"isTopProduct":false,"isGoldenKittyWinner":false,"viewerPendingTeamRequest":null,"makers":{"__typename":"UserConnection","edges":[{"__typename":"UserEdge","node":{"__typename":"User","id":"2585688","name":"Côme Sabran","username":"come_sabran","avatarUrl":"https://ph-avatars.imgix.net/2585688/28b36d24-6fb7-422f-bde8-1408397667f4.png"}},{"__typename":"UserEdge","node":{"__typename":"User","id":"2965082","name":"Kevin Jean","username":"kevin_jean","avatarUrl":"https://ph-avatars.imgix.net/2965082/30db04e1-3e1b-4625-9fb5-274b684ab9be.png"}}]},"promo":null,"tagline":"Turn Figma components into clean and reusable React/Vue.js","logoUuid":"5e44758a-f944-4dae-951c-6750d2edc4a7.gif","isNoLongerOnline":false,"url":"https://www.producthunt.com/products/overlay"},"viewer":{"__typename":"Viewer","id":null,"isFeaturedPostMaker":false,"recentLaunch":null}}}},{"type":"complete","id":"4"}]})</script><div hidden id="S:1"><div class="flex flex-col gap-4 md:pb-12"><div class="flex flex-col"><div class="mb-8 flex flex-row items-center justify-between rounded border border-light-blue px-2 py-4 sm:px-4"><div class="text-14 sm:text-16 md:text-16 font-semibold text-light-gray">Do you use Overlay?</div><div class="flex flex-row gap-4"><button type="button" data-test="product-448263-add-to-stack" class="styles_reset__0clCw styles_button__BmLM4 styles_secondary__zB2Yb">I use this</button><button type="button" data-test="product-448263-stack-alternative-button" class="styles_reset__0clCw styles_button__BmLM4 styles_secondary__zB2Yb">I use something else</button></div></div><div class="flex flex-col"><div class="text-16 font-semibold text-dark-gray mb-3">What is Overlay?</div><div class="text-16 font-normal text-light-gray mb-6">Overlay helps designers and developers convert their Figma components into clean and reusable React, Vue.js and Html code. 💎 Flex attributes ⭐️ Props 👌 Minimum CSS lines 🖌 Style variables 💅SCSS, Styled Components 🔗 No dependencies, just copy-paste.</div><div class="mb-6 flex flex-row gap-2 sm:mb-6 md:mb-0"><a data-test="category-pill-75" href="/categories/code-editors"><div class="inline-block shrink-0 self-start whitespace-nowrap rounded-[20px] border px-2 lg:rounded-[12px] bg-none border-light-blue"><div><span class="text-12 font-semibold text-dark-gray text-dark-gray">Code editors</span></div></div></a><a data-test="category-pill-200" href="/categories/figma-plugins"><div class="inline-block shrink-0 self-start whitespace-nowrap rounded-[20px] border px-2 lg:rounded-[12px] bg-none border-light-blue"><div><span class="text-12 font-semibold text-dark-gray text-dark-gray">Figma Plugins</span></div></div></a><a data-test="category-pill-235" href="/categories/design-resources"><div class="inline-block shrink-0 self-start whitespace-nowrap rounded-[20px] border px-2 lg:rounded-[12px] bg-none border-light-blue"><div><span class="text-12 font-semibold text-dark-gray text-dark-gray">Design resources</span></div></div></a></div><div class="mb-6 flex flex-row"></div><div class="flex flex-row justify-start gap-4 overflow-x-auto justify-between"><div class="relative cursor-pointer overflow-hidden rounded"><svg xmlns="http://www.w3.org/2000/svg" width="35" height="34" fill="none" viewBox="0 0 35 34" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"><g filter="url(#PlayVideo_svg__a)"><path fill="#fff" d="m29.038 15.287-18-10.987a1.94 1.94 0 0 0-2.013-.038A1.98 1.98 0 0 0 8 6v22a1.97 1.97 0 0 0 1.025 1.738 1.94 1.94 0 0 0 2.012-.038l18-10.988a2 2 0 0 0 0-3.425z"></path></g><defs><filter id="PlayVideo_svg__a" width="30.004" height="34.002" x="4" y="-0.001" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"></feColorMatrix><feOffset></feOffset><feGaussianBlur stdDeviation="2"></feGaussianBlur><feComposite in2="hardAlpha" operator="out"></feComposite><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.37 0"></feColorMatrix><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_709_3590"></feBlend><feBlend in="SourceGraphic" in2="effect1_dropShadow_709_3590" result="shape"></feBlend></filter></defs></svg><img loading="lazy" srcSet="https://ph-files.imgix.net/c34fea7d-6a06-4159-9b1c-5b33067a005b.jpeg?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=256&h=160&fit=crop&dpr=1 1x, https://ph-files.imgix.net/c34fea7d-6a06-4159-9b1c-5b33067a005b.jpeg?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=256&h=160&fit=crop&dpr=2 2x, https://ph-files.imgix.net/c34fea7d-6a06-4159-9b1c-5b33067a005b.jpeg?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=256&h=160&fit=crop&dpr=3 3x" src="https://ph-files.imgix.net/c34fea7d-6a06-4159-9b1c-5b33067a005b.jpeg?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=256&h=160&fit=crop" style="width:256px;height:160px" alt="Overlay media 1" class="rounded object-cover" data-test="image-847793"/></div><div class="relative cursor-pointer overflow-hidden rounded"><img loading="lazy" srcSet="https://ph-files.imgix.net/91443f8b-d8ab-4a54-8315-f7137dab2127.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=256&h=160&fit=crop&dpr=1 1x, https://ph-files.imgix.net/91443f8b-d8ab-4a54-8315-f7137dab2127.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=256&h=160&fit=crop&dpr=2 2x, https://ph-files.imgix.net/91443f8b-d8ab-4a54-8315-f7137dab2127.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=256&h=160&fit=crop&dpr=3 3x" src="https://ph-files.imgix.net/91443f8b-d8ab-4a54-8315-f7137dab2127.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=256&h=160&fit=crop" style="width:256px;height:160px" alt="Overlay media 2" class="rounded object-cover" data-test="image-847803"/></div><div class="relative cursor-pointer overflow-hidden rounded"><img loading="lazy" srcSet="https://ph-files.imgix.net/e57b1fcd-c87f-4b57-9247-9b1429ea4c60.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=256&h=160&fit=crop&dpr=1 1x, https://ph-files.imgix.net/e57b1fcd-c87f-4b57-9247-9b1429ea4c60.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=256&h=160&fit=crop&dpr=2 2x, https://ph-files.imgix.net/e57b1fcd-c87f-4b57-9247-9b1429ea4c60.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=256&h=160&fit=crop&dpr=3 3x" src="https://ph-files.imgix.net/e57b1fcd-c87f-4b57-9247-9b1429ea4c60.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=256&h=160&fit=crop" style="width:256px;height:160px" alt="Overlay media 3" class="rounded object-cover" data-test="image-847802"/></div></div></div><div class="mt-12 flex flex-col gap-6"><h3 class="text-24 font-bold text-dark-gray">Recent launches</h3><div data-test="latest-launches" class="flex flex-col"><div data-test="post-item-276075" class="mb-6 flex flex-1 flex-row items-center justify-center gap-5"><div class="styles_container__6vBh7 flex flex-col"><div class="text-16 font-semibold text-dark-gray styles_noOfLines-1__u8iSd">Overlay</div><div class="styles_htmlText__eYPgj text-14 font-normal text-light-gray styles_noOfLines-2__k_Ta_"><div><strong>Overlay</strong> helps designers and developers convert their Figma components into <strong>clean</strong> and <strong>reusable</strong> React, Vue.js and Html code. <br>.</div><div>💎 <strong>Flex</strong> attributes</div><div>⭐️<strong> Props</strong></div><div>👌 <strong>Minimum CSS lines</strong></div><div>🖌<strong> Style variables</strong></div><div>💅<strong>SCSS, Styled Components</strong></div><div>🔗 <strong>No dependencies</strong>, just copy-paste.</div></div><div class="text-14 font-normal text-light-gray styles_timeAgo__ZeHzF"><time dateTime="2020-12-01T01:25:06-08:00" title="Tuesday, December 1st 2020, 9:25:06 AM">4yr ago</time></div></div><img loading="lazy" srcSet="https://ph-files.imgix.net/91443f8b-d8ab-4a54-8315-f7137dab2127.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=150&h=90&fit=crop&dpr=1 1x, https://ph-files.imgix.net/91443f8b-d8ab-4a54-8315-f7137dab2127.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=150&h=90&fit=crop&dpr=2 2x, https://ph-files.imgix.net/91443f8b-d8ab-4a54-8315-f7137dab2127.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=150&h=90&fit=crop&dpr=3 3x" src="https://ph-files.imgix.net/91443f8b-d8ab-4a54-8315-f7137dab2127.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=150&h=90&fit=crop" style="width:150px;height:90px" alt="Overlay image" class="styles_media__4SAlQ"/></div></div></div></div></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:1","P:1")</script><script>$RC=function(b,c,e){c=document.getElementById(c);c.parentNode.removeChild(c);var a=document.getElementById(b);if(a){b=a.previousSibling;if(e)b.data="$!",a.setAttribute("data-dgst",e);else{e=b.parentNode;a=b.nextSibling;var f=0;do{if(a&&8===a.nodeType){var d=a.data;if("/$"===d)if(0===f)break;else f--;else"$"!==d&&"$?"!==d&&"$!"!==d||f++}d=a.nextSibling;e.removeChild(a);a=d}while(a);for(;c.firstChild;)e.insertBefore(c.firstChild,a);b.data="$"}b._reactRetry&&b._reactRetry()}};$RC("B:0","S:0")</script></body></html>