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

已于 2022-01-23 12:47:55 修改
阅读量279 收藏 1
点赞数
分类专栏： ui设计 文章标签： css 前端 figma ui设计
于 2022-01-23 12:35:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/billycoder/article/details/122649844
版权

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

1.面板导航

在这里插入图片描述

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

2.图文部分

在这里插入图片描述

在这里插入图片描述

单个食品四个自动布局
用到了自动布局的等距
图片用Unsplash
多个食品用自动布局完成
billycoder
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Figma#5：文字
weixin_62428841的博客
01-20 2215
除此之外，在type details下的其他内容里，也可以预览到大量字体嵌套的强制更换样式。右键文字框，按顺序点击进Community，在框内输入Chinese Font Picker，就可以下载到相应的插件。的，结果不知道为什么这个名字在CSDN居然是违规的｡ﾟ(ﾟ´Д｀)ﾟ｡……自定义字体的很多操作和自定义可复用颜色有相同之处，具体可以参考可复用颜色的部分。同样右键字体框，点进plugins，就可以看到自己已安装的插件，然后点击。当行高为0、段落间距为0、字符间距为0时，就是这段文字最本身的样子。
【PM学习笔记】酸梅干超人 - 零基础学Figma学习笔记
m0_59085992的博客
09-04 826
酸梅干超人 - 零基础学Figma学习笔记
8-figma-文字工具
billycoder的专栏
01-21 5748
8-figma-文字工具 常见操作 单行文字,选中文字工具,点击输入 多行文字,框选一个区域,点击输入 单行文字换多行,点击回车继续输入即可 修改字体,属性面板切换或者通过Chinese Font Picker插件 修改字号,属性面板,或者ctrl+shift+<> 修改字距,属性面板,或者alt+<> 修改行高,属性面板,或者shift+alt+<> 修改字重,属性面板,或者ctrl+al t+<> 其他样式,属性面板点点就好了 复制文字属性,ctrl+a
figma文字的调用与调节
qq_52175048的博客
01-13 4273
figma文字的调用与调节
Figma使用问题（更新自己遇到的问题）
技术小白=-=的博客
03-27 1833
记录型笔记（主要记录Figma使用问题和插件使用过程）
Mac系统怎样管理第三方字体
lls67889的博客
10-20 628
看到好看的字体总是会忍不住保存起来，总觉得哪天会用得着！不知不觉就多了！那么在Mac电脑中的第三方字体如何管理呢？Mac电脑中有一个专门管理Mac字体的应用程序，你不知道在哪？没关系，你可以使用快捷键组合【Alt+SpaceBar】，在搜索框内输入【字体册】即可！今天给大家分享的是如何删除Mac电脑中的第三方字体，有兴趣的朋友，请往下看！ 特别注意 系统自带字体不能删除 如何删除/停用Mac电脑中的字体？ 第一步：搜索到你想要删除的字体 第二步：右键这个字体，选择【移除XXX系列】或【停用XXX系列】，字
24-Figma-APP首页排版（上）
billycoder的专栏
01-23 658
24-Figma-APP首页排版（上） 效果 1.头部 背景采用线性渐变填充 文字位置控制用自动布局,shift+a创建自动布局 文字和头像位置用自动布局 Unsplash添加头像 新建颜色样式 2.搜索框 图标和文字位置,通过自动布局 搜索框,通过自动布局设置填充和圆角 3.顶部菜单 （图片+文字）套了一个自动布局 4个（图片+文字）又套了一个自动布局 选中自动布局里面的元素，可以ctrl+d快速复制元素 4.点部切换 变体组件 ...
2024 年最佳 Figma 字体
共同学习、强我国家
07-05 877
字体不仅仅是文本字符，它们还塑造了用户体验。从引导用户浏览界面到传达品牌个性，字体对于设计​​至关重要。然而，找到适合您的网站或应用风格的完美字体可能具有挑战性。但不要害怕，我们会帮助您！请继续关注，我们将在 2024 年及以后的最佳 Figma 字体精选列表中探索字体的重要性。
【Figma】安装指南及基础操作
weixin_56463218的博客
04-07 2340
先前做UI设计一直都是用PS等绘图软件设计，但发现在纠结像素和排版问题上会花很多时间，再加上AI没来得及上手，就需要迅速出成图，此时通过论坛发现了figma，基本上可以满足足够的需求，并且可以在windows系统上使用。
独特精致小众风格食品供应配送app界面ui素材figma&sketch&adobe_xd.zip
12-28
这篇文档将深入探讨一款独特精致小众风格的食品供应配送APP界面UI素材，这些素材涵盖了figma、Sketch和Adobe XD三种主流的设计工具格式。设计师们可以利用这些素材为外卖应用、食品配送服务以及餐饮在线下单应用创建...
电商app ui .psd素材下载
04-20
5. **色彩和排版**：电商App界面设计通常采用鲜明的颜色以吸引用户注意力，同时保持视觉层次感。排版需清晰易读，确保信息传递效率。 6. **响应式设计**：电商App界面需适应各种屏幕尺寸，如手机、平板等，PSD素材...
To Do List app ui .sketch素材下载
04-20
- **Figma 或 InVision Sync**：与其他协作平台集成，实现跨团队设计工作流。 6. **设计原则** - **易用性**：界面应直观，减少用户的学习成本。 - **响应式设计**：考虑不同屏幕尺寸和设备类型。 - **一致性**...
新闻app ui .sketch素材下载
04-20
Newsapp.sketch文件中的色彩方案可能包括主色调、辅色调以及不同状态下的颜色变化。设计师应考虑如何通过色彩传达品牌的气质，同时保持界面的视觉平衡，避免过于刺眼或单调的配色。 除此之外，字体的选择和排版也是...
简洁银行app ui .fig素材下载
04-20
通过.Fig文件，我们可以看到设计师如何运用Figma工具来实现这一目标，提供一个既美观又实用的银行App界面。对于开发者和设计师而言，理解并掌握这些设计原则和技巧，对于提升App质量及用户满意度具有深远意义。
使用 Tailwind CSS 实现水平和垂直居中对齐的方法
Chloeeeeeeee的博客
08-20 165
使用 Tailwind CSS 实现水平和垂直居中对齐的方法有：1. 使用 flex 布局；2. 使用 grid 布局；3. 使用绝对定位
vue 动态设置每个tab的颜色scss
qq_32555123的博客
08-20 211
vue设置动态tab样式和颜色
CSS+JS实现一个鼠标移动的高亮边框效果
流绪@微梦
08-19 590
我们再在 .card::before 加上一个 transform属性，同时在 .card 上加上 overflow: hidden属性，观察浏览器，神奇的效果出现了！想要实现高亮的效果，我们还需要在 .card 和 .inner 之间再插入一层，这一层是我们实现高亮的关键！假如图中的小圆圈为鼠标位置，当鼠标移动到此位置时，只需要计算把每张卡片中间层的中心偏移到鼠标的位置即可。在Windows系统里有一个很棒的细节效果，元素的渐变高亮边框是可以感知鼠标的，边框的高亮部分会跟随鼠标的移动而移动。
只用一个 HTML 元素可以写出多少形状？——伪元素篇（下）
最新发布
Conan9912345的博客
08-21 787
您有没有想过一个问题，如果我们只用一个 div 元素，一共可以写出多少种形状呢？
Figma-Low-Code
05-11
Figma-Low-Code是一种基于Figma设计工具的低代码平台，它允许用户通过可视化方式，快速创建Web和移动应用程序的原型和交互界面，无需编写代码。Figma-Low-Code平台提供了丰富的组件库、模板和插件，用户可以通过拖拽...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值