We’re halfway through 2021. Is Chetto happy?

This happened to me recently.

Emmm, the little brother of the product, agreed to add only 3 pages, but finally made the product add 6 pages, almost seven dwarfs, the following UI draft is like this (considering the interests of the company, this article uses the online case as a reference) :

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

Workers why difficult workers. Facing these two rows of pages, for me with weak CSS, is a nightmare.

Just as I was distressed, suddenly remembered a colleague recommended to me last time a cutting artifactLooks like it’s ready to work.

What exactly is this artifact?

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

Give it a try

Experience one-click code generation

I successfully converted the UI manuscript into vue. js code according to the three steps introduced on the official website. Let’s take a look at the final effect:

From the import file to the export code, it only took three minutes, which is pretty cool

Tell me how to use it

The CodeFun website introduces a quick start process that takes you from UI draft to generating project code in just three steps. (Don’t brag)

Following the instructions on the website, I installed the “CodeFun” plugin and prepared the Sketch material:

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

After opening the Sketch file directly, go to the top of the “Plugins” menu and select the “Upload Design” menu of “CodeFun” :

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

Then click “Upload”, wait for the upload is complete, the background will immediately see the project we imported, and each page neatly placed, let’s randomly open a page to have a look:

Familiar code, familiar HTML/CSS/JavaScript comes into view.Then try to export the project code, you can choose to export”Wechat small program“Or”Vue.jsProject, and choose to export isrpxThe unit orpxUnit, it’s likeToo close!

Tell me what you feel after a simple experience

Too fragrant, we can choose to generate H5 or small program code according to the needs of the project, the reduction degree is very high, very in line with the characteristics of the official website introduced “accurate reduction of the design draft, such as engineer handwritten general code”.

Of course, it’s automated, and there may be some imperfections (🍗 for CodeFun), but we’ll spend some time tweaking the style and adding our own business logic before the actual project is deployed.

This saves me so much time cutting pictures!

Of course, here is only a brief introduction, you can experience (official website: code.fun), and then combined with the document, I believe you will be very harvest ~

What else is CodeFun great for?

As I read”CodeFun”And found that it has a lot of powerful features.

1. Powerful List tag component

The List tag component is used for looping lists, and its power is that similar List contents are automatically identified as List tags, generating V-for-style code. So we’ll believe it when we see it. Take the following page comment list as an example and try it:

After the content in the red box is set to List tag, the generated code is as follows (you need to enable “output List tag as a circular List”) :

<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

Its 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, good hygiene, nice landlord, close to subway station, 5 star reviews, 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": "Very nice, clean and tidy, very clean, very responsible landlord, very close to the subway station, convenient life, lots of food courts, large shopping malls, five-star reviews, recommended, oh, you don't want to leave..."
      }, {
        "avatar": "https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/60d5579cf7299c00115e83a5/60ead063fdb7540011c108e 0/16260016343523144906.png"."name": "I won't tell you."."date": "2019-02-16"."desc": "The western sky of the sunset waving gorgeous gauze, the night wind blowing up, a setaria shake a canal of dusk lyrics. Rows of white log cabins appeared, exquisite as a fairy tale and beautiful as a dream.}}; }};Copy the code

Just like our actual business development, the List here shares CSS style code:

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

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

Isn’t it very fragrant and convenient to use ~👍

2. Good Grid layout

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

In CodeFun, you can automatically generate this type of UI in your design into Grid layout code. After simple operation, the above image can be converted to 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 footer at the bottom, simply set the component type to either the header or footer tag:

4. Convenient route forwarding Settings

For front-end applications, where it is often necessary to jump to different pages, CodeFun also supports setting up page routing:

The following JS code is generated:

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

In the course of using CodeFun, these features were sufficient for most of our graphing scenarios, and the time saved for graphing allowed us to spend more time working with business logic. Cool 👍

Thoughts on CodeFun

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

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

Experience summary

After playing CodeFun for a few days, here are my tips:

  1. Support for front-end frameworks such as React/Angular can be added; (In order to cater to more users)
  2. The interaction of the “data binding” module is not intuitive enough for beginners to understand how to configure it. (You can do this a little bit more intuitively)

I think the important value of “CodeFun” is that it helps front end engineers a lot with efficient identification featuresFree from the tedious page cut diagram. With lower learning cost, users can more easily and efficiently complete 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~!

See here, is not very excited!

Click on the official website to experience it now

code.fun

Click “like” and add 🍗 to CodeFun engineers