草图生成UI组件

今天介绍一款叫felipe的sketch插件

用于草图生成UI

Turn Wireframes to UI

https://www.arielverber.com/felipe/

def Wireframes2UI( ):

这是一款sketch插件,利用sketch里的基本图形,转化为UI组件。

设计理念是:

基于意图的设计

Intention-based design

设计师可以用草图的方式来进行UI设计,在这款工具里不需要搜索选择各种各样的UI组件,只需绘制简单的形状或文本,然后将它们神奇地转换为您要添加的UI组件。

目前支持的UI组件:

text layer、button、checkbox、input、radiobutton、header、footer、photo、card

button是矩形

checkbox是正方形

input是水平线

radiobutton是圆形

card是带描边的矩形

return UX

如果这是一款跳出sketch的产品,

值得我们思考的是,

如何把UI组件转化为用鼠标可以快速绘制出来的简化图形

而此简化图形能够代表实际UI组件的感觉

如果这是一款跳出sketch的产品,

值得我们思考的是,

如何把UI组件转化为用鼠标可以快速绘制出来的简化图形

而此简化图形能够代表实际UI组件的感觉

欢迎在MixLab讨论相关内容、技术实现,

MixLab无界社区是一所面向未来的实验室

(0)

相关推荐

  • 移动端UI一致性解决方案

    总第424篇 2020年 第48篇 外卖UI一致性项目是外卖UI设计团队与研发团队共建的项目,目的是改善用户端体验的一致性,提升多技术方案间组件的通用性和复用率,降低整体视觉改版带来的研发成本.外卖技 ...

  • 设计稿(UI视图)自动生成代码方案的探索

    设计稿(UI视图)自动生成代码方案的探索

  • UI设计必备的6款设计软件,款款吹爆

    设计软件在市面上早已成千上万令人眼花缭乱.应接不暇.面对数量如此众多的软件,我们到底应该如何选择呢?原则当然是应该根据自己从事的设计细分领域来选择,如果你从事平面设计,那么PS.AI等软件是你的好帮手 ...

  • 推荐8个非常棒的电脑设计工具

    在社会发展日新月异的今天,设计行业的竞争也日趋激烈.想要在行业快速出圈,中脱颖而出,作为设计师而言,一款好用的设计工具是不可或缺的.下面将要介绍的这8款非常棒的电脑设计,绝对是一个设计师在设计生涯中不 ...

  • 设计初学者必知道的7个平面设计软件

    身为设计小白的你是不是还在四处询问前辈们好用的设计软件?或者没处问只能上百度搜索?如果是的话,那么接下来的这篇文章正好能够解决你的问题.文章中将会介绍7个常用的平面设计工具,每一个都有自己的特点和专长 ...

  • 设计软件大盘点,设计小白应该知道的七款软件

    随着设计行业的日益升温,很多小伙伴都想加入这个行业,学习设计并成为一名设计师.学习设计,首先要掌握的就是基本知识.行业知识.其次就是要大量阅读有关设计的书籍,积累相关的设计案例,这样,以后再需要设计的 ...

  • 轻松几步搞定熟悉城市线性插画

    这次带给大家的是如何轻松几步搞定熟悉城市线性插画,只做原创精品设计文章,好案例配好文章,好啦!搬起你们的小板凳,顺叔马上开讲了!!! "沈阳啊沈阳我的故乡,马路上灯火辉煌,大街小巷是人来人往 ...

  • Winform开发全套31个UI组件开源共享

    一.前言 这套UI库是上一个公司(好几年前了)完成的.当时主要为开发公司内部ERP系统,重新设计实现了所有用到的Winform组建,包括Form窗体组建6个(支持换肤),基础控件25个.其中有很多参考 ...

  • 前端UI组件库搭建和设计

    为什么我们需要一个UI组件库 提高团队的开发效率 提高系统的复用性,可维护性 统一页面基础元素的交互方式 统一页面的风格,让输出的产品更专业 满足一些定制的需求 一个优秀的UI组件库要具备哪些要素 在 ...

  • 10个实现炫酷UI设计效果的CSS生成工具

    昨天 英文 | https://mattkarski.medium.com/10-amazing-css-generators-for-ui-design-1f790791c4e7 翻译 | 小爱 根 ...

  • Transformer再下一城!DeepMind新模型自动生成CAD草图,网友:建筑设计要起飞了

    3D视觉工坊 5月21日 本文转载自:机器之心  |  作者:力元 深度学习的灵活性恰好适合于复杂的 CAD 设计,DeepMind 的研究者基于 CAD 草图与自然语言建模的相似性,提出了自动生成 ...

  • 【转载】Bootstrap Blazor 组件介绍 Table (一)自动生成列功能介绍

    原文链接:https://www.cnblogs.com/argozhang/p/14067391.html#4760067 Bootstrap Blazor 是一套企业级 UI 组件库,适配移动端支 ...

  • qt 将.ui文件生成.h或.cpp文件

    生成步骤: 1.将.ui文件复制到与uic.exe同一文件夹中 2.在计算机开始中打开cmd 3.输入一下命令: cd ***(文件夹位置路径) uic ***.ui -o ***.h (生成.h文件 ...

  • 谈谈 SAP 产品 UI 开发中的组件概念

    这是 Jerry 2021 年的第 54 篇文章,也是汪子熙公众号总共第 331 篇原创文章. 任何企业级软件的前端开发,都离不开组件(Component)这个概念.撇开具体的 UI 开发技术不谈,所 ...

  • 卧槽!UI设计图可以直接生成代码了!

    米醋说:当前端同学被UI设计折磨的时,当你崩溃着想让界面看起来与设计稿相同时,脑海中一定有过很多种将图片直接生成代码的幻想吧.是的!黑科技出现了! 最近一个名叫pix2code的项目,通过深度神经网络 ...