23-Figma-标签栏组件制作

billycoder billycoder 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 2.8k累计阅读 2.8k平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄17年
关注
原创 最新推荐文章于 2026-10-11 09:02:29 发布 2.8k 阅读 AI 写同款· GEO 优化 ›
「从零开始学习Figma，成为高效设计师的秘诀揭晓！」 打开Figma后，我们会看到一个简洁而直观的界面。画布区域：位于中央区域，用于显示我们正在制作的设计作品；左侧面板：包含了各种图层、页面、组件等元素；右侧面板：包含了各种属性、样式、设置等选项；上方菜单栏：包含了各种功能和命令；下方状态栏：显示当前选中元素的信息和操作命令。本篇博客简单介绍了Figma的基础知识和高级应用，以及一些常见的设计原则。通过学习这些内容，我们可以更好地掌握Figma的使用方法，并创造出令人惊叹的设计作品。 阅读详情

23-Figma-标签栏组件制作

效果

在这里插入图片描述

步骤

1.摆放位置

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

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

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

当前文章被收录于：

ui设计
38 篇文章 27 人学习
订阅专栏 查看详情
标签
#ui设计 #figma
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
WPF、WinUI 3、MAUI 桌面开发选型实战指南（2024实测） .NET桌面开发框架选型本质是技术生命周期与工程交付能力的权衡。WPF依托DirectComposition硬件加速与成熟MVVM生态，提供高稳定性和深度Windows集成；WinUI 3基于WinAppSDK突破沙盒限制，支持原生API调用与Windows 11新特性；MAUI则以跨平台共享业务逻辑为核心价值，但桌面端仍需WinUI 3底层支撑并面临DPI适配、WebView2兼容等现实挑战。三者差异不在语法表象，而在于渲染架构、部署模型与调试工具链——WPF适合企业内部系统快速交付，WinUI 3适配S 阅读详情

相关推荐

15-Figma-布局约束和栅格

15-Figma-布局约束和栅格 约束操作 拖动Frame,子组件缩放,子组件的默认约束就是缩放 拖动Frame,子组件保持在中间,选中所有子组件,然后在属性面板修改 拖动Frame,子组件保持在左边,选中所有子组件,然后在属性面板修改 拖动Frame,子组件保持在其他位置,选中所有子组件,然后在属性面板修改 约束案列 案列1 效果 左右拉伸Frame，图片不动，标题不动，描述文字拉升 实现 图片 约束 左 标题 约束 左 描述 约束 左右拉伸 案例2 效果 左右拉伸Frame，图片缩放，标题不

billycoder的专栏 5484

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

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

little_little0_0的博客 5506

figma-styled-components:Figma UI样式的组件

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来构建项目 去做 重构为功能组件 重构选择，更好地处理默认选项

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

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

billycoder的专栏 1018

LVGL的基础知识总结

另外，还有自定义字库的使用，具体可参考开发手册。

qq_28576837的博客 7394

从零到一：在Ubuntu 20.04上搭建ROS1与PX4无人机开发环境

本文详细指导如何在Ubuntu 20.04系统上搭建完整的ROS1与PX4无人机开发环境。内容涵盖ROS Noetic安装、PX4固件源码编译、MAVROS通信桥接以及QGroundControl地面站的配置，并通过Gazebo仿真完成全链路联调测试，为无人机算法开发与验证提供稳定可靠的基础平台。

weixin_29292431的博客 168

【Figma学习】组件管理

Figma学习

weixin_47050107的博客 3643

二、基于C语言的JPEG解码代码详解

// JPEG解码 // 输入JPEG后输出Bitmap #include <stdio.h> #include <stdlib.h> #pragma warning(disable : 4996) unsigned int BuffIndex; // JPEG数据的位置 unsigned int BuffSize; // JPEG数据的大小 unsigned int BuffX; // 图像的横向尺寸 unsigned int BuffY; //

m0_37633745的博客 4458

UI设计师如何基于Element规范设计后台界面

初次设计后台界面时，掌握Element设计规范至关重要。从确定1440x720的设计尺寸到选择侧边栏布局，再到构建可复用的列表模板，结合组件化思维提升设计与开发效率，让后台界面更统一、易维护。

weixin_35696112的博客 777

电磁兼容标准体系解析：从基础到认证的完整指南

本文系统解析了电磁兼容（EMC）标准体系，从基础概念到认证流程提供完整指南。文章阐述了EMC对于产品可靠性与市场准入的重要性，详细拆解了基础标准、通用标准、产品类标准及认证流程四层结构，并结合5G设备与工业控制等实战案例，为工程师提供了从设计初期到认证测试的高效应用策略。

weixin_29294975的博客 355

STM32F103+W5500网络通信

STM32F103+W5500网络通信一、W5500模块（一)W5500以太网模块介绍（二）模块排针功能表二、 modbus协议（一）modbus协议原理（二）Modbus 通讯方式1.Modbus三种通讯方式2.在Modbus网络上传输3.以太网（modbus tcp/ip）三、参考资料 一、W5500模块 （一)W5500以太网模块介绍 D-W5500 EVB以太网模块是一款基于WIZnet W5500芯片的以太网模块，且性价比高的以太网模块。W5500是一款全硬件TCP/IP嵌入式以太网控制器，为

”一只特立独行的猪“的博客 1万+

Axure流程图自定义元件库建设与实战方法论

流程图是产品需求落地的关键载体，其本质是跨角色协作的可视化契约。理解流程图原理需从基础建模概念出发，结合业务语义、系统交互与异常处理等工程实践要素；技术价值在于统一理解、减少歧义、支撑开发与测试对齐；典型应用场景包括金融审批流、医疗SaaS业务闭环、政务服务平台数据同步等复杂多系统协同场景。本文聚焦Axure平台，深入解析如何通过自定义元件库实现流程图的语义锚定、责任划分与参数化表达，尤其强调元件命名规范、泳道责任锁定、连接线语义编码三大核心实践。

weixin_33960567的博客 290

AUTOSAR 3万字面试题全面解析（持续更新）

ECU抽象层（EAL）是AUTOSAR架构中的一部分，它位于微控制器抽象层（MCAL）之下，但通常与MCAL一起被提及。EAL的目标是提供一个统一的接口来访问和管理ECU（Electronic Control Unit，电子控制单元）的硬件资源，包括处理器、存储器和外围设备。通过这种抽象，EAL使得上层软件能够以一种标准化的方式与ECU硬件交互，而不需要关心具体的硬件实现细节。EAL解决了硬件异构性带来的问题，即不同ECU可能采用不同类型的处理器和硬件配置。

大模型大数据攻城狮的专栏 5613

在线课程学习应用HarmonyOS ArkTS API 24关注点分离（Separation of Concerns）的设计使得数据逻辑和视图逻辑可以独立演进，降低了耦合度

在 HarmonyOS NEXT 正式商用的背景下，ArkTS 作为鸿蒙生态的官方应用开发语言，正在从传统的命令式 UI 开发范式向声明式 UI 范式全面迁移。ArkUI 框架以组件化、声明式、状态驱动为核心特征，要求开发者以"描述 UI 应该是什么样"而非"一步步操作 UI 怎么变"的思维方式构建界面。本文以一个名为"智能账单"的三标签页记账应用为切入点，逐层拆解其数据模型设计、@Builder 组件复用策略、@State 状态管理机制、条件渲染导航模式，以及静态写死渲染与动态循环渲染之间的性能权衡，为

2401_86031952的博客 209

作为专家系统与应用的审稿人：提醒你投稿注意事项

本文为《专家系统与应用》(ESWA)期刊投稿指南，重点强调研究方向匹配性、学术质量和写作规范。要求论文以智能系统/算法为核心，突出增量创新并具可验证性，需包含严谨方法论和充分实验验证。写作需结构清晰，符合期刊格式要求，包括明确的研究问题、分类文献综述、详细技术实现和量化结果。投稿前需仔细核对期刊指南，引用相关文献，并妥善处理审稿意见。ESWA注重创新实质性和应用落地价值，建议突出智能系统设计核心，避免成为单纯技术应用描述。

ZhangJiqun&191cm&85kg 1815

Python爬虫实战：高效爬取中国版权登记数据

本文将详细介绍如何使用Python最新技术栈构建一个高效、稳定的中国版权登记数据爬虫系统。我们将使用Playwright+Asyncio实现无头浏览器自动化，结合Redis分布式任务队列和MongoDB数据存储，打造一个能够应对反爬机制的企业级数据采集方案。文章包含完整代码实现、性能优化技巧以及法律合规建议，帮助开发者快速掌握大规模数据采集的核心技术。本文详细介绍了2024年使用Python最新技术栈构建中国版权登记数据爬虫的完整方案。基于Playwright的无头浏览器自动化。

2201_76125261的博客 1899

Android布局性能真相：ConstraintLayout为何比LinearLayout更高效

Android UI布局性能的核心在于measure阶段的算法复杂度，而非XML写法的直观程度。LinearLayout在wrap_content和深层嵌套下会触发指数级重复测量，RelativeLayout因依赖解析需强制两次measure，而ConstraintLayout通过约束图建模实现单次线性时间复杂度解算。这种底层机制差异使其在3层以上嵌套、横竖屏自适应、动态增删控件等真实产线场景中显著降低measure耗时（实测降幅最高达74%），并支撑ConstraintSet状态切换、Barrier弹性聚

weixin_34354945的博客 317

大中型超市收银系统(可直接运行)

光步前台收银系统系统功能：商品销售、商品退货、挂单、收银员权限、会员销售、单品取消、整单取消、商品查询、脱机销售、脱机数据上传，基本资料下载，开钱箱、小票打印、收款结算，支持多币种付款方式（现金、储值卡、礼券、微信等）,支持多种促销。运行环境：.net 4.0登陆信息用户名:1001 密码:123456内置商品信息，商品编码可输入00001000 - 00010000,测试效果相关功能键F5 结算 F9挂单 F11商品查询 F8退货 Insert单品取消 Del整单取消 F12开钱箱F2 会员 Ctrl+Z退出系统 Home 锁屏 相关源码待公开

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

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

billycoder的专栏 1638

IDEA的使用指南

IDEA基于java的使用手册,可以最快速的上手,在使用中不断的丰富自己的使用技巧.

IEM模型，地表粗糙度模拟

利用微波反演土壤水分时候，利用IEM模型可以实现对随机地表的模拟

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

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

masonqiang的博客 1万+

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

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

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

sunshine5050的博客 1万+

Figma常用快捷键（Mac版）

Figma常用快捷键（Mac版）

SongD1114的博客 3万+

Figma入门-实战列表页

本文介绍Figma上手过程，实操实现Web端经典列表页，包括标题、搜索框、列表项和分页。采用侧边栏+主内容区布局，使用自动布局实现内外边距，绘制内容列表和分页器，最后进行微调。

我码玄黄的博客 2101

【Figma学习】App制作一

Figma学习

weixin_47050107的博客 1860

背景固定不动 导航菜单固定不动

固定位置 菜单固定在顶部不动，使用 position:fixed; top:0; left:0;。同时要注意： 下面列表下移相应的位置，否则打开页面时，下方列表会被遮住一部分。 为菜单设置背景，否则透明的话，与下面列表滚动上来的内容会重叠显示。 为 body 设置背景，因为微信浏览器默认有个背景色（不是白色），可能会与我们的效果冲突，按需设置背景。 ...

琳琳的博客 1238

导航栏吸顶固定不动

说明 在现今很多公司的官网上，都可以看到导航栏吸顶这一功能，今天向初学者介绍两种方法实现 第一种 运用html中的position属性实现 position属性常用的属性值有相对定位relative，默认值static，绝对定位absolute，固定定位fixed。还有就是一会要用放到的sticky——粘性定位。 粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。 在 viewport 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将

m0_63683218的博客 2315

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

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

weixin_39815925的博客 6683
上一篇： 22-Figma-常见项目框架搭建
下一篇： 24-Figma-APP首页排版（上）
点赞 1
评论 0
书签 书签 0
billycoder
billycoder
博客等级 码龄17年 171粉丝 188原创
+ 关注 专栏目录 订阅专栏
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值