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

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

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

完成框架图

在这里插入图片描述

画框模板使用iPhone 11 Pro /X 375×812
顶部状态栏和底部菜单栏,使用组件
组件哪里来?社区搜索"ios 15",选择一个下载量还不错的,然后创建副本
搜到社区的组件,可以切换视图,查看效果(cover/page)
顶部状态栏:44 标题栏:44 底部菜单栏:83
标尺快捷键:shift+r

完成布局网格

在这里插入图片描述

在这里插入图片描述

完成小程序框架

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gImCGVih-1642895413153)(22-Figma-常见项目框架搭建.assets/image-20220123074859911.png)]

需要去社区搜索一个小程序组件,然后找到上面的的"胶囊部分"
收录于
ui设计

当前文章被收录于：

ui设计
38 篇文章 27 人学习
订阅专栏 查看详情
标签
#figma #ui设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
figma-颜色 梯度色板 阅读详情

相关推荐

Figma：项目管理与版本控制在Figma中的应用_2024-07-22_01-55-58.Tex

在Figma中，项目结构是设计团队组织和管理设计资源的基础。一个项目可以包含多个文件，而每个文件又可以包含多个页面和框架。这种层次结构使得团队成员能够清晰地定位和访问所需的设计元素。

793

23-Figma-标签栏组件制作

23-Figma-标签栏组件制作 效果 步骤 1.摆放位置 布局网格 2.控制图标和网格水平居中 通过绘制一个辅助矩形完成 3.几个图标水平对齐 选中5个图标,然后水平对齐 图标约束设置为居中 4.制作变体组件 绘制单个 定义颜色样式 复制方式创建另外3个,修改颜色 创建多个组件 批量修改组件名字,底部栏=首页、底部栏=发现、底部栏=消息、底部栏=我的 合并为变体 复制使用组件的实例，属性菜单栏可以完成切换 ...

billycoder的专栏 2815

Figma：Figma入门与界面设计基础_2024-07-22_00-02-43.Tex

工具栏：位于左侧，包含选择、画笔、形状、文本等工具。图层面板：位于右侧，管理设计中的图层，调整顺序和可见性。组件面板：位于右侧，用于创建和管理UI组件。属性面板：位于右侧，显示当前选中对象的属性，如颜色、大小、位置等。设计空间：中央区域，进行实际的设计工作。Figma允许用户自定义快捷键，以适应个人的工作流程。这可以显著提高设计速度，减少鼠标操作，让你更加专注于设计本身。打开快捷键设置：点击Figma界面右上角的齿轮图标，选择“快捷键”。创建新快捷键：在“自定义”部分，点击“+”添加新快捷键。

1586

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

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

billycoder的专栏 1018

Figma：Figma插件开发与使用教程_2024-07-22_00-29-45.Tex

Figma的插件生态系统是一个充满活力的平台，允许开发者创建和分享工具，以增强Figma的设计和协作功能。这些插件可以自动化工作流程、集成外部服务、提供设计资源或简化复杂任务。Figma插件市场提供了各种插件，从设计资源管理到代码生成，应有尽有，满足不同用户的需求。

1129

Figma：Figma与AdobeCreativeCloud集成教程_2024-07-22_01-32-48.Tex

在设计领域，Figma 和 Adobe Creative Cloud 是两个广受欢迎的工具集。Figma，作为一个基于云的界面设计工具，提供了实时协作的功能，使得团队成员可以无缝地共同工作，无论他们身处何地。Adobe Creative Cloud，包括如 Photoshop、Illustrator 和 XD 等工具，是专业设计师的首选，以其强大的编辑和创作能力著称。然而，每个工具都有其独特的优势和局限性。

740

【Figma学习】组件管理

Figma学习

weixin_47050107的博客 3643

Figma：跨平台设计一致性教程_2024-07-22_01-22-16.Tex

设计系统是跨平台设计一致性的重要工具，它包括一套预定义的组件、样式和规则，确保设计在不同平台上的一致性和可扩展性。

728

Figma 使用 figma-developer-mcp 搭建本地 mcp，以及 Workbuddy 配置 本地 MCP

本地搭建 Figma MCP 服务完整指南 本文详细介绍了在官方 MCP 服务不可用的情况下，如何通过开源项目figma-developer-mcp搭建本地MCP服务，并与Workbuddy集成。主要步骤包括： 通过npm全局安装figma-developer-mcp工具 在Figma账户设置中生成个人访问Token 在Workbuddy连接器配置JSON文件（需特别注意路径替换为实际安装路径） 保存配置后即可在Workbuddy中调用Figma设计资源 文章特别强调了配置文件中必须使用绝对路径而非环境变量

FungLeo's Blog 2997

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

单细胞测序流程（五）t-sne聚类分析和寻找marker基因

系列文章目录 单细胞测序流程（一）简介与数据下载 单细胞测序流程（二）数据整理 单细胞测序流程（三）质控和数据过滤——Seurat包分析，小提琴图和基因离差散点图 单细胞测序流程（四）主成分分析——PCA 本期主讲内容——t-sne聚类分析和寻找marker基因 介绍：T-SNE是一种用于探索高维数据的非线性降维算法。它将多维数据映射到适合于人类观察的两个或多个维度。 一、课前准备 之前所使用的数据 R语言的IDE 二、过程 聚类分析的目的是根据细胞的差别所进行细胞分群，两个..

qq_45478665的博客 2万+

Cursor Talk To Figma MCP贡献指南：如何参与开源项目

你是否曾想为开源项目贡献代码，却因不知从何入手而却步？本文将系统讲解如何参与Cursor Talk To Figma MCP项目开发，从环境搭建到代码提交，全程提供实操指导，即使是开源新手也能快速上手。读完本文你将掌握： - 项目架构与核心功能模块解析 - 本地开发环境搭建完整流程 - 代码规范与提交指南 - 功能开发与测试策略 - 贡献流程与PR提交流程 ## 项目概述 Cursor Ta...

gitblog_00132的博客 801

网格自适应_Comsol案例解析17：自适应网格的使用

本期导读自适应网格细化有许多优势，比如可以不用对网格进行全局加密，增加计算精度，又会降低求解自由度。本期仍然以气泡上升案例为例，在两相流模块中使用自适应网格。【打开案例模型】【修改网格】适当让气泡边界加密，注意，曲率因子越小，曲线上的网格越密【添加自适应网格】使用默认的参数即可，这里的误差指示器用的是水平集phi。可以根据具体求解模型选择适当的自变量作为误差指示器。【口诀】默认的一般是最...

weixin_28726871的博客 5682

AI炼丹日志-22 - MCP 自动操作 Figma+Cursor 自动设计原型

本文介绍了如何通过MCP实现Cursor AI与Figma的集成，从而编程式地读取和修改设计内容。项目包含TypeScript MCP服务器、Figma插件和WebSocket通信层。配置步骤包括安装bun工具、设置环境、启动服务、安装Figma插件及配置Cursor的mcp.json文件。最后演示了通过自然语言指令让Cursor控制Figma自动排版设计的过程，展现了MCP在AI工具协同工作中的应用价值。

谢谢你的喜欢 我们一起无限进步 1751

Windows下用Docker部署RagFlow的5个常见错误及解决方法（附详细日志分析）

本文针对Windows系统下使用Docker部署RagFlow的常见难题，提供了详细的避坑指南。文章深度剖析了WSL2配置、端口冲突、文件权限、资源限制及网络通信这五个典型错误场景，并结合具体日志分析，给出了经过验证的解决方案，帮助开发者高效完成部署。

weixin_29233857的博客 180

线性调频LFM脉冲压缩 连续波雷达仿真&线性调频信号仿真分析压缩matlab程序源码

13、线性调频信号（LFM）压缩感知的稀疏与重构算法（OMP）的matlab仿真程序（一个可以在matlab上运行的压缩感知实例；8、具有多普勒频移的线性调频信号（知道带宽、采样频率、T使用MATLAB仿真线性调频信号即LFM，同时具有多普勒频移时，匹配滤波后的波形变化。19、CW脉冲和LFM信号Matlab仿真（这是matlab仿真程序，实现了常规雷达信号CW和线性调频信号LFM的仿真）18、lfm信号模糊函数图 matlab（用matlab 实现的线性调频信号信号（lfm）的模糊函数图）

2301_77866396的博客 401

Cursor Talk To Figma MCP开发环境搭建：Windows与WSL配置

你是否在Windows系统下搭建Figma与Cursor的AI协作环境时遇到过各种兼容性问题？WSL（Windows Subsystem for Linux）的出现为这一问题提供了完美解决方案。本文将详细介绍如何在Windows与WSL环境下搭建Cursor Talk To Figma MCP（Model Context Protocol，模型上下文协议）开发环境，让你轻松实现AI驱动的设计自动化...

gitblog_01156的博客 1181

Amesim与Simulink联合仿真：S-Function接口配置与实战避坑指南

本文详细介绍了Amesim与Simulink联合仿真中S-Function接口的配置方法与实战避坑指南。从环境搭建、编译器配置到S-Function接口实战，逐步解析关键步骤与常见问题解决方案，帮助工程师高效实现多领域系统仿真，特别适合汽车、航空航天等复杂系统建模场景。

weixin_29173777的博客 344

最强Cursor Talk To Figma MCP开发工具链：10倍提升Figma插件开发效率

你是否还在为Figma插件开发中的复杂通信逻辑而头疼？是否因工具链整合不畅导致开发效率低下？本文将为你揭示Cursor Talk To Figma MCP（Model Context Protocol，模型上下文协议）开发工具链的全部奥秘，通过这套完整解决方案，你将能够: - 掌握基于WebSocket的双向通信架构设计 - 熟练运用20+核心开发工具与API接口 - 解决跨域通信、数据序列化等...

gitblog_00007的博客 641

与OpenClaw同类性质的AI智能体框架/工具汇总（小白友好）

OpenClaw的核心定位是「开源、本地优先、可执行真实任务的AI代理」，核心价值是让AI从“聊天”落地到“动手干活”（操控电脑/服务器、处理办公/系统任务）。结合这一核心，以下是同类性质的工具/框架，按「小白易上手程度」排序，每个产品重点说明和OpenClaw的异同、核心优势及适配场景，方便小白快速区分选择。

hy行者勇哥的博客 2108

广东省道路工程检测练习试题(单选题)真题

1.一般项目的合格点率应达到( )，且不合格点的最大偏差值不得大于规定允许偏差值的1.5倍。A.不低于75%B.不低于80%C.不低于85%D.不低于90%答案：B2.进行土路基平整度检测时，当路宽小于9m，检测点数应为( )A.1B.2C.3D.4答案：A3.根据《城镇道路工程施工与质量验收规范》，在分部工程中，根据工种、材料、施工工艺等划分的是( )A.单位工程B.分项工程C.分部工程D.工序工程答案：B4.根据《城镇道路工程施工与质量验收规范》，土方路基压实度的检测频率为每1000m每压实层抽检( )

ZShy001238的博客 686

使用 Trae IDE 一键将 Figma 转为前端代码

智能体（Agent）是你在不同场景下的 AI 助手。自定义智能体后，你可以灵活配置提示词和工具集，快速完成复杂任务。在 AI 对话框右上角点击设置，选择智能体。点击+ 创建智能体。图片在配置面板中：（可选）上传智能体头像。输入智能体名称，例如：“Figma 助手”。（可选）填写提示词，示例：“根据用户提供的 Figma 链接，精准还原 UI 设计，生成响应式 HTML 前端页面代码。结构清晰，视觉细节与设计稿高度一致，禁止擅自修改设计内容。在工具-MCP部分仅勾选。在工具-内置。

xiangzhihong8的专栏 7264

080、多轴运动控制：插补器设计（螺旋线插补）

本文分享了螺旋线插补器设计的实战经验。针对五轴点胶机Z轴抖动问题，作者分析了螺旋线数学本质，提出基于归一化时间参数的速度规划方法，强调各轴严格同步的重要性。文章详细介绍了速度分解、加减速处理、嵌入式优化技巧（查表法、定点化），并总结了起点闭合、速度波动、数值处理等常见问题解决方案。最后给出5条实用建议：注重速度规划而非纯数学推导、预先仿真、保留调试接口、考虑机械谐振、防范编码器丢脉冲。通过优化插补周期、电子齿轮比和S形速度曲线，成功将设备良率从60%提升至95%。

m0_50546716的博客 87

MCP Figma AI Bridge 连接报错解决方案

本文记录了解决MCP Figma AI Bridge启动失败的完整过程。问题主要由于npm缓存损坏和包名错误导致，表现为无法找到db.json模块。解决方案包括：1)清理npm/npx缓存；2)重新安装依赖；3)安装正确的figment-mcp包；4)运行自动配置命令；5)启动Bridge和MCP服务器。成功配置后，服务运行在8473端口，可通过健康检查验证，并能在Figma中导出设计到AI工具使用。最后提供了故障排查方法和环境信息，适用于Windows系统下的Node.js v20环境。

陌上花开然不归矣 3098

OV9734 DATASHEET，完整规格书

OV9734完整规格书，包括电气参数，尺寸规格，寄存器配置表等

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用，资源的后缀为tar.gz格式的压缩包

Flutter 使用 Cursor 和 Figma 快速生成界面代码

原文如何在Flutter中利用Cursor和Figma高效生成UI代码本文介绍如何通过Cursor和Figma工具快速生成Flutter界面代码，提升开发效率，适合Flutter开发者和UI设计师阅读。

会煮咖啡的猫咪 3471

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章，有部分习题没有答案，全英文复分析阿尔福斯(Ahlfors) 第三版答案

Figma-Context-MCP本地化部署：离线环境下的使用方案

你是否遇到过这些问题？在无网络环境下开发时，AI编码助手（如Cursor）无法获取Figma设计数据，导致界面实现效率大幅下降；企业内网环境严格限制外部API访问，Figma云端数据无法穿透防火墙；团队协作中，设计文件频繁更新但无法实时同步到开发环境。Figma-Context-MCP本地化部署方案正是为解决这些痛点而生，通过在本地搭建MCP（Model Context Protocol）服务器，...

gitblog_00934的博客 1052

锂电池充电器电路设计 里面有电路

锂电池充电器电路设计 里面有电路 3.7V升压到5V电路设计。
上一篇： 21-Figma-APP项目实战概述
下一篇： 23-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、付费专栏及课程。

余额充值