25-Figma-APP首页排版（下）

原创已于 2022-01-23 12:47:55 修改 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #figma #ui设计

于 2022-01-23 12:35:15 首次发布

ui设计专栏收录该内容

38 篇文章

订阅专栏

本文介绍了使用Figma进行APP首页设计的方法，重点讲解了如何利用自动布局功能快速排版，包括面板导航的设计及图文部分的等距排列，并分享了获取高质量图片的途径。

25-Figma-APP首页排版（下）

1.面板导航

在这里插入图片描述

（文字和图标）是自动布局
多个（文字和图标）是自动布局
自动布局内部的元素，通过ctrl+d可以添加
选中自动布局，可以调整自动布局内部元素的排列方向（横向和纵向）

2.图文部分

在这里插入图片描述

单个食品四个自动布局
用到了自动布局的等距
图片用Unsplash
多个食品用自动布局完成

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

billycoder

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Figma入门-文字、样式、链接、动作

我码玄黄的博客

11-23

3083

Figma原型图制作入门，记录文字工具使用（快捷键T，修改字体苹方、semibold、16号），链接设置及actions面板常用操作，包括复制组件链接，提高制作效率。

figma文字的调用与调节

qq_52175048的博客

01-13

5360

figma文字的调用与调节

参与评论您还未登录，请先登录后发表或查看评论

8-figma-文字工具

billycoder的专栏

01-21

8471

8-figma-文字工具常见操作单行文字,选中文字工具,点击输入多行文字,框选一个区域,点击输入单行文字换多行,点击回车继续输入即可修改字体,属性面板切换或者通过Chinese Font Picker插件修改字号,属性面板,或者ctrl+shift+<> 修改字距,属性面板,或者alt+<> 修改行高,属性面板,或者shift+alt+<> 修改字重,属性面板,或者ctrl+al t+<> 其他样式,属性面板点点就好了复制文字属性,ctrl+a

Mac系统怎样管理第三方字体

lls67889的博客

10-20

883

看到好看的字体总是会忍不住保存起来，总觉得哪天会用得着！不知不觉就多了！那么在Mac电脑中的第三方字体如何管理呢？Mac电脑中有一个专门管理Mac字体的应用程序，你不知道在哪？没关系，你可以使用快捷键组合【Alt+SpaceBar】，在搜索框内输入【字体册】即可！今天给大家分享的是如何删除Mac电脑中的第三方字体，有兴趣的朋友，请往下看！特别注意系统自带字体不能删除如何删除/停用Mac电脑中的字体？第一步：搜索到你想要删除的字体第二步：右键这个字体，选择【移除XXX系列】或【停用XXX系列】，字

Figma#5：文字

weixin_62428841的博客

01-20

3053

除此之外，在type details下的其他内容里，也可以预览到大量字体嵌套的强制更换样式。右键文字框，按顺序点击进Community，在框内输入Chinese Font Picker，就可以下载到相应的插件。的，结果不知道为什么这个名字在优快云居然是违规的｡ﾟ(ﾟ´Д｀)ﾟ｡……自定义字体的很多操作和自定义可复用颜色有相同之处，具体可以参考可复用颜色的部分。同样右键字体框，点进plugins，就可以看到自己已安装的插件，然后点击。当行高为0、段落间距为0、字符间距为0时，就是这段文字最本身的样子。

figma客户端_小白的Figma入门手册

weixin_39815925的博客

11-30

6413

全世界都在用Figma不知道你们有没有这种感觉，仿佛有一天，很突然的，全世界都在使用figma,一个软件从无人问津到现在的如日中天，用了不到3年，而现在，它不仅仅是当下的最优生产力工具，在疫情掀起的远程办公的风潮下，它更为我们揭示了未来设计协作的方式。事实正是如此，大批专业设计团队不惜成本尝试由传统设计软件(sketch等)向Figma转型，只因他们于此看到了代表未来的生产力工具及协作方...

网站页头插画素材合集 - Figma、Illustrator、Sketch创意设计

2. Illustrator场景构建：Adobe Illustrator是专业的矢量图形编辑软件，广泛用于标志设计、插画、排版等。描述中的“场景构建”可能指的是使用Illustrator制作的插画元素和设计，这些设计用于构成网页中的视觉场景。...

70款App界面设计主题包 - Sketch与Figma素材

3. 界面设计的重要性：无论是app界面设计、Figma、Sketch还是ui界面设计，这些标签都指向了界面设计这一核心概念。界面设计是用户体验（UX）的重要组成部分，它关注于如何使应用的外观和感受符合用户的期待，并提供...

独特精致小众风格食品供应配送app界面ui素材figma&sketch&adobe_xd.zip

12-28

这篇文档将深入探讨一款独特精致小众风格的食品供应配送APP界面UI素材，这些素材涵盖了figma、Sketch和Adobe XD三种主流的设计工具格式。设计师们可以利用这些素材为外卖应用、食品配送服务以及餐饮在线下单应用创建...

美食外卖App Limester UI设计素材Figma文件下载

此外，考虑到外卖App高频使用的特性，设计师在Limester中很可能采用了信息层级分明的排版策略：重要信息（如优惠活动、热销菜品）通过大字体、鲜艳颜色或轮播图形式突出展示；次要信息则以灰度或小字号呈现，避免...

PayPal金融支付App UI重新设计Figma素材

金融支付App PayPal UI Redesign 4 .fig素材下载所涉及的知识点涵盖了现代数字支付系统中的用户界面（UI）设计、用户体验（UX）优化、Figma工具的应用以及移动金融应用的设计规范等多个方面。首先，PayPal作为全球...

【Figma学习】操作工具及其使用二

weixin_47050107的博客

08-11

8455

Figma学习

Figma使用问题（更新自己遇到的问题）

技术小白=-=的博客

03-27

8545

记录型笔记（主要记录Figma使用问题和插件使用过程）

Figma实用小技巧

最新发布

weixin_56381842的博客

11-24

140

js实现卷轴，中间可滑动方块，左右两侧对比

前端展示接受springboot Flux数据demo

Super的专栏

11-24

362

html css js网页制作成品——中国瓷器html+css5页附源码

卡拉米

11-20

103

本文介绍了一个关于中国篆刻艺术的静态网站设计与实现。网站采用HTML5+CSS3技术开发，包含首页、关于篆刻、作品展示等页面模块，使用DIV+CSS进行布局设计，兼容主流浏览器。文章展示了网站HTML代码结构，包括导航栏、banner图、作品展示区等核心元素，并提供了学习建议：鼓励编程初学者通过实践练习巩固语法基础。最后分享了资源获取方式，邀请读者关注交流前端开发技术。整个网站设计可作为各类主题展示网页的模板参考。

html css js网页制作成品——html+css+js5 页 jk制服附源码

卡拉米

11-21

792

本文介绍了一个关于中国篆刻艺术的静态网站设计与实现方案。网站采用HTML5+CSS3技术构建，包含首页、作品展示、历史渊源等二级页面，采用浮动布局兼容主流浏览器。内容涉及HTML结构代码示例，包括导航栏、banner区和作品展示画廊的实现。文章还提供了学习建议，推荐编程初学者通过刷题巩固基础。网站素材包含精选图片资源，文件结构清晰，可使用多种编辑器进行修改。该模板可灵活应用于美食、旅游等多种主题的展示型网站开发，适合作为学习参考或毕业设计项目。

TailwindCSS 学习笔记

fmk1023的博客

11-21

264

的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何模板中的 CSS 类（class）名，然后生成相应的样式代码并写入到一个静态 CSS 文件中。运行命令行（CLI）工具扫描模板文件中的所有出现的 CSS 类（class）并编译 CSS 代码。标签内引入编译好的 CSS 文件，然后就可以开始使用。他快速、灵活、可靠，没有运行时负担。配置文件中添加所有模板文件的路径。的工具类来为你的内容设置样式了。一般添加到globals.css。