Use zeplin to automatically generate CSS from design drawings to improve the efficiency of front-end style development

Time:2022-5-25

Today, one of Amway’s software is zeplin, which is used to connect designers and front-end developers. At the same time, it is also an artifact for independent developers. This software has a web version and a client (MAC / win). With it, zeplin is used to automatically generate CSS from design drawings, improve the efficiency of front-end style development and reduce the threshold of front-end style entry. For the development of Xiaobai like me, the threshold of learning front-end development is reduced by 1 cm.

Use zeplin to automatically generate CSS from design drawings to improve the efficiency of front-end style development

Zeplin workflow

You can easily import from sketch to zeplin. After installing the plug-in, you can find the corresponding import method in the plugins zeplin plug-in. Seamless import is very convenient for sketch users.

Use zeplin to automatically generate CSS from design drawings to improve the efficiency of front-end style development

After importing zeplin, you can directly view and copy the corresponding CSS code for different components and quickly copy it to the code under your development. For front-end developers, you can improve the process from design to front-end code, reduce the noise in information communication and improve efficiency. You don’t need designers to cut and mark color values. All information can seamlessly enter the CSS style stage from the original design.

Use zeplin to automatically generate CSS from design drawings to improve the efficiency of front-end style development

.Rectangle-Copy-3 
  {  
    width: 1125px;  
    height: 319px;  
    margin: 135px 0 0;  
    padding: 85px 57px 0 58px;  
    box-shadow: -5px -5px 50px 0 rgba(123, 123, 123, 0.25);  
    background-color: #ffffff;
}

To say more, for many independent developers, such tools undoubtedly reduce the difficulty of production and make the product design and development process too smooth. Worth experiencing and having.

An exclusive interview about hacker Baihackerby.com
A 1v1 deep communication platform for developers, designers and products.