Figma 新增响应式设计功能 breakpoint

Posted UX花园

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Figma 新增响应式设计功能 breakpoint相关的知识,希望对你有一定的参考价值。

作为完美主义者,网页设计中我们通常会设计多套适配方案来解决不同屏幕下的视觉体验。


bootstrap作为知名响应式框架,也有对浏览器不同宽度的展示设计网格,我们可以看到。


当网页宽度小于750px时,它会呈现出,适用于手机屏幕尺寸的视觉效果。


当网页宽度大于750px小于1024px时,它会呈现出,适用于小移动设备,例如iPad,或者笔记本电脑上的视觉效果。

当网页宽度大于1366px时,它会呈现出,适用于大显示器屏幕尺寸的视觉效果。


当然还有专门为4k显示器设计的视觉效果。


可以针对不同布局进行相关的视觉设定。非常方便。



进行网页响应式设计时,我们通常会限制浏览器宽度来控制现实内容的效果,官方给出的尺寸如下:400-500-800-1000px,当然可以根据不同的团队进行调整。使用bootstrap的宽度为576-768-992-1200px。


通常境况下我们会根据不同的网页进行宽度的设计然后逐一展示,figma只需要轻松设置,即可将效果直接通过浏览器宽度调整现实出来。


如果你需要进行响应式网页设计,这个工具你值得尝试。

设计完成后还能进行快速预览哦~


以上是关于Figma 新增响应式设计功能 breakpoint的主要内容,如果未能解决你的问题,请参考以下文章

UI素材|响应式设计且可缩放的线框图套件

Figma社区内测,打造面向设计师的Github

响应式设计NFT市场平台UI套件

简约现代风格的房地产响应式设计网站模板

用Adobe XD 12更智能的快速完成响应式设计

一体化设计平台丨上海道宁为您带来强大的团队协作UI和UX设计应用程序——Figma