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

原创 已于 2022-01-23 10:40:22 修改 · 1k 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
ui设计

当前文章被收录于：

ui设计
38 篇文章 27 人学习
订阅专栏 查看详情
于 2022-01-23 10:39:39 首次发布
本文详细介绍使用Figma进行APP首页的设计过程，包括头部线性渐变背景的应用、自动布局的设置方法，以及如何实现搜索框和顶部菜单的布局设计。

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

效果

在这里插入图片描述

1.头部

在这里插入图片描述

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

2.搜索框

在这里插入图片描述

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

3.顶部菜单

在这里插入图片描述

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

4.点部切换

在这里插入图片描述

变体组件
标签
#css #css3 #前端 #figma #ui设计
拯救加班狗！用Cursor+Claude3.7自动生成旅行APP全流程原型（含Figma对接指南）
weixin_29229989的博客
03-16 264
本文介绍如何利用Cursor编辑器与Claude3.7快速生成旅行APP全流程原型，包括需求框架构建、高保真原型自动化生成及Figma对接技巧。这套方法能显著缩短产品设计周期，特别适合开发者高效完成复杂业务逻辑的原型设计。
Google Stitch：1分钟从想法到可编辑Figma设计稿（附10个技巧）
chenhong007的博客
05-26 3672
Stitch官网工具背景Google Stitch前身为Galileo AI（专注Text/Image to UI设计），被谷歌收购后整合了Gemini 2.5 Flash和Gemini 2.5 Pro模型，支持通过自然语言或草图生成高保真UI设计，并导出代码或Figma文件。注册与界面导览（需谷歌账号登录）两种模式选择Standard模式（Gemini 2.5 Flash）：快速生成设计，支持导出Figma（每月350次免费额度）。Experimental模式。
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 &#39;figma-styled-components` <Button> I am a button</Button> ... 文献资料 当前文档在 在本地 使用yarn安装依赖项，然后运行yarn storybook以构建此项目的故事书 建造 您可以使用yarn build来构建项目 去做 重构为功能组件 重构选择，更好地处理默认选项
Trae CN + Figma MCP 从 UI 设计到微信小程序代码生成保姆级教程
关注智践行，一起学机器人和AI技术
04-30 3517
MCP是AI模型Claude所属的研发公司Anthropic在2024年提出的一项开源协议，全名为。它允许大语言模型（LLMs）访问自定义的工具和服务。根据Trae官方文档所说，Trae中的智能体作为MCP客户端可以选择向MCP Server发起请求，使用它们提供的工具。而且可以自行添加MCP Server，并添加到自定义的智能体中来使用。而Figma UI设计工具提供了#Figma MCP，也就是说我们可以让Trae利用设计好的Fiagma UI数据直接生成UI界面代码。
23-Figma-标签栏组件制作
billycoder的专栏
01-23 2797
23-Figma-标签栏组件制作 效果 步骤 1.摆放位置 布局网格 2.控制图标和网格水平居中 通过绘制一个辅助矩形完成 3.几个图标水平对齐 选中5个图标,然后水平对齐 图标约束设置为居中 4.制作变体组件 绘制单个 定义颜色样式 复制方式创建另外3个,修改颜色 创建多个组件 批量修改组件名字,底部栏=首页、底部栏=发现、底部栏=消息、底部栏=我的 合并为变体 复制使用组件的实例，属性菜单栏可以完成切换 ...
【Figma学习】组件管理
weixin_47050107的博客
08-12 3631
Figma学习
22-Figma-常见项目框架搭建
billycoder的专栏
01-23 1632
22-Figma-常见项目框架搭建 完成框架图 画框模板使用iPhone 11 Pro /X 375×812 顶部状态栏和底部菜单栏,使用组件 组件哪里来?社区搜索"ios 15",选择一个下载量还不错的,然后创建副本 搜到社区的组件,可以切换视图,查看效果(cover/page) 顶部状态栏:44 标题栏:44 底部菜单栏:83 标尺快捷键:shift+r 完成布局网格 完成小程序框架 需要去社区搜索一个小程序组件,然后找到上面的的"胶囊部分" ...
分享一个简单的iphone自定义状态栏例子
KylinBL的专栏
10-19 3038
不多说，上例子： #import //自定义状态栏，状态栏显示灰色背景并【indicator message】。用于耗时操作的状态栏信息提示 //例如：访问网络时，提示正在获取网络数据，或者正在提交数据至服务器等提示 @interface CHStatusBar : UI
Figma如何实现移动端预览及溢出滚动
热门推荐
masonqiang的博客
11-09 1万+
简单几个步骤实现在Figma预览时有手机外框，以及溢出内容滚动。
Figma温馨家具电商App UI设计素材全解析
weixin_31974443的博客
09-05 1496
导航结构作为用户与应用之间的桥梁，直接影响着用户能否快速、准确地完成目标操作。良好的导航设计可以显著降低用户的学习成本，提高操作效率，从而增强用户粘性。在电商应用中，用户的行为路径通常包括浏览商品、搜索、加入购物车、结算等关键环节。若导航结构混乱或层级过深，会导致用户在多个页面之间迷失，甚至放弃购买行为。因此，导航设计应遵循以下原则：直观性：导航入口应清晰可见，用户能快速识别并理解其功能。一致性：整个应用中导航样式应保持统一，避免用户产生混淆。简洁性。
Figma-Export终极教程：Android开发者必备的UI资源导出工具
gitblog_00350的博客
06-15 988
想要将Figma设计稿中的颜色、图标、图片和排版样式一键导入到Android Studio项目中吗？figma-export正是您需要的终极解决方案！这款强大的命令行工具专门为Android开发者设计，能够自动化地从Figma导出UI资源，支持暗色模式、Jetpack Compose，让设计与开发的无缝对接变得前所未有的简单。 ## 🚀 为什么Android开发者需要figma-export？
从Figma到小程序，全程只动嘴：腾讯 CodeBuddy 实战体验
qq_31647491的博客
08-05 2120
用鹅厂CodeBuddy写鹅厂小程序，体验“以子之矛攻子之盾”。作者借Figma「叮咚决策器」UI，基于uni-app+wot-demo模板，在CodeBuddy中一键拉设计稿、配MCP、选Claude-4，几分钟还原首页并完成抛硬币功能，全程高能，效果惊艳。
Figma软件的缺点和替代软件推荐
七小嗨少的博客
11-06 1100
说到Figma软件，相信没有人不知道设计行业的人，尤去年Adobe以200亿美元收购Figma软件的消息，对设计行业影响很大。可想而知，Figma软件在设计行业人士眼中的地位是毋庸置疑的。的确，Figma软件的功能非常强大，Figma软件是基于web操作的，无论是macos、windows可以使用这个软件，即使有电脑、浏览器、网络，甚至软件也不需要下载，节省了大量的内存空间。那么Figma软件到底是用什么呢？
Figma 快速入门实践课程（1 小时）
软件行业技术文化交流。
10-22 5298
Figma是一款基于浏览器的UI/UX设计工具，支持实时协作和免费使用。文章详细介绍了Figma的入门步骤：从认识界面、创建画板、设计简单UI元素（如登录页面），到使用样式组件和制作交互原型。还提供了"天气App"的实战教程，包括设计状态栏、天气信息展示和未来预报等功能。教程包含操作技巧（如快捷键使用、元素对齐）和资源推荐（免费图标库）。最后讲解了如何分享设计和导出资源，适合设计新手快速上手Figma进行界面设计。
Figma Make 提示词设计：从布局、组件、交互到风格
MoSTChillax的博客
12-24 2566
本文针对FigmaMake提示词使用中的常见问题（如设计不一致、组件混乱等），提出了构建"可复用Prompt框架"的解决方案。作者建议将提示词结构化分为System/Goals/Pages/Components/Interactions五大模块，并详细介绍了PC端布局、常用组件（对话列表、Tab等）和交互设计的规范化描述方法。此外，文章还提供了视觉风格模板，涵盖色彩、字体、间距等设计系统要素，帮助实现原型设计的一致性。通过这种规范化、结构化的提示词撰写方式，可以有效提升设计输出的稳定性和
颠覆设计开发协作：3大创新方法打通Figma与代码鸿沟
gitblog_01024的博客
04-02 186
作为前端开发者，我曾无数次面对这样的困境：设计师交付的Figma文件精美绝伦，但要将其转化为代码却要耗费大量时间手动测量尺寸、提取颜色值和复制文本内容。更令人沮丧的是，当设计需要调整时，这一切又得重来。直到我发现了Figma-to-JSON这个开源工具集，它彻底改变了我的工作方式，让设计开发协同效率提升了数倍。本文将从开发者视角，带你深入了解这个工具如何通过双向数据转换打破设计与开发之间的壁垒，以
3分钟搞定Figma中文汉化：设计师必备的Figma界面汉化插件完整指南
最新发布
gitblog_01086的博客
08-18 236
凌晨两点，你盯着 Figma 里满屏的英文菜单，想找"布尔运算"却只看到 "Boolean Operations"；新同事第一天入职，被 "Auto Layout"、"Component" 这样的术语吓得不敢上手；跟客户演示时，你得一边点功能一边用中文解释"这个叫原型、那个叫自动布局"……这些场景，是不是似曾相识？ **FigmaCN** 就是为解决这个问题而生的 Figma 中文汉化插件：38
Flameshot用户界面原型设计：Figma使用教程
gitblog_00319的博客
10-07 975
Flameshot作为一款功能强大的截图工具，其用户界面（UI）设计直接影响用户体验。本文将详细介绍如何使用Figma设计Flameshot的界面原型，帮助开发者和设计师快速构建符合用户需求的交互界面。 ## 界面原型设计基础 Flameshot的界面主要包括截图工具栏、配置窗口和通知组件。设计时需重点关注工具易用性和视觉一致性。官方提供的SVG图标资源可直接用于原型设计，确保界面风格统一。 ...
交互设计师、UI设计师、视觉设计师面试作品集包装模板figma源文件
weixin_46664875的博客
04-03 861
该作品集虽然只有19页，但可根据需求复制作品集里已有的页面作为模版来扩展设计内容。交付文件：作品集模板源文件、作品集包装psd源文件、作品集所用字体文件。注意：作品集所使用的App是不包含的。页面尺寸：1920*1080PX。赠送文件：24款高质量样机。交付格式：figma。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值