framer · madebyisaacr · Aug 26, 2025 · Sep 10, 2025 · Sep 10, 2025 · Sep 10, 2025
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -4,7 +4,7 @@
     "biome.enabled": true,
     "editor.defaultFormatter": "biomejs.biome",
     "[typescript]": {
-        "editor.defaultFormatter": "biomejs.biome"
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
     },
     "[javascript]": {
         "editor.defaultFormatter": "biomejs.biome"

diff --git a/.yarn/cache/@crowdin-crowdin-api-client-npm-1.48.3-6aece9d47d-eb61dd52f6.zip b/.yarn/cache/@crowdin-crowdin-api-client-npm-1.48.3-6aece9d47d-eb61dd52f6.zip
diff --git a/.yarn/cache/framer-plugin-npm-3.10.3-f82e9d58a5-c677a26146.zip b/.yarn/cache/framer-plugin-npm-3.10.3-f82e9d58a5-c677a26146.zip
diff --git a/assets/crowdin.png b/assets/crowdin.png
diff --git a/plugins/crowdin/README.md b/plugins/crowdin/README.md
@@ -0,0 +1,16 @@
+# Crowdin Localization Plugin for Framer
+
+A Framer plugin that synchronizes localization strings between **Framer** and **[Crowdin](https://crowdin.com/)**.
+---
+
+## ✨ Features
+- **Export** source strings from Framer → Crowdin
+- **Import** translations from Crowdin → Framer
+- Simple UI with **two buttons**:
+    - `Export to Crowdin`
+    - `Import from Crowdin`
+
+
+**By:** @sushilzore, @clementroche, and @madebyisaacr
+
+![Crowdin Image](../../assets/hero.png)
diff --git a/plugins/crowdin/framer.json b/plugins/crowdin/framer.json
@@ -0,0 +1,6 @@
+{
+    "id": "cr0d1n",
+    "name": "Crowdin",
+    "modes": ["localization"],
+    "icon": "/icon.svg"
+}
diff --git a/plugins/crowdin/index.html b/plugins/crowdin/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="icon" type="image/svg+xml" href="/icon.svg" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Crowdin</title>
+	</head>
+	<body>
+		<div id="root"></div>
+		<script type="module" src="/src/main.tsx"></script>
+	</body>
+</html>
diff --git a/plugins/crowdin/package.json b/plugins/crowdin/package.json
@@ -0,0 +1,27 @@
+{
+    "name": "crowdin",
+    "private": true,
+    "version": "0.0.0",
+    "type": "module",
+    "scripts": {
+        "dev": "run g:dev",
+        "build": "run g:build",
+        "check-biome": "run g:check-biome",
+        "check-eslint": "run g:check-eslint",
+        "preview": "run g:preview",
+        "pack": "npx framer-plugin-tools@latest pack",
+        "check-typescript": "run g:check-typescript"
+    },
+    "dependencies": {
+        "@crowdin/crowdin-api-client": "^1.46.0",
+        "classnames": "^2.5.1",
+        "framer-plugin": "^3.10.3",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "valibot": "^1.2.0"
+    },
+    "devDependencies": {
+        "@types/react": "^18.3.23",
+        "@types/react-dom": "^18.3.7"
+    }
+}
diff --git a/plugins/crowdin/public/icon.svg b/plugins/crowdin/public/icon.svg
diff --git a/plugins/crowdin/src/App.css b/plugins/crowdin/src/App.css
@@ -0,0 +1,244 @@
+/* Your Plugin CSS */
+
+:root {
+    --crowdin-brand-color: #263238;
+    --color-error: #ff3366;
+}
+
+[data-framer-theme="light"] {
+    --image-border-color: rgba(0, 0, 0, 0.05);
+}
+
+[data-framer-theme="dark"] {
+    --image-border-color: rgba(255, 255, 255, 0.05);
+}
+
+main {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    padding: 0 15px 15px;
+    gap: 15px;
+
+    user-select: none;
+    -webkit-user-select: none;
+}
+
+main.home {
+    height: 270px;
+}
+
+select {
+    padding: 0 16px 0 10px;
+}
+
+select:not(:disabled) {
+    cursor: pointer;
+}
+
+h1 {
+    font-size: 12px;
+    font-weight: 600;
+}
+
+strong {
+    font-weight: 500;
+    color: var(--framer-color-text);
+}
+
+.hero {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    gap: 10px;
+    width: 100%;
+    flex: 1;
+}
+
+.hero p {
+    text-wrap: balance;
+    color: var(--framer-color-text-tertiary);
+    max-width: 200px;
+}
+
+.hero .logo {
+    width: 30px;
+    height: 30px;
+    border-radius: 8px;
+    position: relative;
+    overflow: clip;
+    margin-bottom: 5px;
+}
+
+.hero .logo img {
+    width: 100%;
+    height: 100%;
+}
+
+.hero .logo:after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 1px solid var(--image-border-color);
+    border-radius: 8px;
+}
+
+.button-row {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    width: 100%;
+}
+
+.button-row button {
+    flex: 1;
+}
+
+.controls-stack {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    width: 100%;
+}
+
+.property-control {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: start;
+    gap: 10px;
+    padding-left: 10px;
+}
+
+.property-control.disabled > p,
+.controls-stack.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+}
+
+.property-control > p {
+    flex: 1;
+    height: 30px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.property-control .content {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    width: 150px;
+}
+
+.property-control .content > * {
+    width: 100%;
+}
+
+.access-token-input {
+    position: relative;
+}
+
+.access-token-input input {
+    width: 100%;
+}
+
+.access-token-input:has(.icon) input {
+    padding-right: 26px;
+}
+
+.access-token-input .icon-button {
+    position: absolute;
+    top: 0;
+    right: 0;
+}
+
+.link-icon:hover {
+    color: var(--framer-color-text);
+}
+
+.access-token-input .icon {
+    position: absolute;
+    padding: 0 8px;
+    height: 100%;
+    top: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.button-stack {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    width: 100%;
+}
+
+.dropdown-button {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    width: 100%;
+    padding-right: 0;
+    font-weight: 500;
+    background-color: var(--framer-color-bg-tertiary) !important;
+}
+
+.icon-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 8px;
+    height: 100%;
+    color: var(--framer-color-text-tertiary);
+    transition: color 0.2s ease-in-out;
+}
+
+input.error {
+    box-shadow: inset 0 0 0 1px var(--color-error);
+    color: var(--color-error);
+    background-color: color-mix(in srgb, var(--color-error) 10%, transparent);
+}
+
+.locales-empty-state {
+    background-color: var(--framer-color-bg-tertiary);
+    border-radius: 8px;
+    opacity: 0.5;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 0 0 10px;
+}
+
+.checkbox-label {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
+}
+
+.checkbox-label input[type="checkbox"]:not(:checked) {
+    background-color: var(--framer-color-bg-tertiary);
+}
+
+.heading {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+}
+
+.step-indicator {
+    color: var(--framer-color-text-tertiary);
+}