Figma 是一个基于浏览器的协作的UI设计工具,其以轻量、便捷、跨平台使用、协同便捷的特点,迅速吸引了广大UI/UX 设计师们的喜欢。但是设计师经常遇到反复切图、交付开发等问题,所以借此机会分享一篇关于 Figma 切图的必要知识点和交付经验。
1. 导语 设计走查已经是很多需求开发中不可缺少的一环,但是目前走查大部分都停留在人工肉眼对开发还原页面截图和设计稿进行对比找不同,效率比较低。这里整理了一些协助对比,提高开发还原度的工具。 页面对比工具,可以分为三种不同展现形式: chrome 插件:直接在开发页面上进行对比,设计稿覆盖到页面上,对比查看页面不同点 在线网站 / 客户端对比:通过上传实现截图和设计稿进行对比,增加一些参考线、取色器、度量尺寸等辅助工具。 npm 包工具:适合开发人员使用,引入对应代码包,通过编码操作传入对比页面,输出最终的
静电说:2023新年快乐!这也是新年的第一篇文章,再次祝福各位新年新气象。今天我们为大家分享11个新的Figma隐藏技巧,我猜你可能真的不知道。快学起来。
静电说:继昨天我们发布了Figma下的一款超神奇的抠图插件后,今天静电再次为大家带来一款Motion插件,它可以在Figma中做帧动画。在通常情况下,Figma中是没有时间轴的,因此只能使用Smart Animate做一些补间过渡动画,而要做一些更流畅且具有更多细节的动画,Figma则显得有点无奈。不过没关系,今天,我们为大家介绍使用Motion插件在Figma中来完成超流畅动画的案例。一起来看Pavel Babkin的这篇文章。
📷 因为上一篇《设计提效-Figma插件篇》的不错反响,所以QQ团队的设计师们继续整理了一批超实用的提效秘籍,希望能助力大家一顿快捷操作猛如虎,早早打卡下班不辛苦。 一、快捷键面板|宝典大全
摹客 Figma 插件的上线,完美解决了 Figma 本地化支持极度缺失、自身交付能力弱以及团队协作费用昂贵等问题。自插件推出以来,越来越多的用户选择将 Figma 设计稿上传到摹客进行团队协作,目前在Figma插件社区中,已经有1.5k的小伙伴安装使用摹客~
设计稿转代码是一个非常宽泛的描述,本文指的设计稿转代码,同时也是 Semi Design D2C 所提供的能力范围,主要集中在以下场景:
使用 Tailwind CSS,我避免了在 React 项目中复制大量 CSS 文件的麻烦,使网页开发变得更加迅速高效。虽然 Tailwind 已经非常优秀,但我还是发现了一些技巧,可以进一步提升使用这个框架的体验。
在互联网技术迅速发展的今天,随着 OpenAI 大语言模型的横空出世,AIGC也悄然而至,目前已经开始渗透到前端开发的方方面面。
ArcoDesign 是由字节跳动 GIP UED 团队和架构前端团队联合推出的企业级设计系统。在打磨了近 3 年之后,通过字节内部大量业务沉淀和验证,我们开源了 ArcoDesign 设计系统。旨在让社区听见更多的声音,为更多中小型企业及个人设计师和开发者提效,创造更多高效美观的“最佳实践”。
静电说:在发表Sketch颠覆者!静电的Figma完全学习日记-Day.01后,我收到了不少小伙伴的留言。其中有一些表达了质疑的声音,大概是这样的:
背景:众所周知,在前端开发过程中,视觉搞到重构稿是一个不可忽略的过程,通常较为成熟而稳定的团队是配置了专门的重构开发团队来做这些事情,他们的职责是:
现象描述 同样大小的图片(60x60px)用canvas和DOM绘制,结果发现canvas的画面质量要差很多。结果如下图所示。 上图中,左侧红框中的金币采用DOM绘制,右侧和下方的金币和文字等
window.pageXOffset和window.pageYOffset,包含了文档水平和垂直方向的滚动距离。所以你可以知道用户已经滚动了多少距离。
在写css样式的时候最常用的长度单位是px(像素),除此之外经常会碰到em、pt等等。
静电说:今天静电在浏览社区的时候,发现一款非常神奇的Figma插件,这款插件可以一键抠图,并且经过静电的测试,抠图结果让人想哭,可以说效果真的是非常的好。
两个 angle 的弧度值范围为 [0, PI*2),方向为顺时针,基准方向为正右(对应向量为 (1, 0))。
当界面设计定稿之后,设计师需要对图标进行切片,提供给开发工程师。切图与标注是为了能够满足开发人员对于效果图的高度还原需求,直接影响到工程师对设计效果的还原度,并且也是设计师重要的输出物之一。合适、精准的切图可以最大限度地还原设计图,起到事半功倍的效果。
在你依据少数几个严格的断点(breakpoints)来做设计决策之前,确保你已经考虑了屏幕尺寸和浏览器视口的巨大碎片化问题。
Figma 最近真是热火朝天,2021 年 6 月刚获得 2 亿美元的 E 轮融资,估值高达 100 亿,居然以设计工具的身份成为独角兽。
PC 端 和 早期的 移动端 网页中 , CSS 中配置的 1 像素 对应的就是物理屏幕中的 1 像素 ;
随着移动端H5需求场景越来越多,例如微信公众号中H5页面的开发,APP中内嵌H5页面等,移动端H5开发基础知识和技巧是前端开发工程师必备的技能~
在上一篇 【HelloCSS】的第二章第二章-CSS的逻辑属性与盒子模型中提了个问题:
近一年来,Figma 可谓是体验设计领域中最热门的工具。刚好最近开始频繁的在 Axure 9.0 和 Figma 中切换使用,深刻的感受到了设计细节带来的体验差异化。今天就通过一些细节亮点,总结下工具软件的体验设计的几个原则。
原文:A tale of two viewports — part two 译者:nzbin 在这个迷你系列中,我将解释 viewports 和各种重要元素的宽度是如何工作的,比如说 <html> 元素,窗口以及屏幕。 我们将在本页讨论移动浏览器。如果你是刚刚接触移动端,我建议你首先阅读关于桌面浏览器的第一部分。这会让你在熟悉的环境中循序渐进。 移动浏览器的问题 手机浏览器与桌面浏览器的最大不同就是屏幕尺寸。对于一个基于桌面优化的网站,移动浏览器的显示效果明显不如桌面浏览器,要么缩小后
感觉在微信上效果不好,去个人站点看 www.taoweng.site 前言 我相信对于像素,英文「pixel」,缩写「px」,这个概念并不陌生吧,不管是设计师设计图片用的单位 px,还是前端工程师在 css 里面的单位 px等等,很多领域都会用到这个单位,但是当我问他们一些问题的时候,基本上都答得不好。 比如: iPhone 6 的分辨率是 750 x 1334 像素,然而我们我们在写 css 的时候是以 375 x 667 来调的; 为什么我们做的一个网页在 pc 端可以正常显示,在移动端也可以正常显示,
移动端开发的时候,我们拿到的 UI设计稿 通常都是 640px 或者是 750px ,明明我们的 设备视口宽度 是设计稿的 一半 ,这是为什么呢?
对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 1.首先,选取一款手机的屏幕宽高作为基准(现在一般选取iphone6的375×667)。之前项目中也用到过iphone5的320×568。 2.对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对iphone6而言:原先的375×667,就会变成750×1334)。
在调试模式下 , 该父容器的尺寸为 390 x 44 像素 , 该父容器的高度是 44 像素 ;
前言:其实图片优化网上有非常多的方案,这份初探里面做的更多的是从不同方向进行的探索~
劣势:需加载适配各个终端的各个资源,在不同终端通过响应式布局实现不同展现,部分交互效果需要在页面中做终端判断,代价较大,若图片资源为一套,部分图片在超高分辨率设备(例如iphone系列)下会失真,且在非wifi情况下即使加了延时加载也易出现加载慢的情况。
所见不一定即所得 眼睛是心灵的窗户,也是蒙蔽你的一种途径。 假设,我给你一张图片,你觉得肉眼可以观察到全部的细节吗? 屏幕上一张清晰的图片 肉眼在屏幕上看到图片的清晰度由三个因素决定,一是图片像素本
最近被一朋友问到:css中设置一DOM的height:65px,请问显示的高度是否和Android的65dp的元素等高?脑子里瞬间闪现了一堆的概念,如dpr,ppi,dp,pt等,然而想了一阵,浆
设备像素比表示1个CSS像素(宽度)等于几个物理像素(宽度):DPR = 物理像素数 / 逻辑像素数
帮助开发者与设计师协作的工具正成为一种趋势。Figma 和 Canva 一直在宣传他们的开发工具,现在 Penpot 也开始了。
前端开发过程中,尺寸单位是我们必须用到的,下面我们对css中常见的几种尺寸单位px,em,rem,rpx进行逐一介绍 在这之前,需要先对几个概念进行普及介绍
用截图工具(截图工具测得的像素等于物理像素)测得CSS中的1px 的等于物理像素1px的 那么他们的比值就是1:1
上述代码相信大家在做移动端开发时经常去书写。它研究了两个内容:meta视口和宽度媒体查询。通常我们都会称上述代码为CSS3的媒体查询功能。使用媒体查询功能能够解决针对桌面级的web设计在移动端不同尺寸下的兼容展现。
老马初始学习视口的概念的时候,看了很多的文章,看来很多的资料,鲜有人能把这个东西讲的非常透彻的。老马接下来就从初学者能看懂的角度去讲解视口和适配的方案。 1. 关于屏幕 1.1 屏幕尺寸 设备屏幕尺寸是指屏幕的对角线长度。比如:iphone6/7是4.7寸,iphone6/7p是5.5寸。 1英寸 = 2.54厘米 3.5in = 3.5*2.54cm = 8.89cm 4.0in = 4.0*2.54cm = 10.16cm 4.8in = 4.8*2.54cm = 12.192cm 5.0in = 5.
transform:通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。
说到移动端:可以根据开发技术分,也可以根据操作系统来分,今天重点不是这个,是讲下使用CSS与Android如何进行屏幕适配。 1.先来了解几个概念:CSS中的px,em,rem分别是啥东西? px:像素,如果像素要换算成物理长度,需要得到dpi(每英寸像素数) em:相对长度单位,大小相对于父级节点来说, rem:是CSS3新增的一个相对单位,这个单位引起了广泛关注。相对于根元素<html>,关于兼容性的问题,除了ie8及更早的版本,其他浏览器均支持 2.Android:也有类似的单位,dp(dip),sp
设备像素也被称为物理像素,是显示设备中一个最微小的物理部件,在同一设备中,物理像素的总数是固定的。
老马初始学习视口的概念的时候,看了很多的文章,看来很多的资料,鲜有人能把这个东西讲的非常透彻的。老马接下来就从初学者能看懂的角度去讲解视口和适配的方案。
英文 | https://uxplanet.org/10-easy-tricks-to-improve-your-website-design-part-2-fde7f4ef41cd
如果你在为Android开发Web应用或者在为移动设备重新设计一个Web应用,你需要仔细考虑在不同设备上你的页面看起来是怎样的。因为Android设备有不同款型,因此你需要考虑影响你的页面在Android设备上展示的一些因素。
CSS 提供了多种指定元素大小或长度的方式,其中一些更为直观。CSS 单位可分为四大类:
之前说的Figma使用弊端或者对比Sketch不足的一点是导出给到开发很不方便,因为会涉及到网页打开速度等一些问题,使得很多设计师止步于此。
领取专属 10元无门槛券
手把手带您无忧上云