明陞在线设计工具 Figma让新手也能从零开始做网页

  是一个统统免费的正在线 UI 界面打算软件,支柱 Windows 和 macOS 等众个平台。凭据UXTOOLS的数据,Figma 仍然是目前行使排名前五的打算用具了。与 Sketch 等古板用具差别的是,Figma 是第一款真正支柱配合的 UI 打算软件,能够让扫数团队的成员同时查看并删改配合的项目。

  每个别都市有打算的盼望,无论是打算一个网页仍旧打算一个 App,都愿望我方能成立出一款有风致的作品。然而面临市情上的诸众打算软件,哪一款才更适合新手呢?

  俗话说「工欲善其事必先利其器」,思要浅易初学 UI 打算,尝尝 Figma 吧。

  假如你之前接触过近似的 UI 打算软件,你大概会发明 Figma 这个界面的操作逻辑有点近似于 Sketch,为了便当你的敏捷初学,官正大在右下角的助助按钮安置了一堆东西,也许助助咱们便当查找 Figma 自带的各样教程,急切键等。

  此时咱们按下键盘上的 A ,呼出急切键效用,创修一个画板,然后正在右侧选拔你笃爱的产物类型便也许取得一个对应的 UI 巨细的网格。由于现正在咱们是要 redesign 少数派的首页,因此咱们选「MacBook Pro」。

  然而你也发明了,空缺的界面并不适合打算,咱们必要极少网格来助咱们辅助定位和分派空间。点击右边的加号,也许看到 LAYOUT GRID 下面的 Grid ( 10px ) 会助咱们主动天生一个铺满暂时白色页面的网格。

  你也能够点击 Grid ( 10px ) 举行详明的进一步扶植(此处我选拔默认的扶植)。

  咱们现正在来调查一下少数派的首页,大致由顶栏、导航栏、闪现栏、作品、侧边栏等构成。

  那么咱们凭据这个矩形割裂的思绪,点击网页左上角的矩形按钮,正在 Figma 内部先画好一个矩形,把这个矩形行为咱们网页的靠山。

  正在左边的控件栏内部,咱们单击创修好了的矩形,同时正在右边的颜色负责内部,更改他的颜色为玄色,当然你也能够选拔你笃爱的颜色或是图片来行为靠山。

  扶植好靠山后,咱们能够考试先做一个顶栏和导航栏的协调,使他成为一个全新的顶栏。通过再次点击矩形按钮,创修一个全新的矩形,放正在最上面行为顶栏,颜色扶植为浅玄色使咱们能更好地看清它和靠山颜色区别,增添上 logo 和干系的导航,正在增添的时间会有主动天生的参考线助助咱们剖断名望。

  假如碰到素材颜色不搭配的情景,能够考试行使右边的用具举行调度,比方下图中的搜素图标,由本来的灰色调度为白色。

  为了让咱们的顶栏和靠山融为一体,咱们此时把颜色改回玄色,再通过同样的形式再次创修一个较大的矩形,同样为了便当咱们制制的时间易于辨认,将它改为浅玄色。

  少数派目前的 Power+ 2.0 正正在炎热售卖中,咱们就把它行为咱们的 Banner。拖拽靠山图片进入矩形中,把图片铺满扫数矩形,再输入宣扬文字,文字的颜色为了便当与靠山成婚,咱们行使右侧的取色器用具来获取文字的颜色。

  纯正的文字好似没有太大的吸引力,咱们再画一个圆角矩形,调度颜色为渐变色,便当用户采办。

  接下来咱们制制页面的主体个人,先创修一个矩形行为主体,明陞然后再创修四个矩形行为咱们的商品闪现位。

  正在四个矩形展位安置好咱们必要闪现的商品图片,假如碰到矩形阻住图片的情景,只必要右键单击图片,选拔「bring to front」即可。

  如此咱们的主体个人就达成了,末了咱们选拔「File」-「Export …」举行导出,便能将咱们做好的主页发送给其他人了。

  Mac 上目前主流的打算软件之一是 Sketch,Sketch 有很众突出的地方,但它的偏差是只支柱 Mac 编制,每年的订阅价值也是不菲,导致把很众新人拒之门外。

  Figma 实用于任何也许运转当代浏览器 ( Chrome ) 的编制,也许让咱们随时随地发展事务。假如是团队行使,正在 Figma 中共享文献也特殊容易,只需共享链接即可。对付次第员们来说,Figma 支柱直接从打算文献中复制 CSS,省去了很众繁琐的事务。但 Figma 偏差也很昭着,Figma 到目前为止,对中文的支柱仍旧不敷好。

更多案例

平面设计师必备软件排行榜

平面打算用什么软件,需求哪些身手?平常正在口试平面打算的岁月口试官总会问你会某某软件么,且不说创意和颜色感应,或许仅凭不会利用某一款软件...

明陞在线设计工具 Figma让新手也能从零开

是一个统统免费的正在线 UI 界面打算软件,支柱 Windows 和 macOS 等众个平台。凭据UXTOOLS的数据,Figma 仍然是目前行使排名前五的打算用具了。与 Sketch 等古...

股票软件界面详细图解5月至8月 陕西佛坪

商议电线)秦岭人与自然博物馆、秦岭佛坪博物馆对佛坪县外里完全乘客实行免票战略,乘客可免费领取,。 , 免费领取景区门票: (1)海外乘客凭身份证正...

友情链接:

Copyright © 2002-2021 明陞网络设计有限公司 版权所有 | 网站地图