26-Figma-APP首页完成

最新推荐文章于 2025-11-19 11:54:34 发布
原创 最新推荐文章于 2025-11-19 11:54:34 发布 · 281 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ui设计 #figma

本文详细介绍使用Figma完成APP首页的设计过程，包括食材列表、基本元素绘制、组件创建及课程列表效果实现等内容。

26-Figma-APP首页完成

1.食材列表

在这里插入图片描述

2.基本元素绘制

在这里插入图片描述

3.变成组件

在这里插入图片描述

4.课程列表效果

在这里插入图片描述

5.课程列表组件

在这里插入图片描述

组件创建
shift+a创建自动布局，选中子元素，然后ctrl+d新增元素
Figma：用户体验(UX)设计流程_2024-07-22_01-11-57.Tex
11-18 654
在开始任何设计项目之前，定义项目目标是至关重要的第一步。这一步骤确保了整个团队对项目的方向和期望有共同的理解。项目目标应该具体、可衡量、可实现、相关性强、有时间限制（SMART原则）。
“ 设计 - 代码” 闪电协同：Google Stitch + Figma + MCP 魔方
m0_37454255的博客
06-30 1055
Google Stitch（AI设计工具）、Figma（协作设计平台）与MCP（人机协作协议）形成闭环，实现“描述即设计、UI即代码”的协同革命
【Figma学习】App制作一
weixin_47050107的博客
08-16 1655
Figma学习
figma应用——面向用户的咖啡点单APP的设计过程记录
Couldhelp的博客
01-26 2115
目录概述设计阶段1、Brainstorm2、用户分析（1）用户画像（2）竞品分析（3）用户旅程地图（4）用户需求分析3、点单APP的demo设计（1）整体布局逻辑概览（2）主要界面效果预览总结 概述 此文旨在记录本学期课程中，运用一整套设计思维方法进行一个咖啡点单APP设计的过程。受限于时间，并且为了更好强调突出设计过程中小组成员协助合作，此次全程采用Trello的协同功能和Figma的设计功能并举的方式进行APP的设计。本人在其中主要担任视觉设计师的工作（主要把控设计的整体视觉感受和总体样式，承担APP的
2分钟上手用Figma绘制网站页面设计图
weixin_47301844的博客
10-21 2124
8.如果想对页面中各元素的位置布局更有把握，可以打开右边栏中Design里倒数第二个Layout Grid 选择网格或其他参考线。5.如果要使用模板：在左侧的Assets中搜索下载你需要的模板 例如 shop。6.如果想绘制矩形等图形，在最下方工具栏中选择相应图形绘制和移动缩放。4.按A键 在页面右侧选择你要设计的页面的大小规格。7.如果想输入文字，在最下方工具栏中选择“T”1.登陆官网 下载应用或网页端使用。2.注册\登录及走完新手指引。
22-Figma-常见项目框架搭建
billycoder的专栏
01-23 1519
22-Figma-常见项目框架搭建 完成框架图 画框模板使用iPhone 11 Pro /X 375×812 顶部状态栏和底部菜单栏,使用组件 组件哪里来?社区搜索"ios 15",选择一个下载量还不错的,然后创建副本 搜到社区的组件,可以切换视图,查看效果(cover/page) 顶部状态栏:44 标题栏:44 底部菜单栏:83 标尺快捷键:shift+r 完成布局网格 完成小程序框架 需要去社区搜索一个小程序组件,然后找到上面的的"胶囊部分" ...
25-Figma-APP首页排版（下）
billycoder的专栏
01-23 1730
24-Figma-APP首页排版（下） 1.面板导航 （文字和图标）是自动布局 多个（文字和图标）是自动布局 自动布局内部的元素，通过ctrl+d可以添加 选中自动布局，可以调整自动布局内部元素的排列方向（横向和纵向） 2.图文部分 单个食品四个自动布局 用到了自动布局的等距 图片用Unsplash 多个食品用自动布局完成 ...
软件产品设计-figma
iSssssw的博客
06-21 708
参加线下或在线学习活动：可以参加 Figma 的线下或在线学习活动，这些学习活动通常由业内专家或资深设计师讲解，会介绍 Figma 的最新技术和工作流程，可以了解最新的行业趋势和设计相关的经验。免费在线课程：Figma 官方提供了免费的在线课程，这些课程涵盖了 Figma 的主要内容和特点，适合初学者和有一定基础的用户，学完后会对 Figma 的使用有更深入的了解。总之，Figma 的实时协作、跨平台支持、自动同步、强大的矢量编辑器以及兼容性良好，让其成为了一款非常优秀的云端界面设计工具。
28-Figma-消息页面制作
billycoder的专栏
01-23 547
28-Figma-消息页面制作 效果 1.顶部菜单 4个菜单是变体组件 小角标是自己做出来的 2.列表item组件 3.用列表item的实例，完成列表
23-Figma-标签栏组件制作
billycoder的专栏
01-23 2589
23-Figma-标签栏组件制作 效果 步骤 1.摆放位置 布局网格 2.控制图标和网格水平居中 通过绘制一个辅助矩形完成 3.几个图标水平对齐 选中5个图标,然后水平对齐 图标约束设置为居中 4.制作变体组件 绘制单个 定义颜色样式 复制方式创建另外3个,修改颜色 创建多个组件 批量修改组件名字,底部栏=首页、底部栏=发现、底部栏=消息、底部栏=我的 合并为变体 复制使用组件的实例，属性菜单栏可以完成切换 ...
家居电商app UI套件 Funni-E-commerce App UI Kit
04-20
Funni-E-commerce App UI Kit中的`.fig`文件是Figma设计软件的项目文件格式，设计师可以利用此文件直接编辑和修改设计，实现个性化定制，以满足特定家居电商app的需求。Figma是一款云端协作设计工具，它支持实时协作...
33-Figma-数据采集器使用方式-后裔采集器
billycoder的专栏
01-24 450
33-Figma-数据采集器使用方式-后裔采集器 填充app行业相关的数据，通过后裔采集器完成 效果 1.填入地址，点击智能采集 2.不需要的字段可以删除 3.需要修改标题的话右键操作 4.一切合适，就开始采集 5.数据差不多就停止然后导出 6.导入到谷歌表格，然后分享 7.然后在Google Sheets Sync使用 上一节介绍了Google Sheets Sync使用了 ...
Figma 汉化办法
轻风细雨_林木木
11-19 409
Figma汉化最简单方法：推荐使用figmaEX插件，支持浏览器扩展一键安装，重新打开Figma网页版即可完成汉化。也可选择FigmaCN工具，同样稳定好用。如需汉化桌面App版需授权修改程序文件，需将软件放在macOS应用程序目录。两种方案均能实现完整界面汉化，浏览器插件方式最简单推荐。figmaEX和FigmaCN都是目前最成熟的汉化方案，用户可根据需求选择安装方式。
Lua非空判断方法[源码]
11-24
本文详细介绍了在Lua中进行非空判断的几种方法，特别是针对table类型的变量。首先，文章指出了直接对nil值进行索引会导致异常的问题，并给出了一个简单的例子来说明如何避免这种情况。接着，文章讨论了如何判断一个table是否为空，指出不能简单地使用`#table == 0`的方式，而是应该使用`next(t) == nil`的方法。此外，文章还提到了`next`指令在LuaJIT中的优化问题，建议在非必要情况下少用。最后，文章简要介绍了如何判断一个字符串是否全部由空格组成，使用了正则匹配的方法。这些内容对于Lua开发者来说非常实用，能够帮助他们避免常见的错误。
JS表格转Excel实现[可运行源码]
11-24
该文章详细介绍了如何使用JavaScript将HTML表格数据导出为Excel文件。内容涵盖了针对不同浏览器的兼容性处理，包括IE和非IE浏览器的不同实现方式。对于IE浏览器，使用ActiveXObject进行导出；对于非IE浏览器，则通过base64编码和数据URI方案实现。文章还提供了完整的代码示例，包括表格数据的处理、格式化和导出功能，支持文本和图片类型的数据导出。
图片转bin文件存储[项目代码]
11-24
本文介绍了在OpenCV项目中如何将大量图片数据转换为二进制（bin）文件进行高效存储和读取的方法。作者在项目中遇到需要处理大量图片数据的问题，尝试了多种格式（如.mat、.txt、.yml）后发现效率较低。通过使用二进制文件存储，显著提升了读写速度。文章详细展示了使用OpenCV将图片写入二进制文件的代码示例，以及从二进制文件读取图片数据的实现方法。虽然该方法需要提前知道图片的尺寸和数量，但读写速度极快，适合处理大量图片数据。作者还提到可以通过换行符或终止符优化读取过程，但未深入探讨。
ROS视觉处理与色彩识别[项目源码]
最新发布
11-24
本文详细介绍了在ROS环境下进行视觉处理的基础步骤，特别是针对色彩识别的实现方法。内容涵盖了从摄像头驱动的安装与配置（如usb_cam驱动和image_view工具的使用），到创建功能包和编写图像处理节点（包括RGB图像回调函数、HSV色彩空间转换、二值化处理及形态学操作）。此外，还演示了如何在仿真环境中获取图像，并通过OpenCV实现红色和绿色物体的识别与追踪。最后，文章提供了完整的代码示例和编译运行步骤，帮助读者快速上手ROS视觉处理项目。
Anaconda安装与使用指南[项目源码]
11-24
本文详细介绍了在Anaconda环境下安装和使用jupyter及numpy的步骤。首先，指导用户如何安装Anaconda并创建虚拟环境，然后详细说明了如何在虚拟环境中安装jupyter和numpy。接着，文章提供了多个numpy的练习示例，包括创建零向量、矩阵操作、归一化等。此外，还介绍了如何在Jupyter中完成numpy、pandas和matplotlib的例题，涵盖了从基础操作到实际应用的多个方面。最后，文章总结了实验过程中的经验，特别是在使用国内镜像源后下载速度的提升。
【动静障碍物】基于JPS算法（改进A）全局路径规划与DWA动态窗口局部避障的机器人自主导航混合控制算法（Matlab代码实现）
11-24
【动静障碍物】基于JPS算法（改进A）全局路径规划与DWA动态窗口局部避障的机器人自主导航混合控制算法（Matlab代码实现）内容概要：本文介绍了一种结合改进A*算法的JPS（跳跃点搜索）全局路径规划与DWA（动态窗口法）局部避障的混合控制算法，用于机器人在动静态障碍物环境下的自主导航。该算法通过JPS优化全局路径搜索效率，提升路径规划速度，并结合DWA实现实时动态避障，增强了机器人在复杂动态环境中的适应性和安全性。整个系统在Matlab平台上进行了代码实现与仿真验证，展示了良好的路径规划效果与避障性能。; 适合人群：具备一定机器人学、自动控制或路径规划基础知识的研究生、科研人员及从事智能机器人开发的工程技术人员。; 使用场景及目标：①应用于移动机器人在静态与动态障碍共存环境中的自主导航任务；②为研究高效全局规划与实时局部避障的融合策略提供技术参考与实现案例；③支持Matlab仿真环境下的算法验证与优化。; 阅读建议：建议读者结合Matlab代码深入理解JPS与DWA的集成逻辑，重点关注算法在路径最优性、计算效率与避障实时性之间的平衡设计，可进一步扩展至多机器人系统或复杂地形场景的应用研究。
React App入门教程：Figma-Tasks项目指南
Figma-Tasks项目通过Create React App提供了一个简洁的环境，方便开发者进行React应用的创建和开发。它包括了运行、测试和构建应用的基本脚本命令，并且介绍了如何使用这些命令来管理开发流程。通过学习和实践这些...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值