It’s half way through 2021. Are you Guys still happy?

This happened to me recently.

Emmm, the little brother of the product, agreed to add only 3 pages, but finally decided to add 6 pages, almost making up the seven Dwarfs. The following UI draft looks like this (for the benefit of the company, this article uses online examples as a reference) :

(links to resources from the Internet, baidu cloud disk: pan.baidu.com/s/1aaPwQevg… Extraction code: Z2W7)

Why do the workers bother the workers. These two rows of pages were a nightmare for my CSS weakness.

When I was distressed, I suddenly remembered a carving artifact recommended to me by my colleague last timeLooks like it’s working.

What exactly is this artifact?

This artifact is called”CodeFun”, it claims.UI design draft intelligent generation of source code, 10 minutes to complete 8 hours of work“, let’sDo the front end, don’t move the bricks.

Give it a try

Experience a handful of one-click generated code

I successfully converted the UI manuscript into vue.js code according to the three steps introduced on the official website. Look at the final effect:

From importing the file to exporting the code, it only took three minutes

Talk about how to use it

The Quick start process on the CodeFun website is a 3 step process from UI draft to project code generation. (Are you bragging?)

First, I installed the “CodeFun” plugin as per the instructions on the website, and then prepared the Sketch footage (photoshop footage is also supported) :

Then start with three steps (omitting the plug-in installation process) :

After opening the Sketch file directly, select the “Upload Sketch” menu of “CodeFun” at the top of the “Plug-ins” menu:

Then log in to the account in the pop-up box and select the “project” and “Artboard” to create:

Then click “upload”. After the upload is completed, the project we imported can be seen in the background immediately, and each page is neatly placed. We can open a page at random to have a look:

Familiar code, familiar HTML/CSS/JavaScript comes to mind.Then try exporting the project code, you can export it yourself.Wechat applets“Or”Vue.js“Project, and the option to export isrpxThe unit orpxUnits, literallyToo close!

Talk about how you feel after a simple experience

Too sweet, we can choose to generate H5 or small program code according to the needs of the project, the reduction degree is very high, it is in line with the characteristics of the official website “accurate restoration of the design draft, the generation of such as engineers handwriting general code”.

Of course, it’s automatic, and there may be some imperfections (CodeFun plus 🍗 for CodeFun), so we’ll spend some time fine-tuning the style and add our own business logic before we deploy the actual project.

It saves me a lot of cutting time!

Of course, this is just a brief introduction, you can experience (official website: code.fun), and then combined with the documentation, I believe you will have a lot of harvest ~

What other great features does CodeFun have?

As I read”CodeFun”Document, found that it has a lot of powerful functions.

1. Powerful List tag component

The power of the List tag component for circular lists is that it automatically identifies similar List contents as List tags and generates V-for-style code. So what we see is what we believe. Take the following page’s comment list for example:

After the content in the red box is set to List tag, the generated code is as follows (” Output List tag as circular List “needs to be enabled) :

<div class="flex-col list">
  <template v-for="(item, i) in listJWuhbbAm">
    <div class="list-item flex-col" :key="'item' + i">
      <div class="top-group flex-row">
        <img class="image_15" :src="item.avatar" />
        <div class="right-group flex-col">
          <span class="text_20">{{item.name}}</span>
          <span class="text_22">{{item.date}}</span>
        </div>
      </div>
      <span class="text_24">{{item.desc}}</span>
    </div>
  </template>
</div>
Copy the code

The JS code is as follows (data binding output mode needs to be enabled) :

export default {
  data() {
    return {
      "listJWuhbbAm": [{
        "avatar": "https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/60d5579cf7299c00115e83a5/60ead063fdb7540011c108e 0/16260016341787250137.png"."name": "Xiao Xiao xiao"."date": "2019-02-26"."desc": "Very nice, clean and tidy, very good hygiene, very nice landlord, very close to subway station, five star rating, recommended!"
      }, {
        "avatar": "https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/60d5579cf7299c00115e83a5/60ead063fdb7540011c108e 0/16260016342203168767.png"."name": "La La Girl."."date": "2019-02-16"."desc": The landlord is very nice and responsible. It is very close to the subway station. It is very convenient for life.
      }, {
        "avatar": "https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/60d5579cf7299c00115e83a5/60ead063fdb7540011c108e 0/16260016343523144906.png"."name": "Not telling you."."date": "2019-02-16"."desc": "The sunset in the west is waving a flowery veil, and the evening wind is blowing, and every branch of setaria is shaking the lyric of the evening. Rows of white log cabins appeared, delicate as a fairy tale and beautiful as a dream.}}; }};Copy the code

As with our actual business development, the List lists share CSS style code:

.list-item {
  padding: 27rpx 28rpx 28rpx;
  border-bottom: solid 2rpx rgb(245.245.245);
}

.list {
  margin-top: 15px;
}
Copy the code

Is it very sweet, with very convenient ~👍

2. Good Grid layout

In business development, we often encounter grid layout requirements such as “multi-column action button”, as shown in the red box below:

In CodeFun, you can automatically generate Grid layout code for uIs like these in the design draft. After simple operation, the above image can be converted into the following code:

<div class="grid">
  <div class="grid-item flex-col items-center">
    <img src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/60d5579cf7299c00115e83a5/60ead063fdb7540011c108e 0/16260016485084464827.png" class="image_7" />
    <span class="text_9">near</span>
  </div>
  <div class="grid-item flex-col items-center">
    <img src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/60d5579cf7299c00115e83a5/60ead063fdb7540011c108e 0/16260016485093876260.png" class="image_7" />
    <span class="text_9">The city</span>
  </div>
  <div class="grid-item flex-col items-center">
    <img src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/60d5579cf7299c00115e83a5/60ead063fdb7540011c108e 0/16260016485107042498.png" class="image_7" />
    <span class="text_9">Office buildings</span>
  </div>
  <div class="grid-item flex-col items-center">
    <img src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/60d5579cf7299c00115e83a5/60ead063fdb7540011c108e 0/16260016485084464827.png" class="image_7" />
    <span class="text_9">On the outskirts of</span>
  </div>
  <div class="grid-item flex-col items-center">
    <img src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/60d5579cf7299c00115e83a5/60ead063fdb7540011c108e 0/16260016485093876260.png" class="image_7" />
    <span class="text_9">apartment</span>
  </div>
  <div class="grid-item flex-col items-center">
    <img src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/60d5579cf7299c00115e83a5/60ead063fdb7540011c108e 0/16260016485107042498.png" class="image_7" />
    <span class="text_9">Urban villages</span>
  </div>
</div>
Copy the code

The style code is as follows:

.grid-item {
  padding: 9px 0;
}

.grid {
  margin: 9px 12px 0 11px;
  color: rgb(51.51.51);
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
  white-space: nowrap;
  height: 162px;
  display: grid;
  grid-template-columns: repeat(3.1fr);
}
Copy the code

That’s pretty cool.

3. Flexible component types

When we need to set the top header or the bottom fixed footer, we simply set the component type to header or footer tag:

4. Convenient route forward Settings

For front-end applications, there is often a need to jump between different pages. CodeFun also supports page route jumps:

The following JS code is generated:

export default { data() { return {}; }, methods: { view_21OnClick() { this.$router.push({ name: 'index' }); }}}; Copy the codeCopy the code

During the use of “CodeFun”, these features were enough for most of our graphing scenarios, and the saved graphing time allowed us to spend more time on business logic. Cool 👍

Thoughts on CodeFun

When we started using “CodeFun” in our projects, we noticed a change in our business development process. Here is a comparison of the two business development processes:

Obviously, the new development process with “CodeFun” will be more flexible and efficient

Experience summary

After a few days of “CodeFun,” here are my tips:

  1. Support for front-end frameworks like React/Angular can be added; (In order to accommodate more users)
  2. The interaction of the “data binding” module is not intuitive and may be difficult for beginners to understand how to configure. (You can make it a little bit more intuitive)

I think the key value of CodeFun is that it can greatly help front-end engineers with efficient recognition featuresFree yourself from tedious page cutting. Through lower learning costs, users can more easily and efficiently complete the requirements.

At present “CodeFun” products also in rapid iteration, recommend in use process, avoid using too complex UI draft, there might be generated effect of deviation (believe “CodeFun” engineers have been working hard to reduce the deviation), but it is also good, we can in the generated code, do some appropriate adjustment.

perfect~!

Isn’t it exciting to see here?!

Click on the official website to experience it now

code.fun

Give it a thumbs up and add 🍗 to CodeFun engineers