29-Figma-我的页面制作

原创已于 2022-01-24 13:29:44 修改 · 949 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#figma #ui设计

于 2022-01-23 16:28:37 首次发布

ui设计专栏收录该内容

38 篇文章

订阅专栏

本文介绍使用Figma进行页面设计的基本步骤，包括绘制图形、设置图层效果、应用自动布局等技巧，帮助读者掌握Figma的基本操作。

29-Figma-我的页面制作

效果

在这里插入图片描述

1.绘制三个圆

在这里插入图片描述

2.设置图层模糊

在这里插入图片描述

3.让三个圆只在矩形画框中显示

在这里插入图片描述

拖动3个圆，同时按住ctrl，把3个圆放入画框中，利用画框的裁剪功能，只显示画框区域内容
不想3个圆的位置发生改变，可以在图层面板锁定3个圆，减少误触

4.内容部分

在这里插入图片描述

吸管工具，i

5.4个图标

在这里插入图片描述

（图标+文字）自动布局
4x（图标+文字）自动布局

在这里插入图片描述

图标切换，选中图标，属性面板中有交换实例

6.列表

在这里插入图片描述

组件
自动布局

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

billycoder

关注关注

0
点赞
踩
3

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

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

11-17

1192

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

27-Figma-发现页面制作

billycoder的专栏

01-23

916

27-Figma-发现页面制作效果 1.搜索完成搜索图标+文字，自动布局（搜索图标+文字）+语音按钮，自动布局，等距进行靠左靠右 ios规范，这部分高度为44 2.切换效果变体组件 3.框的阴影效果 4.绘制列表组件主要自动布局控制位置就好了 ...

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

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

12-28

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

Figma界面学习介绍

热门推荐

2301_80863610的博客

08-14

4万+

在当今快节奏的数字化产品开发中，设计师与开发者的协作效率至关重要。为了打破设计与开发之间的壁垒，我们引入了一种创新的工作流，将强大的设计工具Figma与智能体应用创建平台Trae相结合。借助蓝耘MCP广场提供的Figma MCP（多能力组件），我们能够无缝连接Figma的设计能力与Trae的自动化流程，从而实现将Figma设计稿一键转化为功能完备的网页。这种集成不仅极大地提升了开发效率，减少了手动转换的人为错误，还让设计师能够更专注于创作，而开发者则可以更快地将设计落地为产品。

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

04-30

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

极简风支付应用界面UI素材 - Figma制作体验

文件扩展名“.fig”表明这是一个Figma项目文件，它包含了所有的设计元素、页面、图层以及可能的设计说明。这个文件是设计师用于构建和维护整个UI套件的主文件。综上所述，本资源包适合UI设计师在进行iOS平台的支付...

Figma-Low-Code：快速将Figma设计转换为Vue.js应用，支持低代码渲染、数据绑定

士多啤梨先生の博客

01-02

2390

Figma-Low-Code 是一个开源项目，能够直接将 Figma 设计转换为 Vue.js 应用程序，减少设计师与开发者之间的交接时间，支持低代码渲染和数据绑定。

Radio-Web-Design:Aedes制作的Figma概念的网页设计

04-10

Radio-Web-Design:Aedes制作的Figma概念的网页设计是一种创新的网页设计项目，它展示了如何将Figma的设计理念转化为实际的Web页面。Figma是一款云端协作的UI/UX设计工具，它允许设计师们创建、共享和协作设计，特别...

ChromedFigma：Figma html导出chrome扩展

01-30

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

XBOX-ANIMATE:从figma播放到svg并用代码制作动画来创建xbox徽标

05-27

在本项目中，“XBOX-ANIMATE: 从figma播放到svg并用代码制作动画来创建xbox徽标”是一个教程，旨在指导用户如何利用设计工具Figma创建Xbox徽标，并将其转换为SVG格式，进而通过HTML和可能的CSS或JavaScript实现动态...

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

JU_OLG的博客

10-10

4878

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

专为设计师和设计团队量身打造的一款基于云端的界面设计和协作工具：Figma

skywalk8163的专栏

04-18

1387

Figma 是一款基于云端的界面设计和协作工具，专为设计师和设计团队量身打造，旨在提升设计工作的效率和便捷性。Figma怎么寻找和下载公开的webui的图片

EdgeOne Pages 上线 Figma 插件，设计稿秒变可访问网站

EdgeOneTencent的博客

07-07

736

Figma 是一款基于云端的协作设计工具，广受设计师和开发人员的喜爱。它支持多人实时在线编辑，方便团队成员随时随地共同创作和修改设计稿。Figma 不仅具备强大的矢量绘图和界面设计功能，还能通过插件扩展实现更多自动化和高效工作流。

Figma: 如何在 Web 上构建一个插件系统

趣谈前端

05-05

1368

原文：https://www.figma.com/blog/how-we-built-the-figma-plugin-system/翻译：https://juejin.cn/post/6844903956263501838作者：夏华在 Figma，我们最近解决了迄今为止最大的工程挑战之一：支持插件。我们的插件 API 使第三方开发人员可以直接在基于浏览器的设计工具中运...

【开发工具】Figma入门

大雨的博客

07-16

5569

Figma是一款基于云端的UI/UX设计工具，支持跨平台协作与实时同步编辑。文章详细介绍了Figma的核心功能：云端协作、矢量图形编辑、原型设计、组件复用等特性，并提供了从界面基础到图标设计、自动布局等功能的系统教程。同时分享了高效使用技巧如快捷键操作、批量处理等实用方法，推荐了官方插件市场、设计素材网站等学习资源。通过音乐播放器界面等实战案例，帮助读者快速掌握这一设计工具，提升团队协作效率与设计质量。

【Figma学习】操作工具及其使用一

weixin_47050107的博客

08-10

1万+

Figma学习