Figma：原型设计与交互基础_2024-07-22_00-36-23.Tex

最新推荐文章于 2025-03-31 09:57:19 发布

chenjj4003

最新推荐文章于 2025-03-31 09:57:19 发布

阅读量675

点赞数 14

分类专栏：游戏开发文章标签： figma 交互 photoshop axure ui

本文链接：https://blog.youkuaiyun.com/chenjj4003/article/details/143865256

版权

游戏开发专栏收录该内容

1631 篇文章 ¥259.90 ¥399.90

订阅专栏

超级会员免费看

Figma：原型设计与交互基础

Figma基础概览

Figma平台介绍

Figma 是一款基于云端的界面设计工具，它允许设计师在同一个平台上进行协作设计、原型制作和交互设计。Figma 的核心优势在于其实时协作功能，使得团队成员可以同时编辑同一个设计文件，极大地提高了工作效率和团队协作的便捷性。

特点

实时协作：团队成员可以实时查看和编辑设计，无需担心版本控制问题。
跨平台：Figma 可以在任何有现代浏览器的设备上运行，无需安装特定的软件。
组件系统：Figma 提供了强大的组件系统，可以创建可重用的设计元素，保持设计的一致性。
原型与交互：可以直接在设计中添加交互和动画，创建可点击的原型，方便测试和演示。

创建和管理项目

在 Figma 中创建和管理项目是设计流程中的第一步。项目可以包含多个文件，每个文件可以是一个设计稿或一个原型。

创建项目

了解本专栏

订阅专栏解锁全文

超级会员免费看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

chenjj4003

关注关注

14
点赞
踩
9

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

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

11-17

469

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

Figma：创建与管理设计系统_2024-07-22_00-19-47.Tex

11-17

559

首先，需要定义一套设计规范，包括颜色、字体、间距、组件样式等。- 主色：#007AFF- 辅色：#FF9800- 背景色：#FFFFFF- 标题字体：Roboto，粗体，18px- 正文字体：Roboto，常规，14px设计语言是设计系统的核心，它定义了品牌的视觉和交互规范。色彩体系：选择品牌色彩，包括主色、辅助色和中性色。例如，如果主色是蓝色，可以定义为#007AFF，并在Figma中创建颜色变量，方便在组件和样式中统一使用。字体和排版：确定字体家族、大小和行高。例如，使用Roboto。

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

UI设计 - figma的使用和心得

2301_78360123的博客

06-27

959

一.Figma的优点1.作为一种交互设计工具，Figma在UI设计中有很多优点2.使用Figma进行UI设计的心得二.Figma的使用。

Figma这些交互细节，B端设计也值得借鉴

aimeeth的博客

02-22

1179

Figma 最近真是热火朝天，2021 年 6 月刚获得 2 亿美元的 E 轮融资，估值高达 100 亿，居然以设计工具的身份成为独角兽。文章链接：https://www.forbes.com/sites/alexkonrad/2021/08/10/how-figma-became-designs-hottest-startup-valued-at-10billion/ 现在，Figma 终于取代 Sketch，在国际上稳稳占领了 UI/UX 设计工具的主流地位。上图来源：..

UI设计新手必看：如何快速掌握Figma？

最新发布

贝格前端工场的博客

03-31

1051

比如在设计一个水平排列的导航栏时，将所有导航按钮放入一个开启智能布局的图层组，设置好间距和对齐方式，当添加或删除按钮时，其他按钮会自动调整位置和大小，保持整体布局的合理性，大大提高了设计效率。插件市场提供了各种各样的插件，满足不同的设计需求。通过对 Figma 基础概念的认识、核心功能操作的掌握、团队协作的运用、实用插件的探索以及项目实践的不断积累，UI 设计新手能够快速且系统地掌握 Figma 这一强大的设计工具，为在 UI 设计领域的发展打下坚实基础，逐步提升设计能力，创作出优秀的 UI 设计作品。

总结了几个做用户体验设计的原则，分享给需要的朋友

七小嗨少的博客

11-24

766

比如上面提到的Padding设置，Fimga采用可视化形式，用户可以直接填写对号，用户的思维成本较低，甚至可以说是零成本。我个人理解，这种布局是为了压缩高度方向的尺寸，尽可能确保设置项目完全显示，避免滚动条，增加用户的运营成本。另外Axure默认字体为13号，默认字体为13号Figma它是14号字体，更适合设计师的主流使用，减少了用户的修改次数。在Figma在中间，用户可以创建自己的颜色、边缘和阴影风格库，随时调用设计，一劳永逸，降低频繁调整风格的操作成本。在工具软件中，对象的属性栏应为用户的高频操作区。

Figma入门-原型交互

我码玄黄的博客

11-30

1661

Figma原型交互入门，通过5个画框实现简单交互，包括导航跳转、打开链接、打开/交换/关闭叠加等，并设置动画和位置。本文粗略介绍，后续将结合实际案例尝试。

Figma介绍（基于云的协作式界面设计工具，主要用于UI/UX设计、原型制作和团队协作）

Dontla的博客

03-14

2136

Figma 是一款基于云的协作式界面设计工具，主要用于 UI/UX 设计、原型制作和团队协作。它颠覆了传统设计工具的单机模式，以云端实时协作和跨平台兼容性为核心优势，适用于设计师、开发者、产品经理等多个角色。核心特点。

Figma：高级原型与动画效果制作_2024-07-22_00-41-55.Tex

11-17

953

选择工具：用于移动和选择对象。矩形工具：创建矩形和正方形。椭圆工具：绘制圆形和椭圆。多边形工具：绘制多边形。文本工具：添加和编辑文本。钢笔工具：绘制自定义形状和路径。填充和描边工具：调整对象的颜色和边框。图层操作：创建、删除、调整图层顺序。Figma允许你自定义元素之间的过渡效果，如淡入淡出、滑动或缩放，以增强原型的视觉体验。

Proto.io：交互设计原理与实践_2024-07-22_12-35-48.Tex

11-23

Proto.io是一个强大的在线平台，用于创建和测试高度逼真的交互式原型。它允许设计师和开发者无需编写代码，就能构建出具有真实感的用户界面交互。Proto.io支持多种交互元素，如按钮、滑块、文本框等，以及复杂的动画和过渡效果，使得原型不仅看起来像真实应用，而且在功能上也十分接近。明确测试的目标，是为了验证原型的哪些方面，如导航的直观性、功能的易用性或视觉设计的吸引力。目标应具体且可衡量。

figma介绍

qq_52175048的博客

01-12

9003

Figma介绍

figma客户端下载

05-18

今后上传的资源都会免费提供下载，包括我开发的demo项目和游戏素材，技术体会都将上传。

学习figma

qq_66740903的博客

06-27

6061

Figma是目前最流行的一款免费云端设计工具，常用于UI设计，Web设计，移动应用设计和交互设计等领域。下面介绍一些Figma的基本概念和使用方法。

你知道什么是 Figma 吧

qfguan的博客

10-21

2095

这是小红书 UED 的一篇文章，可以说是一份比较综合的 Figma 上手指南。不仅讲了和 Sketch 相比的优缺点，也从实际经验讲解了如何使用 Figma 的组件和样式以及协作、交付。 Figma 最重要的特点就是基于 Web，而随着云计算基础设施越来越好，加上 5G 的铺开，设计工具的 Web 化会成为趋势。但是，由于我们以往对 Web 的感觉是性能不够强大，总觉得在 Web 上做设计会没有脚踏实地的安全感。可是 Figma 会让你完全打消疑虑，它甚至比本地应用 Sketch 还要流畅。而..

figma 使用中文

热门推荐

weixin_34378922的博客

09-11

1万+

使用 Noto Sans SC 字体下载插件 Figma Font Helper 转载于:https://www.cnblogs.com/ajanuw/p/9625676.html

【UI设计】Figma —— 响应式栅格系统

2401_83303206的博客

08-25

3981

本文简述栅格系统与响应式设计概念及效用，并阐述在Figma中设置栅格、实现响应布局的方法，助力设计师高效打造优质网页体验。

01-figma介绍

billycoder的专栏

01-20

4486

01-figma介绍为什么我们要去学习figma平台如此之多的ui设计工具，为什么我们就只学这一个就可以了？看一下，当前的一个ui设计工具排行榜。目前figma码稳居第一位，sketch第二位，xd第三位。像ai 和ps，这个占有的量就更少了。为什么ps和ai占有的量很少。因为其实我们在去做ui的过程中，ps软件是非常臃肿。里面有大量的工具，我们根本就用不着。并且ps对电脑的性能要求也是比较偏高的。ai也是如此。 figma支持windows 以及苹果。你只要拥有一个浏览器就可以使用，它是不受这

Figma是什么软件？

2201_76016244的博客

06-27

6593

近些年来，设计和开发的边界愈发模糊，数字产品也逐渐涉及更多领域。众多设计工具应运而生，其中Figma成为了业界公认的协同设计工具之一。本文将分享关于Figma设计的经验和见解。一、什么是Figma？Figma是一款基于浏览器的协同设计工具，它主要用于界面设计、原型设计和用户体验设计。Figma致力于将设计师和开发人员之间的沟通极限上升，通过实时协作和云端存储，设计师可以随时随地创建、分享和协作设计项目。应用它的优点之一就是多人协作，包括设计师、工程师和产品经理等多个角色可以同时在一个项目上工作。

figma的运用

Morli_的博客

06-24

1814

设计（Design）是指为了解决特定问题或满足特定需求而进行有意识的计划、策划与组织的过程或结果。它可以是通过创意表现（例如艺术、音乐、文学等），也可以是以应用为目的，服务于人类需要的任何活动，包括工业设计、平面设计、室内设计、建筑设计、服装设计等等。在设计的过程中，通常要进行观察和分析现有的信息、形式、材料和技术等方面的问题。此外，在创造新设计时，也需要不断不断尝试和实验，为了获得最佳的解决方案，不断迭代和调整设计。设计的目的并不仅仅是创造一个良好的外观，而是为了实现更好的功能和用户体验。