From cb8c49e69942d5758df486c505dcc2365f28944b Mon Sep 17 00:00:00 2001 From: Ryohei Ikegami Date: Sun, 30 Apr 2023 21:55:49 +0900 Subject: [PATCH 01/10] Add Style.color --- packages/elements-react/src/style/StyleProps.ts | 2 ++ packages/elements-react/src/style/buildNodeCSS.ts | 3 +-- packages/model/src/data/v1/style.ts | 1 + 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/elements-react/src/style/StyleProps.ts b/packages/elements-react/src/style/StyleProps.ts index 670a0354..642b6d88 100644 --- a/packages/elements-react/src/style/StyleProps.ts +++ b/packages/elements-react/src/style/StyleProps.ts @@ -63,6 +63,7 @@ export interface StyleProps { paddingLeft: number; // text + color: string; textContent: string; fontFamily: string; fontWeight: number; @@ -124,6 +125,7 @@ export const defaultStyle: StyleProps = { // text + color: "#000000", textContent: "", fontFamily: "Inter", fontWeight: 400, diff --git a/packages/elements-react/src/style/buildNodeCSS.ts b/packages/elements-react/src/style/buildNodeCSS.ts index e4843a8a..ea51779d 100644 --- a/packages/elements-react/src/style/buildNodeCSS.ts +++ b/packages/elements-react/src/style/buildNodeCSS.ts @@ -203,8 +203,7 @@ export function buildNodeCSS( cssStyle.whiteSpace = "break-spaces"; cssStyle.display = "flex"; cssStyle.flexDirection = "column"; - const fills = style.fills; - cssStyle.color = fills.length ? fills[0].solid : "transparent"; + cssStyle.color = style.color; cssStyle.fontFamily = style.fontFamily; cssStyle.fontSize = `${style.fontSize}px`; cssStyle.fontWeight = style.fontWeight; diff --git a/packages/model/src/data/v1/style.ts b/packages/model/src/data/v1/style.ts index 7bbb3de6..c1a09c38 100644 --- a/packages/model/src/data/v1/style.ts +++ b/packages/model/src/data/v1/style.ts @@ -153,6 +153,7 @@ export const Style = z.object({ // text + color: Color, textContent: z.string(), fontFamily: z.string(), fontWeight: z.number(), From 09ad8a989c9d412c84a14d71710818805afd6368 Mon Sep 17 00:00:00 2001 From: Ryohei Ikegami Date: Sun, 30 Apr 2023 22:03:38 +0900 Subject: [PATCH 02/10] Replace text fills -> colors --- packages/sandbox/src/button.uimix | 2 +- packages/sandbox/src/components.uimix | 8 ++-- packages/sandbox/src/landing.uimix | 68 +++++++++++++-------------- 3 files changed, 39 insertions(+), 39 deletions(-) diff --git a/packages/sandbox/src/button.uimix b/packages/sandbox/src/button.uimix index a6830cb8..aa6f1ab0 100644 --- a/packages/sandbox/src/button.uimix +++ b/packages/sandbox/src/button.uimix @@ -30,7 +30,7 @@ export default ( name="Text" width="hug" height="hug" - fills={[{ solid: "#111827" }]} + color="#111827" textContent="Button" variants={{ hover: { fills: [{ solid: "#FFFFFF" }] }, diff --git a/packages/sandbox/src/components.uimix b/packages/sandbox/src/components.uimix index ab7583d8..9372b9b5 100644 --- a/packages/sandbox/src/components.uimix +++ b/packages/sandbox/src/components.uimix @@ -48,7 +48,7 @@ export default ( name="Text" width="hug" height="hug" - fills={[{ solid: "#000000" }]} + color="#000000" marginTop={10} marginRight={20} marginBottom={30} @@ -226,7 +226,7 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#1f2937" }]} + color="#1f2937" opacity={1} textContent="React Components Import/Export" fontFamily="Satoshi" @@ -242,7 +242,7 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#4b5563" }]} + color="#4b5563" opacity={1} textContent={ "Seamlessly work with React components, boosting your design-to-development workflow.\n" @@ -311,7 +311,7 @@ export default ( name="Text" width="hug" height="hug" - fills={[{ solid: "#000000" }]} + color="#000000" marginTop={10} marginRight={20} marginBottom={30} diff --git a/packages/sandbox/src/landing.uimix b/packages/sandbox/src/landing.uimix index 89f4571c..1f0bf797 100644 --- a/packages/sandbox/src/landing.uimix +++ b/packages/sandbox/src/landing.uimix @@ -52,7 +52,7 @@ export default ( hidden={false} width="hug" height="hug" - fills={[{ solid: "#1f2937" }]} + color="#1f2937" opacity={1} textContent="UIMix" fontFamily="Satoshi" @@ -127,7 +127,7 @@ export default ( hidden={false} width="hug" height="hug" - fills={[{ solid: "#1f2937" }]} + color="#1f2937" opacity={1} textContent="Sign In" fontFamily="Satoshi" @@ -173,7 +173,7 @@ export default ( hidden={false} width="hug" height="hug" - fills={[{ solid: "#ffffff" }]} + color="#ffffff" opacity={1} textContent="Get Early Access" fontFamily="Satoshi" @@ -216,7 +216,7 @@ export default ( hidden={false} width="hug" height="hug" - fills={[{ solid: "#000000" }]} + color="#000000" opacity={1} textContent="Features" fontFamily="Satoshi" @@ -233,7 +233,7 @@ export default ( hidden={false} width="hug" height="hug" - fills={[{ solid: "#000000" }]} + color="#000000" opacity={1} textContent="Pricing" fontFamily="Satoshi" @@ -250,7 +250,7 @@ export default ( hidden={false} width="hug" height="hug" - fills={[{ solid: "#000000" }]} + color="#000000" opacity={1} textContent="Docs" fontFamily="Satoshi" @@ -267,7 +267,7 @@ export default ( hidden={false} width="hug" height="hug" - fills={[{ solid: "#000000" }]} + color="#000000" opacity={1} textContent="GitHub" fontFamily="Satoshi" @@ -353,7 +353,7 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#1F2937" }]} + color="#1F2937" opacity={1} marginTop={96} marginBottom={48} @@ -374,7 +374,7 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#6b7280" }]} + color="#6b7280" opacity={1} marginBottom={48} textContent={ @@ -447,7 +447,7 @@ export default ( hidden={false} width="hug" height="hug" - fills={[{ solid: "#ffffff" }]} + color="#ffffff" opacity={1} textContent="Get Early Access" fontFamily="Satoshi" @@ -603,7 +603,7 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#1f2937" }]} + color="#1f2937" opacity={1} textContent="Figma-like Intuitive Editing" fontFamily="Satoshi" @@ -620,7 +620,7 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#4b5563" }]} + color="#4b5563" opacity={1} textContent="Experience a user-friendly interface with familiar design tools, making it easy for both beginners and professionals to create stunning web designs." fontFamily="Inter" @@ -698,7 +698,7 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#1f2937" }]} + color="#1f2937" opacity={1} textContent="React Components Import/Export" fontFamily="Satoshi" @@ -715,7 +715,7 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#4b5563" }]} + color="#4b5563" opacity={1} textContent={ "Seamlessly work with React components, boosting your design-to-development workflow.\n" @@ -795,7 +795,7 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#1f2937" }]} + color="#1f2937" opacity={1} textContent="Collaboration for Everyone" fontFamily="Satoshi" @@ -812,7 +812,7 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#4b5563" }]} + color="#4b5563" opacity={1} textContent={ "Collaborate in real-time with your team, whether they're designers, developers, or stakeholders.\n" @@ -892,7 +892,7 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#1f2937" }]} + color="#1f2937" opacity={1} textContent="Offline Editing Experience" fontFamily="Satoshi" @@ -909,7 +909,7 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#4b5563" }]} + color="#4b5563" opacity={1} textContent={ "Benefit from UIMix's seamless offline editing, offering local file management, hot reloading, and an uninterrupted workflow.\n\n" @@ -989,7 +989,7 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#1f2937" }]} + color="#1f2937" opacity={1} textContent="AI Assistance" fontFamily="Satoshi" @@ -1006,7 +1006,7 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#4b5563" }]} + color="#4b5563" opacity={1} textContent="Supercharge your design process with AI-generated and refined text contents, as well as AI-generated images that fit perfectly into your project." fontFamily="Inter" @@ -1084,7 +1084,7 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#1f2937" }]} + color="#1f2937" opacity={1} textContent="Figma Integration" fontFamily="Satoshi" @@ -1101,7 +1101,7 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#4b5563" }]} + color="#4b5563" opacity={1} textContent="Easily import designs from Figma and export components back to Figma, ensuring seamless collaboration between UIMix and your favorite design tool." fontFamily="Inter" @@ -1134,7 +1134,7 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#1f2937" }]} + color="#1f2937" opacity={1} marginBottom={24} textContent="Open Source" @@ -1152,7 +1152,7 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#4b5563" }]} + color="#4b5563" opacity={1} marginBottom={48} textContent={ @@ -1205,7 +1205,7 @@ export default ( hidden={false} width="hug" height="hug" - fills={[{ solid: "#1f2937" }]} + color="#1f2937" opacity={1} textContent="Explore GitHub repo" fontFamily="Satoshi" @@ -1223,7 +1223,7 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#1f2937" }]} + color="#1f2937" opacity={1} marginBottom={72} textContent="How It Works" @@ -1259,7 +1259,7 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#1f2937" }]} + color="#1f2937" opacity={1} marginBottom={26} textContent="A. Start Your Project" @@ -1277,7 +1277,7 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#4b5563" }]} + color="#4b5563" opacity={1} textContent={ "Sign up for a free account or log in.\nCreate a new project or import an existing Figma design.\nOrganize your components and design tokens in the user-friendly interface." @@ -1305,7 +1305,7 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#1f2937" }]} + color="#1f2937" opacity={1} marginBottom={20} textContent="B. Design & Develop" @@ -1323,7 +1323,7 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#4b5563" }]} + color="#4b5563" opacity={1} textContent={ "Utilize Figma-like editing tools to create and modify designs.\nSeamlessly import React components into your UIMix project.\nLeverage AI assistance to efficiently generate and refine your content." @@ -1351,7 +1351,7 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#1f2937" }]} + color="#1f2937" opacity={1} marginBottom={20} textContent="C. Collaborate & Publish" @@ -1369,7 +1369,7 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#4b5563" }]} + color="#4b5563" opacity={1} textContent={ "Collaborate using the online editor or work offline for an optimized development experience.\nIntegrate with GitHub for streamlined version control.\nEasily import UIMix components into React apps or export final designs back to Figma." @@ -1426,7 +1426,7 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#ffffff" }]} + color="#ffffff" opacity={1} marginBottom={48} textContent="Ready to revolutionize your web design workflow?" @@ -1499,7 +1499,7 @@ export default ( hidden={false} width="hug" height="hug" - fills={[{ solid: "#3b82f6" }]} + color="#3b82f6" opacity={1} textContent="Get Early Access" fontFamily="Satoshi" From c3350558b0b795c92b9407ecefc2167ed38937b8 Mon Sep 17 00:00:00 2001 From: Ryohei Ikegami Date: Sun, 30 Apr 2023 22:07:32 +0900 Subject: [PATCH 03/10] Save & load colors --- packages/model/src/file/ProjectEmitter.ts | 4 ++++ packages/model/src/file/ProjectLoader.ts | 4 ++++ packages/model/src/file/types.ts | 2 ++ 3 files changed, 10 insertions(+) diff --git a/packages/model/src/file/ProjectEmitter.ts b/packages/model/src/file/ProjectEmitter.ts index b5b76200..802f10ad 100644 --- a/packages/model/src/file/ProjectEmitter.ts +++ b/packages/model/src/file/ProjectEmitter.ts @@ -342,6 +342,10 @@ export class PageEmitter { paddingBottom: style.paddingBottom, paddingLeft: style.paddingLeft, + color: + style.color !== undefined + ? this.transformColor(style.color) + : undefined, textContent: style.textContent, fontFamily: style.fontFamily, fontWeight: style.fontWeight, diff --git a/packages/model/src/file/ProjectLoader.ts b/packages/model/src/file/ProjectLoader.ts index 4dbc8318..fa7bc601 100644 --- a/packages/model/src/file/ProjectLoader.ts +++ b/packages/model/src/file/ProjectLoader.ts @@ -324,6 +324,10 @@ class PageLoader { paddingBottom: style.paddingBottom, paddingLeft: style.paddingLeft, + color: + style.color !== undefined + ? this.transformColor(style.color) + : undefined, textContent: style.textContent, fontFamily: style.fontFamily, fontWeight: style.fontWeight, diff --git a/packages/model/src/file/types.ts b/packages/model/src/file/types.ts index 40d7858d..f5d6e4d5 100644 --- a/packages/model/src/file/types.ts +++ b/packages/model/src/file/types.ts @@ -10,6 +10,7 @@ import { TextHorizontalAlign, TextVerticalAlign, VariantCondition, + Color, } from "../data/v1"; import { z } from "zod"; import Babel from "@babel/standalone"; @@ -62,6 +63,7 @@ export const BaseStyleProps = z.object({ // text + color: Color, textContent: z.string(), fontFamily: z.string(), fontWeight: z.number(), From 29c8773ef5d5e92c56c749f4536706d5995d5c1f Mon Sep 17 00:00:00 2001 From: Ryohei Ikegami Date: Sun, 30 Apr 2023 22:13:25 +0900 Subject: [PATCH 04/10] Fix --- packages/model/src/models/Selectable.ts | 1 + packages/model/src/models/Style.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/model/src/models/Selectable.ts b/packages/model/src/models/Selectable.ts index cbdcef47..943c6a98 100644 --- a/packages/model/src/models/Selectable.ts +++ b/packages/model/src/models/Selectable.ts @@ -692,6 +692,7 @@ export class Selectable { ...style, fills: style.fills.map(resolveFill), border: style.border && resolveFill(style.border), + color: resolveColor(style.color ?? "#000000"), shadows: style.shadows.map((shadow) => ({ ...shadow, color: resolveColor(shadow.color), diff --git a/packages/model/src/models/Style.ts b/packages/model/src/models/Style.ts index b30e94d7..7e63f2e7 100644 --- a/packages/model/src/models/Style.ts +++ b/packages/model/src/models/Style.ts @@ -51,6 +51,7 @@ export const defaultStyle: Data.Style = { // text + color: "#000000", textContent: "", fontFamily: "Inter", fontWeight: 400, From dac3781592052362625375d802da9a08b61ebe3a Mon Sep 17 00:00:00 2001 From: Ryohei Ikegami Date: Sun, 30 Apr 2023 22:19:50 +0900 Subject: [PATCH 05/10] Fix .uimix files --- packages/sandbox/src/button.uimix | 2 +- packages/sandbox/src/components.uimix | 10 ++-- packages/sandbox/src/landing.uimix | 68 +++++++++++++-------------- 3 files changed, 40 insertions(+), 40 deletions(-) diff --git a/packages/sandbox/src/button.uimix b/packages/sandbox/src/button.uimix index aa6f1ab0..328c4a8c 100644 --- a/packages/sandbox/src/button.uimix +++ b/packages/sandbox/src/button.uimix @@ -33,7 +33,7 @@ export default ( color="#111827" textContent="Button" variants={{ - hover: { fills: [{ solid: "#FFFFFF" }] }, + hover: { color: "#FFFFFF" }, "maxWidth:767": { fontSize: 14 }, }} /> diff --git a/packages/sandbox/src/components.uimix b/packages/sandbox/src/components.uimix index 9372b9b5..4c419038 100644 --- a/packages/sandbox/src/components.uimix +++ b/packages/sandbox/src/components.uimix @@ -48,11 +48,11 @@ export default ( name="Text" width="hug" height="hug" - color="#000000" marginTop={10} marginRight={20} marginBottom={30} marginLeft={40} + color="#000000" textContent="Hello, world!" fontSize={20} /> @@ -140,7 +140,7 @@ export default ( "maxWidth:767": { overrides: { button: { - overrides: { text: { fills: [{ solid: "#FF0000" }] } }, + overrides: { text: { color: "#FF0000" } }, }, }, }, @@ -226,8 +226,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - color="#1f2937" opacity={1} + color="#1f2937" textContent="React Components Import/Export" fontFamily="Satoshi" fontWeight={700} @@ -242,8 +242,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - color="#4b5563" opacity={1} + color="#4b5563" textContent={ "Seamlessly work with React components, boosting your design-to-development workflow.\n" } @@ -311,11 +311,11 @@ export default ( name="Text" width="hug" height="hug" - color="#000000" marginTop={10} marginRight={20} marginBottom={30} marginLeft={40} + color="#000000" textContent="Hello, world!" fontSize={20} /> diff --git a/packages/sandbox/src/landing.uimix b/packages/sandbox/src/landing.uimix index 1f0bf797..6d73792b 100644 --- a/packages/sandbox/src/landing.uimix +++ b/packages/sandbox/src/landing.uimix @@ -52,8 +52,8 @@ export default ( hidden={false} width="hug" height="hug" - color="#1f2937" opacity={1} + color="#1f2937" textContent="UIMix" fontFamily="Satoshi" fontWeight={900} @@ -127,8 +127,8 @@ export default ( hidden={false} width="hug" height="hug" - color="#1f2937" opacity={1} + color="#1f2937" textContent="Sign In" fontFamily="Satoshi" fontWeight={700} @@ -173,8 +173,8 @@ export default ( hidden={false} width="hug" height="hug" - color="#ffffff" opacity={1} + color="#ffffff" textContent="Get Early Access" fontFamily="Satoshi" fontWeight={900} @@ -216,8 +216,8 @@ export default ( hidden={false} width="hug" height="hug" - color="#000000" opacity={1} + color="#000000" textContent="Features" fontFamily="Satoshi" fontWeight={500} @@ -233,8 +233,8 @@ export default ( hidden={false} width="hug" height="hug" - color="#000000" opacity={1} + color="#000000" textContent="Pricing" fontFamily="Satoshi" fontWeight={500} @@ -250,8 +250,8 @@ export default ( hidden={false} width="hug" height="hug" - color="#000000" opacity={1} + color="#000000" textContent="Docs" fontFamily="Satoshi" fontWeight={500} @@ -267,8 +267,8 @@ export default ( hidden={false} width="hug" height="hug" - color="#000000" opacity={1} + color="#000000" textContent="GitHub" fontFamily="Satoshi" fontWeight={500} @@ -353,10 +353,10 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - color="#1F2937" opacity={1} marginTop={96} marginBottom={48} + color="#1F2937" textContent={ "Revolutionize Your Web Design\nand Development Workflow" } @@ -374,9 +374,9 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - color="#6b7280" opacity={1} marginBottom={48} + color="#6b7280" textContent={ "UIMix is a open-source design tool that combines intuitive editing,\nReact integration, AI assistance, and advanced design tokens." } @@ -447,8 +447,8 @@ export default ( hidden={false} width="hug" height="hug" - color="#ffffff" opacity={1} + color="#ffffff" textContent="Get Early Access" fontFamily="Satoshi" fontWeight={900} @@ -603,8 +603,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - color="#1f2937" opacity={1} + color="#1f2937" textContent="Figma-like Intuitive Editing" fontFamily="Satoshi" fontWeight={700} @@ -620,8 +620,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - color="#4b5563" opacity={1} + color="#4b5563" textContent="Experience a user-friendly interface with familiar design tools, making it easy for both beginners and professionals to create stunning web designs." fontFamily="Inter" fontWeight={400} @@ -698,8 +698,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - color="#1f2937" opacity={1} + color="#1f2937" textContent="React Components Import/Export" fontFamily="Satoshi" fontWeight={700} @@ -715,8 +715,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - color="#4b5563" opacity={1} + color="#4b5563" textContent={ "Seamlessly work with React components, boosting your design-to-development workflow.\n" } @@ -795,8 +795,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - color="#1f2937" opacity={1} + color="#1f2937" textContent="Collaboration for Everyone" fontFamily="Satoshi" fontWeight={700} @@ -812,8 +812,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - color="#4b5563" opacity={1} + color="#4b5563" textContent={ "Collaborate in real-time with your team, whether they're designers, developers, or stakeholders.\n" } @@ -892,8 +892,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - color="#1f2937" opacity={1} + color="#1f2937" textContent="Offline Editing Experience" fontFamily="Satoshi" fontWeight={700} @@ -909,8 +909,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - color="#4b5563" opacity={1} + color="#4b5563" textContent={ "Benefit from UIMix's seamless offline editing, offering local file management, hot reloading, and an uninterrupted workflow.\n\n" } @@ -989,8 +989,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - color="#1f2937" opacity={1} + color="#1f2937" textContent="AI Assistance" fontFamily="Satoshi" fontWeight={700} @@ -1006,8 +1006,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - color="#4b5563" opacity={1} + color="#4b5563" textContent="Supercharge your design process with AI-generated and refined text contents, as well as AI-generated images that fit perfectly into your project." fontFamily="Inter" fontWeight={400} @@ -1084,8 +1084,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - color="#1f2937" opacity={1} + color="#1f2937" textContent="Figma Integration" fontFamily="Satoshi" fontWeight={700} @@ -1101,8 +1101,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - color="#4b5563" opacity={1} + color="#4b5563" textContent="Easily import designs from Figma and export components back to Figma, ensuring seamless collaboration between UIMix and your favorite design tool." fontFamily="Inter" fontWeight={400} @@ -1134,9 +1134,9 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - color="#1f2937" opacity={1} marginBottom={24} + color="#1f2937" textContent="Open Source" fontFamily="Satoshi" fontWeight={900} @@ -1152,9 +1152,9 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - color="#4b5563" opacity={1} marginBottom={48} + color="#4b5563" textContent={ "UIMix's open-source editor and backend promote community-driven development and offer extensive customization options.\nSelf-host both components for greater control over your design environment and data security." } @@ -1205,8 +1205,8 @@ export default ( hidden={false} width="hug" height="hug" - color="#1f2937" opacity={1} + color="#1f2937" textContent="Explore GitHub repo" fontFamily="Satoshi" fontWeight={700} @@ -1223,9 +1223,9 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - color="#1f2937" opacity={1} marginBottom={72} + color="#1f2937" textContent="How It Works" fontFamily="Satoshi" fontWeight={900} @@ -1259,9 +1259,9 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - color="#1f2937" opacity={1} marginBottom={26} + color="#1f2937" textContent="A. Start Your Project" fontFamily="Satoshi" fontWeight={700} @@ -1277,8 +1277,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - color="#4b5563" opacity={1} + color="#4b5563" textContent={ "Sign up for a free account or log in.\nCreate a new project or import an existing Figma design.\nOrganize your components and design tokens in the user-friendly interface." } @@ -1305,9 +1305,9 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - color="#1f2937" opacity={1} marginBottom={20} + color="#1f2937" textContent="B. Design & Develop" fontFamily="Satoshi" fontWeight={700} @@ -1323,8 +1323,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - color="#4b5563" opacity={1} + color="#4b5563" textContent={ "Utilize Figma-like editing tools to create and modify designs.\nSeamlessly import React components into your UIMix project.\nLeverage AI assistance to efficiently generate and refine your content." } @@ -1351,9 +1351,9 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - color="#1f2937" opacity={1} marginBottom={20} + color="#1f2937" textContent="C. Collaborate & Publish" fontFamily="Satoshi" fontWeight={700} @@ -1369,8 +1369,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - color="#4b5563" opacity={1} + color="#4b5563" textContent={ "Collaborate using the online editor or work offline for an optimized development experience.\nIntegrate with GitHub for streamlined version control.\nEasily import UIMix components into React apps or export final designs back to Figma." } @@ -1426,9 +1426,9 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - color="#ffffff" opacity={1} marginBottom={48} + color="#ffffff" textContent="Ready to revolutionize your web design workflow?" fontFamily="Satoshi" fontWeight={900} @@ -1499,8 +1499,8 @@ export default ( hidden={false} width="hug" height="hug" - color="#3b82f6" opacity={1} + color="#3b82f6" textContent="Get Early Access" fontFamily="Satoshi" fontWeight={900} From 4c1d84cb3a73c1dbf729690ff8be874be9999eaf Mon Sep 17 00:00:00 2001 From: Ryohei Ikegami Date: Sun, 30 Apr 2023 22:39:13 +0900 Subject: [PATCH 06/10] Fix test fixture --- .../src/state/demoFile/landing.uimixproject | 557 ++++++------ .../models/__fixtures__/project.uimixproject | 820 +++++++++--------- packages/sandbox/src/components.uimix | 4 +- packages/sandbox/src/nested/landing.uimix | 69 +- 4 files changed, 724 insertions(+), 726 deletions(-) diff --git a/packages/editor/src/state/demoFile/landing.uimixproject b/packages/editor/src/state/demoFile/landing.uimixproject index f1d782d2..695a521e 100644 --- a/packages/editor/src/state/demoFile/landing.uimixproject +++ b/packages/editor/src/state/demoFile/landing.uimixproject @@ -7,509 +7,509 @@ "name": "landing", "parent": "project" }, - "1Bxgjd2GQ86kNMXigGvXUt": { + "1Bxo3HEwaoSRm3fbP6iw7h": { "type": "component", "index": 0, "name": "Header", "parent": "1nCc1J7YeWZSJ7Zd8SQdRtMYtfKeLtCINWUsm0B8ows" }, - "1Bxgjd2GdNHeFAJpsakdh6": { + "1Bxo3HEwjFCrCXwG8GXA2B": { "type": "frame", "index": 0, - "parent": "1Bxgjd2GQ86kNMXigGvXUt" + "parent": "1Bxo3HEwaoSRm3fbP6iw7h" }, - "1Bxgjd2Grm181c4DYhQYjp": { + "1Bxo3HEwY3t3tTwgLbPECS": { "type": "frame", "index": 0, "name": "Frame 102", - "parent": "1Bxgjd2GdNHeFAJpsakdh6" + "parent": "1Bxo3HEwjFCrCXwG8GXA2B" }, - "1Bxgjd2GvBdm89R8WBFJPQ": { + "1Bxo3HEwek7vmCw1B2sgBJ": { "type": "svg", "index": 0, "name": "Frame 178", - "parent": "1Bxgjd2Grm181c4DYhQYjp" + "parent": "1Bxo3HEwY3t3tTwgLbPECS" }, - "1Bxgjd2H7R7GJZ5jovTL5f": { + "1Bxo3HEwXFDzty6arQDSpy": { "type": "text", "index": 1, "name": "UIMix", - "parent": "1Bxgjd2Grm181c4DYhQYjp" + "parent": "1Bxo3HEwY3t3tTwgLbPECS" }, - "1Bxgjd2GxjmgZ4c3x3UJN7": { + "1Bxo3HEwcsjzR6Qnr2YbWL": { "type": "frame", "index": 1, "name": "Frame 179", - "parent": "1Bxgjd2GdNHeFAJpsakdh6" + "parent": "1Bxo3HEwjFCrCXwG8GXA2B" }, - "1Bxgjd2HFnxQS1XSx3pBaP": { + "1Bxo3HEwhWPZdYDr7JiHUb": { "type": "frame", "index": 0, "name": "Frame 3", - "parent": "1Bxgjd2GxjmgZ4c3x3UJN7" + "parent": "1Bxo3HEwcsjzR6Qnr2YbWL" }, - "1Bxgjd2HBoXcheeopEHoCF": { + "1Bxo3HEwthyWCNjUwpu1Hq": { "type": "text", "index": 0, "name": "Sign In", - "parent": "1Bxgjd2HFnxQS1XSx3pBaP" + "parent": "1Bxo3HEwhWPZdYDr7JiHUb" }, - "1Bxgjd2HQdNrKsNYFsXGKW": { + "1Bxo3HEwvsjGzuMANGc1pb": { "type": "frame", "index": 1, "name": "Frame 4", - "parent": "1Bxgjd2GxjmgZ4c3x3UJN7" + "parent": "1Bxo3HEwcsjzR6Qnr2YbWL" }, - "1Bxgjd2HbVKGFGpYmvpdU1": { + "1Bxo3HEwwgrxVMSP9K5EL5": { "type": "text", "index": 0, "name": "Get Early Access", - "parent": "1Bxgjd2HQdNrKsNYFsXGKW" + "parent": "1Bxo3HEwvsjGzuMANGc1pb" }, - "1Bxgjd2HTnzLd1JT1MGHT1": { + "1Bxo3HEwm1XFFakST4ePXZ": { "type": "frame", "index": 2, "name": "Frame 180", - "parent": "1Bxgjd2GdNHeFAJpsakdh6" + "parent": "1Bxo3HEwjFCrCXwG8GXA2B" }, - "1Bxgjd2HbT1nQwSy6zZxUw": { + "1Bxo3HEwtRdAqFWrq9g8PK": { "type": "text", "index": 0, "name": "Features", - "parent": "1Bxgjd2HTnzLd1JT1MGHT1" + "parent": "1Bxo3HEwm1XFFakST4ePXZ" }, - "1Bxgjd2HcjnH7PQYD5WQwo": { + "1Bxo3HEwteGJZLPiqQSj7k": { "type": "text", "index": 1, "name": "Pricing", - "parent": "1Bxgjd2HTnzLd1JT1MGHT1" + "parent": "1Bxo3HEwm1XFFakST4ePXZ" }, - "1Bxgjd2HeT8Ze5Qva3ifHy": { + "1Bxo3HEwmbZjnxbBGcdMkw": { "type": "text", "index": 2, "name": "Docs", - "parent": "1Bxgjd2HTnzLd1JT1MGHT1" + "parent": "1Bxo3HEwm1XFFakST4ePXZ" }, - "1Bxgjd2HWA3RusdmbQY5cH": { + "1Bxo3HEwqNPDqjSBqtQ983": { "type": "text", "index": 3, "name": "GitHub", - "parent": "1Bxgjd2HTnzLd1JT1MGHT1" + "parent": "1Bxo3HEwm1XFFakST4ePXZ" }, - "1Bxgjd2Hh7WyMA2CEtKm9d": { + "1Bxo3HEwn4znsQb9rHgYgM": { "type": "component", "index": 1, "name": "Landing", "parent": "1nCc1J7YeWZSJ7Zd8SQdRtMYtfKeLtCINWUsm0B8ows" }, - "1Bxgjd2HpmZbQkteJnQeea": { + "1Bxo3HEwtXADmSCS9Hweu7": { "type": "frame", "index": 0, - "parent": "1Bxgjd2Hh7WyMA2CEtKm9d" + "parent": "1Bxo3HEwn4znsQb9rHgYgM" }, - "1Bxgjd2HmAVYzkZzR5gMmQ": { + "1Bxo3HEwkbso7LRYCMWB7p": { "type": "instance", "index": 0, "name": "Frame", - "parent": "1Bxgjd2HpmZbQkteJnQeea" + "parent": "1Bxo3HEwtXADmSCS9Hweu7" }, - "1Bxgjd2J1vrHmy4CSKuoyf": { + "1Bxo3HEwy1ZiDyiEyyXEmg": { "type": "frame", "index": 1, "name": "Frame", - "parent": "1Bxgjd2HpmZbQkteJnQeea" + "parent": "1Bxo3HEwtXADmSCS9Hweu7" }, - "1Bxgjd2J8aPXCQfLxVmvX6": { + "1Bxo3HEwpZt5nDm1HVyLmC": { "type": "frame", "index": 0, "name": "Frame", - "parent": "1Bxgjd2J1vrHmy4CSKuoyf" + "parent": "1Bxo3HEwy1ZiDyiEyyXEmg" }, - "1Bxgjd2Hwz6BzxErwEg15A": { + "1Bxo3HEwyrToCtknPhsJej": { "type": "image", "index": 0, "name": "image 2", - "parent": "1Bxgjd2J8aPXCQfLxVmvX6" + "parent": "1Bxo3HEwpZt5nDm1HVyLmC" }, - "1Bxgjd2JErKK24jJUPhYv1": { + "1Bxo3HEwwvuYhjctEipp32": { "type": "text", "index": 1, "name": "Revolutionize Your Web Design and Development Workflow", - "parent": "1Bxgjd2J1vrHmy4CSKuoyf" + "parent": "1Bxo3HEwy1ZiDyiEyyXEmg" }, - "1Bxgjd2JsRnWBA8gT2YgSm": { + "1Bxo3HEx6YseDN2xgBmS66": { "type": "text", "index": 2, "name": "UIMix is a open-source design tool that combines intuitive editing, React integration, AI assistance, and advanced design tokens.", - "parent": "1Bxgjd2J1vrHmy4CSKuoyf" + "parent": "1Bxo3HEwy1ZiDyiEyyXEmg" }, - "1Bxgjd2Jpk4oRFruHrgBdy": { + "1Bxo3HEx9fRua5T5NiRPeF": { "type": "frame", "index": 3, "name": "Frame 4", - "parent": "1Bxgjd2J1vrHmy4CSKuoyf" + "parent": "1Bxo3HEwy1ZiDyiEyyXEmg" }, - "1Bxgjd2Jpe5QFt4omGt5mm": { + "1Bxo3HExB7eyPeh8xMrGkb": { "type": "frame", "index": 0, "name": "Frame 2", - "parent": "1Bxgjd2Jpk4oRFruHrgBdy" + "parent": "1Bxo3HEx9fRua5T5NiRPeF" }, - "1Bxgjd2JkjKVV8KWfCdTK2": { + "1Bxo3HEx1N8rAiDyenFNpA": { "type": "text", "index": 0, "name": "Get Early Access", - "parent": "1Bxgjd2Jpe5QFt4omGt5mm" + "parent": "1Bxo3HExB7eyPeh8xMrGkb" }, - "1Bxgjd2K3o3NQ78FVmRvH9": { + "1Bxo3HEx6a6KL4AThx8p68": { "type": "image", "index": 4, "name": "image 1", - "parent": "1Bxgjd2J1vrHmy4CSKuoyf" + "parent": "1Bxo3HEwy1ZiDyiEyyXEmg" }, - "1Bxgjd2Jv7tWS8aoJvnETh": { + "1Bxo3HEx3qhvbF8h4NTX6k": { "type": "frame", "index": 2, "name": "Frame 19", - "parent": "1Bxgjd2HpmZbQkteJnQeea" + "parent": "1Bxo3HEwtXADmSCS9Hweu7" }, - "1Bxgjd2KNNpy4g9bAHsBHD": { + "1Bxo3HEx7S9n267UsT86np": { "type": "frame", "index": 0, "name": "Frame 181", - "parent": "1Bxgjd2Jv7tWS8aoJvnETh" + "parent": "1Bxo3HEx3qhvbF8h4NTX6k" }, - "1Bxgjd2KMDvofAyH4423We": { + "1Bxo3HEx89eUwtrPyLhzKC": { "type": "frame", "index": 0, "name": "Frame 13", - "parent": "1Bxgjd2KNNpy4g9bAHsBHD" + "parent": "1Bxo3HEx7S9n267UsT86np" }, - "1Bxgjd2KD3XPnWWxv76R1i": { + "1Bxo3HEx2rwBxKWA3kBjX9": { "type": "frame", "index": 0, "name": "Frame 5", - "parent": "1Bxgjd2KMDvofAyH4423We" + "parent": "1Bxo3HEx89eUwtrPyLhzKC" }, - "1Bxgjd2KWa4rL2LcZxDnDx": { + "1Bxo3HEwzh8eNzHqYrtxqu": { "type": "svg", "index": 0, "name": "heroicons:pencil-square", - "parent": "1Bxgjd2KD3XPnWWxv76R1i" + "parent": "1Bxo3HEx2rwBxKWA3kBjX9" }, - "1Bxgjd2Kd345sYFBryN13n": { + "1Bxo3HExC2BiqrEAc5e8Sm": { "type": "text", "index": 1, "name": "Figma-like Intuitive Editing", - "parent": "1Bxgjd2KMDvofAyH4423We" + "parent": "1Bxo3HEx89eUwtrPyLhzKC" }, - "1Bxgjd2KbFo8z98m6KbX1u": { + "1Bxo3HExAJL3CYVM9TimQG": { "type": "text", "index": 2, "name": "Experience a user-friendly interface with familiar design tools, making it easy for both beginners and professionals to create stunning web designs.", - "parent": "1Bxgjd2KMDvofAyH4423We" + "parent": "1Bxo3HEx89eUwtrPyLhzKC" }, - "1Bxgjd2KUe2tk7M4mrCwSN": { + "1Bxo3HExGdhQnocMPaDFYL": { "type": "frame", "index": 1, "name": "Frame 14", - "parent": "1Bxgjd2KNNpy4g9bAHsBHD" + "parent": "1Bxo3HEx7S9n267UsT86np" }, - "1Bxgjd2Kb4NVVY7WWSxnwY": { + "1Bxo3HExLEKNw7GKfU3REo": { "type": "frame", "index": 0, "name": "Frame 13", - "parent": "1Bxgjd2KUe2tk7M4mrCwSN" + "parent": "1Bxo3HExGdhQnocMPaDFYL" }, - "1Bxgjd2KmRGVs7iHY4dWbt": { + "1Bxo3HExEmYfgSkkVWj7W5": { "type": "svg", "index": 0, "name": "heroicons:code-bracket", - "parent": "1Bxgjd2Kb4NVVY7WWSxnwY" + "parent": "1Bxo3HExLEKNw7GKfU3REo" }, - "1Bxgjd2KuNkZjkJ7o4j5xM": { + "1Bxo3HExHiAB5wnDk5xJQM": { "type": "text", "index": 1, "name": "React Components Import/Export", - "parent": "1Bxgjd2KUe2tk7M4mrCwSN" + "parent": "1Bxo3HExGdhQnocMPaDFYL" }, - "1Bxgjd2KwYDMjpoy2yLuJs": { + "1Bxo3HExEgfoomc1XjmTgt": { "type": "text", "index": 2, "name": "Seamlessly work with React components, boosting your design-to-development workflow.", - "parent": "1Bxgjd2KUe2tk7M4mrCwSN" + "parent": "1Bxo3HExGdhQnocMPaDFYL" }, - "1Bxgjd2KxQUN8RiCur3chD": { + "1Bxo3HExUMDMYJzACMpb9j": { "type": "frame", "index": 2, "name": "Frame 15", - "parent": "1Bxgjd2KNNpy4g9bAHsBHD" + "parent": "1Bxo3HEx7S9n267UsT86np" }, - "1Bxgjd2L3h1fqKneUN5sLb": { + "1Bxo3HExMgU2TQdJLPNfJv": { "type": "frame", "index": 0, "name": "Frame 13", - "parent": "1Bxgjd2KxQUN8RiCur3chD" + "parent": "1Bxo3HExUMDMYJzACMpb9j" }, - "1Bxgjd2L5ww7kehFWqYu41": { + "1Bxo3HExL8Y6FZLkQCoEJ6": { "type": "svg", "index": 0, "name": "heroicons:cloud", - "parent": "1Bxgjd2L3h1fqKneUN5sLb" + "parent": "1Bxo3HExMgU2TQdJLPNfJv" }, - "1Bxgjd2L96wvsHKQVY4sT1": { + "1Bxo3HExS3khwbwp6Ye7gB": { "type": "text", "index": 1, "name": "Collaboration for Everyone", - "parent": "1Bxgjd2KxQUN8RiCur3chD" + "parent": "1Bxo3HExUMDMYJzACMpb9j" }, - "1Bxgjd2L9pp3htkUcqb2UQ": { + "1Bxo3HExRfrnUCcSE8nNuY": { "type": "text", "index": 2, "name": "Collaborate in real-time with your team, whether they're designers, developers, or stakeholders.", - "parent": "1Bxgjd2KxQUN8RiCur3chD" + "parent": "1Bxo3HExUMDMYJzACMpb9j" }, - "1Bxgjd2LHVPjzc8ZTzCPyf": { + "1Bxo3HExU7nx7GoXqbYx8m": { "type": "frame", "index": 3, "name": "Frame 16", - "parent": "1Bxgjd2KNNpy4g9bAHsBHD" + "parent": "1Bxo3HEx7S9n267UsT86np" }, - "1Bxgjd2LCzZ9Q1qAs4ooBy": { + "1Bxo3HExPWJ8kLWp3rHWuU": { "type": "frame", "index": 0, "name": "Frame 13", - "parent": "1Bxgjd2LHVPjzc8ZTzCPyf" + "parent": "1Bxo3HExU7nx7GoXqbYx8m" }, - "1Bxgjd2LQEExt28hFeqAAY": { + "1Bxo3HExKe9UTKM87i9Fhu": { "type": "svg", "index": 0, "name": "heroicons:computer-desktop", - "parent": "1Bxgjd2LCzZ9Q1qAs4ooBy" + "parent": "1Bxo3HExPWJ8kLWp3rHWuU" }, - "1Bxgjd2LbpNsVWPCfQuPWS": { + "1Bxo3HExhRLLwNRvKpVW5q": { "type": "text", "index": 1, "name": "Offline Editing Experience", - "parent": "1Bxgjd2LHVPjzc8ZTzCPyf" + "parent": "1Bxo3HExU7nx7GoXqbYx8m" }, - "1Bxgjd2LSjE1qSYvW62agx": { + "1Bxo3HExdwKaRmChDADoHD": { "type": "text", "index": 2, "name": "Benefit from UIMix's seamless offline editing, offering local file management, hot reloading, and an uninterrupted workflow.", - "parent": "1Bxgjd2LHVPjzc8ZTzCPyf" + "parent": "1Bxo3HExU7nx7GoXqbYx8m" }, - "1Bxgjd2LcifAyxogLn9pyj": { + "1Bxo3HExccQsJa3HV9Q2Z8": { "type": "frame", "index": 4, "name": "Frame 17", - "parent": "1Bxgjd2KNNpy4g9bAHsBHD" + "parent": "1Bxo3HEx7S9n267UsT86np" }, - "1Bxgjd2Lafu7CCNnWybbQi": { + "1Bxo3HExg1jUixnT5t3Lxn": { "type": "frame", "index": 0, "name": "Frame 13", - "parent": "1Bxgjd2LcifAyxogLn9pyj" + "parent": "1Bxo3HExccQsJa3HV9Q2Z8" }, - "1Bxgjd2LWJLH2eDySgN2q2": { + "1Bxo3HExe188r4M5oNJUob": { "type": "svg", "index": 0, "name": "carbon:machine-learning", - "parent": "1Bxgjd2Lafu7CCNnWybbQi" + "parent": "1Bxo3HExg1jUixnT5t3Lxn" }, - "1Bxgjd2Lagwb9ZoP1Y8KRx": { + "1Bxo3HExiEusDEmD1uaiyz": { "type": "text", "index": 1, "name": "AI Assistance", - "parent": "1Bxgjd2LcifAyxogLn9pyj" + "parent": "1Bxo3HExccQsJa3HV9Q2Z8" }, - "1Bxgjd2LWpGABGccTH6pVq": { + "1Bxo3HExf3sLDf5pV5hgnu": { "type": "text", "index": 2, "name": "Supercharge your design process with AI-generated and refined text contents, as well as AI-generated images that fit perfectly into your project.", - "parent": "1Bxgjd2LcifAyxogLn9pyj" + "parent": "1Bxo3HExccQsJa3HV9Q2Z8" }, - "1Bxgjd2LR47ZN2eR7QaWqd": { + "1Bxo3HExiwb6ZVzU98R6sq": { "type": "frame", "index": 5, "name": "Frame 18", - "parent": "1Bxgjd2KNNpy4g9bAHsBHD" + "parent": "1Bxo3HEx7S9n267UsT86np" }, - "1Bxgjd2Le4Mvko2sXpkvjf": { + "1Bxo3HExXQoLiWv5usTbyb": { "type": "frame", "index": 0, "name": "Frame 13", - "parent": "1Bxgjd2LR47ZN2eR7QaWqd" + "parent": "1Bxo3HExiwb6ZVzU98R6sq" }, - "1Bxgjd2LcowyLm3PaumMJN": { + "1Bxo3HExiCEw3ZkSjfaEgM": { "type": "svg", "index": 0, "name": "carbon:logo-figma", - "parent": "1Bxgjd2Le4Mvko2sXpkvjf" + "parent": "1Bxo3HExXQoLiWv5usTbyb" }, - "1Bxgjd2LgGt71Wy94T2ocq": { + "1Bxo3HExWZmVEFUeCcztSq": { "type": "text", "index": 1, "name": "Figma Integration", - "parent": "1Bxgjd2LR47ZN2eR7QaWqd" + "parent": "1Bxo3HExiwb6ZVzU98R6sq" }, - "1Bxgjd2Lp7eeKERnDwMvx1": { + "1Bxo3HExdMFSLTMPVcYc6X": { "type": "text", "index": 2, "name": "Easily import designs from Figma and export components back to Figma, ensuring seamless collaboration between UIMix and your favorite design tool.", - "parent": "1Bxgjd2LR47ZN2eR7QaWqd" + "parent": "1Bxo3HExiwb6ZVzU98R6sq" }, - "1Bxgjd2LsSh4vyLn6chfVb": { + "1Bxo3HExY5uNzEBKy2a9aA": { "type": "frame", "index": 3, "name": "Frame", - "parent": "1Bxgjd2HpmZbQkteJnQeea" + "parent": "1Bxo3HEwtXADmSCS9Hweu7" }, - "1Bxgjd2LfkkmXUn6TxdiyT": { + "1Bxo3HExcUxqKW6frAWW7e": { "type": "text", "index": 0, "name": "Open Source", - "parent": "1Bxgjd2LsSh4vyLn6chfVb" + "parent": "1Bxo3HExY5uNzEBKy2a9aA" }, - "1Bxgjd2LkRJ4c87sxLRZUJ": { + "1Bxo3HExrRFKPjm2cg2edK": { "type": "text", "index": 1, "name": "UIMix's open-source editor and backend promote community-driven development and offer extensive customization options. Self-host both components for greater control over your design environment and data security.", - "parent": "1Bxgjd2LsSh4vyLn6chfVb" + "parent": "1Bxo3HExY5uNzEBKy2a9aA" }, - "1Bxgjd2LsBJUQg8u6Zxa4w": { + "1Bxo3HExvAGJ5UnxKHVuhf": { "type": "frame", "index": 2, "name": "Frame 3", - "parent": "1Bxgjd2LsSh4vyLn6chfVb" + "parent": "1Bxo3HExY5uNzEBKy2a9aA" }, - "1Bxgjd2LozA1kTiA2hZfzi": { + "1Bxo3HExwSWdzg15ajE1Sx": { "type": "text", "index": 0, "name": "Explore GitHub repo", - "parent": "1Bxgjd2LsBJUQg8u6Zxa4w" + "parent": "1Bxo3HExvAGJ5UnxKHVuhf" }, - "1Bxgjd2M3XuMTDDuXeuVoV": { + "1Bxo3HEyCLxpuhsdxiDJkC": { "type": "text", "index": 3, "name": "How It Works", - "parent": "1Bxgjd2LsSh4vyLn6chfVb" + "parent": "1Bxo3HExY5uNzEBKy2a9aA" }, - "1Bxgjd2M2XaxGrqZ3uRpzz": { + "1Bxo3HEy45S1JFzvwRtvFv": { "type": "frame", "index": 4, "name": "Frame", - "parent": "1Bxgjd2LsSh4vyLn6chfVb" + "parent": "1Bxo3HExY5uNzEBKy2a9aA" }, - "1Bxgjd2M3p7eQZVRTTjFmh": { + "1Bxo3HEy1kp3j6SxRPYHaG": { "type": "frame", "index": 0, "name": "Frame", - "parent": "1Bxgjd2M2XaxGrqZ3uRpzz" + "parent": "1Bxo3HEy45S1JFzvwRtvFv" }, - "1Bxgjd2M2tskb4i8ULpX3i": { + "1Bxo3HEyDfttCvoiT5sgKk": { "type": "text", "index": 0, "name": "A. Start Your Project", - "parent": "1Bxgjd2M3p7eQZVRTTjFmh" + "parent": "1Bxo3HEy1kp3j6SxRPYHaG" }, - "1Bxgjd2M2sMYQDHckZhtDh": { + "1Bxo3HEy7wSYt25brVBwyB": { "type": "text", "index": 1, "name": "Sign up for a free account or log in. Create a new project or import an existing Figma design. Organize your components and design tokens in the user-friendly interface.", - "parent": "1Bxgjd2M3p7eQZVRTTjFmh" + "parent": "1Bxo3HEy1kp3j6SxRPYHaG" }, - "1Bxgjd2Lu73xjDu4xfiDmo": { + "1Bxo3HEyB553C1vqqpMqhK": { "type": "frame", "index": 1, "name": "Frame", - "parent": "1Bxgjd2M2XaxGrqZ3uRpzz" + "parent": "1Bxo3HEy45S1JFzvwRtvFv" }, - "1Bxgjd2M2mwyQPNN3v57qu": { + "1Bxo3HEyBV3j3MsYrxGuaD": { "type": "text", "index": 0, "name": "B. Design & Develop", - "parent": "1Bxgjd2Lu73xjDu4xfiDmo" + "parent": "1Bxo3HEyB553C1vqqpMqhK" }, - "1Bxgjd2MFHpDTi88GvPwmD": { + "1Bxo3HEy6tXw2CotSaPrTC": { "type": "text", "index": 1, "name": "Utilize Figma-like editing tools to create and modify designs. Seamlessly import React components into your UIMix project. Leverage AI assistance to efficiently generate and refine your content.", - "parent": "1Bxgjd2Lu73xjDu4xfiDmo" + "parent": "1Bxo3HEyB553C1vqqpMqhK" }, - "1Bxgjd2MDUGSz1cdjsrfVh": { + "1Bxo3HEyCmXtfM725vndsS": { "type": "frame", "index": 2, "name": "Frame", - "parent": "1Bxgjd2M2XaxGrqZ3uRpzz" + "parent": "1Bxo3HEy45S1JFzvwRtvFv" }, - "1Bxgjd2MNKrDZHuGc1QvfH": { + "1Bxo3HExzmZJNUzCpQCF1e": { "type": "text", "index": 0, "name": "C. Collaborate & Publish", - "parent": "1Bxgjd2MDUGSz1cdjsrfVh" + "parent": "1Bxo3HEyCmXtfM725vndsS" }, - "1Bxgjd2MKP2zGxJR89UvsU": { + "1Bxo3HEyNApucEKERgGCSC": { "type": "text", "index": 1, "name": "Collaborate using the online editor or work offline for an optimized development experience. Integrate with GitHub for streamlined version control. Easily import UIMix components into React apps or export final designs back to Figma.", - "parent": "1Bxgjd2MDUGSz1cdjsrfVh" + "parent": "1Bxo3HEyCmXtfM725vndsS" }, - "1Bxgjd2MWE64QrwWr1qGEZ": { + "1Bxo3HEyLvryZ4ztLa7J2J": { "type": "frame", "index": 4, "name": "Frame 21", - "parent": "1Bxgjd2HpmZbQkteJnQeea" + "parent": "1Bxo3HEwtXADmSCS9Hweu7" }, - "1Bxgjd2MdATnuH8GA2PgkB": { + "1Bxo3HEyLzHAd2RpycDCCd": { "type": "image", "index": 0, "name": "image 4", - "parent": "1Bxgjd2MWE64QrwWr1qGEZ" + "parent": "1Bxo3HEyLvryZ4ztLa7J2J" }, - "1Bxgjd2MmEaW2gY8rSvhqe": { + "1Bxo3HEyLfuDY7fUvnThJF": { "type": "text", "index": 1, "name": "Ready to revolutionize your web design workflow?", - "parent": "1Bxgjd2MWE64QrwWr1qGEZ" + "parent": "1Bxo3HEyLvryZ4ztLa7J2J" }, - "1Bxgjd2MrvGfrHMjd7Ydtz": { + "1Bxo3HEyTnF7hNTpmHTRnU": { "type": "frame", "index": 2, "name": "Frame 20", - "parent": "1Bxgjd2MWE64QrwWr1qGEZ" + "parent": "1Bxo3HEyLvryZ4ztLa7J2J" }, - "1Bxgjd2MiiFs1D5m4bQ5eM": { + "1Bxo3HEyKyCGPjUXGwKXPg": { "type": "frame", "index": 0, "name": "Frame 2", - "parent": "1Bxgjd2MrvGfrHMjd7Ydtz" + "parent": "1Bxo3HEyTnF7hNTpmHTRnU" }, - "1Bxgjd2MkEWQ1gmUuo6DUD": { + "1Bxo3HEyLzPs1dsrfpGm7P": { "type": "text", "index": 0, "name": "Get Early Access", - "parent": "1Bxgjd2MiiFs1D5m4bQ5eM" + "parent": "1Bxo3HEyKyCGPjUXGwKXPg" }, - "1Bxgjd2MkDAbitUvfHaWpu": { + "1Bxo3HEyJp9quCTUPPATdP": { "type": "variant", "index": 1, "condition": { "type": "maxWidth", "value": 767 }, - "parent": "1Bxgjd2Hh7WyMA2CEtKm9d" + "parent": "1Bxo3HEwn4znsQb9rHgYgM" } }, "styles": { - "1Bxgjd2GvBdm89R8WBFJPQ": { + "1Bxo3HEwek7vmCw1B2sgBJ": { "width": "hug", "height": "hug", "svgContent": "\n\n\n\n\n\n" }, - "1Bxgjd2H7R7GJZ5jovTL5f": { + "1Bxo3HEwXFDzty6arQDSpy": { "hidden": false, "width": "hug", "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, + "color": "#1f2937", "textContent": "UIMix", "fontFamily": "Satoshi", "fontWeight": 900, @@ -519,7 +519,7 @@ "textHorizontalAlign": "start", "textVerticalAlign": "center" }, - "1Bxgjd2Grm181c4DYhQYjp": { + "1Bxo3HEwY3t3tTwgLbPECS": { "hidden": false, "position": { "left": 48, "top": 24 }, "width": "hug", @@ -542,12 +542,12 @@ "paddingBottom": 0, "paddingLeft": 0 }, - "1Bxgjd2HBoXcheeopEHoCF": { + "1Bxo3HEwthyWCNjUwpu1Hq": { "hidden": false, "width": "hug", "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, + "color": "#1f2937", "textContent": "Sign In", "fontFamily": "Satoshi", "fontWeight": 700, @@ -557,7 +557,7 @@ "textHorizontalAlign": "center", "textVerticalAlign": "start" }, - "1Bxgjd2HFnxQS1XSx3pBaP": { + "1Bxo3HEwhWPZdYDr7JiHUb": { "hidden": false, "width": "hug", "height": "hug", @@ -587,12 +587,12 @@ "paddingBottom": 6.5, "paddingLeft": 14.5 }, - "1Bxgjd2HbVKGFGpYmvpdU1": { + "1Bxo3HEwwgrxVMSP9K5EL5": { "hidden": false, "width": "hug", "height": "hug", - "fills": [{ "solid": "#ffffff" }], "opacity": 1, + "color": "#ffffff", "textContent": "Get Early Access", "fontFamily": "Satoshi", "fontWeight": 900, @@ -602,7 +602,7 @@ "textHorizontalAlign": "center", "textVerticalAlign": "start" }, - "1Bxgjd2HQdNrKsNYFsXGKW": { + "1Bxo3HEwvsjGzuMANGc1pb": { "hidden": false, "width": "hug", "height": "hug", @@ -628,7 +628,7 @@ "paddingBottom": 8, "paddingLeft": 16 }, - "1Bxgjd2GxjmgZ4c3x3UJN7": { + "1Bxo3HEwcsjzR6Qnr2YbWL": { "hidden": false, "position": { "top": 16, "right": 47.99984677551083 }, "width": 247, @@ -651,12 +651,12 @@ "paddingBottom": 0, "paddingLeft": 0 }, - "1Bxgjd2HbT1nQwSy6zZxUw": { + "1Bxo3HEwtRdAqFWrq9g8PK": { "hidden": false, "width": "hug", "height": "hug", - "fills": [{ "solid": "#000000" }], "opacity": 1, + "color": "#000000", "textContent": "Features", "fontFamily": "Satoshi", "fontWeight": 500, @@ -666,12 +666,12 @@ "textHorizontalAlign": "start", "textVerticalAlign": "center" }, - "1Bxgjd2HcjnH7PQYD5WQwo": { + "1Bxo3HEwteGJZLPiqQSj7k": { "hidden": false, "width": "hug", "height": "hug", - "fills": [{ "solid": "#000000" }], "opacity": 1, + "color": "#000000", "textContent": "Pricing", "fontFamily": "Satoshi", "fontWeight": 500, @@ -681,12 +681,12 @@ "textHorizontalAlign": "start", "textVerticalAlign": "center" }, - "1Bxgjd2HeT8Ze5Qva3ifHy": { + "1Bxo3HEwmbZjnxbBGcdMkw": { "hidden": false, "width": "hug", "height": "hug", - "fills": [{ "solid": "#000000" }], "opacity": 1, + "color": "#000000", "textContent": "Docs", "fontFamily": "Satoshi", "fontWeight": 500, @@ -696,12 +696,12 @@ "textHorizontalAlign": "start", "textVerticalAlign": "center" }, - "1Bxgjd2HWA3RusdmbQY5cH": { + "1Bxo3HEwqNPDqjSBqtQ983": { "hidden": false, "width": "hug", "height": "hug", - "fills": [{ "solid": "#000000" }], "opacity": 1, + "color": "#000000", "textContent": "GitHub", "fontFamily": "Satoshi", "fontWeight": 500, @@ -711,7 +711,7 @@ "textHorizontalAlign": "start", "textVerticalAlign": "center" }, - "1Bxgjd2HTnzLd1JT1MGHT1": { + "1Bxo3HEwm1XFFakST4ePXZ": { "hidden": false, "width": "hug", "height": "hug", @@ -733,7 +733,7 @@ "paddingBottom": 0, "paddingLeft": 0 }, - "1Bxgjd2GdNHeFAJpsakdh6": { + "1Bxo3HEwjFCrCXwG8GXA2B": { "position": { "left": 20, "top": 20 }, "width": 1183, "height": 72, @@ -744,11 +744,11 @@ "paddingTop": 24, "paddingBottom": 24 }, - "1Bxgjd2HmAVYzkZzR5gMmQ": { + "1Bxo3HEwkbso7LRYCMWB7p": { "width": { "min": 0 }, - "mainComponent": "1Bxgjd2GQ86kNMXigGvXUt" + "mainComponent": "1Bxo3HEwaoSRm3fbP6iw7h" }, - "1Bxgjd2Hwz6BzxErwEg15A": { + "1Bxo3HEwyrToCtknPhsJej": { "hidden": false, "position": { "left": 343, "top": 45 }, "width": 750, @@ -762,7 +762,7 @@ "shadows": [], "imageHash": "XMIUgNq9VxH1FiVdc4M95ZcfqaSP3aF07GtbcGHi9AY" }, - "1Bxgjd2J8aPXCQfLxVmvX6": { + "1Bxo3HEwpZt5nDm1HVyLmC": { "locked": true, "position": { "left": 0, "top": 0, "right": 0 }, "width": { "min": 0 }, @@ -771,14 +771,14 @@ "layout": "flex", "flexJustify": "center" }, - "1Bxgjd2JErKK24jJUPhYv1": { + "1Bxo3HEwwvuYhjctEipp32": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#1F2937" }], "opacity": 1, "marginTop": 96, "marginBottom": 48, + "color": "#1F2937", "textContent": "Revolutionize Your Web Design\nand Development Workflow", "fontFamily": "Satoshi", "fontWeight": 900, @@ -788,13 +788,13 @@ "textHorizontalAlign": "center", "textVerticalAlign": "start" }, - "1Bxgjd2JsRnWBA8gT2YgSm": { + "1Bxo3HEx6YseDN2xgBmS66": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#6b7280" }], "opacity": 1, "marginBottom": 48, + "color": "#6b7280", "textContent": "UIMix is a open-source design tool that combines intuitive editing,\nReact integration, AI assistance, and advanced design tokens.", "fontFamily": "Inter", "fontWeight": 400, @@ -804,12 +804,12 @@ "textHorizontalAlign": "center", "textVerticalAlign": "start" }, - "1Bxgjd2JkjKVV8KWfCdTK2": { + "1Bxo3HEx1N8rAiDyenFNpA": { "hidden": false, "width": "hug", "height": "hug", - "fills": [{ "solid": "#ffffff" }], "opacity": 1, + "color": "#ffffff", "textContent": "Get Early Access", "fontFamily": "Satoshi", "fontWeight": 900, @@ -819,7 +819,7 @@ "textHorizontalAlign": "center", "textVerticalAlign": "start" }, - "1Bxgjd2Jpe5QFt4omGt5mm": { + "1Bxo3HExB7eyPeh8xMrGkb": { "hidden": false, "width": "hug", "height": "hug", @@ -845,7 +845,7 @@ "paddingBottom": 12, "paddingLeft": 24 }, - "1Bxgjd2Jpk4oRFruHrgBdy": { + "1Bxo3HEx9fRua5T5NiRPeF": { "hidden": false, "width": "hug", "height": "hug", @@ -868,8 +868,9 @@ "paddingBottom": 0, "paddingLeft": 0 }, - "1Bxgjd2K3o3NQ78FVmRvH9": { + "1Bxo3HEx6a6KL4AThx8p68": { "hidden": false, + "position": { "left": 360, "top": 581 }, "width": { "min": 0, "max": 720 }, "height": "hug", "topLeftRadius": 10, @@ -890,7 +891,7 @@ "marginBottom": 64, "imageHash": "1yKf5NvwGW-XtLSBDlS3GqZfbEGnLshgQrjyQJImqaM" }, - "1Bxgjd2J1vrHmy4CSKuoyf": { + "1Bxo3HEwy1ZiDyiEyyXEmg": { "width": { "min": 0 }, "height": "hug", "layout": "flex", @@ -899,12 +900,12 @@ "paddingRight": 24, "paddingLeft": 24 }, - "1Bxgjd2KWa4rL2LcZxDnDx": { + "1Bxo3HEwzh8eNzHqYrtxqu": { "width": "hug", "height": "hug", "svgContent": "\n\n\n" }, - "1Bxgjd2KD3XPnWWxv76R1i": { + "1Bxo3HEx2rwBxKWA3kBjX9": { "hidden": false, "width": "hug", "height": "hug", @@ -927,12 +928,12 @@ "paddingBottom": 4, "paddingLeft": 4 }, - "1Bxgjd2Kd345sYFBryN13n": { + "1Bxo3HExC2BiqrEAc5e8Sm": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, + "color": "#1f2937", "textContent": "Figma-like Intuitive Editing", "fontFamily": "Satoshi", "fontWeight": 700, @@ -942,12 +943,12 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjd2KbFo8z98m6KbX1u": { + "1Bxo3HExAJL3CYVM9TimQG": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#4b5563" }], "opacity": 1, + "color": "#4b5563", "textContent": "Experience a user-friendly interface with familiar design tools, making it easy for both beginners and professionals to create stunning web designs.", "fontFamily": "Inter", "fontWeight": 400, @@ -957,7 +958,7 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjd2KMDvofAyH4423We": { + "1Bxo3HEx89eUwtrPyLhzKC": { "hidden": false, "width": { "min": 0 }, "height": { "min": 0 }, @@ -980,12 +981,12 @@ "paddingBottom": 20, "paddingLeft": 20 }, - "1Bxgjd2KmRGVs7iHY4dWbt": { + "1Bxo3HExEmYfgSkkVWj7W5": { "width": "hug", "height": "hug", "svgContent": "\n\n\n" }, - "1Bxgjd2Kb4NVVY7WWSxnwY": { + "1Bxo3HExLEKNw7GKfU3REo": { "hidden": false, "width": "hug", "height": "hug", @@ -1008,12 +1009,12 @@ "paddingBottom": 4, "paddingLeft": 4 }, - "1Bxgjd2KuNkZjkJ7o4j5xM": { + "1Bxo3HExHiAB5wnDk5xJQM": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, + "color": "#1f2937", "textContent": "React Components Import/Export", "fontFamily": "Satoshi", "fontWeight": 700, @@ -1023,12 +1024,12 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjd2KwYDMjpoy2yLuJs": { + "1Bxo3HExEgfoomc1XjmTgt": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#4b5563" }], "opacity": 1, + "color": "#4b5563", "textContent": "Seamlessly work with React components, boosting your design-to-development workflow.\n", "fontFamily": "Inter", "fontWeight": 400, @@ -1038,7 +1039,7 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjd2KUe2tk7M4mrCwSN": { + "1Bxo3HExGdhQnocMPaDFYL": { "hidden": false, "width": { "min": 0 }, "height": { "min": 0 }, @@ -1061,12 +1062,12 @@ "paddingBottom": 20, "paddingLeft": 20 }, - "1Bxgjd2L5ww7kehFWqYu41": { + "1Bxo3HExL8Y6FZLkQCoEJ6": { "width": "hug", "height": "hug", "svgContent": "\n\n\n" }, - "1Bxgjd2L3h1fqKneUN5sLb": { + "1Bxo3HExMgU2TQdJLPNfJv": { "hidden": false, "width": "hug", "height": "hug", @@ -1089,12 +1090,12 @@ "paddingBottom": 4, "paddingLeft": 4 }, - "1Bxgjd2L96wvsHKQVY4sT1": { + "1Bxo3HExS3khwbwp6Ye7gB": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, + "color": "#1f2937", "textContent": "Collaboration for Everyone", "fontFamily": "Satoshi", "fontWeight": 700, @@ -1104,12 +1105,12 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjd2L9pp3htkUcqb2UQ": { + "1Bxo3HExRfrnUCcSE8nNuY": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#4b5563" }], "opacity": 1, + "color": "#4b5563", "textContent": "Collaborate in real-time with your team, whether they're designers, developers, or stakeholders.\n", "fontFamily": "Inter", "fontWeight": 400, @@ -1119,7 +1120,7 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjd2KxQUN8RiCur3chD": { + "1Bxo3HExUMDMYJzACMpb9j": { "hidden": false, "width": { "min": 0 }, "height": { "min": 0 }, @@ -1142,12 +1143,12 @@ "paddingBottom": 20, "paddingLeft": 20 }, - "1Bxgjd2LQEExt28hFeqAAY": { + "1Bxo3HExKe9UTKM87i9Fhu": { "width": "hug", "height": "hug", "svgContent": "\n\n\n" }, - "1Bxgjd2LCzZ9Q1qAs4ooBy": { + "1Bxo3HExPWJ8kLWp3rHWuU": { "hidden": false, "width": "hug", "height": "hug", @@ -1170,12 +1171,12 @@ "paddingBottom": 4, "paddingLeft": 4 }, - "1Bxgjd2LbpNsVWPCfQuPWS": { + "1Bxo3HExhRLLwNRvKpVW5q": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, + "color": "#1f2937", "textContent": "Offline Editing Experience", "fontFamily": "Satoshi", "fontWeight": 700, @@ -1185,12 +1186,12 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjd2LSjE1qSYvW62agx": { + "1Bxo3HExdwKaRmChDADoHD": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#4b5563" }], "opacity": 1, + "color": "#4b5563", "textContent": "Benefit from UIMix's seamless offline editing, offering local file management, hot reloading, and an uninterrupted workflow.\n\n", "fontFamily": "Inter", "fontWeight": 400, @@ -1200,7 +1201,7 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjd2LHVPjzc8ZTzCPyf": { + "1Bxo3HExU7nx7GoXqbYx8m": { "hidden": false, "width": { "min": 0 }, "height": { "min": 0 }, @@ -1223,12 +1224,12 @@ "paddingBottom": 20, "paddingLeft": 20 }, - "1Bxgjd2LWJLH2eDySgN2q2": { + "1Bxo3HExe188r4M5oNJUob": { "width": "hug", "height": "hug", "svgContent": "\n\n\n\n" }, - "1Bxgjd2Lafu7CCNnWybbQi": { + "1Bxo3HExg1jUixnT5t3Lxn": { "hidden": false, "width": "hug", "height": "hug", @@ -1251,12 +1252,12 @@ "paddingBottom": 4, "paddingLeft": 4 }, - "1Bxgjd2Lagwb9ZoP1Y8KRx": { + "1Bxo3HExiEusDEmD1uaiyz": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, + "color": "#1f2937", "textContent": "AI Assistance", "fontFamily": "Satoshi", "fontWeight": 700, @@ -1266,12 +1267,12 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjd2LWpGABGccTH6pVq": { + "1Bxo3HExf3sLDf5pV5hgnu": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#4b5563" }], "opacity": 1, + "color": "#4b5563", "textContent": "Supercharge your design process with AI-generated and refined text contents, as well as AI-generated images that fit perfectly into your project.", "fontFamily": "Inter", "fontWeight": 400, @@ -1281,7 +1282,7 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjd2LcifAyxogLn9pyj": { + "1Bxo3HExccQsJa3HV9Q2Z8": { "hidden": false, "width": { "min": 0 }, "height": { "min": 0 }, @@ -1304,12 +1305,12 @@ "paddingBottom": 20, "paddingLeft": 20 }, - "1Bxgjd2LcowyLm3PaumMJN": { + "1Bxo3HExiCEw3ZkSjfaEgM": { "width": "hug", "height": "hug", "svgContent": "\n\n\n" }, - "1Bxgjd2Le4Mvko2sXpkvjf": { + "1Bxo3HExXQoLiWv5usTbyb": { "hidden": false, "width": "hug", "height": "hug", @@ -1332,12 +1333,12 @@ "paddingBottom": 4, "paddingLeft": 4 }, - "1Bxgjd2LgGt71Wy94T2ocq": { + "1Bxo3HExWZmVEFUeCcztSq": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, + "color": "#1f2937", "textContent": "Figma Integration", "fontFamily": "Satoshi", "fontWeight": 700, @@ -1347,12 +1348,12 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjd2Lp7eeKERnDwMvx1": { + "1Bxo3HExdMFSLTMPVcYc6X": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#4b5563" }], "opacity": 1, + "color": "#4b5563", "textContent": "Easily import designs from Figma and export components back to Figma, ensuring seamless collaboration between UIMix and your favorite design tool.", "fontFamily": "Inter", "fontWeight": 400, @@ -1362,7 +1363,7 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjd2LR47ZN2eR7QaWqd": { + "1Bxo3HExiwb6ZVzU98R6sq": { "hidden": false, "width": { "min": 0 }, "height": { "min": 0 }, @@ -1385,7 +1386,7 @@ "paddingBottom": 20, "paddingLeft": 20 }, - "1Bxgjd2KNNpy4g9bAHsBHD": { + "1Bxo3HEx7S9n267UsT86np": { "hidden": false, "width": { "min": 0, "max": 1200 }, "height": { "min": 0 }, @@ -1408,8 +1409,8 @@ "paddingBottom": 0, "paddingLeft": 0 }, - "1Bxgjd2MkDAbitUvfHaWpu:1Bxgjd2KNNpy4g9bAHsBHD": { "gridColumnCount": 1 }, - "1Bxgjd2Jv7tWS8aoJvnETh": { + "1Bxo3HEyJp9quCTUPPATdP:1Bxo3HEx7S9n267UsT86np": { "gridColumnCount": 1 }, + "1Bxo3HEx3qhvbF8h4NTX6k": { "hidden": false, "width": { "min": 0 }, "height": "hug", @@ -1432,13 +1433,13 @@ "paddingBottom": 48, "paddingLeft": 24 }, - "1Bxgjd2LfkkmXUn6TxdiyT": { + "1Bxo3HExcUxqKW6frAWW7e": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, "marginBottom": 24, + "color": "#1f2937", "textContent": "Open Source", "fontFamily": "Satoshi", "fontWeight": 900, @@ -1448,13 +1449,13 @@ "textHorizontalAlign": "center", "textVerticalAlign": "start" }, - "1Bxgjd2LkRJ4c87sxLRZUJ": { + "1Bxo3HExrRFKPjm2cg2edK": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#4b5563" }], "opacity": 1, "marginBottom": 48, + "color": "#4b5563", "textContent": "UIMix's open-source editor and backend promote community-driven development and offer extensive customization options.\nSelf-host both components for greater control over your design environment and data security.", "fontFamily": "Inter", "fontWeight": 400, @@ -1464,12 +1465,12 @@ "textHorizontalAlign": "center", "textVerticalAlign": "start" }, - "1Bxgjd2LozA1kTiA2hZfzi": { + "1Bxo3HExwSWdzg15ajE1Sx": { "hidden": false, "width": "hug", "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, + "color": "#1f2937", "textContent": "Explore GitHub repo", "fontFamily": "Satoshi", "fontWeight": 700, @@ -1479,7 +1480,7 @@ "textHorizontalAlign": "center", "textVerticalAlign": "start" }, - "1Bxgjd2LsBJUQg8u6Zxa4w": { + "1Bxo3HExvAGJ5UnxKHVuhf": { "hidden": false, "width": "hug", "height": "hug", @@ -1510,13 +1511,13 @@ "paddingBottom": 10.5, "paddingLeft": 22.5 }, - "1Bxgjd2M3XuMTDDuXeuVoV": { + "1Bxo3HEyCLxpuhsdxiDJkC": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, "marginBottom": 72, + "color": "#1f2937", "textContent": "How It Works", "fontFamily": "Satoshi", "fontWeight": 900, @@ -1526,13 +1527,13 @@ "textHorizontalAlign": "center", "textVerticalAlign": "start" }, - "1Bxgjd2M2tskb4i8ULpX3i": { + "1Bxo3HEyDfttCvoiT5sgKk": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, "marginBottom": 26, + "color": "#1f2937", "textContent": "A. Start Your Project", "fontFamily": "Satoshi", "fontWeight": 700, @@ -1542,12 +1543,12 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjd2M2sMYQDHckZhtDh": { + "1Bxo3HEy7wSYt25brVBwyB": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#4b5563" }], "opacity": 1, + "color": "#4b5563", "textContent": "Sign up for a free account or log in.\nCreate a new project or import an existing Figma design.\nOrganize your components and design tokens in the user-friendly interface.", "fontFamily": "Inter", "fontWeight": 400, @@ -1557,19 +1558,19 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjd2M3p7eQZVRTTjFmh": { + "1Bxo3HEy1kp3j6SxRPYHaG": { "width": { "min": 0 }, "height": "hug", "layout": "flex", "flexDirection": "y" }, - "1Bxgjd2M2mwyQPNN3v57qu": { + "1Bxo3HEyBV3j3MsYrxGuaD": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, "marginBottom": 20, + "color": "#1f2937", "textContent": "B. Design & Develop", "fontFamily": "Satoshi", "fontWeight": 700, @@ -1579,12 +1580,12 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjd2MFHpDTi88GvPwmD": { + "1Bxo3HEy6tXw2CotSaPrTC": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#4b5563" }], "opacity": 1, + "color": "#4b5563", "textContent": "Utilize Figma-like editing tools to create and modify designs.\nSeamlessly import React components into your UIMix project.\nLeverage AI assistance to efficiently generate and refine your content.", "fontFamily": "Inter", "fontWeight": 400, @@ -1594,19 +1595,19 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjd2Lu73xjDu4xfiDmo": { + "1Bxo3HEyB553C1vqqpMqhK": { "width": { "min": 0 }, "height": "hug", "layout": "flex", "flexDirection": "y" }, - "1Bxgjd2MNKrDZHuGc1QvfH": { + "1Bxo3HExzmZJNUzCpQCF1e": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, "marginBottom": 20, + "color": "#1f2937", "textContent": "C. Collaborate & Publish", "fontFamily": "Satoshi", "fontWeight": 700, @@ -1616,12 +1617,12 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjd2MKP2zGxJR89UvsU": { + "1Bxo3HEyNApucEKERgGCSC": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#4b5563" }], "opacity": 1, + "color": "#4b5563", "textContent": "Collaborate using the online editor or work offline for an optimized development experience.\nIntegrate with GitHub for streamlined version control.\nEasily import UIMix components into React apps or export final designs back to Figma.", "fontFamily": "Inter", "fontWeight": 400, @@ -1631,13 +1632,13 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjd2MDUGSz1cdjsrfVh": { + "1Bxo3HEyCmXtfM725vndsS": { "width": { "min": 0 }, "height": "hug", "layout": "flex", "flexDirection": "y" }, - "1Bxgjd2M2XaxGrqZ3uRpzz": { + "1Bxo3HEy45S1JFzvwRtvFv": { "width": { "min": 0, "max": 1280 }, "height": "hug", "layout": "flex", @@ -1645,7 +1646,7 @@ "rowGap": 24, "columnGap": 24 }, - "1Bxgjd2LsSh4vyLn6chfVb": { + "1Bxo3HExY5uNzEBKy2a9aA": { "width": { "min": 0 }, "height": "hug", "layout": "flex", @@ -1656,7 +1657,7 @@ "paddingBottom": 128, "paddingLeft": 24 }, - "1Bxgjd2MdATnuH8GA2PgkB": { + "1Bxo3HEyLzHAd2RpycDCCd": { "hidden": false, "position": { "left": -23, "top": -368 }, "width": 1500, @@ -1670,13 +1671,13 @@ "shadows": [], "imageHash": "DGLFxM8eMqBjHUQYEekprnB3xC-f5uvLxL7x2odVAEU" }, - "1Bxgjd2MmEaW2gY8rSvhqe": { + "1Bxo3HEyLfuDY7fUvnThJF": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#ffffff" }], "opacity": 1, "marginBottom": 48, + "color": "#ffffff", "textContent": "Ready to revolutionize your web design workflow?", "fontFamily": "Satoshi", "fontWeight": 900, @@ -1686,12 +1687,12 @@ "textHorizontalAlign": "center", "textVerticalAlign": "start" }, - "1Bxgjd2MkEWQ1gmUuo6DUD": { + "1Bxo3HEyLzPs1dsrfpGm7P": { "hidden": false, "width": "hug", "height": "hug", - "fills": [{ "solid": "#3b82f6" }], "opacity": 1, + "color": "#3b82f6", "textContent": "Get Early Access", "fontFamily": "Satoshi", "fontWeight": 900, @@ -1701,7 +1702,7 @@ "textHorizontalAlign": "center", "textVerticalAlign": "start" }, - "1Bxgjd2MiiFs1D5m4bQ5eM": { + "1Bxo3HEyKyCGPjUXGwKXPg": { "hidden": false, "width": "hug", "height": "hug", @@ -1727,7 +1728,7 @@ "paddingBottom": 12, "paddingLeft": 24 }, - "1Bxgjd2MrvGfrHMjd7Ydtz": { + "1Bxo3HEyTnF7hNTpmHTRnU": { "hidden": false, "width": "hug", "height": "hug", @@ -1752,7 +1753,7 @@ "paddingBottom": 0, "paddingLeft": 0 }, - "1Bxgjd2MWE64QrwWr1qGEZ": { + "1Bxo3HEyLvryZ4ztLa7J2J": { "hidden": false, "width": { "min": 0 }, "height": "hug", @@ -1769,7 +1770,7 @@ "paddingTop": 96, "paddingBottom": 96 }, - "1Bxgjd2HpmZbQkteJnQeea": { + "1Bxo3HEwtXADmSCS9Hweu7": { "hidden": false, "position": { "left": 20, "top": 200 }, "width": 1440, @@ -1786,7 +1787,7 @@ "flexDirection": "y", "flexAlign": "center" }, - "1Bxgjd2MkDAbitUvfHaWpu": { + "1Bxo3HEyJp9quCTUPPATdP": { "position": { "left": 1500, "top": 200 }, "width": 720 } diff --git a/packages/model/src/models/__fixtures__/project.uimixproject b/packages/model/src/models/__fixtures__/project.uimixproject index 80c15865..3b48a9b3 100644 --- a/packages/model/src/models/__fixtures__/project.uimixproject +++ b/packages/model/src/models/__fixtures__/project.uimixproject @@ -7,34 +7,34 @@ "name": "src/button", "parent": "project" }, - "1Bxgjgs6sCdp9Np51fcYL6": { + "1Bxo3C6pTEEXvWVaps2hMw": { "type": "component", "index": 0, "name": "Button", "parent": "v4qeOqqGkIYPNtJL8baUycDvv-NSbsgGzexl_3LR9Fo" }, - "1Bxgjgs74468hXW4Lsmyro": { + "1Bxo3C6pa9C96vm68m18nx": { "type": "frame", "index": 0, - "parent": "1Bxgjgs6sCdp9Np51fcYL6" + "parent": "1Bxo3C6pTEEXvWVaps2hMw" }, - "1Bxgjgs78B7Q9WygLinw8N": { + "1Bxo3C6pbVJspdKo4tuhLV": { "type": "text", "index": 0, "name": "Text", - "parent": "1Bxgjgs74468hXW4Lsmyro" + "parent": "1Bxo3C6pa9C96vm68m18nx" }, - "1Bxgjgs6uDAKz2qq16i1NL": { + "1Bxo3C6pqc4xbTk8Z2drp1": { "type": "variant", "index": 1, "condition": { "type": "hover" }, - "parent": "1Bxgjgs6sCdp9Np51fcYL6" + "parent": "1Bxo3C6pTEEXvWVaps2hMw" }, - "1Bxgjgs75jx7aNfgBLMn8c": { + "1Bxo3C6pvojtTetfkk3huT": { "type": "variant", "index": 2, "condition": { "type": "maxWidth", "value": 767 }, - "parent": "1Bxgjgs6sCdp9Np51fcYL6" + "parent": "1Bxo3C6pTEEXvWVaps2hMw" }, "RBRbRka6AM86_dEkuICiP0cnnwfa0NE5p7Js1TESPPM": { "type": "page", @@ -42,188 +42,188 @@ "name": "src/components", "parent": "project" }, - "1Bxgjgs75hMvadhoSBw4rj": { + "1Bxo3C6pxb5nNRiefxWSxd": { "type": "component", "index": 0, "name": "Stack", "parent": "RBRbRka6AM86_dEkuICiP0cnnwfa0NE5p7Js1TESPPM" }, - "1Bxgjgs6xzDgHWiWd7tyjF": { + "1Bxo3C6pwdpFFY9hnHbfti": { "type": "frame", "index": 0, - "parent": "1Bxgjgs75hMvadhoSBw4rj" + "parent": "1Bxo3C6pxb5nNRiefxWSxd" }, - "1Bxgjgs6t3QbM3uq6iA3ix": { + "1Bxo3C6q5CsPDw71dZmJW5": { "type": "frame", "index": 0, "name": "Item 0", - "parent": "1Bxgjgs6xzDgHWiWd7tyjF" + "parent": "1Bxo3C6pwdpFFY9hnHbfti" }, - "1Bxgjgs72smms8A9Pjz3Zd": { + "1Bxo3C6q4W6uYwxiTXCL8U": { "type": "frame", "index": 1, "name": "Item 1", - "parent": "1Bxgjgs6xzDgHWiWd7tyjF" + "parent": "1Bxo3C6pwdpFFY9hnHbfti" }, - "1Bxgjgs71H6rJEo5phXEEv": { + "1Bxo3C6qHa6aMpCgDtYBdx": { "type": "frame", "index": 2, "name": "Hidden Item", - "parent": "1Bxgjgs6xzDgHWiWd7tyjF" + "parent": "1Bxo3C6pwdpFFY9hnHbfti" }, - "1Bxgjgs7FTZaV7jVq7sTa9": { + "1Bxo3C6qLz7gdZgaGrNuRe": { "type": "frame", "index": 3, "name": "Item 2", - "parent": "1Bxgjgs6xzDgHWiWd7tyjF" + "parent": "1Bxo3C6pwdpFFY9hnHbfti" }, - "1Bxgjgs7KPs4W48eRiv6Nt": { + "1Bxo3C6qLFwDcz4KpdL3U9": { "type": "text", "index": 4, "name": "Text", - "parent": "1Bxgjgs6xzDgHWiWd7tyjF" + "parent": "1Bxo3C6pwdpFFY9hnHbfti" }, - "1Bxgjgs7FnK31vXBsavCrv": { + "1Bxo3C6qN64gYU4TjxC2if": { "type": "instance", "index": 5, "name": "Button", - "parent": "1Bxgjgs6xzDgHWiWd7tyjF" + "parent": "1Bxo3C6pwdpFFY9hnHbfti" }, - "1Bxgjgs7LtP5HkiMnqMdbq": { + "1Bxo3C6qejwmEDxYnZYZEY": { "type": "component", "index": 1, "name": "Page", "parent": "RBRbRka6AM86_dEkuICiP0cnnwfa0NE5p7Js1TESPPM" }, - "1Bxgjgs7MQ7TMPGiatLM8k": { + "1Bxo3C6qfV8LfTN9p731cN": { "type": "frame", "index": 0, - "parent": "1Bxgjgs7LtP5HkiMnqMdbq" + "parent": "1Bxo3C6qejwmEDxYnZYZEY" }, - "1Bxgjgs7GgYtwxcyAZD4he": { + "1Bxo3C6qY7WnohJCkr3eMv": { "type": "foreign", "index": 0, "name": "Header", - "parent": "1Bxgjgs7MQ7TMPGiatLM8k" + "parent": "1Bxo3C6qfV8LfTN9p731cN" }, - "1Bxgjgs78a1gqzQDDQuJYL": { + "1Bxo3C6qdMNKdMgmukbnc9": { "type": "frame", "index": 1, "name": "Frame", - "parent": "1Bxgjgs7MQ7TMPGiatLM8k" + "parent": "1Bxo3C6qfV8LfTN9p731cN" }, - "1Bxgjgs7FYYSZbbXtbLqBc": { + "1Bxo3C6qTXiqYV49t8Qadf": { "type": "foreign", "index": 0, "name": "Button", - "parent": "1Bxgjgs78a1gqzQDDQuJYL" + "parent": "1Bxo3C6qdMNKdMgmukbnc9" }, - "1Bxgjgs7HhEZjievv2PuAk": { + "1Bxo3C6qXVvsUXyAsaMmhW": { "type": "instance", "index": 1, "name": "Instance", - "parent": "1Bxgjgs78a1gqzQDDQuJYL" + "parent": "1Bxo3C6qdMNKdMgmukbnc9" }, - "1Bxgjgs7H4kVHE231YZi4r": { + "1Bxo3C6qu8s5yoCCir1e6V": { "type": "image", "index": 2, "name": "Image", - "parent": "1Bxgjgs78a1gqzQDDQuJYL" + "parent": "1Bxo3C6qdMNKdMgmukbnc9" }, - "1Bxgjgs7BRL3UmPLBcesrM": { + "1Bxo3C6qtdohAawrPuA17r": { "type": "instance", "index": 3, "name": "Stack", - "parent": "1Bxgjgs78a1gqzQDDQuJYL" + "parent": "1Bxo3C6qdMNKdMgmukbnc9" }, - "1Bxgjgs7LtBXJa9Pdvk1YE": { + "1Bxo3C6qoMVRdjkQmWuySH": { "type": "foreign", "index": 4, "name": "MUIButton", - "parent": "1Bxgjgs78a1gqzQDDQuJYL" + "parent": "1Bxo3C6qdMNKdMgmukbnc9" }, - "1Bxgjgs7DVpp12i6fyBE1X": { + "1Bxo3C6qkXC6fHzarkygcj": { "type": "variant", "index": 1, "condition": { "type": "maxWidth", "value": 767 }, - "parent": "1Bxgjgs7LtP5HkiMnqMdbq" + "parent": "1Bxo3C6qejwmEDxYnZYZEY" }, - "1Bxgjgs7HdMzLPSxH4SrCy": { + "1Bxo3C6qn2aLH46VJJ4hv3": { "type": "component", "index": 2, "name": "Card", "parent": "RBRbRka6AM86_dEkuICiP0cnnwfa0NE5p7Js1TESPPM" }, - "1Bxgjgs7FB3RchpL7L2Dci": { + "1Bxo3C6qpD8RvxoCkSuKLB": { "type": "frame", "index": 0, - "parent": "1Bxgjgs7HdMzLPSxH4SrCy" + "parent": "1Bxo3C6qn2aLH46VJJ4hv3" }, - "1Bxgjgs7MSq1dB1msbhSKh": { + "1Bxo3C6qhq3kVxjJcdgT9C": { "type": "frame", "index": 0, "name": "icon", - "parent": "1Bxgjgs7FB3RchpL7L2Dci" + "parent": "1Bxo3C6qpD8RvxoCkSuKLB" }, - "1Bxgjgs7T3CudFWxUkwgXQ": { + "1Bxo3C6qr5GhWfFUYAgb8Y": { "type": "svg", "index": 0, "name": "heroicons:code-bracket", - "parent": "1Bxgjgs7MSq1dB1msbhSKh" + "parent": "1Bxo3C6qhq3kVxjJcdgT9C" }, - "1Bxgjgs7RM3fZ5FYfm5aSm": { + "1Bxo3C6qjKhjS2ZGYFLjBq": { "type": "text", "index": 1, "name": "title", - "parent": "1Bxgjgs7FB3RchpL7L2Dci" + "parent": "1Bxo3C6qpD8RvxoCkSuKLB" }, - "1Bxgjgs7P7VbwRi3KxeN4i": { + "1Bxo3C6qwyg8hoBrLMEYF5": { "type": "text", "index": 2, "name": "description", - "parent": "1Bxgjgs7FB3RchpL7L2Dci" + "parent": "1Bxo3C6qpD8RvxoCkSuKLB" }, - "1Bxgjgs7P3Z3JD33a6jfqf": { + "1Bxo3C6rAqUfJWE7sRRodr": { "type": "frame", "index": 3, "name": "Frame", "parent": "RBRbRka6AM86_dEkuICiP0cnnwfa0NE5p7Js1TESPPM" }, - "1Bxgjgs7auRAwgdw9fvnRR": { + "1Bxo3C6r7LtVPvNQVogbJh": { "type": "frame", "index": 0, "name": "Stack", - "parent": "1Bxgjgs7P3Z3JD33a6jfqf" + "parent": "1Bxo3C6rAqUfJWE7sRRodr" }, - "1Bxgjgs7WeBSxLcYBRyrcD": { + "1Bxo3C6r3Pu37jwdLdVqxA": { "type": "frame", "index": 0, "name": "Item 0", - "parent": "1Bxgjgs7auRAwgdw9fvnRR" + "parent": "1Bxo3C6r7LtVPvNQVogbJh" }, - "1Bxgjgs7PvfnmhnhMVzpe5": { + "1Bxo3C6r2ifqN6yAj8YPcm": { "type": "frame", "index": 1, "name": "Item 1", - "parent": "1Bxgjgs7auRAwgdw9fvnRR" + "parent": "1Bxo3C6r7LtVPvNQVogbJh" }, - "1Bxgjgs7ce82EC47MCbVzQ": { + "1Bxo3C6r5rFgiudrDidbYB": { "type": "frame", "index": 2, "name": "Hidden Item", - "parent": "1Bxgjgs7auRAwgdw9fvnRR" + "parent": "1Bxo3C6r7LtVPvNQVogbJh" }, - "1Bxgjgs7WoxnJt3SXEAZxk": { + "1Bxo3C6qxVM8FswHN9dDfA": { "type": "frame", "index": 3, "name": "Item 2", - "parent": "1Bxgjgs7auRAwgdw9fvnRR" + "parent": "1Bxo3C6r7LtVPvNQVogbJh" }, - "1Bxgjgs7NwKMv6y6xbTFsC": { + "1Bxo3C6r6zpWfSURmXzF3Y": { "type": "text", "index": 4, "name": "Text", - "parent": "1Bxgjgs7auRAwgdw9fvnRR" + "parent": "1Bxo3C6r7LtVPvNQVogbJh" }, "Xg2GP1ntg1rdapBK2O4Ybjkm_3ZDNotvWabzYDQYd_0": { "type": "page", @@ -231,509 +231,507 @@ "name": "src/landing", "parent": "project" }, - "1Bxgjgs856ozyxM7Gvhbjc": { + "1Bxo3C6rNCSfPWdGhSWAQb": { "type": "component", "index": 0, "name": "Header", "parent": "Xg2GP1ntg1rdapBK2O4Ybjkm_3ZDNotvWabzYDQYd_0" }, - "1Bxgjgs81wP62FPw4bcfhT": { + "1Bxo3C6reZiqnm92TWtWHQ": { "type": "frame", "index": 0, - "parent": "1Bxgjgs856ozyxM7Gvhbjc" + "parent": "1Bxo3C6rNCSfPWdGhSWAQb" }, - "1Bxgjgs7zZKrx3nQhukRka": { + "1Bxo3C6rdTYBYs6tdQSfot": { "type": "frame", "index": 0, "name": "Frame 102", - "parent": "1Bxgjgs81wP62FPw4bcfhT" + "parent": "1Bxo3C6reZiqnm92TWtWHQ" }, - "1Bxgjgs8Kv6iqJ2iAzLWx5": { + "1Bxo3C6rcszdsgc2WPkD5y": { "type": "svg", "index": 0, "name": "Frame 178", - "parent": "1Bxgjgs7zZKrx3nQhukRka" + "parent": "1Bxo3C6rdTYBYs6tdQSfot" }, - "1Bxgjgs8CWGDfN8TZrHY5d": { + "1Bxo3C6rdWv8jQj4DMGpZe": { "type": "text", "index": 1, "name": "UIMix", - "parent": "1Bxgjgs7zZKrx3nQhukRka" + "parent": "1Bxo3C6rdTYBYs6tdQSfot" }, - "1Bxgjgs8AEfmXrQ1XoTJWM": { + "1Bxo3C6rUeL53z3jYejg8x": { "type": "frame", "index": 1, "name": "Frame 179", - "parent": "1Bxgjgs81wP62FPw4bcfhT" + "parent": "1Bxo3C6reZiqnm92TWtWHQ" }, - "1Bxgjgs8KpNgbzkH8JHFTd": { + "1Bxo3C6rSccinGtgd498h3": { "type": "frame", "index": 0, "name": "Frame 3", - "parent": "1Bxgjgs8AEfmXrQ1XoTJWM" + "parent": "1Bxo3C6rUeL53z3jYejg8x" }, - "1Bxgjgs888tLBgvdVqzY1Y": { + "1Bxo3C6rU4zJwXuNywFP8F": { "type": "text", "index": 0, "name": "Sign In", - "parent": "1Bxgjgs8KpNgbzkH8JHFTd" + "parent": "1Bxo3C6rSccinGtgd498h3" }, - "1Bxgjgs8Gog5QECGPJvRFT": { + "1Bxo3C6rV4VMcnmG9MidGb": { "type": "frame", "index": 1, "name": "Frame 4", - "parent": "1Bxgjgs8AEfmXrQ1XoTJWM" + "parent": "1Bxo3C6rUeL53z3jYejg8x" }, - "1Bxgjgs8TBhwxqqYS556c5": { + "1Bxo3C6raUpdST9wEniYFj": { "type": "text", "index": 0, "name": "Get Early Access", - "parent": "1Bxgjgs8Gog5QECGPJvRFT" + "parent": "1Bxo3C6rV4VMcnmG9MidGb" }, - "1Bxgjgs8bxKJiYyH1XzUks": { + "1Bxo3C6re1XPc4qMDntEUQ": { "type": "frame", "index": 2, "name": "Frame 180", - "parent": "1Bxgjgs81wP62FPw4bcfhT" + "parent": "1Bxo3C6reZiqnm92TWtWHQ" }, - "1Bxgjgs8ZXsNBe3S8TDgek": { + "1Bxo3C6rUnqzQVWX2PQmqv": { "type": "text", "index": 0, "name": "Features", - "parent": "1Bxgjgs8bxKJiYyH1XzUks" + "parent": "1Bxo3C6re1XPc4qMDntEUQ" }, - "1Bxgjgs8UGwKhZKDwJHHfy": { + "1Bxo3C6raumFpYXC4T8rhF": { "type": "text", "index": 1, "name": "Pricing", - "parent": "1Bxgjgs8bxKJiYyH1XzUks" + "parent": "1Bxo3C6re1XPc4qMDntEUQ" }, - "1Bxgjgs8ZkCHkqiKS1RiCZ": { + "1Bxo3C6rXetSvkPfWkUecp": { "type": "text", "index": 2, "name": "Docs", - "parent": "1Bxgjgs8bxKJiYyH1XzUks" + "parent": "1Bxo3C6re1XPc4qMDntEUQ" }, - "1Bxgjgs8W7xNEcLCS3yGFC": { + "1Bxo3C6rejWf99Sx8WAoVd": { "type": "text", "index": 3, "name": "GitHub", - "parent": "1Bxgjgs8bxKJiYyH1XzUks" + "parent": "1Bxo3C6re1XPc4qMDntEUQ" }, - "1Bxgjgs8iwtAHhAwjzfbMX": { + "1Bxo3C6rtmEX2p1vgta8L7": { "type": "component", "index": 1, "name": "Landing", "parent": "Xg2GP1ntg1rdapBK2O4Ybjkm_3ZDNotvWabzYDQYd_0" }, - "1Bxgjgs8kC4aw1azZHyGsQ": { + "1Bxo3C6rr1sQSQkfwYEzSn": { "type": "frame", "index": 0, - "parent": "1Bxgjgs8iwtAHhAwjzfbMX" + "parent": "1Bxo3C6rtmEX2p1vgta8L7" }, - "1Bxgjgs8vLAj7Q93bY3bha": { + "1Bxo3C6rqf9KjdEC662cXH": { "type": "instance", "index": 0, "name": "Frame", - "parent": "1Bxgjgs8kC4aw1azZHyGsQ" + "parent": "1Bxo3C6rr1sQSQkfwYEzSn" }, - "1Bxgjgs8v4jRevPDsNjkSM": { + "1Bxo3C6rkHuRSrnWPBZaas": { "type": "frame", "index": 1, "name": "Frame", - "parent": "1Bxgjgs8kC4aw1azZHyGsQ" + "parent": "1Bxo3C6rr1sQSQkfwYEzSn" }, - "1Bxgjgs8ywyLZd2hvPrkie": { + "1Bxo3C6rnaouPPk9JqUWXb": { "type": "frame", "index": 0, "name": "Frame", - "parent": "1Bxgjgs8v4jRevPDsNjkSM" + "parent": "1Bxo3C6rkHuRSrnWPBZaas" }, - "1Bxgjgs95z12ycBZEmZJAG": { + "1Bxo3C6sfXCKYRBgK6zdiQ": { "type": "image", "index": 0, "name": "image 2", - "parent": "1Bxgjgs8ywyLZd2hvPrkie" + "parent": "1Bxo3C6rnaouPPk9JqUWXb" }, - "1Bxgjgs94oFenCTBdmDq9Q": { + "1Bxo3C6sdEdhQQp9GiBtMe": { "type": "text", "index": 1, "name": "Revolutionize Your Web Design and Development Workflow", - "parent": "1Bxgjgs8v4jRevPDsNjkSM" + "parent": "1Bxo3C6rkHuRSrnWPBZaas" }, - "1Bxgjgs97JY7R533Vyyvhr": { + "1Bxo3C6seCnEWWC2CmSVbL": { "type": "text", "index": 2, "name": "UIMix is a open-source design tool that combines intuitive editing, React integration, AI assistance, and advanced design tokens.", - "parent": "1Bxgjgs8v4jRevPDsNjkSM" + "parent": "1Bxo3C6rkHuRSrnWPBZaas" }, - "1Bxgjgs9FsePfRDBzs1JmK": { + "1Bxo3C6sdMV1f96Gz6MwiY": { "type": "frame", "index": 3, "name": "Frame 4", - "parent": "1Bxgjgs8v4jRevPDsNjkSM" + "parent": "1Bxo3C6rkHuRSrnWPBZaas" }, - "1Bxgjgs9EUdvKv1qxyidrz": { + "1Bxo3C6sVow949K37FxSJh": { "type": "frame", "index": 0, "name": "Frame 2", - "parent": "1Bxgjgs9FsePfRDBzs1JmK" + "parent": "1Bxo3C6sdMV1f96Gz6MwiY" }, - "1Bxgjgs9D7oGydLi4jG4XE": { + "1Bxo3C6sVniX2a7ramwBhC": { "type": "text", "index": 0, "name": "Get Early Access", - "parent": "1Bxgjgs9EUdvKv1qxyidrz" + "parent": "1Bxo3C6sVow949K37FxSJh" }, - "1Bxgjgs98WvCvn2UYCsg7m": { + "1Bxo3C6sbzQA2fdGiT2eeV": { "type": "image", "index": 4, "name": "image 1", - "parent": "1Bxgjgs8v4jRevPDsNjkSM" + "parent": "1Bxo3C6rkHuRSrnWPBZaas" }, - "1Bxgjgs9AWzy5974JBEtMt": { + "1Bxo3C6sVeFTeraBaaPjCB": { "type": "frame", "index": 2, "name": "Frame 19", - "parent": "1Bxgjgs8kC4aw1azZHyGsQ" + "parent": "1Bxo3C6rr1sQSQkfwYEzSn" }, - "1Bxgjgs99FRGedmfydqpA1": { + "1Bxo3C6sZwYpDzdkE45eBS": { "type": "frame", "index": 0, "name": "Frame 181", - "parent": "1Bxgjgs9AWzy5974JBEtMt" + "parent": "1Bxo3C6sVeFTeraBaaPjCB" }, - "1Bxgjgs9HHcq3b23dQPBJc": { + "1Bxo3C6saRcsTxiyF5sJnD": { "type": "frame", "index": 0, "name": "Frame 13", - "parent": "1Bxgjgs99FRGedmfydqpA1" + "parent": "1Bxo3C6sZwYpDzdkE45eBS" }, - "1Bxgjgs9E3XwxfF94K6gkU": { + "1Bxo3C6scND6zt3gZwTfwZ": { "type": "frame", "index": 0, "name": "Frame 5", - "parent": "1Bxgjgs9HHcq3b23dQPBJc" + "parent": "1Bxo3C6saRcsTxiyF5sJnD" }, - "1Bxgjgs9GPncA9ou5K4mjt": { + "1Bxo3C6sjSyetFFzqcjBWZ": { "type": "svg", "index": 0, "name": "heroicons:pencil-square", - "parent": "1Bxgjgs9E3XwxfF94K6gkU" + "parent": "1Bxo3C6scND6zt3gZwTfwZ" }, - "1Bxgjgs9E58YBnDTdMazJT": { + "1Bxo3C6sgZ29ssGqbMpPDF": { "type": "text", "index": 1, "name": "Figma-like Intuitive Editing", - "parent": "1Bxgjgs9HHcq3b23dQPBJc" + "parent": "1Bxo3C6saRcsTxiyF5sJnD" }, - "1Bxgjgs9CdcibjrGwKyvbv": { + "1Bxo3C6shBGFajkREGCg8w": { "type": "text", "index": 2, "name": "Experience a user-friendly interface with familiar design tools, making it easy for both beginners and professionals to create stunning web designs.", - "parent": "1Bxgjgs9HHcq3b23dQPBJc" + "parent": "1Bxo3C6saRcsTxiyF5sJnD" }, - "1Bxgjgs9XEh7ciZR5VcQh3": { + "1Bxo3C6sj3gPb6WfCt4zcu": { "type": "frame", "index": 1, "name": "Frame 14", - "parent": "1Bxgjgs99FRGedmfydqpA1" + "parent": "1Bxo3C6sZwYpDzdkE45eBS" }, - "1Bxgjgs9X67RigYygC5Abb": { + "1Bxo3C6szdg9cByMH2ZnQp": { "type": "frame", "index": 0, "name": "Frame 13", - "parent": "1Bxgjgs9XEh7ciZR5VcQh3" + "parent": "1Bxo3C6sj3gPb6WfCt4zcu" }, - "1Bxgjgs9PkPHW5GeM4Sm9j": { + "1Bxo3C6t1NmiVmYLWmAinX": { "type": "svg", "index": 0, "name": "heroicons:code-bracket", - "parent": "1Bxgjgs9X67RigYygC5Abb" + "parent": "1Bxo3C6szdg9cByMH2ZnQp" }, - "1Bxgjgs9b5R4DwuZDed9Z8": { + "1Bxo3C6t7YDwWZKJ9r23kg": { "type": "text", "index": 1, "name": "React Components Import/Export", - "parent": "1Bxgjgs9XEh7ciZR5VcQh3" + "parent": "1Bxo3C6sj3gPb6WfCt4zcu" }, - "1Bxgjgs9ZDY1GLQPtyaFEd": { + "1Bxo3C6syt8e7s3qceRjCB": { "type": "text", "index": 2, "name": "Seamlessly work with React components, boosting your design-to-development workflow.", - "parent": "1Bxgjgs9XEh7ciZR5VcQh3" + "parent": "1Bxo3C6sj3gPb6WfCt4zcu" }, - "1Bxgjgs9awHtyP1buYVYos": { + "1Bxo3C6sxGvxAkat5P32Hv": { "type": "frame", "index": 2, "name": "Frame 15", - "parent": "1Bxgjgs99FRGedmfydqpA1" + "parent": "1Bxo3C6sZwYpDzdkE45eBS" }, - "1Bxgjgs9QkAPcjMDD8pbHk": { + "1Bxo3C6sy9pDb1WK3jSZQE": { "type": "frame", "index": 0, "name": "Frame 13", - "parent": "1Bxgjgs9awHtyP1buYVYos" + "parent": "1Bxo3C6sxGvxAkat5P32Hv" }, - "1Bxgjgs9VBZpEGBwdrnNAM": { + "1Bxo3C6swFeiZ9tZb7ZcYq": { "type": "svg", "index": 0, "name": "heroicons:cloud", - "parent": "1Bxgjgs9QkAPcjMDD8pbHk" + "parent": "1Bxo3C6sy9pDb1WK3jSZQE" }, - "1Bxgjgs9WQB3ub5Y6czH5g": { + "1Bxo3C6t2DfxStM7XDnRuo": { "type": "text", "index": 1, "name": "Collaboration for Everyone", - "parent": "1Bxgjgs9awHtyP1buYVYos" + "parent": "1Bxo3C6sxGvxAkat5P32Hv" }, - "1Bxgjgs9Wh3fM7jU1Watbb": { + "1Bxo3C6syzzHBADxMU12eh": { "type": "text", "index": 2, "name": "Collaborate in real-time with your team, whether they're designers, developers, or stakeholders.", - "parent": "1Bxgjgs9awHtyP1buYVYos" + "parent": "1Bxo3C6sxGvxAkat5P32Hv" }, - "1Bxgjgs9aqhTtrW8GpYXyW": { + "1Bxo3C6tLnDNZuAi2BPt79": { "type": "frame", "index": 3, "name": "Frame 16", - "parent": "1Bxgjgs99FRGedmfydqpA1" + "parent": "1Bxo3C6sZwYpDzdkE45eBS" }, - "1Bxgjgs9TxnPEzkeGrVj3N": { + "1Bxo3C6tF6hsZj42Ca3xqi": { "type": "frame", "index": 0, "name": "Frame 13", - "parent": "1Bxgjgs9aqhTtrW8GpYXyW" + "parent": "1Bxo3C6tLnDNZuAi2BPt79" }, - "1Bxgjgs9QuoUd674ADNEgq": { + "1Bxo3C6tGPLo2LecVx9UcJ": { "type": "svg", "index": 0, "name": "heroicons:computer-desktop", - "parent": "1Bxgjgs9TxnPEzkeGrVj3N" + "parent": "1Bxo3C6tF6hsZj42Ca3xqi" }, - "1Bxgjgs9RzQh2ZKhGfUyjK": { + "1Bxo3C6tFbAwbjSgz6VuGr": { "type": "text", "index": 1, "name": "Offline Editing Experience", - "parent": "1Bxgjgs9aqhTtrW8GpYXyW" + "parent": "1Bxo3C6tLnDNZuAi2BPt79" }, - "1Bxgjgs9c9Nr4tpKHFBgmq": { + "1Bxo3C6tFWw21DduVXnvHr": { "type": "text", "index": 2, "name": "Benefit from UIMix's seamless offline editing, offering local file management, hot reloading, and an uninterrupted workflow.", - "parent": "1Bxgjgs9aqhTtrW8GpYXyW" + "parent": "1Bxo3C6tLnDNZuAi2BPt79" }, - "1Bxgjgs9SkoQ2v49ZWqcRS": { + "1Bxo3C6tL6xbNFD5BAG2xj": { "type": "frame", "index": 4, "name": "Frame 17", - "parent": "1Bxgjgs99FRGedmfydqpA1" + "parent": "1Bxo3C6sZwYpDzdkE45eBS" }, - "1Bxgjgs9q2YgXemj4iPnFm": { + "1Bxo3C6tMtHqr7Yvtseo5S": { "type": "frame", "index": 0, "name": "Frame 13", - "parent": "1Bxgjgs9SkoQ2v49ZWqcRS" + "parent": "1Bxo3C6tL6xbNFD5BAG2xj" }, - "1Bxgjgs9gXAhmCU2PCwYtc": { + "1Bxo3C6tC6oB2knVgwoEVT": { "type": "svg", "index": 0, "name": "carbon:machine-learning", - "parent": "1Bxgjgs9q2YgXemj4iPnFm" + "parent": "1Bxo3C6tMtHqr7Yvtseo5S" }, - "1Bxgjgs9fqYS24PdQgjvEd": { + "1Bxo3C6tEUetgJNYMaXZV1": { "type": "text", "index": 1, "name": "AI Assistance", - "parent": "1Bxgjgs9SkoQ2v49ZWqcRS" + "parent": "1Bxo3C6tL6xbNFD5BAG2xj" }, - "1Bxgjgs9efkiTtyP16cdbJ": { + "1Bxo3C6tFceQnq6jKHwUZF": { "type": "text", "index": 2, "name": "Supercharge your design process with AI-generated and refined text contents, as well as AI-generated images that fit perfectly into your project.", - "parent": "1Bxgjgs9SkoQ2v49ZWqcRS" + "parent": "1Bxo3C6tL6xbNFD5BAG2xj" }, - "1Bxgjgs9fnauTXkyKgJtBU": { + "1Bxo3C6tNCjEnZmf6nEZJ6": { "type": "frame", "index": 5, "name": "Frame 18", - "parent": "1Bxgjgs99FRGedmfydqpA1" + "parent": "1Bxo3C6sZwYpDzdkE45eBS" }, - "1Bxgjgs9gTCfvEwRA6PBAU": { + "1Bxo3C6tHV7ezmprPH9Lf5": { "type": "frame", "index": 0, "name": "Frame 13", - "parent": "1Bxgjgs9fnauTXkyKgJtBU" + "parent": "1Bxo3C6tNCjEnZmf6nEZJ6" }, - "1Bxgjgs9oDaNroUbVBkYYF": { + "1Bxo3C6tYsuGh8ws2omu8a": { "type": "svg", "index": 0, "name": "carbon:logo-figma", - "parent": "1Bxgjgs9gTCfvEwRA6PBAU" + "parent": "1Bxo3C6tHV7ezmprPH9Lf5" }, - "1Bxgjgs9cuRr7x9X6oqu5z": { + "1Bxo3C6tZNtV3D4c4s9kzR": { "type": "text", "index": 1, "name": "Figma Integration", - "parent": "1Bxgjgs9fnauTXkyKgJtBU" + "parent": "1Bxo3C6tNCjEnZmf6nEZJ6" }, - "1Bxgjgs9dXBQDGvaCtqi4i": { + "1Bxo3C6tZg5DpGcRuLbaRq": { "type": "text", "index": 2, "name": "Easily import designs from Figma and export components back to Figma, ensuring seamless collaboration between UIMix and your favorite design tool.", - "parent": "1Bxgjgs9fnauTXkyKgJtBU" + "parent": "1Bxo3C6tNCjEnZmf6nEZJ6" }, - "1Bxgjgs9k9mX7Cwvqzm54j": { + "1Bxo3C6tYN1XAWaPApxdDP": { "type": "frame", "index": 3, "name": "Frame", - "parent": "1Bxgjgs8kC4aw1azZHyGsQ" + "parent": "1Bxo3C6rr1sQSQkfwYEzSn" }, - "1Bxgjgs9hfjcSYCCF61mun": { + "1Bxo3C6tXEBfsTnN7vmfeD": { "type": "text", "index": 0, "name": "Open Source", - "parent": "1Bxgjgs9k9mX7Cwvqzm54j" + "parent": "1Bxo3C6tYN1XAWaPApxdDP" }, - "1Bxgjgs9rLVbSxdPJodHqn": { + "1Bxo3C6teueDo5h7WNjj2j": { "type": "text", "index": 1, "name": "UIMix's open-source editor and backend promote community-driven development and offer extensive customization options. Self-host both components for greater control over your design environment and data security.", - "parent": "1Bxgjgs9k9mX7Cwvqzm54j" + "parent": "1Bxo3C6tYN1XAWaPApxdDP" }, - "1Bxgjgs9tN9yLtoNEvYn7z": { + "1Bxo3C6tRsjHPz2bdBcTV1": { "type": "frame", "index": 2, "name": "Frame 3", - "parent": "1Bxgjgs9k9mX7Cwvqzm54j" + "parent": "1Bxo3C6tYN1XAWaPApxdDP" }, - "1Bxgjgs9szsG44zZhsehfS": { + "1Bxo3C6teswLE9z98W9Keg": { "type": "text", "index": 0, "name": "Explore GitHub repo", - "parent": "1Bxgjgs9tN9yLtoNEvYn7z" + "parent": "1Bxo3C6tRsjHPz2bdBcTV1" }, - "1Bxgjgs9tBYpT1rAt4AVoz": { + "1Bxo3C6tnZox5DyFFBmJ8T": { "type": "text", "index": 3, "name": "How It Works", - "parent": "1Bxgjgs9k9mX7Cwvqzm54j" + "parent": "1Bxo3C6tYN1XAWaPApxdDP" }, - "1BxgjgsA17v5FG3eRX8HVz": { + "1Bxo3C6tqVBLJY9ao12DGY": { "type": "frame", "index": 4, "name": "Frame", - "parent": "1Bxgjgs9k9mX7Cwvqzm54j" + "parent": "1Bxo3C6tYN1XAWaPApxdDP" }, - "1BxgjgsA1vQipRm9xnzfDg": { + "1Bxo3C6tkLjwwJhYs5ALYP": { "type": "frame", "index": 0, "name": "Frame", - "parent": "1BxgjgsA17v5FG3eRX8HVz" + "parent": "1Bxo3C6tqVBLJY9ao12DGY" }, - "1Bxgjgs9yoDFJeJXnXsvyi": { + "1Bxo3C6vKTJaALBY89EAbA": { "type": "text", "index": 0, "name": "A. Start Your Project", - "parent": "1BxgjgsA1vQipRm9xnzfDg" + "parent": "1Bxo3C6tkLjwwJhYs5ALYP" }, - "1Bxgjgs9wevQuQnGJPzEta": { + "1Bxo3C6vAc3bauH9BFdVh6": { "type": "text", "index": 1, "name": "Sign up for a free account or log in. Create a new project or import an existing Figma design. Organize your components and design tokens in the user-friendly interface.", - "parent": "1BxgjgsA1vQipRm9xnzfDg" + "parent": "1Bxo3C6tkLjwwJhYs5ALYP" }, - "1BxgjgsA6WTgyzkyPKursw": { + "1Bxo3C6vLgZXkwDWsvS4qB": { "type": "frame", "index": 1, "name": "Frame", - "parent": "1BxgjgsA17v5FG3eRX8HVz" + "parent": "1Bxo3C6tqVBLJY9ao12DGY" }, - "1BxgjgsA6ogWtv33CuxHxs": { + "1Bxo3C6vb445HkcT7i13JB": { "type": "text", "index": 0, "name": "B. Design & Develop", - "parent": "1BxgjgsA6WTgyzkyPKursw" + "parent": "1Bxo3C6vLgZXkwDWsvS4qB" }, - "1Bxgjgs9yRfHURxfqVst7k": { + "1Bxo3C6vbpPQDpfSanPWfj": { "type": "text", "index": 1, "name": "Utilize Figma-like editing tools to create and modify designs. Seamlessly import React components into your UIMix project. Leverage AI assistance to efficiently generate and refine your content.", - "parent": "1BxgjgsA6WTgyzkyPKursw" + "parent": "1Bxo3C6vLgZXkwDWsvS4qB" }, - "1BxgjgsA1Uu23M1rqgYY6J": { + "1Bxo3C6vWncDbPuYNEi5tN": { "type": "frame", "index": 2, "name": "Frame", - "parent": "1BxgjgsA17v5FG3eRX8HVz" + "parent": "1Bxo3C6tqVBLJY9ao12DGY" }, - "1BxgjgsA4eYi2ZbYvWsxiW": { + "1Bxo3C6vYmSFRMBtJR8wMC": { "type": "text", "index": 0, "name": "C. Collaborate & Publish", - "parent": "1BxgjgsA1Uu23M1rqgYY6J" + "parent": "1Bxo3C6vWncDbPuYNEi5tN" }, - "1Bxgjgs9rcRMNzmecHh2Zi": { + "1Bxo3C6vqiXStKvHYxcJKZ": { "type": "text", "index": 1, "name": "Collaborate using the online editor or work offline for an optimized development experience. Integrate with GitHub for streamlined version control. Easily import UIMix components into React apps or export final designs back to Figma.", - "parent": "1BxgjgsA1Uu23M1rqgYY6J" + "parent": "1Bxo3C6vWncDbPuYNEi5tN" }, - "1Bxgjgs9uLsj7SwVxQdHv3": { + "1Bxo3C6vszh4iiDksf3E12": { "type": "frame", "index": 4, "name": "Frame 21", - "parent": "1Bxgjgs8kC4aw1azZHyGsQ" + "parent": "1Bxo3C6rr1sQSQkfwYEzSn" }, - "1Bxgjgs9zrsdpDGriwG9Yb": { + "1Bxo3C6vkEFt4fdED7W9Hh": { "type": "image", "index": 0, "name": "image 4", - "parent": "1Bxgjgs9uLsj7SwVxQdHv3" + "parent": "1Bxo3C6vszh4iiDksf3E12" }, - "1BxgjgsA67fGG3oJLQgrNF": { + "1Bxo3C6vg9WRJz25B7wRi1": { "type": "text", "index": 1, "name": "Ready to revolutionize your web design workflow?", - "parent": "1Bxgjgs9uLsj7SwVxQdHv3" + "parent": "1Bxo3C6vszh4iiDksf3E12" }, - "1BxgjgsA8QB6gjuxQQrcn5": { + "1Bxo3C6vnSqcJRKjTfCnms": { "type": "frame", "index": 2, "name": "Frame 20", - "parent": "1Bxgjgs9uLsj7SwVxQdHv3" + "parent": "1Bxo3C6vszh4iiDksf3E12" }, - "1BxgjgsAEw22VV7hyUmxto": { + "1Bxo3C6vqodXXQKr9SF2ht": { "type": "frame", "index": 0, "name": "Frame 2", - "parent": "1BxgjgsA8QB6gjuxQQrcn5" + "parent": "1Bxo3C6vnSqcJRKjTfCnms" }, - "1BxgjgsAFAMFrDTX2YLmdP": { + "1Bxo3C6vmLKDZMdMTN1Fki": { "type": "text", "index": 0, "name": "Get Early Access", - "parent": "1BxgjgsAEw22VV7hyUmxto" + "parent": "1Bxo3C6vqodXXQKr9SF2ht" }, - "1BxgjgsADhr4Xb4CmzZrhs": { + "1Bxo3C6wU6pGqTmqEgaG26": { "type": "variant", "index": 1, "condition": { "type": "maxWidth", "value": 767 }, - "parent": "1Bxgjgs8iwtAHhAwjzfbMX" + "parent": "1Bxo3C6rtmEX2p1vgta8L7" } }, "styles": { - "1Bxgjgs78B7Q9WygLinw8N": { + "1Bxo3C6pbVJspdKo4tuhLV": { "width": "hug", "height": "hug", - "fills": [{ "solid": "#111827" }], + "color": "#111827", "textContent": "Button" }, - "1Bxgjgs6uDAKz2qq16i1NL:1Bxgjgs78B7Q9WygLinw8N": { - "fills": [{ "solid": "#FFFFFF" }] - }, - "1Bxgjgs75jx7aNfgBLMn8c:1Bxgjgs78B7Q9WygLinw8N": { "fontSize": 14 }, - "1Bxgjgs74468hXW4Lsmyro": { + "1Bxo3C6pqc4xbTk8Z2drp1:1Bxo3C6pbVJspdKo4tuhLV": { "color": "#FFFFFF" }, + "1Bxo3C6pvojtTetfkk3huT:1Bxo3C6pbVJspdKo4tuhLV": { "fontSize": 14 }, + "1Bxo3C6pa9C96vm68m18nx": { "position": { "left": 50, "top": 400 }, "width": "hug", "height": "hug", @@ -744,54 +742,54 @@ "paddingBottom": 4, "paddingLeft": 8 }, - "1Bxgjgs6uDAKz2qq16i1NL": { + "1Bxo3C6pqc4xbTk8Z2drp1": { "position": { "left": 200, "top": 400 }, "fills": [{ "solid": { "token": "blue/500" } }] }, - "1Bxgjgs75jx7aNfgBLMn8c": { + "1Bxo3C6pvojtTetfkk3huT": { "position": { "left": 350, "top": 400 }, "paddingTop": 2, "paddingRight": 4, "paddingBottom": 2, "paddingLeft": 4 }, - "1Bxgjgs6t3QbM3uq6iA3ix": { + "1Bxo3C6q5CsPDw71dZmJW5": { "width": { "min": 25, "max": 100 }, "height": { "min": 20, "max": 60 }, - "fills": [{ "solid": { "token": "1Bxgjgs7W6WsySYu61zEod" } }] + "fills": [{ "solid": { "token": "1Bxo3C6rA9BcPuUKGVUgXr" } }] }, - "1Bxgjgs72smms8A9Pjz3Zd": { + "1Bxo3C6q4W6uYwxiTXCL8U": { "width": 40, "height": 80, "fills": [{ "solid": "#22C55E" }] }, - "1Bxgjgs71H6rJEo5phXEEv": { + "1Bxo3C6qHa6aMpCgDtYBdx": { "hidden": true, "width": 40, "height": 80, "fills": [{ "solid": "#22C55E" }] }, - "1Bxgjgs7FTZaV7jVq7sTa9": { + "1Bxo3C6qLz7gdZgaGrNuRe": { "width": 80, "height": 40, "fills": [{ "solid": { "token": "blue/500" } }] }, - "1Bxgjgs7KPs4W48eRiv6Nt": { + "1Bxo3C6qLFwDcz4KpdL3U9": { "width": "hug", "height": "hug", - "fills": [{ "solid": "#000000" }], "marginTop": 10, "marginRight": 20, "marginBottom": 30, "marginLeft": 40, + "color": "#000000", "textContent": "Hello, world!", "fontSize": 20 }, - "1Bxgjgs7FnK31vXBsavCrv": { + "1Bxo3C6qN64gYU4TjxC2if": { "position": null, - "mainComponent": "1Bxgjgs6sCdp9Np51fcYL6" + "mainComponent": "1Bxo3C6pTEEXvWVaps2hMw" }, - "1Bxgjgs6xzDgHWiWd7tyjF": { + "1Bxo3C6pwdpFFY9hnHbfti": { "position": { "left": 50, "top": 184 }, "width": "hug", "height": "hug", @@ -804,7 +802,7 @@ "paddingBottom": 30, "paddingLeft": 40 }, - "1Bxgjgs7GgYtwxcyAZD4he": { + "1Bxo3C6qY7WnohJCkr3eMv": { "width": { "min": 0 }, "height": "hug", "foreignComponent": { @@ -814,7 +812,7 @@ "props": {} } }, - "1Bxgjgs7FYYSZbbXtbLqBc": { + "1Bxo3C6qTXiqYV49t8Qadf": { "position": { "left": 33, "top": 28 }, "width": "hug", "height": "hug", @@ -830,45 +828,45 @@ } } }, - "1Bxgjgs7HhEZjievv2PuAk": { + "1Bxo3C6qXVvsUXyAsaMmhW": { "position": { "left": 160, "top": 28 }, "fills": [{ "solid": "#BABABA" }], - "mainComponent": "1Bxgjgs6sCdp9Np51fcYL6" + "mainComponent": "1Bxo3C6pTEEXvWVaps2hMw" }, - "1Bxgjgs7HhEZjievv2PuAk:1Bxgjgs78B7Q9WygLinw8N": { + "1Bxo3C6qXVvsUXyAsaMmhW:1Bxo3C6pbVJspdKo4tuhLV": { "textContent": "Override Name" }, - "1Bxgjgs7H4kVHE231YZi4r": { + "1Bxo3C6qu8s5yoCCir1e6V": { "position": { "left": 33, "top": 97 }, "width": 100, "height": 100, "fills": [{ "solid": "#FFFFFF" }], "imageHash": "YmY-tuteU03QY-k_2ARy1uacNmXDNmOX-FFAlj2qCIo" }, - "1Bxgjgs7BRL3UmPLBcesrM": { + "1Bxo3C6qtdohAawrPuA17r": { "position": { "left": 165, "top": 86 }, - "mainComponent": "1Bxgjgs75hMvadhoSBw4rj" - }, - "1Bxgjgs7BRL3UmPLBcesrM:1Bxgjgs6t3QbM3uq6iA3ix": {}, - "1Bxgjgs7BRL3UmPLBcesrM:1Bxgjgs72smms8A9Pjz3Zd": {}, - "1Bxgjgs7BRL3UmPLBcesrM:1Bxgjgs71H6rJEo5phXEEv": { "hidden": false }, - "1Bxgjgs7BRL3UmPLBcesrM:1Bxgjgs7FTZaV7jVq7sTa9": {}, - "1Bxgjgs7BRL3UmPLBcesrM:1Bxgjgs7KPs4W48eRiv6Nt": {}, - "1Bxgjgs7BRL3UmPLBcesrM:1Bxgjgs7FnK31vXBsavCrv": {}, - "1Bxgjgs7BRL3UmPLBcesrM:1Bxgjgs7FnK31vXBsavCrv:1Bxgjgs78B7Q9WygLinw8N": { + "mainComponent": "1Bxo3C6pxb5nNRiefxWSxd" + }, + "1Bxo3C6qtdohAawrPuA17r:1Bxo3C6q5CsPDw71dZmJW5": {}, + "1Bxo3C6qtdohAawrPuA17r:1Bxo3C6q4W6uYwxiTXCL8U": {}, + "1Bxo3C6qtdohAawrPuA17r:1Bxo3C6qHa6aMpCgDtYBdx": { "hidden": false }, + "1Bxo3C6qtdohAawrPuA17r:1Bxo3C6qLz7gdZgaGrNuRe": {}, + "1Bxo3C6qtdohAawrPuA17r:1Bxo3C6qLFwDcz4KpdL3U9": {}, + "1Bxo3C6qtdohAawrPuA17r:1Bxo3C6qN64gYU4TjxC2if": {}, + "1Bxo3C6qtdohAawrPuA17r:1Bxo3C6qN64gYU4TjxC2if:1Bxo3C6pbVJspdKo4tuhLV": { "textContent": "Nested Override" }, - "1Bxgjgs7DVpp12i6fyBE1X:1Bxgjgs7BRL3UmPLBcesrM": {}, - "1Bxgjgs7DVpp12i6fyBE1X:1Bxgjgs7BRL3UmPLBcesrM:1Bxgjgs6t3QbM3uq6iA3ix": {}, - "1Bxgjgs7DVpp12i6fyBE1X:1Bxgjgs7BRL3UmPLBcesrM:1Bxgjgs72smms8A9Pjz3Zd": {}, - "1Bxgjgs7DVpp12i6fyBE1X:1Bxgjgs7BRL3UmPLBcesrM:1Bxgjgs71H6rJEo5phXEEv": {}, - "1Bxgjgs7DVpp12i6fyBE1X:1Bxgjgs7BRL3UmPLBcesrM:1Bxgjgs7FTZaV7jVq7sTa9": {}, - "1Bxgjgs7DVpp12i6fyBE1X:1Bxgjgs7BRL3UmPLBcesrM:1Bxgjgs7KPs4W48eRiv6Nt": {}, - "1Bxgjgs7DVpp12i6fyBE1X:1Bxgjgs7BRL3UmPLBcesrM:1Bxgjgs7FnK31vXBsavCrv": {}, - "1Bxgjgs7DVpp12i6fyBE1X:1Bxgjgs7BRL3UmPLBcesrM:1Bxgjgs7FnK31vXBsavCrv:1Bxgjgs78B7Q9WygLinw8N": { - "fills": [{ "solid": "#FF0000" }] - }, - "1Bxgjgs7LtBXJa9Pdvk1YE": { + "1Bxo3C6qkXC6fHzarkygcj:1Bxo3C6qtdohAawrPuA17r": {}, + "1Bxo3C6qkXC6fHzarkygcj:1Bxo3C6qtdohAawrPuA17r:1Bxo3C6q5CsPDw71dZmJW5": {}, + "1Bxo3C6qkXC6fHzarkygcj:1Bxo3C6qtdohAawrPuA17r:1Bxo3C6q4W6uYwxiTXCL8U": {}, + "1Bxo3C6qkXC6fHzarkygcj:1Bxo3C6qtdohAawrPuA17r:1Bxo3C6qHa6aMpCgDtYBdx": {}, + "1Bxo3C6qkXC6fHzarkygcj:1Bxo3C6qtdohAawrPuA17r:1Bxo3C6qLz7gdZgaGrNuRe": {}, + "1Bxo3C6qkXC6fHzarkygcj:1Bxo3C6qtdohAawrPuA17r:1Bxo3C6qLFwDcz4KpdL3U9": {}, + "1Bxo3C6qkXC6fHzarkygcj:1Bxo3C6qtdohAawrPuA17r:1Bxo3C6qN64gYU4TjxC2if": {}, + "1Bxo3C6qkXC6fHzarkygcj:1Bxo3C6qtdohAawrPuA17r:1Bxo3C6qN64gYU4TjxC2if:1Bxo3C6pbVJspdKo4tuhLV": { + "color": "#FF0000" + }, + "1Bxo3C6qoMVRdjkQmWuySH": { "position": { "left": 315, "top": 29 }, "foreignComponent": { "type": "react", @@ -881,12 +879,12 @@ } } }, - "1Bxgjgs78a1gqzQDDQuJYL": { + "1Bxo3C6qdMNKdMgmukbnc9": { "width": { "min": 0 }, "height": { "min": 0 }, "fills": [{ "solid": "#FFFFFF" }] }, - "1Bxgjgs7MQ7TMPGiatLM8k": { + "1Bxo3C6qfV8LfTN9p731cN": { "position": { "left": 50, "top": 585 }, "width": 900, "height": 456, @@ -895,16 +893,16 @@ "flexDirection": "y", "flexAlign": "center" }, - "1Bxgjgs7DVpp12i6fyBE1X": { + "1Bxo3C6qkXC6fHzarkygcj": { "position": { "left": 986, "top": 585 }, "width": 720 }, - "1Bxgjgs7T3CudFWxUkwgXQ": { + "1Bxo3C6qr5GhWfFUYAgb8Y": { "width": "hug", "height": "hug", "svgContent": "\n\n\n" }, - "1Bxgjgs7MSq1dB1msbhSKh": { + "1Bxo3C6qhq3kVxjJcdgT9C": { "hidden": false, "width": "hug", "height": "hug", @@ -926,12 +924,12 @@ "paddingBottom": 3, "paddingLeft": 3 }, - "1Bxgjgs7RM3fZ5FYfm5aSm": { + "1Bxo3C6qjKhjS2ZGYFLjBq": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, + "color": "#1f2937", "textContent": "React Components Import/Export", "fontFamily": "Satoshi", "fontWeight": 700, @@ -940,12 +938,12 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjgs7P7VbwRi3KxeN4i": { + "1Bxo3C6qwyg8hoBrLMEYF5": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#4b5563" }], "opacity": 1, + "color": "#4b5563", "textContent": "Seamlessly work with React components, boosting your design-to-development workflow.\n", "fontFamily": "Inter", "fontWeight": 400, @@ -954,7 +952,7 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjgs7FB3RchpL7L2Dci": { + "1Bxo3C6qpD8RvxoCkSuKLB": { "hidden": false, "position": { "left": 50, "top": 1144 }, "width": 400, @@ -977,39 +975,39 @@ "paddingBottom": 19, "paddingLeft": 19 }, - "1Bxgjgs7WeBSxLcYBRyrcD": { + "1Bxo3C6r3Pu37jwdLdVqxA": { "width": { "min": 25, "max": 100 }, "height": { "min": 20, "max": 60 }, - "fills": [{ "solid": { "token": "1Bxgjgs7W6WsySYu61zEod" } }] + "fills": [{ "solid": { "token": "1Bxo3C6rA9BcPuUKGVUgXr" } }] }, - "1Bxgjgs7PvfnmhnhMVzpe5": { + "1Bxo3C6r2ifqN6yAj8YPcm": { "width": 40, "height": 80, "fills": [{ "solid": "#22C55E" }] }, - "1Bxgjgs7ce82EC47MCbVzQ": { + "1Bxo3C6r5rFgiudrDidbYB": { "hidden": true, "width": 40, "height": 80, "fills": [{ "solid": "#22C55E" }] }, - "1Bxgjgs7WoxnJt3SXEAZxk": { + "1Bxo3C6qxVM8FswHN9dDfA": { "width": 80, "height": 40, "fills": [{ "solid": { "token": "blue/500" } }] }, - "1Bxgjgs7NwKMv6y6xbTFsC": { + "1Bxo3C6r6zpWfSURmXzF3Y": { "width": "hug", "height": "hug", - "fills": [{ "solid": "#000000" }], "marginTop": 10, "marginRight": 20, "marginBottom": 30, "marginLeft": 40, + "color": "#000000", "textContent": "Hello, world!", "fontSize": 20 }, - "1Bxgjgs7auRAwgdw9fvnRR": { + "1Bxo3C6r7LtVPvNQVogbJh": { "position": { "left": 24, "top": 14 }, "width": "hug", "height": "hug", @@ -1022,7 +1020,7 @@ "paddingBottom": 30, "paddingLeft": 40 }, - "1Bxgjgs7P3Z3JD33a6jfqf": { + "1Bxo3C6rAqUfJWE7sRRodr": { "position": { "left": 631, "top": 184 }, "width": 459, "height": 237, @@ -1033,17 +1031,17 @@ "paddingBottom": 12, "paddingLeft": 12 }, - "1Bxgjgs8Kv6iqJ2iAzLWx5": { + "1Bxo3C6rcszdsgc2WPkD5y": { "width": "hug", "height": "hug", "svgContent": "\n\n\n\n\n\n" }, - "1Bxgjgs8CWGDfN8TZrHY5d": { + "1Bxo3C6rdWv8jQj4DMGpZe": { "hidden": false, "width": "hug", "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, + "color": "#1f2937", "textContent": "UIMix", "fontFamily": "Satoshi", "fontWeight": 900, @@ -1053,7 +1051,7 @@ "textHorizontalAlign": "start", "textVerticalAlign": "center" }, - "1Bxgjgs7zZKrx3nQhukRka": { + "1Bxo3C6rdTYBYs6tdQSfot": { "hidden": false, "position": { "left": 48, "top": 24 }, "width": "hug", @@ -1076,12 +1074,12 @@ "paddingBottom": 0, "paddingLeft": 0 }, - "1Bxgjgs888tLBgvdVqzY1Y": { + "1Bxo3C6rU4zJwXuNywFP8F": { "hidden": false, "width": "hug", "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, + "color": "#1f2937", "textContent": "Sign In", "fontFamily": "Satoshi", "fontWeight": 700, @@ -1091,7 +1089,7 @@ "textHorizontalAlign": "center", "textVerticalAlign": "start" }, - "1Bxgjgs8KpNgbzkH8JHFTd": { + "1Bxo3C6rSccinGtgd498h3": { "hidden": false, "width": "hug", "height": "hug", @@ -1121,12 +1119,12 @@ "paddingBottom": 6.5, "paddingLeft": 14.5 }, - "1Bxgjgs8TBhwxqqYS556c5": { + "1Bxo3C6raUpdST9wEniYFj": { "hidden": false, "width": "hug", "height": "hug", - "fills": [{ "solid": "#ffffff" }], "opacity": 1, + "color": "#ffffff", "textContent": "Get Early Access", "fontFamily": "Satoshi", "fontWeight": 900, @@ -1136,7 +1134,7 @@ "textHorizontalAlign": "center", "textVerticalAlign": "start" }, - "1Bxgjgs8Gog5QECGPJvRFT": { + "1Bxo3C6rV4VMcnmG9MidGb": { "hidden": false, "width": "hug", "height": "hug", @@ -1162,7 +1160,7 @@ "paddingBottom": 8, "paddingLeft": 16 }, - "1Bxgjgs8AEfmXrQ1XoTJWM": { + "1Bxo3C6rUeL53z3jYejg8x": { "hidden": false, "position": { "top": 16, "right": 47.99984677551083 }, "width": 247, @@ -1185,12 +1183,12 @@ "paddingBottom": 0, "paddingLeft": 0 }, - "1Bxgjgs8ZXsNBe3S8TDgek": { + "1Bxo3C6rUnqzQVWX2PQmqv": { "hidden": false, "width": "hug", "height": "hug", - "fills": [{ "solid": "#000000" }], "opacity": 1, + "color": "#000000", "textContent": "Features", "fontFamily": "Satoshi", "fontWeight": 500, @@ -1200,12 +1198,12 @@ "textHorizontalAlign": "start", "textVerticalAlign": "center" }, - "1Bxgjgs8UGwKhZKDwJHHfy": { + "1Bxo3C6raumFpYXC4T8rhF": { "hidden": false, "width": "hug", "height": "hug", - "fills": [{ "solid": "#000000" }], "opacity": 1, + "color": "#000000", "textContent": "Pricing", "fontFamily": "Satoshi", "fontWeight": 500, @@ -1215,12 +1213,12 @@ "textHorizontalAlign": "start", "textVerticalAlign": "center" }, - "1Bxgjgs8ZkCHkqiKS1RiCZ": { + "1Bxo3C6rXetSvkPfWkUecp": { "hidden": false, "width": "hug", "height": "hug", - "fills": [{ "solid": "#000000" }], "opacity": 1, + "color": "#000000", "textContent": "Docs", "fontFamily": "Satoshi", "fontWeight": 500, @@ -1230,12 +1228,12 @@ "textHorizontalAlign": "start", "textVerticalAlign": "center" }, - "1Bxgjgs8W7xNEcLCS3yGFC": { + "1Bxo3C6rejWf99Sx8WAoVd": { "hidden": false, "width": "hug", "height": "hug", - "fills": [{ "solid": "#000000" }], "opacity": 1, + "color": "#000000", "textContent": "GitHub", "fontFamily": "Satoshi", "fontWeight": 500, @@ -1245,7 +1243,7 @@ "textHorizontalAlign": "start", "textVerticalAlign": "center" }, - "1Bxgjgs8bxKJiYyH1XzUks": { + "1Bxo3C6re1XPc4qMDntEUQ": { "hidden": false, "width": "hug", "height": "hug", @@ -1267,7 +1265,7 @@ "paddingBottom": 0, "paddingLeft": 0 }, - "1Bxgjgs81wP62FPw4bcfhT": { + "1Bxo3C6reZiqnm92TWtWHQ": { "position": { "left": 20, "top": 20 }, "width": 1183, "height": 72, @@ -1278,11 +1276,11 @@ "paddingTop": 24, "paddingBottom": 24 }, - "1Bxgjgs8vLAj7Q93bY3bha": { + "1Bxo3C6rqf9KjdEC662cXH": { "width": { "min": 0 }, - "mainComponent": "1Bxgjgs856ozyxM7Gvhbjc" + "mainComponent": "1Bxo3C6rNCSfPWdGhSWAQb" }, - "1Bxgjgs95z12ycBZEmZJAG": { + "1Bxo3C6sfXCKYRBgK6zdiQ": { "hidden": false, "position": { "left": 343, "top": 45 }, "width": 750, @@ -1296,7 +1294,7 @@ "shadows": [], "imageHash": "XMIUgNq9VxH1FiVdc4M95ZcfqaSP3aF07GtbcGHi9AY" }, - "1Bxgjgs8ywyLZd2hvPrkie": { + "1Bxo3C6rnaouPPk9JqUWXb": { "locked": true, "position": { "left": 0, "top": 0, "right": 0 }, "width": { "min": 0 }, @@ -1305,14 +1303,14 @@ "layout": "flex", "flexJustify": "center" }, - "1Bxgjgs94oFenCTBdmDq9Q": { + "1Bxo3C6sdEdhQQp9GiBtMe": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#1F2937" }], "opacity": 1, "marginTop": 96, "marginBottom": 48, + "color": "#1F2937", "textContent": "Revolutionize Your Web Design\nand Development Workflow", "fontFamily": "Satoshi", "fontWeight": 900, @@ -1322,13 +1320,13 @@ "textHorizontalAlign": "center", "textVerticalAlign": "start" }, - "1Bxgjgs97JY7R533Vyyvhr": { + "1Bxo3C6seCnEWWC2CmSVbL": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#6b7280" }], "opacity": 1, "marginBottom": 48, + "color": "#6b7280", "textContent": "UIMix is a open-source design tool that combines intuitive editing,\nReact integration, AI assistance, and advanced design tokens.", "fontFamily": "Inter", "fontWeight": 400, @@ -1338,12 +1336,12 @@ "textHorizontalAlign": "center", "textVerticalAlign": "start" }, - "1Bxgjgs9D7oGydLi4jG4XE": { + "1Bxo3C6sVniX2a7ramwBhC": { "hidden": false, "width": "hug", "height": "hug", - "fills": [{ "solid": "#ffffff" }], "opacity": 1, + "color": "#ffffff", "textContent": "Get Early Access", "fontFamily": "Satoshi", "fontWeight": 900, @@ -1353,7 +1351,7 @@ "textHorizontalAlign": "center", "textVerticalAlign": "start" }, - "1Bxgjgs9EUdvKv1qxyidrz": { + "1Bxo3C6sVow949K37FxSJh": { "hidden": false, "width": "hug", "height": "hug", @@ -1379,7 +1377,7 @@ "paddingBottom": 12, "paddingLeft": 24 }, - "1Bxgjgs9FsePfRDBzs1JmK": { + "1Bxo3C6sdMV1f96Gz6MwiY": { "hidden": false, "width": "hug", "height": "hug", @@ -1402,7 +1400,7 @@ "paddingBottom": 0, "paddingLeft": 0 }, - "1Bxgjgs98WvCvn2UYCsg7m": { + "1Bxo3C6sbzQA2fdGiT2eeV": { "hidden": false, "position": { "left": 360, "top": 581 }, "width": { "min": 0, "max": 720 }, @@ -1425,7 +1423,7 @@ "marginBottom": 64, "imageHash": "1yKf5NvwGW-XtLSBDlS3GqZfbEGnLshgQrjyQJImqaM" }, - "1Bxgjgs8v4jRevPDsNjkSM": { + "1Bxo3C6rkHuRSrnWPBZaas": { "width": { "min": 0 }, "height": "hug", "layout": "flex", @@ -1434,12 +1432,12 @@ "paddingRight": 24, "paddingLeft": 24 }, - "1Bxgjgs9GPncA9ou5K4mjt": { + "1Bxo3C6sjSyetFFzqcjBWZ": { "width": "hug", "height": "hug", "svgContent": "\n\n\n" }, - "1Bxgjgs9E3XwxfF94K6gkU": { + "1Bxo3C6scND6zt3gZwTfwZ": { "hidden": false, "width": "hug", "height": "hug", @@ -1462,12 +1460,12 @@ "paddingBottom": 4, "paddingLeft": 4 }, - "1Bxgjgs9E58YBnDTdMazJT": { + "1Bxo3C6sgZ29ssGqbMpPDF": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, + "color": "#1f2937", "textContent": "Figma-like Intuitive Editing", "fontFamily": "Satoshi", "fontWeight": 700, @@ -1477,12 +1475,12 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjgs9CdcibjrGwKyvbv": { + "1Bxo3C6shBGFajkREGCg8w": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#4b5563" }], "opacity": 1, + "color": "#4b5563", "textContent": "Experience a user-friendly interface with familiar design tools, making it easy for both beginners and professionals to create stunning web designs.", "fontFamily": "Inter", "fontWeight": 400, @@ -1492,7 +1490,7 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjgs9HHcq3b23dQPBJc": { + "1Bxo3C6saRcsTxiyF5sJnD": { "hidden": false, "width": { "min": 0 }, "height": { "min": 0 }, @@ -1515,12 +1513,12 @@ "paddingBottom": 20, "paddingLeft": 20 }, - "1Bxgjgs9PkPHW5GeM4Sm9j": { + "1Bxo3C6t1NmiVmYLWmAinX": { "width": "hug", "height": "hug", "svgContent": "\n\n\n" }, - "1Bxgjgs9X67RigYygC5Abb": { + "1Bxo3C6szdg9cByMH2ZnQp": { "hidden": false, "width": "hug", "height": "hug", @@ -1543,12 +1541,12 @@ "paddingBottom": 4, "paddingLeft": 4 }, - "1Bxgjgs9b5R4DwuZDed9Z8": { + "1Bxo3C6t7YDwWZKJ9r23kg": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, + "color": "#1f2937", "textContent": "React Components Import/Export", "fontFamily": "Satoshi", "fontWeight": 700, @@ -1558,12 +1556,12 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjgs9ZDY1GLQPtyaFEd": { + "1Bxo3C6syt8e7s3qceRjCB": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#4b5563" }], "opacity": 1, + "color": "#4b5563", "textContent": "Seamlessly work with React components, boosting your design-to-development workflow.\n", "fontFamily": "Inter", "fontWeight": 400, @@ -1573,7 +1571,7 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjgs9XEh7ciZR5VcQh3": { + "1Bxo3C6sj3gPb6WfCt4zcu": { "hidden": false, "width": { "min": 0 }, "height": { "min": 0 }, @@ -1596,12 +1594,12 @@ "paddingBottom": 20, "paddingLeft": 20 }, - "1Bxgjgs9VBZpEGBwdrnNAM": { + "1Bxo3C6swFeiZ9tZb7ZcYq": { "width": "hug", "height": "hug", "svgContent": "\n\n\n" }, - "1Bxgjgs9QkAPcjMDD8pbHk": { + "1Bxo3C6sy9pDb1WK3jSZQE": { "hidden": false, "width": "hug", "height": "hug", @@ -1624,12 +1622,12 @@ "paddingBottom": 4, "paddingLeft": 4 }, - "1Bxgjgs9WQB3ub5Y6czH5g": { + "1Bxo3C6t2DfxStM7XDnRuo": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, + "color": "#1f2937", "textContent": "Collaboration for Everyone", "fontFamily": "Satoshi", "fontWeight": 700, @@ -1639,12 +1637,12 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjgs9Wh3fM7jU1Watbb": { + "1Bxo3C6syzzHBADxMU12eh": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#4b5563" }], "opacity": 1, + "color": "#4b5563", "textContent": "Collaborate in real-time with your team, whether they're designers, developers, or stakeholders.\n", "fontFamily": "Inter", "fontWeight": 400, @@ -1654,7 +1652,7 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjgs9awHtyP1buYVYos": { + "1Bxo3C6sxGvxAkat5P32Hv": { "hidden": false, "width": { "min": 0 }, "height": { "min": 0 }, @@ -1677,12 +1675,12 @@ "paddingBottom": 20, "paddingLeft": 20 }, - "1Bxgjgs9QuoUd674ADNEgq": { + "1Bxo3C6tGPLo2LecVx9UcJ": { "width": "hug", "height": "hug", "svgContent": "\n\n\n" }, - "1Bxgjgs9TxnPEzkeGrVj3N": { + "1Bxo3C6tF6hsZj42Ca3xqi": { "hidden": false, "width": "hug", "height": "hug", @@ -1705,12 +1703,12 @@ "paddingBottom": 4, "paddingLeft": 4 }, - "1Bxgjgs9RzQh2ZKhGfUyjK": { + "1Bxo3C6tFbAwbjSgz6VuGr": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, + "color": "#1f2937", "textContent": "Offline Editing Experience", "fontFamily": "Satoshi", "fontWeight": 700, @@ -1720,12 +1718,12 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjgs9c9Nr4tpKHFBgmq": { + "1Bxo3C6tFWw21DduVXnvHr": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#4b5563" }], "opacity": 1, + "color": "#4b5563", "textContent": "Benefit from UIMix's seamless offline editing, offering local file management, hot reloading, and an uninterrupted workflow.\n\n", "fontFamily": "Inter", "fontWeight": 400, @@ -1735,7 +1733,7 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjgs9aqhTtrW8GpYXyW": { + "1Bxo3C6tLnDNZuAi2BPt79": { "hidden": false, "width": { "min": 0 }, "height": { "min": 0 }, @@ -1758,12 +1756,12 @@ "paddingBottom": 20, "paddingLeft": 20 }, - "1Bxgjgs9gXAhmCU2PCwYtc": { + "1Bxo3C6tC6oB2knVgwoEVT": { "width": "hug", "height": "hug", "svgContent": "\n\n\n\n" }, - "1Bxgjgs9q2YgXemj4iPnFm": { + "1Bxo3C6tMtHqr7Yvtseo5S": { "hidden": false, "width": "hug", "height": "hug", @@ -1786,12 +1784,12 @@ "paddingBottom": 4, "paddingLeft": 4 }, - "1Bxgjgs9fqYS24PdQgjvEd": { + "1Bxo3C6tEUetgJNYMaXZV1": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, + "color": "#1f2937", "textContent": "AI Assistance", "fontFamily": "Satoshi", "fontWeight": 700, @@ -1801,12 +1799,12 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjgs9efkiTtyP16cdbJ": { + "1Bxo3C6tFceQnq6jKHwUZF": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#4b5563" }], "opacity": 1, + "color": "#4b5563", "textContent": "Supercharge your design process with AI-generated and refined text contents, as well as AI-generated images that fit perfectly into your project.", "fontFamily": "Inter", "fontWeight": 400, @@ -1816,7 +1814,7 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjgs9SkoQ2v49ZWqcRS": { + "1Bxo3C6tL6xbNFD5BAG2xj": { "hidden": false, "width": { "min": 0 }, "height": { "min": 0 }, @@ -1839,12 +1837,12 @@ "paddingBottom": 20, "paddingLeft": 20 }, - "1Bxgjgs9oDaNroUbVBkYYF": { + "1Bxo3C6tYsuGh8ws2omu8a": { "width": "hug", "height": "hug", "svgContent": "\n\n\n" }, - "1Bxgjgs9gTCfvEwRA6PBAU": { + "1Bxo3C6tHV7ezmprPH9Lf5": { "hidden": false, "width": "hug", "height": "hug", @@ -1867,12 +1865,12 @@ "paddingBottom": 4, "paddingLeft": 4 }, - "1Bxgjgs9cuRr7x9X6oqu5z": { + "1Bxo3C6tZNtV3D4c4s9kzR": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, + "color": "#1f2937", "textContent": "Figma Integration", "fontFamily": "Satoshi", "fontWeight": 700, @@ -1882,12 +1880,12 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjgs9dXBQDGvaCtqi4i": { + "1Bxo3C6tZg5DpGcRuLbaRq": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#4b5563" }], "opacity": 1, + "color": "#4b5563", "textContent": "Easily import designs from Figma and export components back to Figma, ensuring seamless collaboration between UIMix and your favorite design tool.", "fontFamily": "Inter", "fontWeight": 400, @@ -1897,7 +1895,7 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjgs9fnauTXkyKgJtBU": { + "1Bxo3C6tNCjEnZmf6nEZJ6": { "hidden": false, "width": { "min": 0 }, "height": { "min": 0 }, @@ -1920,7 +1918,7 @@ "paddingBottom": 20, "paddingLeft": 20 }, - "1Bxgjgs99FRGedmfydqpA1": { + "1Bxo3C6sZwYpDzdkE45eBS": { "hidden": false, "width": { "min": 0, "max": 1200 }, "height": { "min": 0 }, @@ -1943,8 +1941,8 @@ "paddingBottom": 0, "paddingLeft": 0 }, - "1BxgjgsADhr4Xb4CmzZrhs:1Bxgjgs99FRGedmfydqpA1": { "gridColumnCount": 1 }, - "1Bxgjgs9AWzy5974JBEtMt": { + "1Bxo3C6wU6pGqTmqEgaG26:1Bxo3C6sZwYpDzdkE45eBS": { "gridColumnCount": 1 }, + "1Bxo3C6sVeFTeraBaaPjCB": { "hidden": false, "width": { "min": 0 }, "height": "hug", @@ -1967,13 +1965,13 @@ "paddingBottom": 48, "paddingLeft": 24 }, - "1Bxgjgs9hfjcSYCCF61mun": { + "1Bxo3C6tXEBfsTnN7vmfeD": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, "marginBottom": 24, + "color": "#1f2937", "textContent": "Open Source", "fontFamily": "Satoshi", "fontWeight": 900, @@ -1983,13 +1981,13 @@ "textHorizontalAlign": "center", "textVerticalAlign": "start" }, - "1Bxgjgs9rLVbSxdPJodHqn": { + "1Bxo3C6teueDo5h7WNjj2j": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#4b5563" }], "opacity": 1, "marginBottom": 48, + "color": "#4b5563", "textContent": "UIMix's open-source editor and backend promote community-driven development and offer extensive customization options.\nSelf-host both components for greater control over your design environment and data security.", "fontFamily": "Inter", "fontWeight": 400, @@ -1999,12 +1997,12 @@ "textHorizontalAlign": "center", "textVerticalAlign": "start" }, - "1Bxgjgs9szsG44zZhsehfS": { + "1Bxo3C6teswLE9z98W9Keg": { "hidden": false, "width": "hug", "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, + "color": "#1f2937", "textContent": "Explore GitHub repo", "fontFamily": "Satoshi", "fontWeight": 700, @@ -2014,7 +2012,7 @@ "textHorizontalAlign": "center", "textVerticalAlign": "start" }, - "1Bxgjgs9tN9yLtoNEvYn7z": { + "1Bxo3C6tRsjHPz2bdBcTV1": { "hidden": false, "width": "hug", "height": "hug", @@ -2045,13 +2043,13 @@ "paddingBottom": 10.5, "paddingLeft": 22.5 }, - "1Bxgjgs9tBYpT1rAt4AVoz": { + "1Bxo3C6tnZox5DyFFBmJ8T": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, "marginBottom": 72, + "color": "#1f2937", "textContent": "How It Works", "fontFamily": "Satoshi", "fontWeight": 900, @@ -2061,13 +2059,13 @@ "textHorizontalAlign": "center", "textVerticalAlign": "start" }, - "1Bxgjgs9yoDFJeJXnXsvyi": { + "1Bxo3C6vKTJaALBY89EAbA": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, "marginBottom": 26, + "color": "#1f2937", "textContent": "A. Start Your Project", "fontFamily": "Satoshi", "fontWeight": 700, @@ -2077,12 +2075,12 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjgs9wevQuQnGJPzEta": { + "1Bxo3C6vAc3bauH9BFdVh6": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#4b5563" }], "opacity": 1, + "color": "#4b5563", "textContent": "Sign up for a free account or log in.\nCreate a new project or import an existing Figma design.\nOrganize your components and design tokens in the user-friendly interface.", "fontFamily": "Inter", "fontWeight": 400, @@ -2092,19 +2090,19 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1BxgjgsA1vQipRm9xnzfDg": { + "1Bxo3C6tkLjwwJhYs5ALYP": { "width": { "min": 0 }, "height": "hug", "layout": "flex", "flexDirection": "y" }, - "1BxgjgsA6ogWtv33CuxHxs": { + "1Bxo3C6vb445HkcT7i13JB": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, "marginBottom": 20, + "color": "#1f2937", "textContent": "B. Design & Develop", "fontFamily": "Satoshi", "fontWeight": 700, @@ -2114,12 +2112,12 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjgs9yRfHURxfqVst7k": { + "1Bxo3C6vbpPQDpfSanPWfj": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#4b5563" }], "opacity": 1, + "color": "#4b5563", "textContent": "Utilize Figma-like editing tools to create and modify designs.\nSeamlessly import React components into your UIMix project.\nLeverage AI assistance to efficiently generate and refine your content.", "fontFamily": "Inter", "fontWeight": 400, @@ -2129,19 +2127,19 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1BxgjgsA6WTgyzkyPKursw": { + "1Bxo3C6vLgZXkwDWsvS4qB": { "width": { "min": 0 }, "height": "hug", "layout": "flex", "flexDirection": "y" }, - "1BxgjgsA4eYi2ZbYvWsxiW": { + "1Bxo3C6vYmSFRMBtJR8wMC": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, "marginBottom": 20, + "color": "#1f2937", "textContent": "C. Collaborate & Publish", "fontFamily": "Satoshi", "fontWeight": 700, @@ -2151,12 +2149,12 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjgs9rcRMNzmecHh2Zi": { + "1Bxo3C6vqiXStKvHYxcJKZ": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#4b5563" }], "opacity": 1, + "color": "#4b5563", "textContent": "Collaborate using the online editor or work offline for an optimized development experience.\nIntegrate with GitHub for streamlined version control.\nEasily import UIMix components into React apps or export final designs back to Figma.", "fontFamily": "Inter", "fontWeight": 400, @@ -2166,13 +2164,13 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1BxgjgsA1Uu23M1rqgYY6J": { + "1Bxo3C6vWncDbPuYNEi5tN": { "width": { "min": 0 }, "height": "hug", "layout": "flex", "flexDirection": "y" }, - "1BxgjgsA17v5FG3eRX8HVz": { + "1Bxo3C6tqVBLJY9ao12DGY": { "width": { "min": 0, "max": 1280 }, "height": "hug", "layout": "flex", @@ -2180,7 +2178,7 @@ "rowGap": 24, "columnGap": 24 }, - "1Bxgjgs9k9mX7Cwvqzm54j": { + "1Bxo3C6tYN1XAWaPApxdDP": { "width": { "min": 0 }, "height": "hug", "layout": "flex", @@ -2191,7 +2189,7 @@ "paddingBottom": 128, "paddingLeft": 24 }, - "1Bxgjgs9zrsdpDGriwG9Yb": { + "1Bxo3C6vkEFt4fdED7W9Hh": { "hidden": false, "position": { "left": -23, "top": -368 }, "width": 1500, @@ -2205,13 +2203,13 @@ "shadows": [], "imageHash": "DGLFxM8eMqBjHUQYEekprnB3xC-f5uvLxL7x2odVAEU" }, - "1BxgjgsA67fGG3oJLQgrNF": { + "1Bxo3C6vg9WRJz25B7wRi1": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#ffffff" }], "opacity": 1, "marginBottom": 48, + "color": "#ffffff", "textContent": "Ready to revolutionize your web design workflow?", "fontFamily": "Satoshi", "fontWeight": 900, @@ -2221,12 +2219,12 @@ "textHorizontalAlign": "center", "textVerticalAlign": "start" }, - "1BxgjgsAFAMFrDTX2YLmdP": { + "1Bxo3C6vmLKDZMdMTN1Fki": { "hidden": false, "width": "hug", "height": "hug", - "fills": [{ "solid": "#3b82f6" }], "opacity": 1, + "color": "#3b82f6", "textContent": "Get Early Access", "fontFamily": "Satoshi", "fontWeight": 900, @@ -2236,7 +2234,7 @@ "textHorizontalAlign": "center", "textVerticalAlign": "start" }, - "1BxgjgsAEw22VV7hyUmxto": { + "1Bxo3C6vqodXXQKr9SF2ht": { "hidden": false, "width": "hug", "height": "hug", @@ -2262,7 +2260,7 @@ "paddingBottom": 12, "paddingLeft": 24 }, - "1BxgjgsA8QB6gjuxQQrcn5": { + "1Bxo3C6vnSqcJRKjTfCnms": { "hidden": false, "width": "hug", "height": "hug", @@ -2287,7 +2285,7 @@ "paddingBottom": 0, "paddingLeft": 0 }, - "1Bxgjgs9uLsj7SwVxQdHv3": { + "1Bxo3C6vszh4iiDksf3E12": { "hidden": false, "width": { "min": 0 }, "height": "hug", @@ -2304,7 +2302,7 @@ "paddingTop": 96, "paddingBottom": 96 }, - "1Bxgjgs8kC4aw1azZHyGsQ": { + "1Bxo3C6rr1sQSQkfwYEzSn": { "hidden": false, "position": { "left": 20, "top": 200 }, "width": 1440, @@ -2321,7 +2319,7 @@ "flexDirection": "y", "flexAlign": "center" }, - "1BxgjgsADhr4Xb4CmzZrhs": { + "1Bxo3C6wU6pGqTmqEgaG26": { "position": { "left": 1500, "top": 200 }, "width": 720 } @@ -2354,7 +2352,7 @@ } }, "colors": { - "1Bxgjgs7W6WsySYu61zEod": { + "1Bxo3C6rA9BcPuUKGVUgXr": { "index": 0, "name": "Red Orange", "value": "#EF4444", diff --git a/packages/sandbox/src/components.uimix b/packages/sandbox/src/components.uimix index 4c419038..24694fa5 100644 --- a/packages/sandbox/src/components.uimix +++ b/packages/sandbox/src/components.uimix @@ -139,9 +139,7 @@ export default ( variants={{ "maxWidth:767": { overrides: { - button: { - overrides: { text: { color: "#FF0000" } }, - }, + button: { overrides: { text: { color: "#FF0000" } } }, }, }, }} diff --git a/packages/sandbox/src/nested/landing.uimix b/packages/sandbox/src/nested/landing.uimix index b4f1a93a..6d73792b 100644 --- a/packages/sandbox/src/nested/landing.uimix +++ b/packages/sandbox/src/nested/landing.uimix @@ -52,8 +52,8 @@ export default ( hidden={false} width="hug" height="hug" - fills={[{ solid: "#1f2937" }]} opacity={1} + color="#1f2937" textContent="UIMix" fontFamily="Satoshi" fontWeight={900} @@ -127,8 +127,8 @@ export default ( hidden={false} width="hug" height="hug" - fills={[{ solid: "#1f2937" }]} opacity={1} + color="#1f2937" textContent="Sign In" fontFamily="Satoshi" fontWeight={700} @@ -173,8 +173,8 @@ export default ( hidden={false} width="hug" height="hug" - fills={[{ solid: "#ffffff" }]} opacity={1} + color="#ffffff" textContent="Get Early Access" fontFamily="Satoshi" fontWeight={900} @@ -216,8 +216,8 @@ export default ( hidden={false} width="hug" height="hug" - fills={[{ solid: "#000000" }]} opacity={1} + color="#000000" textContent="Features" fontFamily="Satoshi" fontWeight={500} @@ -233,8 +233,8 @@ export default ( hidden={false} width="hug" height="hug" - fills={[{ solid: "#000000" }]} opacity={1} + color="#000000" textContent="Pricing" fontFamily="Satoshi" fontWeight={500} @@ -250,8 +250,8 @@ export default ( hidden={false} width="hug" height="hug" - fills={[{ solid: "#000000" }]} opacity={1} + color="#000000" textContent="Docs" fontFamily="Satoshi" fontWeight={500} @@ -267,8 +267,8 @@ export default ( hidden={false} width="hug" height="hug" - fills={[{ solid: "#000000" }]} opacity={1} + color="#000000" textContent="GitHub" fontFamily="Satoshi" fontWeight={500} @@ -353,10 +353,10 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#1F2937" }]} opacity={1} marginTop={96} marginBottom={48} + color="#1F2937" textContent={ "Revolutionize Your Web Design\nand Development Workflow" } @@ -374,9 +374,9 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#6b7280" }]} opacity={1} marginBottom={48} + color="#6b7280" textContent={ "UIMix is a open-source design tool that combines intuitive editing,\nReact integration, AI assistance, and advanced design tokens." } @@ -447,8 +447,8 @@ export default ( hidden={false} width="hug" height="hug" - fills={[{ solid: "#ffffff" }]} opacity={1} + color="#ffffff" textContent="Get Early Access" fontFamily="Satoshi" fontWeight={900} @@ -464,6 +464,7 @@ export default ( id="image_1" name="image 1" hidden={false} + position={{ left: 360, top: 581 }} width={{ min: 0, max: 720 }} height="hug" topLeftRadius={10} @@ -602,8 +603,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#1f2937" }]} opacity={1} + color="#1f2937" textContent="Figma-like Intuitive Editing" fontFamily="Satoshi" fontWeight={700} @@ -619,8 +620,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#4b5563" }]} opacity={1} + color="#4b5563" textContent="Experience a user-friendly interface with familiar design tools, making it easy for both beginners and professionals to create stunning web designs." fontFamily="Inter" fontWeight={400} @@ -697,8 +698,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#1f2937" }]} opacity={1} + color="#1f2937" textContent="React Components Import/Export" fontFamily="Satoshi" fontWeight={700} @@ -714,8 +715,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#4b5563" }]} opacity={1} + color="#4b5563" textContent={ "Seamlessly work with React components, boosting your design-to-development workflow.\n" } @@ -794,8 +795,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#1f2937" }]} opacity={1} + color="#1f2937" textContent="Collaboration for Everyone" fontFamily="Satoshi" fontWeight={700} @@ -811,8 +812,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#4b5563" }]} opacity={1} + color="#4b5563" textContent={ "Collaborate in real-time with your team, whether they're designers, developers, or stakeholders.\n" } @@ -891,8 +892,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#1f2937" }]} opacity={1} + color="#1f2937" textContent="Offline Editing Experience" fontFamily="Satoshi" fontWeight={700} @@ -908,8 +909,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#4b5563" }]} opacity={1} + color="#4b5563" textContent={ "Benefit from UIMix's seamless offline editing, offering local file management, hot reloading, and an uninterrupted workflow.\n\n" } @@ -988,8 +989,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#1f2937" }]} opacity={1} + color="#1f2937" textContent="AI Assistance" fontFamily="Satoshi" fontWeight={700} @@ -1005,8 +1006,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#4b5563" }]} opacity={1} + color="#4b5563" textContent="Supercharge your design process with AI-generated and refined text contents, as well as AI-generated images that fit perfectly into your project." fontFamily="Inter" fontWeight={400} @@ -1083,8 +1084,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#1f2937" }]} opacity={1} + color="#1f2937" textContent="Figma Integration" fontFamily="Satoshi" fontWeight={700} @@ -1100,8 +1101,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#4b5563" }]} opacity={1} + color="#4b5563" textContent="Easily import designs from Figma and export components back to Figma, ensuring seamless collaboration between UIMix and your favorite design tool." fontFamily="Inter" fontWeight={400} @@ -1133,9 +1134,9 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#1f2937" }]} opacity={1} marginBottom={24} + color="#1f2937" textContent="Open Source" fontFamily="Satoshi" fontWeight={900} @@ -1151,9 +1152,9 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#4b5563" }]} opacity={1} marginBottom={48} + color="#4b5563" textContent={ "UIMix's open-source editor and backend promote community-driven development and offer extensive customization options.\nSelf-host both components for greater control over your design environment and data security." } @@ -1204,8 +1205,8 @@ export default ( hidden={false} width="hug" height="hug" - fills={[{ solid: "#1f2937" }]} opacity={1} + color="#1f2937" textContent="Explore GitHub repo" fontFamily="Satoshi" fontWeight={700} @@ -1222,9 +1223,9 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#1f2937" }]} opacity={1} marginBottom={72} + color="#1f2937" textContent="How It Works" fontFamily="Satoshi" fontWeight={900} @@ -1258,9 +1259,9 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#1f2937" }]} opacity={1} marginBottom={26} + color="#1f2937" textContent="A. Start Your Project" fontFamily="Satoshi" fontWeight={700} @@ -1276,8 +1277,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#4b5563" }]} opacity={1} + color="#4b5563" textContent={ "Sign up for a free account or log in.\nCreate a new project or import an existing Figma design.\nOrganize your components and design tokens in the user-friendly interface." } @@ -1304,9 +1305,9 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#1f2937" }]} opacity={1} marginBottom={20} + color="#1f2937" textContent="B. Design & Develop" fontFamily="Satoshi" fontWeight={700} @@ -1322,8 +1323,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#4b5563" }]} opacity={1} + color="#4b5563" textContent={ "Utilize Figma-like editing tools to create and modify designs.\nSeamlessly import React components into your UIMix project.\nLeverage AI assistance to efficiently generate and refine your content." } @@ -1350,9 +1351,9 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#1f2937" }]} opacity={1} marginBottom={20} + color="#1f2937" textContent="C. Collaborate & Publish" fontFamily="Satoshi" fontWeight={700} @@ -1368,8 +1369,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#4b5563" }]} opacity={1} + color="#4b5563" textContent={ "Collaborate using the online editor or work offline for an optimized development experience.\nIntegrate with GitHub for streamlined version control.\nEasily import UIMix components into React apps or export final designs back to Figma." } @@ -1425,9 +1426,9 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#ffffff" }]} opacity={1} marginBottom={48} + color="#ffffff" textContent="Ready to revolutionize your web design workflow?" fontFamily="Satoshi" fontWeight={900} @@ -1498,8 +1499,8 @@ export default ( hidden={false} width="hug" height="hug" - fills={[{ solid: "#3b82f6" }]} opacity={1} + color="#3b82f6" textContent="Get Early Access" fontFamily="Satoshi" fontWeight={900} From 62dc50ebd4e0c611ac794643b53a552d9ec93eca Mon Sep 17 00:00:00 2001 From: Ryohei Ikegami Date: Sun, 30 Apr 2023 22:43:50 +0900 Subject: [PATCH 07/10] Add ColorInput --- .../src/views/inspector/style/TextPane.tsx | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/packages/editor/src/views/inspector/style/TextPane.tsx b/packages/editor/src/views/inspector/style/TextPane.tsx index c27fe6be..52454af7 100644 --- a/packages/editor/src/views/inspector/style/TextPane.tsx +++ b/packages/editor/src/views/inspector/style/TextPane.tsx @@ -19,6 +19,10 @@ import { InspectorTargetContext } from "../components/InspectorTargetContext"; import { projectState } from "../../../state/ProjectState"; import { InspectorComboBox } from "./inputs/InspectorComboBox"; import googleFonts from "@uimix/foundation/src/fonts/GoogleFonts.json"; +import { ColorInput } from "../components/ColorInput"; +import { sameOrMixed, sameOrNone } from "@uimix/foundation/src/utils/Mixed"; +import { ColorRef } from "@uimix/model/src/models"; +import { action } from "mobx"; const googleFontOptions = googleFonts.items.map((item) => ({ value: item.family, @@ -68,6 +72,9 @@ export const TextPane: React.FC = observer(function TextPane() { return null; } + // TODO: Add InspectorColorInput? + const color = sameOrNone(textSelectables.map((s) => s.style.color)); + return (
+ { + for (const selectable of textSelectables) { + selectable.style.color = color?.toJSON() ?? "#000000"; + } + })} + onChangeEnd={action(() => { + projectState.undoManager.stopCapturing(); + })} + /> s.style.fontFamily} set={(s, value) => { From 3e0b9fa49ed856f4e7bf85e77ba13bd4125f6e1d Mon Sep 17 00:00:00 2001 From: Ryohei Ikegami Date: Sun, 30 Apr 2023 22:46:24 +0900 Subject: [PATCH 08/10] Allow fills/borders for text --- .../elements-react/src/style/buildNodeCSS.ts | 59 +++++++++---------- 1 file changed, 28 insertions(+), 31 deletions(-) diff --git a/packages/elements-react/src/style/buildNodeCSS.ts b/packages/elements-react/src/style/buildNodeCSS.ts index ea51779d..506eb33f 100644 --- a/packages/elements-react/src/style/buildNodeCSS.ts +++ b/packages/elements-react/src/style/buildNodeCSS.ts @@ -166,37 +166,34 @@ export function buildNodeCSS( cssStyle.paddingBottom = `${style.paddingBottom}px`; } - if (nodeType === "frame" || nodeType === "image" || nodeType === "svg") { - const fills = style.fills; - cssStyle.background = fills.length ? fills[0].solid : "transparent"; - cssStyle.borderStyle = "solid"; - cssStyle.borderColor = - (style.border && style.border.solid) ?? "transparent"; - cssStyle.borderTopWidth = `${style.borderTopWidth}px`; - cssStyle.borderRightWidth = `${style.borderRightWidth}px`; - cssStyle.borderBottomWidth = `${style.borderBottomWidth}px`; - cssStyle.borderLeftWidth = `${style.borderLeftWidth}px`; - - cssStyle.borderTopLeftRadius = `${style.topLeftRadius}px`; - cssStyle.borderTopRightRadius = `${style.topRightRadius}px`; - cssStyle.borderBottomRightRadius = `${style.bottomRightRadius}px`; - cssStyle.borderBottomLeftRadius = `${style.bottomLeftRadius}px`; - - const shadows = style.shadows; - if (shadows.length === 0) { - cssStyle.boxShadow = "none"; - } else { - cssStyle.boxShadow = shadows - .map((shadow) => { - const x = `${shadow.x}px`; - const y = `${shadow.y}px`; - const blur = `${shadow.blur}px`; - const spread = `${shadow.spread}px`; - const color = shadow.color; - return `${x} ${y} ${blur} ${spread} ${color}`; - }) - .join(", "); - } + const fills = style.fills; + cssStyle.background = fills.length ? fills[0].solid : "transparent"; + cssStyle.borderStyle = "solid"; + cssStyle.borderColor = (style.border && style.border.solid) ?? "transparent"; + cssStyle.borderTopWidth = `${style.borderTopWidth}px`; + cssStyle.borderRightWidth = `${style.borderRightWidth}px`; + cssStyle.borderBottomWidth = `${style.borderBottomWidth}px`; + cssStyle.borderLeftWidth = `${style.borderLeftWidth}px`; + + cssStyle.borderTopLeftRadius = `${style.topLeftRadius}px`; + cssStyle.borderTopRightRadius = `${style.topRightRadius}px`; + cssStyle.borderBottomRightRadius = `${style.bottomRightRadius}px`; + cssStyle.borderBottomLeftRadius = `${style.bottomLeftRadius}px`; + + const shadows = style.shadows; + if (shadows.length === 0) { + cssStyle.boxShadow = "none"; + } else { + cssStyle.boxShadow = shadows + .map((shadow) => { + const x = `${shadow.x}px`; + const y = `${shadow.y}px`; + const blur = `${shadow.blur}px`; + const spread = `${shadow.spread}px`; + const color = shadow.color; + return `${x} ${y} ${blur} ${spread} ${color}`; + }) + .join(", "); } if (nodeType === "text") { From a736f2c8da1347d04e5b413b0d466e46e1f3d3cd Mon Sep 17 00:00:00 2001 From: Ryohei Ikegami Date: Sun, 30 Apr 2023 22:58:53 +0900 Subject: [PATCH 09/10] Allow paddings in texts --- .../src/views/inspector/style/TextPane.tsx | 137 +++++++++++------- .../elements-react/src/style/buildNodeCSS.ts | 9 +- 2 files changed, 91 insertions(+), 55 deletions(-) diff --git a/packages/editor/src/views/inspector/style/TextPane.tsx b/packages/editor/src/views/inspector/style/TextPane.tsx index 52454af7..fb04d6d7 100644 --- a/packages/editor/src/views/inspector/style/TextPane.tsx +++ b/packages/editor/src/views/inspector/style/TextPane.tsx @@ -1,19 +1,12 @@ import { observer } from "mobx-react-lite"; import formatSizeIcon from "@iconify-icons/ic/format-size"; import formatLineSpacingIcon from "@iconify-icons/ic/format-line-spacing"; -import formatAlignLeftIcon from "@iconify-icons/ic/format-align-left"; -import formatAlignCenterIcon from "@iconify-icons/ic/format-align-center"; -import formatAlignRightIcon from "@iconify-icons/ic/format-align-right"; -import formatAlignJustifyIcon from "@iconify-icons/ic/format-align-justify"; -import verticalAlignTopIcon from "@iconify-icons/ic/vertical-align-top"; -import verticalAlignCenterIcon from "@iconify-icons/ic/vertical-align-center"; -import verticalAlignBottomIcon from "@iconify-icons/ic/vertical-align-bottom"; import spaceBarIcon from "@iconify-icons/ic/space-bar"; +import edgeTopIcon from "@seanchas116/design-icons/json/edge-top.json"; import { InspectorHeading } from "../components/InspectorHeading"; import { InspectorNumberInput } from "./inputs/InspectorNumberInput"; import { InspectorPane } from "../components/InspectorPane"; -import { InspectorToggleGroup } from "./inputs/InspectorToggleGroup"; -import { ToggleGroupItem } from "@uimix/foundation/src/components"; +import { AlignmentEdit } from "@uimix/foundation/src/components"; import * as Data from "@uimix/model/src/data/v1"; import { InspectorTargetContext } from "../components/InspectorTargetContext"; import { projectState } from "../../../state/ProjectState"; @@ -29,40 +22,6 @@ const googleFontOptions = googleFonts.items.map((item) => ({ text: item.family, })); -const textAlignOptions: ToggleGroupItem[] = [ - { - value: "start", - icon: formatAlignLeftIcon, - }, - { - value: "center", - icon: formatAlignCenterIcon, - }, - { - value: "end", - icon: formatAlignRightIcon, - }, - { - value: "justify", - icon: formatAlignJustifyIcon, - }, -]; - -const verticalAlignOptions: ToggleGroupItem[] = [ - { - value: "start", - icon: verticalAlignTopIcon, - }, - { - value: "center", - icon: verticalAlignCenterIcon, - }, - { - value: "end", - icon: verticalAlignBottomIcon, - }, -]; - export const TextPane: React.FC = observer(function TextPane() { const textSelectables = projectState.selectedSelectables.filter( (s) => s.node.type === "text" @@ -173,22 +132,98 @@ export const TextPane: React.FC = observer(function TextPane() { }} />
- s.style.textHorizontalAlign} + +
+ ({ value: s.style.paddingTop })} + set={(s, value) => { + s.style.paddingTop = value?.value ?? 0; + }} + /> + ({ value: s.style.paddingRight })} + set={(s, value) => { + s.style.paddingRight = value?.value ?? 0; + }} + /> + ({ value: s.style.paddingBottom })} set={(s, value) => { - s.style.textHorizontalAlign = value ?? "start"; + s.style.paddingBottom = value?.value ?? 0; }} /> - s.style.textVerticalAlign} + ({ value: s.style.paddingLeft })} set={(s, value) => { - s.style.textVerticalAlign = value ?? "start"; + s.style.paddingLeft = value?.value ?? 0; }} /> +
); }); + +const StackAlignmentEdit = observer(function StackAlignmentEdit({ + direction, + className, +}: { + direction: Data.StackDirection; + className?: string; +}) { + const selectables = projectState.selectedSelectables; + const align = sameOrMixed( + selectables.map((s) => s.style.textHorizontalAlign) + ); + const justify = sameOrMixed( + selectables.map((s) => s.style.textVerticalAlign) + ); + + return ( + { + for (const selectable of selectables) { + selectable.style.textHorizontalAlign = align ?? "start"; + selectable.style.textVerticalAlign = + justify && justify !== "spaceBetween" ? justify : "start"; + } + projectState.undoManager.stopCapturing(); + })} + /> + ); +}); diff --git a/packages/elements-react/src/style/buildNodeCSS.ts b/packages/elements-react/src/style/buildNodeCSS.ts index 506eb33f..1a357f3d 100644 --- a/packages/elements-react/src/style/buildNodeCSS.ts +++ b/packages/elements-react/src/style/buildNodeCSS.ts @@ -160,12 +160,13 @@ export function buildNodeCSS( } else { cssStyle.display = "block"; } - cssStyle.paddingLeft = `${style.paddingLeft}px`; - cssStyle.paddingRight = `${style.paddingRight}px`; - cssStyle.paddingTop = `${style.paddingTop}px`; - cssStyle.paddingBottom = `${style.paddingBottom}px`; } + cssStyle.paddingLeft = `${style.paddingLeft}px`; + cssStyle.paddingRight = `${style.paddingRight}px`; + cssStyle.paddingTop = `${style.paddingTop}px`; + cssStyle.paddingBottom = `${style.paddingBottom}px`; + const fills = style.fills; cssStyle.background = fills.length ? fills[0].solid : "transparent"; cssStyle.borderStyle = "solid"; From ff1c066e0613fad9463adcbf33b21470fa7897ea Mon Sep 17 00:00:00 2001 From: Ryohei Ikegami Date: Sun, 30 Apr 2023 23:03:44 +0900 Subject: [PATCH 10/10] Tweak --- .../src/views/inspector/style/TextPane.tsx | 165 +++++++++--------- 1 file changed, 81 insertions(+), 84 deletions(-) diff --git a/packages/editor/src/views/inspector/style/TextPane.tsx b/packages/editor/src/views/inspector/style/TextPane.tsx index fb04d6d7..314dea12 100644 --- a/packages/editor/src/views/inspector/style/TextPane.tsx +++ b/packages/editor/src/views/inspector/style/TextPane.tsx @@ -23,16 +23,16 @@ const googleFontOptions = googleFonts.items.map((item) => ({ })); export const TextPane: React.FC = observer(function TextPane() { - const textSelectables = projectState.selectedSelectables.filter( - (s) => s.node.type === "text" + const selectables = projectState.selectedSelectables.filter( + (s) => s.node.type === "text" || s.node.type === "frame" ); - if (textSelectables.length === 0) { + if (selectables.length === 0) { return null; } // TODO: Add InspectorColorInput? - const color = sameOrNone(textSelectables.map((s) => s.style.color)); + const color = sameOrNone(selectables.map((s) => s.style.color)); return ( @@ -40,7 +40,7 @@ export const TextPane: React.FC = observer(function TextPane() { icon="material-symbols:font-download-outline-rounded" text="Text" /> - +
{ - for (const selectable of textSelectables) { + for (const selectable of selectables) { selectable.style.color = color?.toJSON() ?? "#000000"; } })} @@ -133,70 +133,20 @@ export const TextPane: React.FC = observer(function TextPane() { />
-
- ({ value: s.style.paddingTop })} - set={(s, value) => { - s.style.paddingTop = value?.value ?? 0; - }} - /> - ({ value: s.style.paddingRight })} - set={(s, value) => { - s.style.paddingRight = value?.value ?? 0; - }} - /> - ({ value: s.style.paddingBottom })} - set={(s, value) => { - s.style.paddingBottom = value?.value ?? 0; - }} - /> - ({ value: s.style.paddingLeft })} - set={(s, value) => { - s.style.paddingLeft = value?.value ?? 0; - }} - /> - -
+ ); }); -const StackAlignmentEdit = observer(function StackAlignmentEdit({ - direction, - className, -}: { - direction: Data.StackDirection; - className?: string; -}) { - const selectables = projectState.selectedSelectables; +const TextAlignEdit = observer(function TextAlignEdit() { + const selectables = projectState.selectedSelectables.filter( + (s) => s.node.type === "text" + ); + if (selectables.length === 0) { + return null; + } + const align = sameOrMixed( selectables.map((s) => s.style.textHorizontalAlign) ); @@ -205,25 +155,72 @@ const StackAlignmentEdit = observer(function StackAlignmentEdit({ ); return ( - { - for (const selectable of selectables) { - selectable.style.textHorizontalAlign = align ?? "start"; - selectable.style.textVerticalAlign = - justify && justify !== "spaceBetween" ? justify : "start"; +
+ ({ value: s.style.paddingTop })} + set={(s, value) => { + s.style.paddingTop = value?.value ?? 0; + }} + /> + ({ value: s.style.paddingRight })} + set={(s, value) => { + s.style.paddingRight = value?.value ?? 0; + }} + /> + ({ value: s.style.paddingBottom })} + set={(s, value) => { + s.style.paddingBottom = value?.value ?? 0; + }} + /> + ({ value: s.style.paddingLeft })} + set={(s, value) => { + s.style.paddingLeft = value?.value ?? 0; + }} + /> + + justify={typeof justify === "string" ? justify : undefined} + onChange={action((align, justify) => { + for (const selectable of selectables) { + selectable.style.textHorizontalAlign = align ?? "start"; + selectable.style.textVerticalAlign = + justify && justify !== "spaceBetween" ? justify : "start"; + } + projectState.undoManager.stopCapturing(); + })} + /> +
); });