27-Figma-发现页面制作

最新推荐文章于 2024-01-08 19:15:37 发布

billycoder

最新推荐文章于 2024-01-08 19:15:37 发布

阅读量805

点赞数

分类专栏： ui设计文章标签： figma

本文链接：https://blog.csdn.net/billycoder/article/details/122652372

版权

ui设计专栏收录该内容

38 篇文章 24 订阅

订阅专栏

27-Figma-发现页面制作

效果

在这里插入图片描述

1.搜索完成

在这里插入图片描述

搜索图标+文字，自动布局
（搜索图标+文字）+语音按钮，自动布局，等距进行靠左靠右
ios规范，这部分高度为44

2.切换效果

在这里插入图片描述

变体组件

3.框的阴影效果

在这里插入图片描述

4.绘制列表组件

在这里插入图片描述

主要自动布局控制位置就好了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

billycoder

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

设计提效-Figma技巧篇

m0_73257876的博客

09-06

3903

触发器用于定义原型从一个框架到另一个框架的交互方式。你可以使用原型选项卡中的 Trigger 下拉列表进行设置。智能动画利用Figma内的智能动画，设计师可以轻松地做出丰富的动画效果，例如开关的切换、tab的平移、选择器的滑动等。简单来说，设计师只需要制作开始帧和结束帧的设计稿，利用触发器将两者串联后，智能动画会帮助设计师补齐过程中发生的动画，你也可以在这个过程中选择合适的动画曲线让你的动画更具表现力。弹性动画Config 2022的更新中，Figma为设计师专门提供了在原型转换中的弹性动画。

Figma 插件开发 - Vite 环境搭建

小王的技术库

05-27

2003

最近工作主要和 Figma 插件打交道，梳理一些踩坑的经验~ 开始官方的起始例子：www.figma.com/plugin-docs… 按步骤将插件文件保存到本地即可，调试时可以右键唤起插件，可以关注下几个功能入口： Import plugin from manifest 导入本地插件 Open console 控制台调试 Run last plugin 加载最新的插件目前 figma 插件开发流程没有有效的 hot reload 机制，【加载最新插件】在开发时比较常用，快捷键可以记一下。

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

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

12-28

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

29-Figma-我的页面制作

billycoder的专栏

01-23

781

29-Figma-我的页面制作效果 1.绘制三个圆 2.设置图层模糊 3.让三个圆只在矩形画框中显示拖动3个圆，同时按住ctrl，把3个圆放入画框中，利用画框的裁剪功能，只显示画框区域内容不想3个圆的位置发生改变，可以在图层面板锁定3个圆，减少误触 4.内容部分吸管工具，i 5.4个图标（图标+文字）自动布局 4x（图标+文字）自动布局图标切换，选中图标，属性面板中有交换实例 6.列表组件自动布局 ...

Figma的一键生成网页指导

weixin_60523038的博客

07-14

1万+

无

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

【Figma技巧】如何把Figma里面每个frame分散为单独的page

设计の诗

04-13

2043

在Scripter插件或浏览器控制台里输入以下代码： let af = figma.currentPage.findAll(n => { return n.type === "FRAME" }) af.forEach(n => { let p = figma.createPage() p.appendChild(n) }) 以上代码来自@Mr. Biscuit

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

04-10

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

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

05-27

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

figma制作非常捧的网页模板素材.zip

12-28

本资源包“figma制作非常捧的网页模板素材.zip”正是针对使用Figma进行网页模板设计的一份宝贵资料，包含了UI_Suprematismus_2020.fig文件，旨在帮助设计师们掌握高效、专业的网页模板制作技巧。一、Figma网页模板...

ChromedFigma：Figma html导出chrome扩展

01-30

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

FigmaGen:使用Figma API生成样式代码的命令行工具

05-25

FigmaGen FigmaGen-一个命令行工具，可使用Figma组件为UI样式生成代码。它可以生成：颜色样式文字样式导航 Figma文件世代设定颜色文字样式执照安装可可豆要使用CocoaPods安装FigmaGen，请将以下行添加到Podfile ： pod 'FigmaGen' , '~> 1.0.0' 然后在终端中运行： $ pod install --repo-update 如果使用CocoaPods安装了FigmaGen，则在使用generate命令时，应该使用Pods/FigmaGen文件夹的相对路径： $ Pods/FigmaGen/figmagen generate 自制酒要使用Homebrew安装FigmaGen，请运行： $ brew install hhru/tap/FigmaGen 手动地转到发布页面。下载

从零开始了解Figma：全面介绍这款设计工具，让你熟练运用！

热门推荐

weixin_42113380的博客

06-09

1万+

越来越多的设计团队开始从 Sketch 迁移到 Figma 这是大势所趋。但是这两个工具之间有差异，这篇文章我会为你分享一些无缝切换的技巧。这篇文章来自 Buninux.com。为什么要用这两款工具？Figma 和 Sketch 都非常适合用来创建 UI 界面，并且组织组件库。这两款工具有很多共通的地方，但是它们处理画布和对象的方式有差异。这两款工具都得到了设计界的认可和尊重，两者有着类似的功...

figma客户端_小白的Figma入门手册

weixin_39815925的博客

11-30

5809

全世界都在用Figma不知道你们有没有这种感觉，仿佛有一天，很突然的，全世界都在使用figma,一个软件从无人问津到现在的如日中天，用了不到3年，而现在，它不仅仅是当下的最优生产力工具，在疫情掀起的远程办公的风潮下，它更为我们揭示了未来设计协作的方式。事实正是如此，大批专业设计团队不惜成本尝试由传统设计软件(sketch等)向Figma转型，只因他们于此看到了代表未来的生产力工具及协作方...

用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/ 希望这些提示和建议能够帮助你完成甜品网页的制作。祝你好运！