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

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

#css #css3 #前端 #figma #ui设计

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

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

效果

在这里插入图片描述

1.头部

在这里插入图片描述

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

2.搜索框

在这里插入图片描述

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

3.顶部菜单

在这里插入图片描述

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

4.点部切换

在这里插入图片描述

变体组件
独特精致小众风格食品供应配送app界面ui素材figma&sketch&adobe_xd.zip
12-28
这篇文档将深入探讨一款独特精致小众风格的食品供应配送APP界面UI素材，这些素材涵盖了figma、Sketch和Adobe XD三种主流的设计工具格式。设计师们可以利用这些素材为外卖应用、食品配送服务以及餐饮在线下单应用创建...
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来构建项目 去做 重构为功能组件 重构选择，更好地处理默认选项
【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的
Figma 快速入门实践课程（1 小时）
最新发布
软件行业技术文化交流。
10-22 971
Figma是一款基于浏览器的UI/UX设计工具，支持实时协作和免费使用。文章详细介绍了Figma的入门步骤：从认识界面、创建画板、设计简单UI元素（如登录页面），到使用样式组件和制作交互原型。还提供了"天气App"的实战教程，包括设计状态栏、天气信息展示和未来预报等功能。教程包含操作技巧（如快捷键使用、元素对齐）和资源推荐（免费图标库）。最后讲解了如何分享设计和导出资源，适合设计新手快速上手Figma进行界面设计。
点击出现遮罩层时滚动条会自己回到顶部_用 Figma 轻松制作属于自己的表情包...
weixin_39908616的博客
11-12 1843
表情包真是个好东西，不仅能表达出文字所不能表达的情感，关键时刻甚至能缓解尴尬。我是一个特别喜欢发表情包的人，但又不喜欢总是发那几个表情，所以偶尔也会自己做几个表情包，来回馈广大网友。以前我基本上都是使用 Photoshop 的帧动画来做表情包，也就是一帧帧地修改图片，最后导出 Gif。比如下面这个表情包，就是我在苹果发布新的 AirPods 时用 Photoshop 做的。熊猫头但是最近，在使用 ...
figma下载_Figma的自动版式实用
weixin_26732881的博客
08-05 332
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...
10-Figma-属性栏-对齐、分布、坐标、图层操作
billycoder的专栏
01-21 4363
10-Figma-属性栏-对齐、分布、坐标、图层操作 常见操作 垂直对齐,属性面板操作,或者alt+v 水平等距,属性面板操作,或者alt+shift+h,或者点击整理 水平对齐,属性面板操作,或者alt+h 垂直等距,属性面板操作,或者alt+shift+v,或者点击整理 其他对齐,属性面板操作 平滑圆角,属性面板操作,针对ios系统 翻转,右键操作 混合模式修改,属性面板操作 图片顺序调整,ctrl+]上移,ctrl+[上移,ctrl+shift+]顶,ctrl+shift+[底 透明度,属性面板操作
网站页头插画素材合集 - Figma、Illustrator、Sketch创意设计
综上所述，这个压缩包是一个综合了多种设计软件适用性（Figma、Illustrator、Sketch）的网页和应用插画素材集。其中包含了不同风格的插画，可以用于商务网站、电商网站的设计，以及移动应用的封面设计。这些素材为...
70款App界面设计主题包 - Sketch与Figma素材
3. 界面设计的重要性：无论是app界面设计、Figma、Sketch还是ui界面设计，这些标签都指向了界面设计这一核心概念。界面设计是用户体验（UX）的重要组成部分，它关注于如何使应用的外观和感受符合用户的期待，并提供...
美食外卖App Limester UI设计素材Figma文件下载
此外，考虑到外卖App高频使用的特性，设计师在Limester中很可能采用了信息层级分明的排版策略：重要信息（如优惠活动、热销菜品）通过大字体、鲜艳颜色或轮播图形式突出展示；次要信息则以灰度或小字号呈现，避免...
PayPal金融支付App UI重新设计Figma素材
金融支付App PayPal UI Redesign 4 .fig素材下载所涉及的知识点涵盖了现代数字支付系统中的用户界面（UI）设计、用户体验（UX）优化、Figma工具的应用以及移动金融应用的设计规范等多个方面。首先，PayPal作为全球...
23-Figma-标签栏组件制作
billycoder的专栏
01-23 2590
23-Figma-标签栏组件制作 效果 步骤 1.摆放位置 布局网格 2.控制图标和网格水平居中 通过绘制一个辅助矩形完成 3.几个图标水平对齐 选中5个图标,然后水平对齐 图标约束设置为居中 4.制作变体组件 绘制单个 定义颜色样式 复制方式创建另外3个,修改颜色 创建多个组件 批量修改组件名字,底部栏=首页、底部栏=发现、底部栏=消息、底部栏=我的 合并为变体 复制使用组件的实例，属性菜单栏可以完成切换 ...
【Figma学习】组件管理
weixin_47050107的博客
08-12 3379
Figma学习
22-Figma-常见项目框架搭建
billycoder的专栏
01-23 1520
22-Figma-常见项目框架搭建 完成框架图 画框模板使用iPhone 11 Pro /X 375×812 顶部状态栏和底部菜单栏,使用组件 组件哪里来?社区搜索"ios 15",选择一个下载量还不错的,然后创建副本 搜到社区的组件,可以切换视图,查看效果(cover/page) 顶部状态栏:44 标题栏:44 底部菜单栏:83 标尺快捷键:shift+r 完成布局网格 完成小程序框架 需要去社区搜索一个小程序组件,然后找到上面的的"胶囊部分" ...
分享一个简单的iphone自定义状态栏例子
KylinBL的专栏
10-19 2914
不多说，上例子： #import //自定义状态栏，状态栏显示灰色背景并【indicator message】。用于耗时操作的状态栏信息提示 //例如：访问网络时，提示正在获取网络数据，或者正在提交数据至服务器等提示 @interface CHStatusBar : UI
Figma如何实现移动端预览及溢出滚动
热门推荐
masonqiang的博客
11-09 1万+
简单几个步骤实现在Figma预览时有手机外框，以及溢出内容滚动。
Figma最全面的新手指南，从基础到高级，一网打尽
2301_79599164的博客
11-22 7538
Figma基础界面与传统设计软件没有太大区别，有Sketch使用经验的用户几乎可以无缝连接到Figma。顶部导航栏顶部是导航栏，所有打开的文档都将显示在这里。左边的Figmaicon是Home键。点击返回团队主页。右边的导航Tab可以通过快捷键Command+123切换。这里的快捷键与Sketch查看所有视图的快捷键相冲突。在Figma中，查看所有视图的快捷键是Shift+1，查看目标视图到全图大小的快捷键是Shift+2。
Android 学习计划—UI设计&Figma
Oliver026的博客
10-20 860
Figma设计类似PS
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值