diff --git a/packages/builder-css-styles/dimensions/px.ts b/packages/builder-css-styles/dimensions/px.ts
index c9a3f8ff..406cbdf6 100644
--- a/packages/builder-css-styles/dimensions/px.ts
+++ b/packages/builder-css-styles/dimensions/px.ts
@@ -2,7 +2,10 @@ export function px(d: number): string | undefined {
   if (d === undefined || d === null) {
     return;
   } else {
+    // https://stackoverflow.com/questions/4308989/are-the-decimal-places-in-a-css-width-respected
     // making to fixed number since css does not support decimal px points.
-    return `${d.toFixed()}px`;
+    // If there is a decimal point, it is rounded to the first place.
+    return `${Math.round(d)}px`;
+    // return `${d.toFixed()}px`;
   }
 }
diff --git a/packages/builder-css-styles/index.ts b/packages/builder-css-styles/index.ts
index d71ce819..087e6ad4 100644
--- a/packages/builder-css-styles/index.ts
+++ b/packages/builder-css-styles/index.ts
@@ -14,6 +14,7 @@ export * from "./position";
 export * from "./justify-content";
 export * from "./min-height";
 export * from "./length";
+export * from "./letter-spacing";
 export * from "./calc";
 export * from "./opacity";
 export * from "./blur";
diff --git a/packages/builder-css-styles/letter-spacing/index.ts b/packages/builder-css-styles/letter-spacing/index.ts
new file mode 100644
index 00000000..1c4ffcb7
--- /dev/null
+++ b/packages/builder-css-styles/letter-spacing/index.ts
@@ -0,0 +1,11 @@
+import * as css from "@web-builder/styles";
+import { LetterSpacing } from "@design-sdk/figma-types";
+import { percent } from "../percent";
+
+export function letterSpacing(origin: LetterSpacing): string {
+  if (origin.unit === "PIXELS") {
+    return css.px(origin.value);
+  } else if (origin.unit === "PERCENT") {
+    return percent(origin.value as number);
+  }
+}
diff --git a/packages/builder-web-core/widgets-native/html-text-span/index.ts b/packages/builder-web-core/widgets-native/html-text-span/index.ts
index 740b0095..599a3e74 100644
--- a/packages/builder-web-core/widgets-native/html-text-span/index.ts
+++ b/packages/builder-web-core/widgets-native/html-text-span/index.ts
@@ -48,7 +48,6 @@ export class Text extends TextChildWidget {
       "font-size": css.px(this.textStyle.fontSize),
       "font-family": css.fontFamily(this.textStyle.fontFamily),
       "font-weight": css.convertToCssFontWeight(this.textStyle.fontWeight),
-      "letter-spacing": css.length(this.textStyle.letterSpacing),
       "word-spacing": this.textStyle.wordSpacing,
       "text-align": this.alignment,
       "text-decoration": css.textDecoration(this.textStyle.decoration),
@@ -66,6 +65,12 @@ export class Text extends TextChildWidget {
         "line-height": css.length(this.textStyle.lineHeight),
       };
     }
+    if (!!this.textStyle.letterSpacing) {
+      textStyle = {
+        ...textStyle,
+        "letter-spacing": css.letterSpacing(this.textStyle.letterSpacing),
+      };
+    }
 
     return <CSSProperties>textStyle;
   }
diff --git a/packages/design-sdk b/packages/design-sdk
index ba2b7149..fee316da 160000
--- a/packages/design-sdk
+++ b/packages/design-sdk
@@ -1 +1 @@
-Subproject commit ba2b714938af13f3b1f3e2a1b15ab1ae48e96b9a
+Subproject commit fee316dad26219585f632b2560dfc43f44806a03
diff --git a/packages/designto-flutter/length/dimension-multiple.ts b/packages/designto-flutter/length/dimension-multiple.ts
new file mode 100644
index 00000000..7786bde6
--- /dev/null
+++ b/packages/designto-flutter/length/dimension-multiple.ts
@@ -0,0 +1,16 @@
+/**
+ * FIXME: To be merged with multiple in the future
+ */
+import { Dimension } from "@reflect-ui/core";
+import { rd } from "../_utils";
+
+export function multipleToDimension(origin: number, target: Dimension) {
+  if (target.unit === "PIXELS") {
+    return rd(target.value / origin);
+  }
+
+  if (target.unit === "PERCENT") {
+    return rd(origin * (target.value / 100));
+  }
+  return 0;
+}
diff --git a/packages/designto-flutter/length/index.ts b/packages/designto-flutter/length/index.ts
index 34a1efd0..02ec5f3c 100644
--- a/packages/designto-flutter/length/index.ts
+++ b/packages/designto-flutter/length/index.ts
@@ -1,3 +1,4 @@
 // export * from "./calc";
 export * from "./length";
 export * from "./multiple";
+export * from "./dimension-multiple";
diff --git a/packages/designto-flutter/length/multiple.ts b/packages/designto-flutter/length/multiple.ts
index 9926c340..6dbd9d89 100644
--- a/packages/designto-flutter/length/multiple.ts
+++ b/packages/designto-flutter/length/multiple.ts
@@ -7,7 +7,7 @@ export function multiple(origin: number, target: DimensionLength) {
     const targetToNum = parseInt(target.match(regx)[0]);
 
     if (target.endsWith("%")) {
-      return origin * (origin / 100);
+      return origin * (targetToNum / 100);
     }
 
     if (target.endsWith("px")) {
@@ -18,7 +18,7 @@ export function multiple(origin: number, target: DimensionLength) {
   }
 
   if (typeof target === "number") {
-    return origin / target;
+    return target / origin;
   }
 
   // if (target.type == "calc") {
diff --git a/packages/designto-flutter/painting/painting-text-style.ts b/packages/designto-flutter/painting/painting-text-style.ts
index a548e0fa..b679c7b8 100644
--- a/packages/designto-flutter/painting/painting-text-style.ts
+++ b/packages/designto-flutter/painting/painting-text-style.ts
@@ -4,20 +4,19 @@ import { textDecoration } from "./painting-text-decoration";
 import { fontStyle } from "./painting-font-style";
 import * as dartui from "../dart-ui";
 import { rd } from "../_utils";
-import { multiple } from "../length";
+import { multiple, multipleToDimension } from "../length";
 
 export function textStyle(style: ITextStyle): flutter.TextStyle {
   const { fontFamily, letterSpacing } = style;
   let decoration: flutter.TextDecoration = textDecoration(style.decoration);
   const fontWeight: flutter.FontWeight = flutter.FontWeight[style.fontWeight];
-
   return new flutter.TextStyle({
     fontSize: rd(style.fontSize),
     fontWeight: fontWeight,
     fontFamily: fontFamily,
     color: dartui.color(style.color),
     fontStyle: fontStyle(style.fontStyle),
-    letterSpacing: letterSpacing, // percentage is not supported
+    letterSpacing: multipleToDimension(style.fontSize, letterSpacing),
     height: multiple(style.fontSize, style.lineHeight),
     decoration: decoration,
   });
diff --git a/packages/designto-token/token-text/index.ts b/packages/designto-token/token-text/index.ts
index 7e84dad0..1d1ff8fb 100644
--- a/packages/designto-token/token-text/index.ts
+++ b/packages/designto-token/token-text/index.ts
@@ -46,7 +46,7 @@ export function fromText(node: nodes.ReflectTextNode): Text {
       fontWeight: node.fontWeight,
       color: node.primaryColor,
       lineHeight: node.lineHeight,
-      // letter spacing
+      letterSpacing: node.letterSpacing,
     }),
     ...wh,
   });
diff --git a/packages/reflect-core b/packages/reflect-core
index 944efa60..d7ce21ba 160000
--- a/packages/reflect-core
+++ b/packages/reflect-core
@@ -1 +1 @@
-Subproject commit 944efa60207bd3501dec61dec500e23ea2771261
+Subproject commit d7ce21babbe66c5bd3fe8d4f0c2373c4bf139fe2
diff --git a/packages/reflect-detection b/packages/reflect-detection
index 2c9862b9..6f7c76a0 160000
--- a/packages/reflect-detection
+++ b/packages/reflect-detection
@@ -1 +1 @@
-Subproject commit 2c9862b9d1762208919c01b3fdb760989f5a8e2d
+Subproject commit 6f7c76a0fbd6e55409f66a1126348d1ace643b79