Site reference: Stripe landing page gradient animation is done by html5 canvas (to boost the performance)

• For web - HTML5 Canvas
• For Flutter - Flutter Canvas

References

• https://codepen.io/wiz_amit/pen/JjGRZjJ

example long text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut finibus feugiat erat, vel molestie justo congue a. Vestibulum 
cursus, dui eu mattis ultricies, lacus diam pulvinar nunc, ac commodo leo enim tincidunt ligula. Cras id quam convallis, luctus 
purus sed, facilisis velit. Donec non dignissim tellus. Cras magna odio, ullamcorper sed hendrerit a, efficitur aliquam arcu. 
Fusce congue malesuada iaculis. Nullam in sem sem. Nunc sed tellus feugiat, scelerisque tellus et, ullamcorper sapien. Nunc 
fringilla luctus tristique. Sed viverra ornare dui, id vehicula leo feugiat scelerisque. Cras quis egestas leo, vitae luctus quam. 
Mauris vulputate vulputate justo, vel commodo eros vestibulum vel. Duis cursus, ante id malesuada placerat, lacus purus 
viverra libero, ut ornare ante dui ac purus. Cras congue leo quis felis bibendum, at finibus ex egestas. Donec consectetur 
libero ex, eu iaculis ex semper vitae.

rather than

<Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut finibus feugiat erat, vel molestie justo congue a. Vestibulum 
cursus, dui eu mattis ultricies, lacus diam pulvinar nunc, ac commodo leo enim tincidunt ligula. Cras id quam convallis, luctus 
purus sed, facilisis velit. Donec non dignissim tellus. Cras magna odio, ullamcorper sed hendrerit a, efficitur aliquam arcu. 
Fusce congue malesuada iaculis. Nullam in sem sem. Nunc sed tellus feugiat, scelerisque tellus et, ullamcorper sapien. Nunc 
fringilla luctus tristique. Sed viverra ornare dui, id vehicula leo feugiat scelerisque. Cras quis egestas leo, vitae luctus quam. 
Mauris vulputate vulputate justo, vel commodo eros vestibulum vel. Duis cursus, ante id malesuada placerat, lacus purus 
viverra libero, ut ornare ante dui ac purus. Cras congue leo quis felis bibendum, at finibus ex egestas. Donec consectetur 
libero ex, eu iaculis ex semper vitae.</Text>

would be better

const text = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut finibus feugiat erat, vel molestie justo congue a. 
Vestibulum cursus, dui eu mattis ultricies, lacus diam pulvinar nunc, ac commodo leo enim tincidunt ligula. Cras id quam 
convallis, luctus purus sed, facilisis velit. Donec non dignissim tellus. Cras magna odio, ullamcorper sed hendrerit a, efficitur 
aliquam arcu. Fusce congue malesuada iaculis. Nullam in sem sem. Nunc sed tellus feugiat, scelerisque tellus et, ullamcorper 
sapien. Nunc fringilla luctus tristique. Sed viverra ornare dui, id vehicula leo feugiat scelerisque. Cras quis egestas leo, vitae 
luctus quam. Mauris vulputate vulputate justo, vel commodo eros vestibulum vel. Duis cursus, ante id malesuada placerat, 
lacus purus viverra libero, ut ornare ante dui ac purus. Cras congue leo quis felis bibendum, at finibus ex egestas. Donec 
consectetur libero ex, eu iaculis ex semper vitae.`


<Text>{ text }</Text>

Related - vuejs/core#4633

Html button

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

Attributes

React

// from https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts
interface ButtonHTMLAttributes<T> extends HTMLAttributes<T> {
  autoFocus?: boolean | undefined;
  disabled?: boolean | undefined;
  form?: string | undefined;
  formAction?: string | undefined;
  formEncType?: string | undefined;
  formMethod?: string | undefined;
  formNoValidate?: boolean | undefined;
  formTarget?: string | undefined;
  name?: string | undefined;
  type?: 'submit' | 'reset' | 'button' | undefined;
  value?: string | ReadonlyArray<string> | number | undefined;
}

Vue

<button
        autofocus
        aria-autocomplete=""
        disabled="false"
        form=""
        formaction=""
        formenctype=""
        formmethod=""
        formnovalidate
        name=""
        type=""
        value=""
        >
  Vue Button attributes demo
</button>

Support - https://tailwindcss.com/ for web (css) platforms

Configurations by frameworks

• CRA
• NextJS

tailwind.config.js

https://tailwindcss.com/docs/configuration

Colors

tailwind css color references can be found here. (naming) https://tailwindcss.com/docs/customizing-colors
e.g. usage (background)

• https://github.com/gridaco/designto-code/tree/tailwindcss/packages/builder-module-tailwindcss/tailwind-color

Layout

• aspect-ratio
• container
• columns
• break-after
• break-before
• break-inside
• box-decoration-break
• box-sizing
• display
• float
  • float-right
  • float-left
  • float-none
• clear
  • clear-left
  • clear-right
  • clear-both
  • clear-none
• isolation
• object-fit
• object-position
• overflow
• overscroll-behavior
• position
• top / right / bottom / left
• visibility
• z-index

Flexbox & Grid

• Flex Basis
• Flex Direction
• Flex Wrap
• Flex
• Flex Grow
• Flex Shrink
• Order
• Grid Template Columns
• Grid Column Start / End
• Grid Template Rows
• Grid Row Start / End
• Grid Auto Flow
• Grid Auto Columns
• Grid Auto Rows
• Gap
• Justify Content
• Justify Items
• Justify Self
• Align Content
• Align Items
• Align Self
• Place Content
• Place Items
• Place Self

Spacing

• Padding
• Margin
• Space Between

Sizing

• Width
• Min-Width
• Max-Width
• Height
• Min-Height
• Max-Height

Typography

• Font Family
• Font Size
• Font Smoothing
• Font Style
• Font Weight
• Font Variant Numeric
• Letter Spacing
• Line Height
• List Style Type
• List Style Position
• Text Align
• Text Color
• Text Decoration
• Text Decoration Color
• Text Decoration Style
• Text Decoration Thickness
• Text Underline Offset
• Text Transform
• Text Overflow
• Text Indent
• Vertical Align
• Whitespace
• Word Break
• Content

Effects

• Box Shadow
• Box Shadow Color
• Opacity
• Mix Blend Mode
• Background Blend Mode

Filters

• Blur
• Brightness
• Contrast
• Drop Shadow
• Grayscale
• Hue Rotate
• Invert
• Saturate
• Sepia
• Backdrop Blur
• Backdrop Brightness
• Backdrop Contrast
• Backdrop Grayscale
• Backdrop Hue Rotate
• Backdrop Invert
• Backdrop Opacity
• Backdrop Saturate
• Backdrop Sepia

Transitions & Animation

• Transition Property
• Transition Duration
• Transition Timing Function
• Transition Delay
• Animation

Transforms

• Scale
• Rotate
• Translate
• Skew
• Transform Origin

Interactivity

• Accent Color
• Appearance
• Cursor
• Caret Color
• Pointer Events
• Resize
• Scroll Behavior
• Scroll Margin
• Scroll Padding
• Scroll Snap Align
• Scroll Snap Stop
• Scroll Snap Type
• Touch Action
• User Select
• Will Change

SVG

• Fill
• Stroke
• Stroke Width

Responsive

• https://tailwindcss.com/docs/responsive-design

References

• https://github.com/tailwindlabs/tailwindcss
• https://tailwindcss.com/
• css-to-tailwind from https://transform.tools/css-to-tailwind

This feature is for 3rd party apps that only require snippet-level of style code. e.g. the images below

source

(design from 100 days of ui challenge)

Env

• source:figma
• target:web:vanilla
• runtime:web-editor
• OS: Mac12 / Chrome
• code.grida.co

env

• editor
• figma-remote
• react

reporduce

svg with linear gradient fill

Current output

const RootWrapperCheckingExistingComponents = styled.span`
	color: rgba(193, 193, 193, 1);
	text-overflow: ellipsis;
	font-size: 16px;
	font-family: Helvetica Neue;
	font-weight: 400;
	text-align: left;
	min-height: 19px;
	width: 265px;
`;

font-family: Helvetica Neue;

should be
font-family: "Helvetica Neue";

The new version of autolayout has been for a few weeks. learn more here

This enables us to make layout-perfect interpreting logic wihout infering from context, but as-is designed by designers.

We will now support plain html + css for starters, interpreting auto layout to flexbox properties.

We might also need global interpreter (reflect layouts) in which for converting layout configurations to flutter, web, and many other platforms in an intuitive way, through the unified logic gate.

This is a thread for tracking package size & optimization strategy.
Current total packaging of @designto/code takes up 1.5mb (not accurate)

Our goal is to keep it under 1mb for in-browser & local use

flutter does not support built in textVerticalAlign support for widget "Text", but we can wrap with sizedbox and align. for to do this. we'll have to inspect parent of the text. But more importantly, the main problem is that we cannot know if text is vertically aligned and, + fitted to the box, if we can't know this, only option is to wrap all text -- which will get our generated code supre drity.

Prettier for JS/TS, Dart format for dart, requires different modules, which can bring the default app size to increase. this formatter will be provided by remote api, but also can provide custom static formatter via local execution method.

Collapsing item support

followups as comment

Blur for text in figma is not working properly.

right: in figma, left: in chrome(web)

The reason is that the method of applying blur to text is different from other methods.

In general, you need to do something other than css filter, backdrop-filter, or blur().

example

https://mui.com/

Somewhat related

• #42

Currently, no such support

Test case

• text-gradient-sample-bg-also-gradient on figma

Reference
https://github.com/colorjs/color-namer (not sure if we'll use this. comment if better package available.)

checklist

• #36
• #29
• #27
• #46
• #43
• #23
• #42
• #37
• #32
• #33
• #35

Window message transporting is required for injecting custom vanilla html with interaction logics

E.g layer selection

Dotted border for web not working

• Left - origin design
• Right - vanilla codegen preview

Design

Generated

Explicit property by user

Web

• #27

React

• styled-components
• styled-components (emotion)
• styled-components (styled-components)
• inline css
• css in jsx
• css module
• class components
• small components as const
• export | export default
• const | function for component

// const
const Container = () => { return <></>; }
// function
function Container () { return <></>; }

Preact

subset of react, with different imports handling
react vs preact - the differences

• events don't bubble up through components
• standard onInput should be used instead of React's onChange for form inputs (only if preact/compat is not used)
• standard onDblClick should be used instead of React's onDoubleClick (only if preact/compat is not used)
• onSearch should generally be used for , since the clear "x" button does not fire onInput in IE11

References

• https://preactjs.com/about/demos-examples/

Vue

• vue scoped style css
• #138

Svelte

#163

Solid JS

#160

Vanilla

• everything else
• vanilla text escape - don't use jsx text escape

Flutter

Flutter support has different qualifications. Since it was supported before any others, we shall focus on supporting all previous highlight features.

• Version up; synced token support - #38
• Theme.of(context).textStyle.style support
• Colors.name Named color support
• FlatButton support
• Remove redundant property specification. (don't specify default values)
• Center support
• LinearGradient support
• Icons.icon_name support
• StrutStyle.height support

Thanks what i meant was to make a UI builder app that is simpler and inspired by WINDOWS.forms builder but for mobiles

• visual testing
• codegen output matching
• snapshot taker
• snapshot per screen sizes & compare
• platforms support - flutter - flutter local build & visual comparison (also for android native & ios native - all other than native web platform)

Tools & Setup

to best match the "visual" factor of testing, we might need other option than jest

wip - searching for better solutions.

References

• https://codecept.io/visual/#using-resemble-helper
• https://github.com/americanexpress/jest-image-snapshot

Support detected named material icons support with font

https://developers.google.com/fonts/docs/material_icons

<span class="material-icons md-24">face</span>

It's rare to have a dedicated constraints on image, but for scenario like below, we need to specify the image's object-position so that targeted inner graphic content can be always visible.

Support line node on figma as Divider if within divider detection. under (packages/detection/divider)

Related: gridaco/assistant#17

backdrop-fliter is not supported in firefox, background-blur does not work

in chrome ✅

in firefox ❌

backdrop-filter
reference

(Ignore the color gradient.)

example

The easy way to do this is using shared component as instance, redrawing layout with switch-case like tree.

More mature & complex way to do is assigning layers id, calculating and generalizing their transforms.

References

• https://github.com/yocontra/react-responsive
• https://github.com/jameslnewell/styled-components-breakpoint

A Functional inline documentation.

There are two types of comment,

1. General comment - for describing the behavior, explaining the code.
2. Special comment - for indicating a block of token, that can be managed (synced bidirectionally) by design to code engine.

(suggestion) The syntax might look like,

import React from "react";

/**
 * ---------
 * https://code.grida.co/t/:p/:f/:id
 * [click to open design](https://code.grida.co/t/:p/:f/?redirect=design-origin)
 * [share this component](https://code.grida.co/t/:p/:f/?redirect=share-me)
 * (do not modify)
 * ---------
 */
function MyComponent(){
    return (
       <Wrapper>
           My component
       </Wrapper>
    );
}


/**
 * ---------
 * https://code.grida.co/t/:p/:f/:id
 * (do not modify)
 * ---------
 */
const Wrapper = styled.div`
    height: 100vh;
    width: 100vw;
`;

Challenges

• Modification of code of managed token.
• Modification (extending as new line) of token indicating comments.

What this can do

• Bidirectional data sync
• Previewing the design from vscode editor (withs url scheme)

Expected - the result on preview to have exact text "> Select Workspace" rather than jsx version of it - "{"> Select Workspace"}"

Text will special characters will be formatted via jsx text formatter, but since jsx text formatter is for react-only, for vue, html, and other native web-standard frameworks shall have a different text formatter.

e.g. vanilla-text-formatter or html-text-formatter

This shall be first implemented via CoLI

Test case - here

Add google fonts link import to web platforms, if available.

<!-- e.g. -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,900&display=swap" rel="stylesheet">

• search for google fonts repository if font family available
• add only required font style

References

• https://developers.google.com/fonts/docs/css2
• https://fonts.google.com/
• https://www.npmjs.com/package/@googleforcreators/fonts
  • https://github.com/GoogleForCreators/web-stories-wp/blob/main/packages/fonts/src/fonts.json
• https://www.npmjs.com/package/google-fonts-helper

Will not have much of a usecase, but would be a fun and inspiring approack for building GUIs for native python interface.

• tkinter - https://docs.python.org/3/library/tkinter.html
• PyQT
• kivy

Understanding Figma Gradient system - It's not like what you think!

Gradient in figma is bit different on render-styling (css) If you have LinearGradient - [(black 1) at 0%, (red 0) at 100%] Representation in css would be linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(255,0,0,0) 100%);, you might think. But this is incorrect.

To match a visually identical gradient, you need to have multiple gradient per colors. (Even if it is in a single fill item)

.single-fill-item {
  background: linear-gradient(90deg, black, transparent), linear-gradient(90deg, rgba(255, 0, 0, 1), transparent);
}

Note - Fallbacks on complex gradient

This is a technical issue, we will add support for complex gradient in the future.

Since perfectly providing a visually identical style code is redundant, we provide a fallback on complex gradient. (svg on web, png(optionally) on flutter)

Fallback cases

• when gradient position does not starts from (or ends at) 0% or 100%
• when gradient is not linear or radial.
• when not one of the cases
  • n - s (0°) (supported)
  • s - n (180°) (supported)
  • e - w (270°) (supported)
  • w - e (90°) (supported)
  • nw - se (directional) (supported)
  • ne - sw (directional) (supported)
  • sw - ne (directional) (supported)
  • se - nw (directional) (supported)

• Support blend mode https://help.figma.com/hc/en-us/articles/360040667874-Create-unique-effects-with-Blend-modes
• Support rotation

rich text support with multiple colors and styles.
currently rich text is returned as black text.

Css properties to support

(update 21.10.06)

Global

1. • opacity
2. • visible
3. • rotation ⚠

Fills

1. • solid fill
2. • image fill as background or background-image
3. • width, height (only has group wrapper)

<GroupWrapper>
  // has size // has not size
  <Rectangle1 />
  <Rectangle2 />
</GroupWrapper>

4. • linear gradient
5. • solid color opacity
6. • gradient opacity
7. • fill (without stroke) opacity 100%
8. • has multi color linear gradient
9. • gradient degree
10. • gradient stops
11. • gradient alpha
12. • radial gradient
    • gradient center
    • gradient radius
13. • angular gradient
14. • multiple fills

box-shadow: -7px -9px 3px rgba(98, 71, 20, 0.25), inset 9px 9px 12px rgba(40, 22, 4, 0.25);

15. • border-radius (all)
16. • border-radius (one)
17. • opacity zero fill
18. • layer (mix-blend-mode)

mix-blend-mode: color-dodge;

stroke

1. • single solid border
2. • stroke dash (in advanced stroke)
3. • stroke dash cap (in advanced stroke)
4. • stroke gap (in advanced stroke)
5. • stroke end points cap (in advanced stroke)
6. • stroke join (in advanced stroke)

boolean operation

1. • responsive position (constraint)

masking

1. • vector mask
2. • rect mas
3. • rrect mask
4. • ⚠ ellipse mask
5. • ⚠ image mask
6. • ⚠ text mask
7. • fallbacks

vector

1. • Responsive position (constraint) (viewbox?)
2. • ⚠ Vector on plugin version
3. • ⚠ curvy lines

image fill

1. • image fill (cover)
2. • image opacity fill
3. • image fit
4. • image crop
5. • image tile

ellipse

1. • stroke
2. • long width oval (shapes/ellipse/Ellipse 11)
3. • long height oval (shapes/ellipse/Ellipse 15)
4. • deformed ellipse (shapes/ellipse/Ellipse 16)

text

47. • align-items
48. • frame path
49. • letter spacing
50. • font family
51. • font size
52. • font-weight
53. • precise font-weight - (e.g. currently ExtraBold gets converted to 700 instead on 800 & so on..)
54. • position
55. • h1-6 & p tag support
56. • fill gradient - #84
57. • mixed text style
58. • text shadow
59. • line-height undefined when auto (don't 100%)
60. • automatize - width
61. • line-height percentage calculation error
62. • proper text formatting for raw html (vanilla) #72

Line ⚠

1. • native line support - no fallback
2. • rotation 0 / 180 / 360 line as divider
3. • rotation n line as vector

<hr />

or

width: 837px;
height: 0px;

border: 1px solid #000000;

Autolayout Frame

1. • fixed size
2. • #112

effects

2. • background blur
3. • layer blur
4. • shadow + spread
5. • shadow + offset
6. • shadow + spread + offset
7. • multi-shadow
8. • shadow (flutter)

box-shadow: 0px 4px 24px rgba(255, 0, 0, 0.25), 0px 4px 4px rgba(255, 153, 0, 0.25);

9. • inner-shadow (no text)
10. • inner + outer-shadow (no text)
11. • inner-shadow (text)
12. • inner + outer-shadow (text)

Polygon

1. • polygon

star

1. • star

at: /preferences/access-tokens
ref: design-sdk/figma-oaut-(store?)

Gradient as variable with preview.

Gradients is often use as non variable, which is mostly used as highlight visual effects. - which also gets changed often to get the maximum blending visual. There are also cases gradient is almost constant, i.e. on a button, or when used as a branding identity.

Extracting non-registered gradient style as variable, making accessible to developers will have lot of benefits.

1. using css variable

/* e.g. */
:root {
    --one-shot-linear-gradient-tangerine-to-yellow-45: linear-gradient(#e66465, #9198e5);
}

2. using variable & injection

// 1. using ready to use css snippet
const __one_shot_linear_gradient_tangerine_to_yellow_45 = `linear-gradient(#e66465, #9198e5)`

const GradientBG = styled.div`
    background: ${__one_shot_linear_gradient_tangerine_to_yellow_45};
`


// 2. using custom injector
const __one_shot_linear_gradient_tangerine_to_yellow_45 = new LinearGradient("#e66465", "#9198e5");
const GradientBG = styled.div`
    background: ${css.lineargradient(__one_shot_linear_gradient_tangerine_to_yellow_45)};
`

This also applies to colors, long texts, spacing rules. While we are starting with gradient.

Needs to be overridden .

• h1 ~ margin-block property to 0px
• on root, margin & padding to be 0px

Not all browsers have this same ua stylesheet, so we'll need some extra configuration of ua override / handling for web-css

Generation of documentation outside of the executable code (comment), A README.md or component.stories.mdx With preview included will help developers to manage their project structure & component hierarchy.

Challenges.

• What happens when the component gets splitted? (What if source A and documentation A' does not match no longer?
• What happens when user customize the documentation content?

References

• https://storybook.js.org/docs/react/api/mdx

Converting original data to reflect format, detecting elements and converting it to code is a heavy work.
We need cache of each process and need to provide it as a option for user to enable use-cache option.

It mostly prevented by explicit logic gate, but sometimes text with undefined text value happens.
and the flutter-builder prevents this, since flutter does not accepts empty text also.

This first happened while converting figma to flutter with this node

Origin

The generated code

Explicit overflow:hidden by user

Although, we CAN'T always set overflow: hidden for clip content layout. this is because overflow property is also used for specifying scroll behavior on other logic gate (not sure with the execution order or importance between those two.)

The non-conflicting way is to use explicit clip-path just to specify the clipping behavior, eliminating possibility of logic conflict with scroll

• single axis stretch or fixed is not supported

Should we support blend mode?

The options are..

• yes - full support
• no - ignore blendmode, but still export to code.
• no - blend mode is only used on graphical elements, export it as graphics, always

example of unhandled blend mode.

• #39

Related

• #29

CLI & API Capability