24-Figma-APP首页排版（上）

已于 2022-01-23 10:40:22 修改
阅读量658 收藏 1
点赞数
分类专栏： ui设计 文章标签： css css3 前端 figma ui设计
于 2022-01-23 10:39:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/billycoder/article/details/122648231
版权

24-Figma-APP首页排版（上）

效果

在这里插入图片描述

1.头部

在这里插入图片描述

背景采用线性渐变填充
文字位置控制用自动布局,shift+a创建自动布局
文字和头像位置用自动布局
Unsplash添加头像
新建颜色样式

2.搜索框

在这里插入图片描述

图标和文字位置,通过自动布局
搜索框,通过自动布局设置填充和圆角

3.顶部菜单

在这里插入图片描述

（图片+文字）套了一个自动布局
4个（图片+文字）又套了一个自动布局
选中自动布局里面的元素，可以ctrl+d快速复制元素

4.点部切换

在这里插入图片描述

变体组件
billycoder
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
figma-styled-components:Figma UI样式的组件
05-14
Figma样式的组件 一组按照Figma UI建模的样式化组件 用法 npm i figma-styled-components --save 为了测试该库，我创建了这个Figma插件： ，它使用组件来重新创建Figma侧栏。 您可以克隆存储库并签出代码，以查看实际Figma插件中组件的一些示例。 import {Button, Checkbox, Input, Label, SectionTitle, Select, Switch, Text} from 'figma-styled-components` <Button> I am a button</Button> ... 文献资料 当前文档在 在本地 使用yarn安装依赖项，然后运行yarn storybook以构建此项目的故事书 建造 您可以使用yarn build来构建项目 去做 重构为功能组件 重构选择，更好地处理默认选项
23-Figma-标签栏组件制作
billycoder的专栏
01-23 1996
23-Figma-标签栏组件制作 效果 步骤 1.摆放位置 布局网格 2.控制图标和网格水平居中 通过绘制一个辅助矩形完成 3.几个图标水平对齐 选中5个图标,然后水平对齐 图标约束设置为居中 4.制作变体组件 绘制单个 定义颜色样式 复制方式创建另外3个,修改颜色 创建多个组件 批量修改组件名字,底部栏=首页、底部栏=发现、底部栏=消息、底部栏=我的 合并为变体 复制使用组件的实例，属性菜单栏可以完成切换 ...
【Figma学习】组件管理
weixin_47050107的博客
08-12 2355
Figma学习
22-Figma-常见项目框架搭建
billycoder的专栏
01-23 1134
22-Figma-常见项目框架搭建 完成框架图 画框模板使用iPhone 11 Pro /X 375×812 顶部状态栏和底部菜单栏,使用组件 组件哪里来?社区搜索"ios 15",选择一个下载量还不错的,然后创建副本 搜到社区的组件,可以切换视图,查看效果(cover/page) 顶部状态栏:44 标题栏:44 底部菜单栏:83 标尺快捷键:shift+r 完成布局网格 完成小程序框架 需要去社区搜索一个小程序组件,然后找到上面的的"胶囊部分" ...
分享一个简单的iphone自定义状态栏例子
KylinBL的专栏
10-19 2823
不多说，上例子： #import //自定义状态栏，状态栏显示灰色背景并【indicator message】。用于耗时操作的状态栏信息提示 //例如：访问网络时，提示正在获取网络数据，或者正在提交数据至服务器等提示 @interface CHStatusBar : UI
独特精致小众风格食品供应配送app界面ui素材figma&sketch&adobe_xd.zip
12-28
这篇文档将深入探讨一款独特精致小众风格的食品供应配送APP界面UI素材，这些素材涵盖了figma、Sketch和Adobe XD三种主流的设计工具格式。设计师们可以利用这些素材为外卖应用、食品配送服务以及餐饮在线下单应用创建...
电商app ui .psd素材下载
04-20
5. **色彩和排版**：电商App界面设计通常采用鲜明的颜色以吸引用户注意力，同时保持视觉层次感。排版需清晰易读，确保信息传递效率。 6. **响应式设计**：电商App界面需适应各种屏幕尺寸，如手机、平板等，PSD素材...
To Do List app ui .sketch素材下载
04-20
- **Figma 或 InVision Sync**：与其他协作平台集成，实现跨团队设计工作流。 6. **设计原则** - **易用性**：界面应直观，减少用户的学习成本。 - **响应式设计**：考虑不同屏幕尺寸和设备类型。 - **一致性**...
简洁银行app ui .fig素材下载
04-20
最后，考虑到移动设备的多样性，设计师需进行响应式设计，确保App在各种屏幕尺寸上都能良好显示。这涉及到对不同分辨率、屏幕比例和操作系统兼容性的测试和调整。 总而言之，简洁银行App UI设计是一个综合了美学、...
新闻app ui .sketch素材下载
04-20
《新闻App UI 设计素材深度解析与应用》 在当今数字化时代，新闻App已经成为人们获取信息、了解世界的重要工具。一款优秀的新闻App不仅需要具备高效的信息传递能力，更需注重用户体验设计，使得用户在轻松阅读的...
Figma如何实现移动端预览及溢出滚动
masonqiang的博客
11-09 8274
简单几个步骤实现在Figma预览时有手机外框，以及溢出内容滚动。
10-Figma-属性栏-对齐、分布、坐标、图层操作
billycoder的专栏
01-21 2965
10-Figma-属性栏-对齐、分布、坐标、图层操作 常见操作 垂直对齐,属性面板操作,或者alt+v 水平等距,属性面板操作,或者alt+shift+h,或者点击整理 水平对齐,属性面板操作,或者alt+h 垂直等距,属性面板操作,或者alt+shift+v,或者点击整理 其他对齐,属性面板操作 平滑圆角,属性面板操作,针对ios系统 翻转,右键操作 混合模式修改,属性面板操作 图片顺序调整,ctrl+]上移,ctrl+[上移,ctrl+shift+]顶,ctrl+shift+[底 透明度,属性面板操作
如何做出一套完整的APP界面设计
七小嗨少的博客
09-06 2357
同时，针对目标群体，尽量使用客户熟悉的界面风格，方便用户按照以往的使用习惯操作设计软件，比如。长期以来，开发者一直重视功能的研发，忽视了功能的研发UI设计导致许多非常实用的设计APP客户安装下载后不会使用，或者觉得操作复杂，不易使用。一般来说，重要的颜色不超过三种，应分为：用于强调或需要突出重点的文本、按钮等小面积使用的颜色；文本的行距、按钮与按钮之间的距离、频道标题与文本之间的距离、导航与频道之间的距离应统一，使界面整洁清晰。​界面设计前，要定位界面的风格，使界面的整体风格符合视觉流程和目标群体的喜好。
2014 年移动设备界面设计有哪些趋势？
calvin367的专栏
03-29 1755
如果你是一个APP狂热分子，你会花大量的时间在各种APP的尝鲜中，你会明显感受到一些APP在采用着某种风格鲜明的设计语言，来标榜自己的独特之处，行成自己的设计风格，甚至引领设计风向。去年我们关注到随着Metro设计风格的影响和iOS7的发布，APP明显都开始尝试扁平化的设计语言了，除此之外，还有哪些显性化的设计语言崭露头角呢？ 在这篇文章里，我想分享一些日益显性的设计语言，让人一眼就记住它的
点击出现遮罩层时滚动条会自己回到顶部_用 Figma 轻松制作属于自己的表情包...
weixin_39908616的博客
11-12 1363
表情包真是个好东西，不仅能表达出文字所不能表达的情感，关键时刻甚至能缓解尴尬。我是一个特别喜欢发表情包的人，但又不喜欢总是发那几个表情，所以偶尔也会自己做几个表情包，来回馈广大网友。以前我基本上都是使用 Photoshop 的帧动画来做表情包，也就是一帧帧地修改图片，最后导出 Gif。比如下面这个表情包，就是我在苹果发布新的 AirPods 时用 Photoshop 做的。熊猫头但是最近，在使用 ...
Figma实用小技巧
热门推荐
设计の诗
05-17 2万+
1. 介绍 原作：lijxse 视频地址 文字版整理：岩鸣杨子 2. 快速拖拽调整数值 按住option可在数值上拖拽调整，不按option时只能在X/Y/W/H/旋转/圆角等的图标上拖拽调整，不能调整透明度的数值。 3. 属性粘贴复制 shift+X：互换填充和描边 选中图层的某个属性，然后cmd+C，则可复制这个图层特定的属性。 选中图层的某个属性，然后cmd+V，则可粘贴到这个图层特定的属性上。 4. 列表切换&快速搜索 option+1：切换到Layers option+2：切换到Asse.
figma下载_Figma的自动版式实用
weixin_26732881的博客
08-05 275
figma下载Figma’s Auto Layout has been around for a while, but not everyone’s aware of the benefits it brings. It doesn’t replace constraints, they’re still very much needed. The trick is to use the righ...
【Figma技巧】如何把Figma里面每个frame分散为单独的page
设计の诗
04-13 2014
在Scripter插件或浏览器控制台里输入以下代码： let af = figma.currentPage.findAll(n => { return n.type === "FRAME" }) af.forEach(n => { let p = figma.createPage() p.appendChild(n) }) 以上代码来自@Mr. Biscuit
移动端字体7准则
03-06 855
可能你听过这说法，好的字体是隐形的，不过更准确来说，应该是好的字体让阅读行为毫不费力。 当视线掠过一行文字时，它是跳跃前进的，我们称之为扫视。你读的不是字母，甚至不是词语，而是文字某部分的影像，大脑会补上它预期的内容。如果超出大脑预料，它会促使眼睛回去核实假设十分正确。通过在字里行间创造平顺的视觉流动，好的字体极度减轻了眼睛的负担。 对任何字体工作者而言，在移动设备上要面临与生俱来的...
Figma-Low-Code
最新发布
05-11
Figma-Low-Code是一种基于Figma设计工具的低代码平台，它允许用户通过可视化方式，快速创建Web和移动应用程序的原型和交互界面，无需编写代码。Figma-Low-Code平台提供了丰富的组件库、模板和插件，用户可以通过拖拽...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值