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

billycoder billycoder 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 1k累计阅读 1k平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄17年
关注
原创 2022-01-23 10:40:22 1k 阅读 AI 写同款· GEO 优化 ›
5分钟搞定：用Figma快速搭建APP原型（附实战案例） 本文详细介绍了如何使用Figma在5分钟内快速搭建APP原型，特别适合产品经理和开发者。通过图书推荐APP的实战案例，展示了从环境设置到界面设计、交互添加的全流程，重点讲解了Figma的智能布局、组件复用和协作功能，帮助读者高效完成原型开发。 阅读详情

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

效果

在这里插入图片描述

1.头部

在这里插入图片描述

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

2.搜索框

在这里插入图片描述

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

3.顶部菜单

在这里插入图片描述

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

4.点部切换

在这里插入图片描述

变体组件
收录于
ui设计

当前文章被收录于：

ui设计
38 篇文章 27 人学习
订阅专栏 查看详情
标签
#css #css3 #前端 #figma #ui设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
拯救加班狗！用Cursor+Claude3.7自动生成旅行APP全流程原型（含Figma对接指南） 本文介绍如何利用Cursor编辑器与Claude3.7快速生成旅行APP全流程原型，包括需求框架构建、高保真原型自动化生成及Figma对接技巧。这套方法能显著缩短产品设计周期，特别适合开发者高效完成复杂业务逻辑的原型设计。 阅读详情

相关推荐

1小时快速构建电商APP交互原型：Figma+Framer实战工作流

交互原型是产品验证的关键环节，其本质是通过可操作的动态载体验证用户路径、操作逻辑与流程顺畅性，而非静态视觉呈现。基于React技术栈的Framer与Figma协同方案，凭借所见即所得的状态绑定、原生级移动端手势支持及可复用的带逻辑组件，显著降低原型开发门槛。该方法契合中型电商类APP（如商品浏览、搜索筛选、购物车管理等典型场景）的高频交互范式，支持防抖输入、空状态CTA、跨页面状态同步等工程化实践，已在真实项目中实现需求确认周期缩短65%、开发返工率下降41%的技术价值。

weixin_34014555的博客 648

23-Figma-标签栏组件制作

23-Figma-标签栏组件制作 效果 步骤 1.摆放位置 布局网格 2.控制图标和网格水平居中 通过绘制一个辅助矩形完成 3.几个图标水平对齐 选中5个图标,然后水平对齐 图标约束设置为居中 4.制作变体组件 绘制单个 定义颜色样式 复制方式创建另外3个,修改颜色 创建多个组件 批量修改组件名字,底部栏=首页、底部栏=发现、底部栏=消息、底部栏=我的 合并为变体 复制使用组件的实例，属性菜单栏可以完成切换 ...

billycoder的专栏 2815

Google Stitch：1分钟从想法到可编辑Figma设计稿（附10个技巧）

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模式。

chenhong007的博客 3725

【Figma学习】组件管理

Figma学习

weixin_47050107的博客 3643

Figma温馨家具电商App UI设计素材全解析

导航结构作为用户与应用之间的桥梁，直接影响着用户能否快速、准确地完成目标操作。良好的导航设计可以显著降低用户的学习成本，提高操作效率，从而增强用户粘性。在电商应用中，用户的行为路径通常包括浏览商品、搜索、加入购物车、结算等关键环节。若导航结构混乱或层级过深，会导致用户在多个页面之间迷失，甚至放弃购买行为。因此，导航设计应遵循以下原则：直观性：导航入口应清晰可见，用户能快速识别并理解其功能。一致性：整个应用中导航样式应保持统一，避免用户产生混淆。简洁性。

weixin_31974443的博客 1518

figma-styled-components:Figma UI样式的组件

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来构建项目 去做 重构为功能组件 重构选择，更好地处理默认选项

22-Figma-常见项目框架搭建

22-Figma-常见项目框架搭建 完成框架图 画框模板使用iPhone 11 Pro /X 375×812 顶部状态栏和底部菜单栏,使用组件 组件哪里来?社区搜索"ios 15",选择一个下载量还不错的,然后创建副本 搜到社区的组件,可以切换视图,查看效果(cover/page) 顶部状态栏:44 标题栏:44 底部菜单栏:83 标尺快捷键:shift+r 完成布局网格 完成小程序框架 需要去社区搜索一个小程序组件,然后找到上面的的"胶囊部分" ...

billycoder的专栏 1638

揭秘Synopsys EDA中的AI黑科技：DSO.ai如何改变传统芯片设计流程

本文深入探讨了Synopsys EDA中的AI黑科技DSO.ai如何革新传统芯片设计流程。通过数据驱动的方法论、功耗优化革命和时序收敛智能加速，DSO.ai显著提升了设计效率和质量，实现了从经验驱动到AI驱动的范式转变。文章还提供了实战指南，帮助团队跨越AI EDA的实施鸿沟。

weixin_29296241的博客 527

分享一个简单的iphone自定义状态栏例子

不多说，上例子： #import //自定义状态栏，状态栏显示灰色背景并【indicator message】。用于耗时操作的状态栏信息提示 //例如：访问网络时，提示正在获取网络数据，或者正在提交数据至服务器等提示 @interface CHStatusBar : UI

KylinBL的专栏 3041

STM32F407步进电机控制及DM542驱动器使用

基于DM542驱动器的步进电机简单控制

qq_43868701的博客 1万+

LangGraph实战：如何用循环机制优化你的LangChain Agent工作流

本文详细介绍了如何使用LangGraph的循环机制优化LangChain Agent工作流，解决传统AgentExecutor在强制工具调用、动态提示调整和多阶段循环中的局限性。通过状态机和显式状态图设计，LangGraph提供了更精准的流程控制能力，适用于复杂AI应用场景。

weixin_30316097的博客 489

Figma-Export终极教程：Android开发者必备的UI资源导出工具

想要将Figma设计稿中的颜色、图标、图片和排版样式一键导入到Android Studio项目中吗？figma-export正是您需要的终极解决方案！这款强大的命令行工具专门为Android开发者设计，能够自动化地从Figma导出UI资源，支持暗色模式、Jetpack Compose，让设计与开发的无缝对接变得前所未有的简单。 ## 🚀 为什么Android开发者需要figma-export？

gitblog_00350的博客 1029

从MySQL到数据仓库：手把手教你用Airflow实现自动化ETL流水线

本文详细介绍了如何利用Airflow构建从MySQL到数据仓库的自动化ETL流水线，涵盖增量抽取策略、PySpark转换优化和数据质量监控等实战细节。特别适合中小规模企业构建高效数据仓库，提升数据处理效率和质量。

rnn9storyteller的博客 829

从Figma到小程序，全程只动嘴：腾讯 CodeBuddy 实战体验

用鹅厂CodeBuddy写鹅厂小程序，体验“以子之矛攻子之盾”。作者借Figma「叮咚决策器」UI，基于uni-app+wot-demo模板，在CodeBuddy中一键拉设计稿、配MCP、选Claude-4，几分钟还原首页并完成抛硬币功能，全程高能，效果惊艳。

qq_31647491的博客 2185

光耦继电器电路分析

光耦电路的分析笔记

MingYue_SSS的博客 6888

EtherCAT简介

EtherCAT（EtherNet Control Automation Technology）是由德国公司BECKHOFF公司于2003年提出的实时工业以太网技术。其具有高速、高数据有效率的特点，支持多种设备的连接拓扑结构。从站节点使用专用的控制芯片，例如：microchip公司的Lan9252、BECKHOFF公司的ET1100等ESC（EtherCAT slave controller）芯片。主站的搭建方式有很多，例如：开源主站IGH、SOEM、商业化主站TwinCAT等。

m0_73482095的博客 1万+

Figma 快速入门实践课程（1 小时）

Figma是一款基于浏览器的UI/UX设计工具，支持实时协作和免费使用。文章详细介绍了Figma的入门步骤：从认识界面、创建画板、设计简单UI元素（如登录页面），到使用样式组件和制作交互原型。还提供了"天气App"的实战教程，包括设计状态栏、天气信息展示和未来预报等功能。教程包含操作技巧（如快捷键使用、元素对齐）和资源推荐（免费图标库）。最后讲解了如何分享设计和导出资源，适合设计新手快速上手Figma进行界面设计。

软件行业技术文化交流。 5486

安装openclaw时出现npm error code ENOENT npm error syscall spawn git报错的解决方案

本文主要介绍了安装openclaw时出现npm error code ENOENT npm error syscall spawn git报错的解决方案，希望能对使用openclaw的同学们有所帮助。 文章目录 1. 问题描述 2. 解决方案

weixin_43178406的博客 12万+

Figma软件的缺点和替代软件推荐

说到Figma软件，相信没有人不知道设计行业的人，尤去年Adobe以200亿美元收购Figma软件的消息，对设计行业影响很大。可想而知，Figma软件在设计行业人士眼中的地位是毋庸置疑的。的确，Figma软件的功能非常强大，Figma软件是基于web操作的，无论是macos、windows可以使用这个软件，即使有电脑、浏览器、网络，甚至软件也不需要下载，节省了大量的内存空间。那么Figma软件到底是用什么呢？

七小嗨少的博客 1125

BMD101传感器协议解析与STM32实现（LCD显示波形）

1 前言 BMD101传感器是神念科技开发的心电传感器。目前有一些商家开发了BMD101传感器模块，基本上都是利用蓝牙直接传输数据到PC或手机端。而本文介绍通过串口将数据传送给单片机，并在单片机上完成数据解析和心电波形LCD显示的功能。 2 通信协议解读 BMD101 通过 UART 接口通信。这是一个标准的 UART 接口，定义为 1 个起始位，8 个数据位，1 停止位格式，波特率 57600。 串口输出的数据包格式如下： 包括Header（帧头）、data payload（数据有效载荷）、CRC校验

weixin_44509533的博客 9291

最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版

Part-E1-SDIO-Specification-Ver4.00-Final-120220.pdf：最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版，包括SDIO 接口的外设，SDIO 接口官方协议等。

3分钟搞定Figma中文汉化：设计师必备的Figma界面汉化插件完整指南

凌晨两点，你盯着 Figma 里满屏的英文菜单，想找"布尔运算"却只看到 "Boolean Operations"；新同事第一天入职，被 "Auto Layout"、"Component" 这样的术语吓得不敢上手；跟客户演示时，你得一边点功能一边用中文解释"这个叫原型、那个叫自动布局"……这些场景，是不是似曾相识？ **FigmaCN** 就是为解决这个问题而生的 Figma 中文汉化插件：38

gitblog_01086的博客 522

Devexpress16.2.6破解工具

Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具

颠覆设计开发协作：3大创新方法打通Figma与代码鸿沟

作为前端开发者，我曾无数次面对这样的困境：设计师交付的Figma文件精美绝伦，但要将其转化为代码却要耗费大量时间手动测量尺寸、提取颜色值和复制文本内容。更令人沮丧的是，当设计需要调整时，这一切又得重来。直到我发现了Figma-to-JSON这个开源工具集，它彻底改变了我的工作方式，让设计开发协同效率提升了数倍。本文将从开发者视角，带你深入了解这个工具如何通过双向数据转换打破设计与开发之间的壁垒，以

gitblog_01024的博客 190

Data-Structures-and-Algorithm-Analysis-in-Java.pdf

作者: Weiss, Mark A. 出版社: Addison Wesley Data Structures and Algorithm Analysis in Java is an “advanced algorithms” book that fits between traditional CS2 and Algorithms Analysis courses. In the old ACM Curriculum Guidelines, this course was known as CS7. This text is for readers who want to learn good programming and algorithm analysis skills simultaneously so that they can develop such programs with the maximum amo...

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

10 分钟上手 Simple Icons Figma 插件：在 Figma 里搜到并插入 3400+ 品牌图标

周五下午，甲方说官网要加一块合作伙伴墙和技术栈展示：9 个云服务商的 logo 排一排，支付页还要放支付图标。按老办法，得逐个搜品牌、存 SVG、导进 Figma 再对齐尺寸。这时候该打开的是 Simple Icons Figma 插件（LitoMore 开发）：它让你在 Figma 里直接搜索并插入 3400+ 品牌矢量图标，整面伙伴墙不用离开画布就能拼完。 ## 工具速览 它是 Simpl

gitblog_00970的博客 450

Figma Make 提示词设计：从布局、组件、交互到风格

本文针对FigmaMake提示词使用中的常见问题（如设计不一致、组件混乱等），提出了构建"可复用Prompt框架"的解决方案。作者建议将提示词结构化分为System/Goals/Pages/Components/Interactions五大模块，并详细介绍了PC端布局、常用组件（对话列表、Tab等）和交互设计的规范化描述方法。此外，文章还提供了视觉风格模板，涵盖色彩、字体、间距等设计系统要素，帮助实现原型设计的一致性。通过这种规范化、结构化的提示词撰写方式，可以有效提升设计输出的稳定性和

MoSTChillax的博客 2641

小白学习figma

当设计师熟练掌握 Auto Layout、组件系统、Dev Mode / Inspect 交付等机制后，会发现自己与开发工程师的沟通效率产生质变：不再是"我觉得应该这样"，而是"这里的 padding 是 16px，用的是 color/action/primary，组件叫 Button/Primary/Medium"——这才是现代 UI 设计师应有的专业表达。接着搭设计系统，包括颜色、字体、间距和组件；然后进入高保真视觉设计，用组件系统填充真实内容；7.组件（动态的，改一个其他的也一块改）

sinat_38992528的博客 103

figma-export图标导出实战：一键生成iOS和Android适配图标

figma-export是一款功能强大的命令行工具，能够帮助开发者从Figma设计文件中一键导出颜色、字体、图标和图片资源，并自动适配iOS和Android平台的项目结构。本文将重点介绍如何使用figma-export实现图标资源的自动化导出与多平台适配，彻底告别手动切图的繁琐流程。 ## 🚀 为什么选择figma-export进行图标管理？ 在移动应用开发中，图标资源的管理一直是令人头疼的

gitblog_00292的博客 911
上一篇： 23-Figma-标签栏组件制作
下一篇： 25-Figma-APP首页排版（下）
点赞 0
评论 0
书签 书签 1
billycoder
billycoder
博客等级 码龄17年 171粉丝 188原创
+ 关注 专栏目录 订阅专栏
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值