Streamline the transfer between designers and developers


Travis Arnold recently presented how JSX and compiler technologies can be used together to make the transfer between designers and developers more efficient. Although the ideas presented are not yet implemented in any publicly accessible tool or library, the ideas of Arnold, who describes himself as a designer / developer, can be used to illustrate possible avenues for better collaboration between designers and developers.

Arnold explained:

I would like to talk to you about the possibility of allowing more people to write a user interface for any platform that uses JSX. […] Very few designers are currently working on a medium that will end up in production. Many tools attempt to abstract design aspects into code but fail to expose a declarative model that can be used as a source of truth. These tools are great for illustration and icon work, but they break down when we can’t easily shuffle the code in the process.

Many developers and designers have noted the prevailing inefficiencies in the design-to-development process. On the one hand, design tools like Zeplin, Invision, or Figma are commonly used by designs to create visually appealing designs and animations, but won’t produce code for the entire interface, often forcing them to do so. developers to code from scratch. At the other end of the spectrum, no-code tools (eg, WebFlow) have emerged that generate production-ready code directly from a designer’s design. While they work very well in certain contexts, these tools have been criticized for generating code that some developers have difficulty understanding and modifying. Arnold continued:

If we look at a typical cross-team workflow, there is an inherent disconnect in our process. A designer creates something by making hundreds of decisions, then the job is given to a developer to implement. Finally, we ship a final product to production.
Basic information on primitives such as layout and hierarchy must be consulted and translated. This results in duplicate work and results in sources scattered across multiple tools, not to mention a waste of valuable time. These decisions are coded somehow and we should be able to use them easily in the final product.

To ensure a smoother transfer process, Arnold describes in his speech JSX for designers how designers can use a design DSL with JSX syntax to express design concepts such as layout, style, dimensions, or space. Arnold provides the following sample code:

export  default  function  App()  {
 return  (
   <Stack as="figure" background="gray.100" cornerRadius="xl">
       alt="React Finland Logo"
     <Stack spaceYStart={6} spaceBetween={4}>
       <Stack  as="blockquote">
         <Text size="large" weight="semibold">
          “React makes it painless to create interactive UIs.Text>
       <Stack  as="figcaption">
         <Text color="cyan.600">ReactText>
         <Text color="gray.500">
          A  JavaScript library for building user interfaces

In the previous code, the tags presumably encode a layout primitive that describes a component that stacks its children. Heydon Pickering, author of the Bruck Prototyping Library, ventured into a taxonomy of layout models that can be reused by developers and designers to solve common design problems. Pickering illustrates the Stack layout model as follows:

The potential mandate of the Stack the layout can hardly be overstated. Anywhere items are stacked on top of each other, it is probably a Stack should be in effect. […]
A form uses large stack spacing to separate entire fields and small nested stack spacing to separate field labels from their inputs and errors

Bruck’s prototyping library and its layout primitives can be tried out in Bruck’s playground. An example of using a the web component is as follows:
Example of using the Stack layout component

Arnold advocated compiler components which combine design and development concerns into a cohesive whole. Arnold explained:

This is done using well-defined prop boundaries which can be statically analyzed, providing a rich source of truth for layout and styles. You can quickly get started with compiler components by using the createComponent function. This function accepts a configuration that describes how your component works on different platforms. In most front-end systems, we deal with the same issues: themes, transformations, polymorphism, variants, assets, and replacements.

Arnold provided the following code for illustration:
Compiler components

In Arnold’s vision, a compiler would be able to perform static analysis to understand intent; and cross-platform code generation. In the previous code, the Text the component would compile into one tag on the web and a tag on mobile. The variants The property encodes the customization and default options for the user of the component.

Interested developers can view the full disclosure online. The talk provides many additional examples, code samples, and illustrations. React Finland 2021 took place online between August 30 and September 3.

Source link

Leave A Reply

Your email address will not be published.