29-Figma-我的页面制作

已于 2022-01-24 13:29:44 修改
阅读量901 收藏 3
点赞数
分类专栏： ui设计 文章标签： figma ui设计
于 2022-01-23 16:28:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/billycoder/article/details/122653141
版权

29-Figma-我的页面制作

效果

在这里插入图片描述

1.绘制三个圆

在这里插入图片描述

2.设置图层模糊

在这里插入图片描述

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

在这里插入图片描述

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

4.内容部分

在这里插入图片描述

吸管工具，i

5.4个图标

在这里插入图片描述

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

在这里插入图片描述

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

6.列表

在这里插入图片描述

组件
自动布局
Figma：高级原型与动画效果制作_2024-07-22_00-41-55.Tex
11-17 989
选择工具：用于移动和选择对象。矩形工具：创建矩形和正方形。椭圆工具：绘制圆形和椭圆。多边形工具：绘制多边形。文本工具：添加和编辑文本。钢笔工具：绘制自定义形状和路径。填充和描边工具：调整对象的颜色和边框。图层操作：创建、删除、调整图层顺序。Figma允许你自定义元素之间的过渡效果，如淡入淡出、滑动或缩放，以增强原型的视觉体验。
简洁的figma网页模板_基于网格设计.zip
12-28
简洁的figma网页模板，基于网格设计 adobe xd网页模板、figma网页模板、xd ui素材、网页模板
Figma的一键生成网页指导
热门推荐
weixin_60523038的博客
07-14 1万+
无
专为设计师和设计团队量身打造 的一款基于云端的界面设计和协作工具：Figma
最新发布
skywalk8163的专栏
04-18 1236
Figma 是一款基于云端的界面设计和协作工具，专为设计师和设计团队量身打造，旨在提升设计工作的效率和便捷性。Figma怎么寻找和下载公开的webui的图片
2分钟上手用Figma绘制网站页面设计图
weixin_47301844的博客
10-21 1349
8.如果想对页面中各元素的位置布局更有把握，可以打开右边栏中Design里倒数第二个Layout Grid 选择网格或其他参考线。5.如果要使用模板：在左侧的Assets中搜索下载你需要的模板 例如 shop。6.如果想绘制矩形等图形，在最下方工具栏中选择相应图形绘制和移动缩放。4.按A键 在页面右侧选择你要设计的页面的大小规格。7.如果想输入文字，在最下方工具栏中选择“T”1.登陆官网 下载应用或网页端使用。2.注册\登录及走完新手指引。
27-Figma-发现页面制作
billycoder的专栏
01-23 871
27-Figma-发现页面制作 效果 1.搜索完成 搜索图标+文字，自动布局 （搜索图标+文字）+语音按钮，自动布局，等距进行靠左靠右 ios规范，这部分高度为44 2.切换效果 变体组件 3.框的阴影效果 4.绘制列表组件 主要自动布局控制位置就好了 ...
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平台的支付...
flutter开发-figma交互设计图可以转换为flutter源代码-如何将设计图转换为flutter源代码-优雅草央千澈
一颗优雅草科技-央千澈的优快云博客~只想无穷无尽的学习~作息早8-晚8
01-15 1616
Figma2Flutter 和 Figma to Code (HTML, Tailwind, Flutter, SwiftUI) 都是非常有用的插件，但它们各有优缺点，适合不同需求。可能大家听过过蓝湖可以转ui设计图为vue.js，react native代码，那么请问听说过将figma的设计图转换为flutter源代码吗?其次注意，在导出之前要选择屏幕（所谓选择对应的页面），选择页面添加对应的注释，这样才可以正确的转代码。查看压缩包的目录和文件，已经成功转换为flutter代码，
设计提效-Figma技巧篇
m0_73257876的博客
09-06 4323
触发器用于定义原型从一个框架到另一个框架的交互方式。你可以使用原型选项卡中的 Trigger 下拉列表进行设置。智能动画利用Figma内的智能动画，设计师可以轻松地做出丰富的动画效果，例如开关的切换、tab的平移、选择器的滑 动等。简单来说，设计师只需要制作开始帧和结束帧的设计稿，利用触发器将两者串联后，智能动画会帮助设计师补齐过程中发生的动画，你也可以在这个过程中选择 合适的动画曲线让你的动画更具表现力。弹性动画Config 2022的更新中，Figma为设计师专门提供了在原型转换中的弹性动画。
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文件夹。
【Figma】入门第一篇 页面和功能简介 初学者必看
JU_OLG的博客
10-10 3776
本文以网页版 figma 英文为例，简单介绍一下工作台界面上的各个模块的功能，给刚开始使用 figma 的学习者提供一些参考，加速上手。
Figma: 如何在 Web 上构建一个插件系统
趣谈前端
05-05 1273
原文：https://www.figma.com/blog/how-we-built-the-figma-plugin-system/翻译：https://juejin.cn/post/6844903956263501838作者：夏华在 Figma，我们最近解决了迄今为止最大的工程挑战之一：支持插件。我们的插件 API 使第三方开发人员可以直接在基于浏览器的设计工具中运...
【Figma学习】操作工具及其使用一
weixin_47050107的博客
08-10 1万+
Figma学习
figma下载_通过构建7个通用UI动画来掌握Figma中的动画
weixin_26732881的博客
08-03 3693
figma下载Originally published on my personal blog. 最初发布在我的 个人博客上 。 Most designers will spend many hours perfecting every pixel of their static UI designs but will barely spend any time perfecting the t...
Figma 对图片进行模糊处理
qq_15181569的博客
02-25 603
选择图层模糊。
UI设计系列——Figma基础使用day1-1
qq_51553982的博客
03-15 8810
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
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值