23-Figma-标签栏组件制作

最新推荐文章于 2024-06-06 23:19:59 发布
最新推荐文章于 2024-06-06 23:19:59 发布
阅读量1.9k 收藏
点赞数 1
分类专栏： ui设计 文章标签： ui设计 figma
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/billycoder/article/details/122647650
版权

23-Figma-标签栏组件制作

效果

在这里插入图片描述

步骤

1.摆放位置

在这里插入图片描述

布局网格
2.控制图标和网格水平居中

在这里插入图片描述

通过绘制一个辅助矩形完成
3.几个图标水平对齐

在这里插入图片描述

选中5个图标,然后水平对齐
图标约束设置为居中
4.制作变体组件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qen52N88-1642902534127)(23-Figma-标签栏组件制作.assets/image-20220123091028253.png)]

绘制单个
定义颜色样式
复制方式创建另外3个,修改颜色
创建多个组件
批量修改组件名字,底部栏=首页、底部栏=发现、底部栏=消息、底部栏=我的
合并为变体
复制使用组件的实例，属性菜单栏可以完成切换
billycoder
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
固定导航栏且不让滚动条出现在导航栏上
little_little0_0的博客
11-08 4528
这是做项目时会遇到的经典布局问题，首先交代下背景，然后给出一个具体的解决方案。 背景：一个高度固定的导航栏始终固定在视口的顶部，下面是一个高度固定的盒子，再下面是主要内容，它的高度会变化，但它有一个最小高度，且多数情况下都处于这个最小高度，页面还有一个底部。我们希望：滚动条不要出现在导航栏，且多数情况下页面不会出现滚动条，及所有内容都出现在视口上。下面是个简单的示意图。 我们先给出html的代码...
明暗两个风格app UI 组件元素包 ui kit .xd .sketch .fig素材下载
04-20
明暗两个风格app UI 组件元素包 ui kit .xd .sketch .fig素材下载
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 'figma-styled-components` <Button> I am a button</Button> ... 文献资料 当前文档在 在本地 使用yarn安装依赖项，然后运行yarn storybook以构建此项目的故事书 建造 您可以使用yarn build来构建项目 去做 重构为功能组件 重构选择，更好地处理默认选项
Figma变体组件构建记录
最新发布
Txtechcom的博客
06-06 348
Figma变体组件构建
【Figma学习】组件管理
weixin_47050107的博客
08-12 2357
Figma学习
24-Figma-APP首页排版（上）
billycoder的专栏
01-23 658
24-Figma-APP首页排版（上） 效果 1.头部 背景采用线性渐变填充 文字位置控制用自动布局,shift+a创建自动布局 文字和头像位置用自动布局 Unsplash添加头像 新建颜色样式 2.搜索框 图标和文字位置,通过自动布局 搜索框,通过自动布局设置填充和圆角 3.顶部菜单 （图片+文字）套了一个自动布局 4个（图片+文字）又套了一个自动布局 选中自动布局里面的元素，可以ctrl+d快速复制元素 4.点部切换 变体组件 ...
22-Figma-常见项目框架搭建
billycoder的专栏
01-23 1135
22-Figma-常见项目框架搭建 完成框架图 画框模板使用iPhone 11 Pro /X 375×812 顶部状态栏和底部菜单栏,使用组件 组件哪里来?社区搜索"ios 15",选择一个下载量还不错的,然后创建副本 搜到社区的组件,可以切换视图,查看效果(cover/page) 顶部状态栏:44 标题栏:44 底部菜单栏:83 标尺快捷键:shift+r 完成布局网格 完成小程序框架 需要去社区搜索一个小程序组件,然后找到上面的的"胶囊部分" ...
Wire-Frame
03-17
在这个场景中，标签提到的是“CSS”，这意味着我们将探讨如何使用CSS来实现线框图的设计。 线框图的设计通常包含以下几个核心知识点： 1. **布局设计**：线框图展示了网页或应用的主要区域，如头部、导航栏、主体...
网站后台编辑器UI界面Figma素材.zip
12-28
本资源“网站后台编辑器UI界面Figma素材.zip”包含了制作专业编辑器界面所需的一系列素材，特别适合于在线笔记应用的设计。 首先，我们来探讨在线笔记应用的设计要点。在线笔记应用的目标是提供一个简洁、易用且...
原型制作工具
04-02
标签"原型制作工具"表明Mockups For Desktop是一款专注于原型设计的专业工具，与其他综合性的设计软件（如Adobe XD、Sketch或Figma）相比，它的定位更加明确，更注重于快速产出和迭代。虽然它可能没有那么强大的动画...
出色的综合新闻博客阅读应用界面ui素材.zip
12-28
在这个项目中，设计者可能需要用到各种UI组件，如按钮、导航栏、文章列表、阅读区域等，以创建一个既美观又易用的新闻阅读平台。 【描述】中提到“figma素材、新闻博客应用、阅读应用”，表明设计工具Figma被用来...
Figma如何实现移动端预览及溢出滚动
masonqiang的博客
11-09 8277
简单几个步骤实现在Figma预览时有手机外框，以及溢出内容滚动。
Figma常用快捷键（Mac版）
热门推荐
SongD1114的博客
04-10 2万+
Figma常用快捷键（Mac版）
页面滚动到指定位置导航栏固定顶部
sunshine5050的博客
12-04 1万+
页面滚动到指定位置导航栏固定顶部
「从零开始学习Figma，成为高效设计师的秘诀揭晓！」
DevCorner的Pro技术博客
06-10 694
打开Figma后，我们会看到一个简洁而直观的界面。画布区域：位于中央区域，用于显示我们正在制作的设计作品；左侧面板：包含了各种图层、页面、组件等元素；右侧面板：包含了各种属性、样式、设置等选项；上方菜单栏：包含了各种功能和命令；下方状态栏：显示当前选中元素的信息和操作命令。本篇博客简单介绍了Figma的基础知识和高级应用，以及一些常见的设计原则。通过学习这些内容，我们可以更好地掌握Figma的使用方法，并创造出令人惊叹的设计作品。
背景固定不动 导航菜单固定不动
琳琳的博客
05-30 1030
固定位置 菜单固定在顶部不动，使用 position:fixed; top:0; left:0;。同时要注意： 下面列表下移相应的位置，否则打开页面时，下方列表会被遮住一部分。 为菜单设置背景，否则透明的话，与下面列表滚动上来的内容会重叠显示。 为 body 设置背景，因为微信浏览器默认有个背景色（不是白色），可能会与我们的效果冲突，按需设置背景。 ...
导航栏吸顶固定不动
m0_63683218的博客
12-11 2085
说明 在现今很多公司的官网上，都可以看到导航栏吸顶这一功能，今天向初学者介绍两种方法实现 第一种 运用html中的position属性实现 position属性常用的属性值有相对定位relative，默认值static，绝对定位absolute，固定定位fixed。还有就是一会要用放到的sticky——粘性定位。 粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。 在 viewport 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将
figma客户端_小白的Figma入门手册
weixin_39815925的博客
11-30 5744
全世界都在用Figma不知道你们有没有这种感觉，仿佛有一天，很突然的，全世界都在使用figma,一个软件从无人问津到现在的如日中天，用了不到3年，而现在，它不仅仅是当下的最优生产力工具，在疫情掀起的远程办公的风潮下，它更为我们揭示了未来设计协作的方式。事实正是如此，大批专业设计团队不惜成本尝试由传统设计软件(sketch等)向Figma转型，只因他们于此看到了代表未来的生产力工具及协作方...
15-Figma-布局约束和栅格
billycoder的专栏
01-21 4446
15-Figma-布局约束和栅格 约束操作 拖动Frame,子组件缩放,子组件的默认约束就是缩放 拖动Frame,子组件保持在中间,选中所有子组件,然后在属性面板修改 拖动Frame,子组件保持在左边,选中所有子组件,然后在属性面板修改 拖动Frame,子组件保持在其他位置,选中所有子组件,然后在属性面板修改 约束案列 案列1 效果 左右拉伸Frame，图片不动，标题不动，描述文字拉升 实现 图片 约束 左 标题 约束 左 描述 约束 左右拉伸 案例2 效果 左右拉伸Frame，图片缩放，标题不
Figma-Low-Code
05-11
Figma-Low-Code是一种基于Figma设计工具的低代码平台，它允许用户通过可视化方式，快速创建Web和移动应用程序的原型和交互界面，无需编写代码。Figma-Low-Code平台提供了丰富的组件库、模板和插件，用户可以通过拖拽组件、链接页面、设置动画效果等方式来构建应用程序的原型和交互界面。同时，它还支持团队协作和版本控制，让多个用户同时协作设计和开发应用程序。Figma-Low-Code平台的出现，大大降低了应用程序开发的门槛，提高了开发效率，加速了产品的上线和迭代。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值