23-Figma-标签栏组件制作

最新推荐文章于 2025-10-22 07:30:00 发布

原创最新推荐文章于 2025-10-22 07:30:00 发布 · 2.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ui设计 #figma

ui设计专栏收录该内容

38 篇文章

订阅专栏

本文详细介绍如何在Figma中创建底部导航栏组件，包括布局网格的设置、图标对齐及约束设定、变体组件的制作流程等关键技术点。

23-Figma-标签栏组件制作

效果

在这里插入图片描述

步骤

1.摆放位置

在这里插入图片描述

布局网格

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

在这里插入图片描述

通过绘制一个辅助矩形完成

3.几个图标水平对齐

在这里插入图片描述

选中5个图标,然后水平对齐
图标约束设置为居中

4.制作变体组件

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

绘制单个
定义颜色样式
复制方式创建另外3个,修改颜色
创建多个组件
批量修改组件名字,底部栏=首页、底部栏=发现、底部栏=消息、底部栏=我的
合并为变体
复制使用组件的实例，属性菜单栏可以完成切换

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

billycoder

关注关注

1
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

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：原型设计与交互基础_2024-07-22_00-36-23.Tex

11-18

817

在Figma中，自定义插件和集成是提升设计效率和功能的关键。通过利用Figma的API，设计师和开发者可以创建工具来自动化重复任务、增强团队协作、以及实现与外部服务的无缝集成。

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

Figma入门-组件变体

我码玄黄的博客

11-27

1744

Figma中变体功能可创建管理多状态组件，简化设计流程。本文介绍从零开始创建变体并设置交互，命名需遵循key=value规则，可用于移动端底部导航栏等设计。

Figma变体组件构建记录

Txtechcom的博客

06-06

1244

Figma变体组件构建

Figma 快速入门实践课程（1 小时）

最新发布

软件行业技术文化交流。

10-22

971

Figma是一款基于浏览器的UI/UX设计工具，支持实时协作和免费使用。文章详细介绍了Figma的入门步骤：从认识界面、创建画板、设计简单UI元素（如登录页面），到使用样式组件和制作交互原型。还提供了"天气App"的实战教程，包括设计状态栏、天气信息展示和未来预报等功能。教程包含操作技巧（如快捷键使用、元素对齐）和资源推荐（免费图标库）。最后讲解了如何分享设计和导出资源，适合设计新手快速上手Figma进行界面设计。

figma-组件库建立

基本无害的博客

03-23

6188

组件库

【Figma学习】组件管理

weixin_47050107的博客

08-12

3379

Figma学习

【Figma】component set 组件组以导航栏 icon 选中状态为例

JU_OLG的博客

10-10

2029

本文以底部导航栏图标的选中和非选中状态为例简单介绍一下 component set 的用法和效果。

Figma：设计规范与最佳实践_2024-07-22_00-55-20.Tex

11-17

637

在Figma中创建设计规范，首先需要定义一套统一的颜色和字体系统，以确保设计的一致性和品牌识别度。颜色是设计语言中的关键元素，它不仅影响设计的美观，还承载着品牌的情感和信息。在Figma中，可以通过创建“颜色主题”来管理项目中的颜色。创建颜色主题打开Figma项目，选择“文件”>“项目设置”>“颜色”。点击“+ 新建颜色”，输入颜色名称和十六进制代码。例如，定义品牌主色为“#007AFF”并命名为“品牌蓝”。应用颜色选择设计元素，如文本、形状或组件。

Mix Ui Kit App UI组件库支持Figma与XD格式

按钮（Button）、输入框（Input Field）、卡片（Card）、导航栏（Navigation Bar）、标签栏（Tab Bar）、列表项（List Item）、模态弹窗（Modal）、加载动画（Loading）、空状态页面（Empty State）、表单组件（Form...

从零开始学Figma

Qianlei1109的博客

08-20

2110

Figma 是一款针对UI设计开发的 “在线”、“矢量”、“平面”绘图工具，是目前最主流、强大的 UI 设计软件。设计师可以用 Figma 完成格式各样的UI相关设计需求，包括产品原型、可交互原型、APP 界面、B端界面、车载界面、线上网页等。甚至可以完成一些简单的平面设计需求，如广告设计、包装设计、活动设计、LOGO 设计等。在 Figma 之前，行业主要使用 Sketch 和 AdobeXD 来进行UI界面设计。

掌握 Figma 中的设计元素复用和组件化

## 第一章：介绍 Figma 设计元素复用和组件化的重要性 - 1.1 为什么设计元素复用和组件化对于设计工作如此重要？ - 1.2 Figma 中的设计元素复用和组件化对于团队协作的意义 ## 了解 Figma 中的设计元素复用和组件化...

固定导航栏且不让滚动条出现在导航栏上

little_little0_0的博客

11-08

5349

这是做项目时会遇到的经典布局问题，首先交代下背景，然后给出一个具体的解决方案。背景：一个高度固定的导航栏始终固定在视口的顶部，下面是一个高度固定的盒子，再下面是主要内容，它的高度会变化，但它有一个最小高度，且多数情况下都处于这个最小高度，页面还有一个底部。我们希望：滚动条不要出现在导航栏，且多数情况下页面不会出现滚动条，及所有内容都出现在视口上。下面是个简单的示意图。我们先给出html的代码...

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

billycoder的专栏

01-23

922

24-Figma-APP首页排版（上）效果 1.头部背景采用线性渐变填充文字位置控制用自动布局,shift+a创建自动布局文字和头像位置用自动布局 Unsplash添加头像新建颜色样式 2.搜索框图标和文字位置,通过自动布局搜索框,通过自动布局设置填充和圆角 3.顶部菜单（图片+文字）套了一个自动布局 4个（图片+文字）又套了一个自动布局选中自动布局里面的元素，可以ctrl+d快速复制元素 4.点部切换变体组件 ...

22-Figma-常见项目框架搭建

billycoder的专栏

01-23

1520

22-Figma-常见项目框架搭建完成框架图画框模板使用iPhone 11 Pro /X 375×812 顶部状态栏和底部菜单栏,使用组件组件哪里来?社区搜索"ios 15",选择一个下载量还不错的,然后创建副本搜到社区的组件,可以切换视图,查看效果(cover/page) 顶部状态栏:44 标题栏:44 底部菜单栏:83 标尺快捷键:shift+r 完成布局网格完成小程序框架需要去社区搜索一个小程序组件,然后找到上面的的"胶囊部分" ...

Figma如何实现移动端预览及溢出滚动

masonqiang的博客

11-09

1万+

简单几个步骤实现在Figma预览时有手机外框，以及溢出内容滚动。

页面滚动到指定位置导航栏固定顶部

sunshine5050的博客

12-04

1万+

页面滚动到指定位置导航栏固定顶部

Figma常用快捷键（Mac版）