DEV Community

loading...
Cover image for How Designer can become a Developer (3 ways without Code)

How Designer can become a Developer (3 ways without Code)

jacksonchill2 profile image Jackson Chill ・3 min read

The full-stack development ability is becoming a definite advantage in today’s developer's field. The fact that you can build a webpage from Backend to Frontend, scratch to complete all on your own, definitely puts you on a spot where you can get more opportunities to take part in more projects and works.

But generally, there are two main factors on becoming a complete full-stack developer. One, you’re a genius😅, you can easily pick up different skills and apply on your work. Second, you have a great time schedule to learn new skills, because learning one single tool consumes a big portion of time cost.

But is there another way that you can attempt to become a full-stack developer, without being (so) genius and without learning different languages and tools?

Alt Text
Guide to become a complete Frontend Web Developer. /from Pinterest

But in this article, we’ll be focusing on Frontend, and is especially for Designers, who are trying to understand the workflow & process of Developers, in advanced to become a full-stack FrontEnd Web Developer. Hopefully after reading this, you can get manage to build a Responsive Webpage completely by your own.

In this article, we will show you how pxCode provides you the Third factor, which is using the right tool.

1. Visual Programming 👀

In pxCode, you can do all the Developer’s work in a Designer’s way — Programming visually. Back in the days, when you need to turn all the components and elements in your design to Responsive, you’ll need to have certain coding skills to achieve. But today with pxCode, you can just visually tweak all the detail adjustments, with instinctive buttons directly on the design, it will results in a complete Responsive Web Design form very quickly.
Alt Text

2. No more handoff 🙌

If you’re a Frontend Designer, you probably wouldn't be strange with Handoff. Previously, while working on a project with Developers, you’ll need to communicate the design back & forth during editing stage. Not only it consumes plenty of time, and due to the requirement of programming background, most of the time a Designer can barely complete a design by themselves alone.

But what if a tool helps you with the development parts?

You just need to make simple clicks, and you can complete the whole Responsive Webpage Develop on your own? That sounds fascinating and somehow magical, but it has became reality in pxCode.

With pxCode, you can complete the whole Webpage Development process with simple instructions and instinctive features, you can achieve what needed to be done by at least two persons, just on your own.

3. Code for integration 📲

We know auto-generated code is not a new thing, but there’s something different in pxCode, we make it developer-friendly by generates the code in well-structured status. It can be useful for further usage and integration.

When the design file is done to be responsive and ready for export, go over [Code Export] on the top-right menu toolbar. A new tab will be pop-up and you can preview the code of the whole Webpage Design. On the toolbar, React, React Native, HTML, SCSS are listed out separately. You can export the code by [Download Assets] under the [Assets] bar for further usage.

Alt Text


💡 What’s more on the code? 💡

Code quality: The code is developer-friendly and well-structured.
Layout: By merging layers, grouping, or ungroup, it resulted in a clean snippet of code.

Naming: You can rename the element in [Style] on the right Inspector section.

No dependencies: There are no external libraries used.

Improving: Developer-friendly code is what pxCode offer to help. Our team is constantly improving the tool to create a better Front-End workflow.


This article is reposted form pxCode's medium. I found it very helpful so I thought might be sharing it to you guys. I'm a DESIGNER myself but I now started to involve partial Developing stage.

You can check out pxCode here : https://www.pxcode.io/
And Figma plugin here: http://bit.ly/3rwOAVe

Discussion (0)

pic
Editor guide