27-Figma-发现页面制作

billycoder billycoder 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 900+累计阅读 978平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄17年
关注
原创 最新推荐文章于 2026-07-16 14:32:47 发布 978 阅读 AI 写同款· GEO 优化 ›
【Figma技巧】如何把Figma里面每个frame分散为单独的page 在Scripter插件或浏览器控制台里输入以下代码： let af = figma.currentPage.findAll(n => { return n.type === "FRAME" }) af.forEach(n => { let p = figma.createPage() p.appendChild(n) }) 以上代码来自@Mr. Biscuit 阅读详情

27-Figma-发现页面制作

效果

在这里插入图片描述

1.搜索完成

在这里插入图片描述

搜索图标+文字，自动布局
（搜索图标+文字）+语音按钮，自动布局，等距进行靠左靠右
ios规范，这部分高度为44

2.切换效果

在这里插入图片描述

变体组件

3.框的阴影效果

在这里插入图片描述

4.绘制列表组件

在这里插入图片描述

主要自动布局控制位置就好了
收录于
ui设计

当前文章被收录于：

ui设计
38 篇文章 27 人学习
订阅专栏 查看详情
标签
#figma
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
Figma使用问题（更新自己遇到的问题） 记录型笔记（主要记录Figma使用问题和插件使用过程） 阅读详情

相关推荐

Figma语义化规范与Codex Vue代码生成工程实践

UI设计稿转前端代码，本质是视觉信息到结构化组件的语义映射。传统‘截图识图’式AI生成失败率高，核心在于缺乏设计系统级的语义对齐——Figma需作为可编程编译器使用，而非静态画布。本文围绕Codex Figma协同落地，解析图层命名即契约、样式绑定即变量、结构分组即DOM树三大原则，阐明如何通过语义提纯提升Vue3代码生成准确率与可维护性，并支撑SaaS后台、医疗看板等真实业务场景的高效交付。

weixin_30443747的博客 408

【Figma】入门第一篇 页面和功能简介 初学者必看

本文以网页版 figma 英文为例，简单介绍一下工作台界面上的各个模块的功能，给刚开始使用 figma 的学习者提供一些参考，加速上手。

JU_OLG的博客 5446

前端工程师如何用Figma+Copilot实现设计稿到代码的工程化还原

设计稿转前端代码并非简单的图像识别或代码生成，而是将视觉语言系统性翻译为语义化HTML、模块化CSS和可访问JS逻辑的过程。其核心原理在于建立设计系统与开发规范之间的双向映射，依赖语义化图层命名、CSS变量注入和上下文感知的AI补全。技术价值体现在提升代码可维护性、保障无障碍合规、统一响应式行为，并显著缩短页面骨架搭建周期。典型应用场景包括中后台管理系统、电商商品卡片、营销活动页等需高频对接设计交付的项目。本文聚焦于Figma与VSCode协同下的三层过滤模型，揭示人机协作中‘前端代码思维’的关键作用。

weixin_34408717的博客 446

figma设计_5位来自杂乱无章的设计师的Figma技巧

figma设计When starting a design project, a fast pace and multiple design iterations can easily lead to a cluttered mess. Taking the time in the beginning to build good organizational habits will save yo...

weixin_26732881的博客 1577

Trae智能体+MCP协议打通Figma设计与开发协同

MCP（Model Control Protocol）是一种面向AI原生工作流的模型控制协议，旨在解决设计与开发之间语义割裂、状态不同步和控制权缺失等核心问题。其原理在于构建可编程的‘手眼协调系统’，实现Figma画布事件的实时捕获与双向操作，而非传统REST API的静态数据拉取。技术价值体现在状态感知实时性、沙箱化双向控制及协议级安全治理，广泛应用于UI还原提效、设计系统自动化、多端一致性保障等工程场景。本文聚焦字节Trae智能体与Figma通过MCP协议构建像素到API的闭环通路，详解MCP serv

weixin_34116110的博客 460

Figma转代码工作流：Cursor+Visual Copilot实战指南

Figma设计稿转代码本质是解决设计-开发协同断点的技术范式，其核心在于将视觉规范转化为可执行的工程语义。传统插件因隔离于开发环境而无法理解项目上下文，导致生成代码与团队技术栈脱节；而基于Cursor IDE与Visual Copilot的组合，通过项目级索引、框架感知生成和设计系统JSON中间层，实现了‘理解式生成’——它能识别`useAuthStore`、`BaseButton`等已有能力，并输出符合Vue3 Composition API、Tailwind CSS规范及团队编码约定的SFC组件。该方案

weixin_34026997的博客 357

2分钟上手用Figma绘制网站页面设计图

8.如果想对页面中各元素的位置布局更有把握，可以打开右边栏中Design里倒数第二个Layout Grid 选择网格或其他参考线。5.如果要使用模板：在左侧的Assets中搜索下载你需要的模板 例如 shop。6.如果想绘制矩形等图形，在最下方工具栏中选择相应图形绘制和移动缩放。4.按A键 在页面右侧选择你要设计的页面的大小规格。7.如果想输入文字，在最下方工具栏中选择“T”1.登陆官网 下载应用或网页端使用。2.注册\登录及走完新手指引。

weixin_47301844的博客 2585

ChromedFigma：Figma html导出chrome扩展

镀Chrome 将Figma页面的原型从浏览器中打开的当前文件导出为使用图像映射链接的静态html文件。 重要提示：请首先在扩展选项页面中设置您的Figma个人访问令牌。 笔记： 为了模拟Figma的“后退”交互，您可以在元素名称中使用字符串__back__ （该元素尚未过渡到另一个元素），并且该元素将使用[removed]history.back();导出到链接[removed]history.back(); 。 假定您已经将帧导出到文件夹中的* .png图像文件中。 然后，将导出的* .html文件复制到同一文件夹中，然后打开其中一个。 如何使用 在本地硬盘驱动器的./unpacked文件夹中下载存档文件并解压缩，在Chrome扩展程序中启用开发人员模式，单击“加载解压缩”，然后选择解压缩的ChromedFigma文件夹。

UI设计系列——Figma基础使用day1-1

UI设计系列——Figma基础使用Figma下载文档社区（中国）为什么选择Figma汉化基本操作创建新设计修改项目名使用步骤1.新建画布2.添加页面元素2.1 使用标尺（快捷键shift+R）2.2页面元素属性蒙版1.添加页面元素2.复制底层模板3.打组（ctrl + G）4.设置蒙版5.放置替换组件中添加头像（插件切换）1.安装插件选择下载使用组件中添加图片（自定义） Figma下载 figmachina.com/ 文档 https://figmachina.com/guide/ 社区（中国） figm

qq_51553982的博客 1万+

FigmaGen:使用Figma API生成样式代码的命令行工具

FigmaGen FigmaGen-一个命令行工具，可使用Figma组件为UI样式生成代码。 它可以生成： 颜色样式 文字样式 导航 Figma文件 世代设定 颜色 文字样式 执照 安装 可可豆 要使用CocoaPods安装FigmaGen，请将以下行添加到Podfile ： pod 'FigmaGen' , '~> 1.0.0' 然后在终端中运行： $ pod install --repo-update 如果使用CocoaPods安装了FigmaGen，则在使用generate命令时，应该使用Pods/FigmaGen文件夹的相对路径： $ Pods/FigmaGen/figmagen generate 自制酒 要使用Homebrew安装FigmaGen，请运行： $ brew install hhru/tap/FigmaGen 手动地 转到发布页面。 下载

figma-html:将Figma设计转换为HTML，React，Vue，Angular等！

通过将Figma设计转换为高质量HTML，React，Vue，Svelte，Angular，Solid等代码 它是如何工作的 将设计导出为代码 确保要导入的所有图层均按照所述使用自动布局 单击“获取代码”按钮以启动Builder.io编辑器 进行最后的调整，然后单击Builder顶部的“获取代码”以查看代码输出，或将其复制并粘贴到Builder帐户的内容以实时发布 将网页导入到Figma设计 在Figma中，打开一个新的或现有的文档，然后单击cmd + /并搜索“ html figma”，然后按Enter 输入您要导入的URL 为什么？ 立即将设计转换为实时网页和代码 轻松导入真实的现场样式，以作为设计和原型的起点 快速将实际站点组件转换为设计组件 易于从故事书等导入 Chrome扩展程序 想要捕获身份验证墙后面的页面，还是要导航到的特定状态？ 程序适合您！ 使用图书馆 // npm

Figma 常用功能及快捷键

Figma 快捷键：https://figmacn.com/resource/all-figma-shortcuts Figma 下载：https://www.figma.com/downloads/ ...

baidu_41388533的博客 1万+

简洁的figma网页模板_基于网格设计.zip

简洁的figma网页模板，基于网格设计 adobe xd网页模板、figma网页模板、xd ui素材、网页模板

figma：使用mac上的字体 | 转换ttc字体文件

figma：使用mac上的字体 Figma 是一款基于网页的设计软件，拥有macOS和Windows客户端。个人偏爱mac上的圆体和楷体，这两款字体的字库非常全，且都有三种字重，由华文公司设计，是mac上的内置字体，Windows上是没有的，当要在Windows上编辑相关文本时，字形会丢失。（Figma还支持在线多人协作，在团队协作时我们应当避免这种字体不一致的情况）。于是尝试在Windows上安装这个字体。 如果出现缺字（Missing fonts）情况，首先检查是否安装 Font Helper，安装后f

hufang360的专栏 7262

TSmaster CANFD配置避坑指南：为什么你的PCAN盒不支持最新版本？

本文针对TSmaster配置PCAN硬件进行CANFD通信时的常见问题，提供了详细的避坑指南。重点解析了CANFD配置中TSEG1等关键参数的理解误区，并深入探讨了TSmaster新版本与PCAN硬件驱动之间的兼容性变化，帮助工程师快速定位并解决连接失败或无法发送CANFD报文等问题。

alpha的博客 545

【探秘】二维异形件重叠移除算法：从度量到消除的实战解析

本文深入解析二维异形件重叠移除算法的核心技术与实战应用，涵盖重叠度量、零件扰动策略及消除方法。通过NFP（临界多边形）技术、空间分区加速等优化手段，有效解决异形件排版中的重叠问题，提升材料利用率和计算效率。适合制造业、CAD软件开发者及算法工程师参考。

weixin_28698059的博客 253

TiDB 技术文档绘图指南：Figma 快速入门教程

在 TiDB 技术文档编写过程中，清晰专业的图表能够显著提升文档质量。Figma 作为一款强大的在线协作设计工具，特别适合技术文档中的图表绘制工作。本文将详细介绍如何使用 Figma 为 TiDB 技术文档创建规范化的技术图表。 ## Figma 基础介绍 Figma 是一款基于浏览器的矢量图形编辑工具，具有以下特点： - 跨平台支持（Windows/macOS/Linux） - 实时协作功能

gitblog_00853的博客 587

MOLDFLOW 2012模流分析基础到实战视频教程

├ 1第一讲MF软件安装与界面定制及模流前期准备工作及分析流程介绍 ├ 2第二讲MF建模工具条命令讲解与图层的运用 ├ 3第三讲MF网格类型与适应范围及网格划分、诊断、修复与统计 ├ 4第四讲MF中CAD doctor 模块对导入模型的修复方法与实例 ├ 5第五讲MF中常见各种流道浇口及水路的建模方法与外部导入方法上 ├ 6第六讲MF产品模型导入CAD DOCTOR与修复 ├ 7第七讲MF分析序列设定与网格的划分与诊断及修复 ├ 8第八讲MF材料选择与成型工艺参数设定 ├ 9第九讲MF创建浇注系统：主流道、

QQ_1987083845的博客 2546

Figma AI Prompt工程黄金公式：1个模板+4类变量+27个行业指令库，今天就能上线

快速掌握Figma AI Prompt工程方法，提升设计效率。本文提供Figma AI功能介绍，含1个通用模板、4类可调变量与27个行业指令库，覆盖UI/UX、电商、教育等场景，开箱即用。精准控制AI输出，降低试错成本，值得收藏。

FastCompile的博客 97

免费获取船舶轨迹数据？手把手教你用Python处理中国海洋卫星AIS数据

本文详细介绍了如何免费获取中国海洋卫星AIS数据，并使用Python进行船舶轨迹数据的处理与分析。从数据源评估到自动化处理流水线，再到高级分析与可视化技巧，手把手教你避开常见问题，实现高效数据处理。特别适合航运数据分析、物流优化和海上安全研究等领域的研究者和开发者。

weixin_42616115的博客 321

华为od统一考试B卷【单词搜索】C++ 实现

找到它是一个小游戏，你需要在一个矩阵中找到给定的单词。假设给定单词 HELLOWORD，在矩阵中只要能找到 H->E->L->L->O->W->O->R->L->D连成的单词，就算通过。意区分英文字母大小写，并且您只能上下左右行走，不能走回头路。

MISAYAONE的博客 713

Figma协作原型：邀请用户参与UI改进

通过Figma的可交互原型和上下文评注，团队能邀请用户直接在设计上反馈问题，大幅提升沟通效率。结合任务引导与权限控制，实现轻量闭环的用户体验验证，让真实使用者成为设计共建者。

weixin_29155599的博客 892

ROS2 CANopen 使用教程

第一步是定义一个结构，用于保存有关接头和相关 CANopen 数据的信息。该结构是 CANopen 网络的基础，可确保存储所有相关数据并在需要时进行访问。

机器人控制与仿真应用 3692

Figma与Codex集成，提升开发协作效率

2月27日，Figma官方宣布Codex支持通过Figma MCP服务器生成并同步设计文件，实现代码与设计无缝双向流转，显著提升开发与设计协作效率。

EveningTalk的博客 505

【本地部署实战】LM Studio深度使用指南：从环境搭建到模型调优

LM Studio通过极简的操作流程和强大的生态兼容性，让本地部署大模型成为可能。随着M4芯片的发布和CUDA 12.0的优化，未来本地化AI开发将迎来新的爆发点。建议开发者关注官方Discord社区（https://discord.gg/lmstudio）获取最新模型支持信息。

远程部署调试 运行安装 项目调试 二次开发 项目技术新 持续迭代 部分源码免费分享 8754

零基础学GPU KMD--8. 内存管理：GPU 显存与系统内存的协同​8.1 显存分配策略：GEM / TTM 原理

支持 VRAM、GTT（Graphics Translation Table）、SYSTEM 内存的动态迁移与缓存管理。：若缓冲区在 SYSTEM，TTM 分配 GTT 条目并建立页表映射，使 GPU 可直接访问。：系统内存中预留给 GPU 直接访问的区域，通过 GPU 的 MMU 做地址翻译。你需要我继续展开这一部分吗？​ 为复杂离散 GPU 设计，应对大容量 VRAM、多内存域、显存迁移等问题。：重量级、功能全，适合大容量、多内存域的离散 GPU，强调显存迁移与统一管理。

amy_mhd的博客 187
上一篇： 26-Figma-APP首页完成
下一篇： 28-Figma-消息页面制作
点赞 0
评论 0
书签 书签 0
billycoder
billycoder
博客等级 码龄17年 171粉丝 188原创
+ 关注 专栏目录 订阅专栏
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值