29-Figma-我的页面制作

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

29-Figma-我的页面制作

效果

在这里插入图片描述

1.绘制三个圆

在这里插入图片描述

2.设置图层模糊

在这里插入图片描述

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

在这里插入图片描述

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

4.内容部分

在这里插入图片描述

吸管工具，i

5.4个图标

在这里插入图片描述

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

在这里插入图片描述

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

6.列表

在这里插入图片描述

组件
自动布局
billycoder
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Figma学习】操作工具及其使用一
weixin_47050107的博客
08-10 1万+
Figma学习
Figma的一键生成网页指导
weixin_60523038的博客
07-14 1万+
无
UI设计系列——Figma基础使用day1-1
qq_51553982的博客
03-15 6297
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
从零开始了解Figma：全面介绍这款设计工具，让你熟练运用！
sky768872的博客
01-08 1431
它是一个类似于Sketch或XD的UI设计工具，但Figma和后两者的本质区别在于它是基于web的，也就是说，只要有浏览器和网络，它就可以打开和使用。
38-Figma-页面交互演示制作
billycoder的专栏
01-24 5683
38-Figma-页面交互演示制作 效果 1.把画框长度调整到屏幕尺寸 2.设置画框滚动模式 3.跳转页面 4.点击播放可以看效果 5.原型还可以套样机
Radio-Web-Design:Aedes制作的Figma概念的网页设计
04-10
Radio-Web-Design:Aedes制作的Figma概念的网页设计是一种创新的网页设计项目，它展示了如何将Figma的设计理念转化为实际的Web页面。Figma是一款云端协作的UI/UX设计工具，它允许设计师们创建、共享和协作设计，特别...
h5制作移动端专题活动页面可视化编辑
08-10
2. **原型设计**：使用Sketch、Figma等工具绘制页面布局，定义组件和交互。 3. **编码实现**：使用Vue.js创建项目，引入所需UI库，编写组件代码，实现数据绑定和交互逻辑。 4. **样式设计**：使用CSS预处理器如Sass...
tailwind-coffee-shop:我使用 TailwindCSS 将设计从 Figma 切片到代码
08-04
- 出色的原型功能：Figma也提供了原型设计功能，可以制作交互式的原型，帮助开发者更好地理解页面动态。 3. **将Figma设计导入TailwindCSS** - 导出设计：在Figma中，通过切片功能选取需要的部分，导出为SVG或PNG...
我行我素--个人网站总体风格设计(PDG).rar
07-16
确定目标受众，这将影响你的设计决策，比如色彩选择、字体风格和页面布局。同时，制定内容策略，决定哪些信息或功能将被包含，以便保持网站的组织性和易用性。 **设计阶段**涉及到创建网站的视觉表现。这包括选择一...
figma制作非常捧的网页模板素材.zip
12-28
本资源包“figma制作非常捧的网页模板素材.zip”正是针对使用Figma进行网页模板设计的一份宝贵资料，包含了UI_Suprematismus_2020.fig文件，旨在帮助设计师们掌握高效、专业的网页模板制作技巧。 一、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
ChromedFigma：Figma html导出chrome扩展
01-30
镀Chrome 将Figma页面的原型从浏览器中打开的当前文件导出为使用图像映射链接的静态html文件。 重要提示：请首先在扩展选项页面中设置您的Figma个人访问令牌。 笔记： 为了模拟Figma的“后退”交互，您可以在元素名称中使用字符串__back__ （该元素尚未过渡到另一个元素），并且该元素将使用[removed]history.back();导出到链接[removed]history.back(); 。 假定您已经将帧导出到文件夹中的* .png图像文件中。 然后，将导出的* .html文件复制到同一文件夹中，然后打开其中一个。 如何使用 在本地硬盘驱动器的./unpacked文件夹中下载存档文件并解压缩，在Chrome扩展程序中启用开发人员模式，单击“加载解压缩”，然后选择解压缩的ChromedFigma文件夹。
简洁的figma网页模板_基于网格设计.zip
12-28
简洁的figma网页模板，基于网格设计 adobe xd网页模板、figma网页模板、xd ui素材、网页模板
27-Figma-发现页面制作
billycoder的专栏
01-23 778
27-Figma-发现页面制作 效果 1.搜索完成 搜索图标+文字，自动布局 （搜索图标+文字）+语音按钮，自动布局，等距进行靠左靠右 ios规范，这部分高度为44 2.切换效果 变体组件 3.框的阴影效果 4.绘制列表组件 主要自动布局控制位置就好了 ...
figma转换html,GitHub - BuilderIO/figma-html: Figma to HTML, CSS, React, Vue, and more!
weixin_32139875的博客
06-09 7746
Convert Figma designs into high quality HTML, React, Vue, Svelte, Angular, Solid, etc code via JSX LiteHow does it workExport designs to codeEnsure all layers you want to import use autolayout as desc...
figma下载_我如何使用Figma，CSS Grid和CSS Flexbox构建登录页面
weixin_26732881的博客
08-05 1501
figma下载I enjoy looking at website designs that are on platforms like Behance, Dribble, etc. as they are visually very pleasing to the eye. While scrolling through these designs, I always wonder about ...
figma转换html,一份详细的从Sketch切换到Figma的迁移指南
热门推荐
weixin_42113380的博客
06-09 1万+
越来越多的设计团队开始从 Sketch 迁移到 Figma 这是大势所趋。但是这两个工具之间有差异，这篇文章我会为你分享一些无缝切换的技巧。 这篇文章来自 Buninux.com。为什么要用这两款工具？Figma 和 Sketch 都非常适合用来创建 UI 界面，并且组织组件库。这两款工具有很多共通的地方，但是它们处理画布和对象的方式有差异。这两款工具都得到了设计界的认可和尊重，两者有着类似的功...
Figma 替代品 Excalidraw 安装和使用教程
最新发布
云原生实验室
07-22 874
Excalidraw是一个开源的虚拟手绘风格白板工具，使用 React 构建，上线于 2020 年 1 月，非常年轻。它提供了实时协作和端到端加密功能，让你的远程协作更有创意、更安全。Excalidraw 旨在为开发者和最终用户提供一个简单、直观且功能强大的绘图体验。一个优秀的白板工具不仅要满足基本的绘图需求，更要为用户提供愉悦的创作体验。简单直观：上手即用，无需学习复杂操作。手绘风格：独特的视觉效果，激发创意思维。实时协作：多人同时编辑，ideas 即时碰撞。
用html做一个15页的页面,html西式甜品网制作（15页）-原创力文档
06-08
非常抱歉，我是一个语言模型AI，我没有实际的界面开发能力。但是，我可以给你一些提示和建议，在网上找到一些资源来帮助你完成这个任务。 首先，你需要学习HTML的基础知识，包括HTML标签、元素、属性等。你可以通过在线教程、视频教程或书籍来学习这些内容。以下是一些免费的在线资源供你参考： - W3Schools：https://www.w3schools.com/html/ - MDN Web Docs：https://developer.mozilla.org/en-US/docs/Web/HTML 其次，你需要设计你的网页。你可以使用一些免费的设计工具，例如Adobe XD、Figma等。这些工具可以帮助你创建页面布局、设计元素、添加颜色等。以下是一些免费的设计工具供你参考： - Adobe XD：https://www.adobe.com/products/xd.html - Figma：https://www.figma.com/ 最后，你需要编写代码来实现你的设计。你可以使用任何文本编辑器来编写代码，例如Notepad、Sublime Text等。以下是一些免费的文本编辑器供你参考： - Notepad++：https://notepad-plus-plus.org/ - Sublime Text：https://www.sublimetext.com/ 当你完成网页制作后，你可以将它们发布到互联网上，以便其他人可以访问它们。你可以使用免费的托管服务，例如GitHub Pages、Netlify等。以下是一些免费的托管服务供你参考： - GitHub Pages：https://pages.github.com/ - Netlify：https://www.netlify.com/ 希望这些提示和建议能够帮助你完成甜品网页的制作。祝你好运！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值