栅格系统入门手册

  • 经验类型经验/观点
  • 经验属性原创文章
  • 经验版权署名-非商业性使用
47188 22 399 2021-03-18


在阅读本文前要通知一件事情,由于考虑到排版的精美程度,我自己搭建了一个个人博客,以保证读者能有更优质的阅读体验。该博客是基于Figma搭建的,因此大家如果没有使用Figma的话需要注册下才可以查看,以后更新的文章也会在博客同步更新。

Figma博客点击下方链接进入。点击进入








本文到此结束,感谢阅读,后面文章规划分别有,先输出哪个看评论区反应。

《Figma进阶:Auto Layout——事半功倍的生产力技巧》 讲解Figma进阶功能Auto layout,该功能可以帮助设计师输出组件化且可以智能编辑的的灵活UI组件,可以大大提高设计效率,将设计师从低效的重复性劳动中解放出来,同时它也有利于帮助设计师理解开发实现组件的理念思维。

《Figma搭建个人博客网站+Figma最新功能:可交互组件》本次我拿到了Figma Interactive Components测试资格后立即着手设计个人博客,想做这件事很久了,之前的Figma还不足以支持我完成一个交互完整体验良好的的博客网站(在没有交互组件前,所有交互动作都要通过页面级流转来完成,复杂度较高,成本极高且效率低下),而现在,,,,,Figma厉害厉害。


《体验设计相关主题》,可以评论想要看的文章内容,我会考虑从中筛选一些主题。

______________________________________________________________________________________END


另外我所在的团队正在招聘优秀的设计师,我们属于Shopee供应链设计团队,因此希望有B端设计经验的优秀设计师,或者C端有超强能力但想转换领域的设计师快快加入。面试高效透明,仅两次专业面,Leader面后直接Boss面。20+HC,岗位机会超多。外企环境,弹性工作不打卡,无限量零食供应各种福利。薪资保底15+月,有新加坡换岗的出国工作机会。建议加我微信直接推到leader手中,简历赶快砸过来吧。

联系微信:15029041458 

推荐阅读

开发人员撰写的网格文章:https://www.smashingmagazine.com/2017/12/building-better-ui-designs-layout-grids/ 

Powered by Froala Editor

全部评论:22

  • 2022-01-06 15:47

    学习了

  • Boxc

    2021-08-04 15:27

    figma做博客,文章管理和维护是个大问题

  • Aimee艾米

    2021-06-03 15:29

    看了一天,累死我了

  • 2021-05-19 11:06

    @压力马斯内: good!

  • 压力马斯内

    2021-05-14 11:59

    @: 我一般都是直接字号+12=行高,没有什么理论依据 纯粹是长期观察的习惯结论~哈哈

  • 压力马斯内

    2021-05-14 11:58

    但是出现42 43 42这种真的很难受 我一般都会想尽办法让每个元素保持同样的大小···

  • 懒人1230

    2021-05-13 13:48

    请问Figma博客怎么制作呢?

  • 阆苑游客

    2021-04-21 14:59

    大佬 我用ps建立面板参考线 还是不了解栅格理论 栅格是整个界面进行栅格 还是除开左侧导航区域 栅格?看了很多 都弄不清楚

  • 刘一布拉布拉哈哈

    2021-04-12 14:15

    想问一下:水槽和列宽是依据什么来确定?

  • 2021-04-12 11:08

    @wunixiaoqi: 好的,谢谢哈!

  • wunixiaoqi

    2021-04-09 17:54

    @: 比如30号字,那行高就是42,留白是上下是6,也就是:6=(42-30)/2

  • 2021-04-07 11:34

    tips 行高与字号:上下侧的留白为行高减去字号/2,这段能再通俗一点解说吗?我不太理解。

  • 凌晨不吃鸭脖几

    2021-04-07 09:37

    好文章!点赞!

  • Marijan

    2021-03-31 23:04

    期待大佬的Auto Layout进阶;figma的Auto Layout 、Variants,用了是真香,目前我用Auto Layout做组件,已经弄出了一份可自适应的b端,学以致用在项目上 我不是大佬,只是figma热爱者

  • 冰镇特仑苏

    2021-03-31 19:43

    @howard: 原理不是一样的么

  • 南山可

    2021-03-22 11:03

    @howard: 定义好栅格三要素的宽度然后再软件里设置就行,1倍以375为例,设置 margin为16, gutter为12,

  • howard

    2021-03-21 23:47

    请问在1倍图下如何做删格?

  • CE青年

    2021-03-20 14:31

    看到 Figma 的博客,激动的泪流~ 交互整体流畅,等着网站继续更新~

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票