Initiate - Design to code

[levirtevs]

[levirtevs]

https://github.com/babel/babel/discussions/14910 https://github.com/webpack/webpack/issues/16226

[tinydogio-joshua]

It appears the linked discussion was deleted.

[levirtevs]

Hello, I tagged those projects thinking that they will be interested. Looks like they aren't.

[tinydogio-joshua]

Fair enough. 😀

[levirtevs]

Design to code philosophy

• A component is a rectangle
• A component can have content. Content can be image, text, and other component
• A component can show or hide its content
• A component have different states - Each state is visually distinct from one another. In UX terms, this is called variants.
• A parent component can pass state to child component.
• A child component can pass state or data to parent component.

[gregwhitworth]

Hey @levirtevs thanks for opening the issue; what is your overall goal/proposal here? Since you raised the potential of discussing this on a call I think it's important to understand that the issues need to be a prepared state for resolution on the call. If you're wanting to present a potential new proposal then it needs to first come with an explainer and the key goal of what you are hoping to achieve.

This issue regarding a measure element is a good one to follow: https://github.com/openui/open-ui/issues/499#issuecomment-1076568070

Even if your subject matter is not about a new element we still need to ensure that there is a concrete action you're wanting from the group. Let us know if you have any questions as we're more than happy to help.

[levirtevs]

hello @gregwhitworth thanks for your response and sharing a reference material to present. Added few information below.

What is the problem you're wanting to solve (don't lead with solutions) Web development is time consuming. Coding is time consuming. Frameworks are coming with their own cool tricks which doesn't address web problem. In addition to this, converting a design to code has been a challenging in the web mostly because there is no single standard that is a handshake between UX and UI.

Outline the current way in which web developers currently try to solve the problem Sit with UX, try to understand their thought process on why they thought a current solution addresses user problem. They exchange design specifications and developer code it up.

What is your recommended solution Design a.k.a UX is the single source of truth for web development, Set standard for Design architecture for component. Document the specification (attached an illustration above) Provide a concept that can help to create designs and generate code targeting frameworks.

What other solutions did you consider Plugins in designers tool

Open Questions TBD or anyone can add it.

More details I went through the link that you shared, I'll try to put in words how this differentiates from new element proposal.

New element proposal talks about Time, measure, datetime elements, which is a new interface element My proposal - Elements are a rectangles that can contain other rectangles with styles.

My thoughts Once a an element is put in dom, it is a rectangle with layers of content. Basically web is a stacked rectangles, taking inspiration from rectangles, a standard is ready which can be applied to build complex interactive components.

[github-actions[bot]]

There hasn't been any discussion on this issue for a while, so we're marking it as stale. If you choose to kick off the discussion again, we'll remove the 'stale' label.

[bkardell]

This has not had much interaction, and I don't believe there is a concrete action item that we've taken up. I'm going to close this, but feel free to re-open if you feel that's wrong, )and let me know why if you can)