22-Figma-常见项目框架搭建

最新推荐文章于 2025-10-22 07:30:00 发布

原创最新推荐文章于 2025-10-22 07:30:00 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#figma #ui设计

ui设计专栏收录该内容

38 篇文章

订阅专栏

本文介绍如何使用Figma搭建常见的项目框架，包括选取合适的设备模板（如iPhone 11 Pro），利用社区资源寻找并应用iOS组件（如状态栏、标题栏、底部菜单栏等），并完成小程序框架的设计。

22-Figma-常见项目框架搭建

完成框架图

在这里插入图片描述

画框模板使用iPhone 11 Pro /X 375×812
顶部状态栏和底部菜单栏,使用组件
组件哪里来?社区搜索"ios 15",选择一个下载量还不错的,然后创建副本
搜到社区的组件,可以切换视图,查看效果(cover/page)
顶部状态栏:44 标题栏:44 底部菜单栏:83
标尺快捷键:shift+r

完成布局网格

在这里插入图片描述

完成小程序框架

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gImCGVih-1642895413153)(22-Figma-常见项目框架搭建.assets/image-20220123074859911.png)]

需要去社区搜索一个小程序组件,然后找到上面的的"胶囊部分"

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

billycoder

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

ARCore：ARCore环境搭建与配置_2024-07-25_19-52-57.Tex

11-20

1295

通过上述步骤，你已经成功创建了一个ARCore项目，并配置了基本的环境检测和AR视图。接下来，你可以开始添加AR功能，如放置虚拟对象在真实世界中，或使用ARCore的其他高级功能。注意：虽然本教程遵循了你的要求，但在实际撰写技术文档时，通常会包含总结性陈述和基本原则的介绍，以帮助读者更好地理解和应用所学知识。ARCore 提供了多种跟踪模式，包括平面跟踪、环境理解、运动跟踪等。自定义AR跟踪允许开发者根据应用需求，调整和优化这些跟踪模式。

Framer与React集成教程_2024-07-22_16-27-12.Tex

11-19

989

Framer 是一个设计和原型制作工具，它允许设计师和开发者使用代码来创建交互式和动态的界面原型。与传统的设计工具不同，Framer 提供了一个更接近实际开发环境的平台，使得原型不仅看起来真实，而且能够像真实应用一样运行。这使得团队能够在设计阶段就体验到应用的动态效果，从而做出更准确的设计决策。

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

Figma 快速入门实践课程（1 小时）

最新发布

软件行业技术文化交流。

10-22

970

Figma是一款基于浏览器的UI/UX设计工具，支持实时协作和免费使用。文章详细介绍了Figma的入门步骤：从认识界面、创建画板、设计简单UI元素（如登录页面），到使用样式组件和制作交互原型。还提供了"天气App"的实战教程，包括设计状态栏、天气信息展示和未来预报等功能。教程包含操作技巧（如快捷键使用、元素对齐）和资源推荐（免费图标库）。最后讲解了如何分享设计和导出资源，适合设计新手快速上手Figma进行界面设计。

23-Figma-标签栏组件制作

billycoder的专栏

01-23

2589

23-Figma-标签栏组件制作效果步骤 1.摆放位置布局网格 2.控制图标和网格水平居中通过绘制一个辅助矩形完成 3.几个图标水平对齐选中5个图标,然后水平对齐图标约束设置为居中 4.制作变体组件绘制单个定义颜色样式复制方式创建另外3个,修改颜色创建多个组件批量修改组件名字,底部栏=首页、底部栏=发现、底部栏=消息、底部栏=我的合并为变体复制使用组件的实例，属性菜单栏可以完成切换 ...

figma-styled-components:Figma UI样式的组件

05-14

Figma样式的组件一组按照Figma UI建模的样式化组件用法 npm i figma-styled-components --save 为了测试该库，我创建了这个Figma插件：，它使用组件来重新创建Figma侧栏。您可以克隆存储库并签出代码，以查看实际Figma插件中组件的一些示例。 import {Button, Checkbox, Input, Label, SectionTitle, Select, Switch, Text} from 'figma-styled-components` <Button> I am a button</Button> ... 文献资料当前文档在在本地使用yarn安装依赖项，然后运行yarn storybook以构建此项目的故事书建造您可以使用yarn build来构建项目去做重构为功能组件重构选择，更好地处理默认选项

「从零开始学习Figma，成为高效设计师的秘诀揭晓！」

DevCorner的Pro技术博客

06-10

907

打开Figma后，我们会看到一个简洁而直观的界面。画布区域：位于中央区域，用于显示我们正在制作的设计作品；左侧面板：包含了各种图层、页面、组件等元素；右侧面板：包含了各种属性、样式、设置等选项；上方菜单栏：包含了各种功能和命令；下方状态栏：显示当前选中元素的信息和操作命令。本篇博客简单介绍了Figma的基础知识和高级应用，以及一些常见的设计原则。通过学习这些内容，我们可以更好地掌握Figma的使用方法，并创造出令人惊叹的设计作品。

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

2401_83303206的博客

08-25

5085

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

UI设计 - figma的使用和心得

2301_78360123的博客

06-27

1199

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

34-Figma-项目组件库搭建与整理-组件命名规范-组件放置位置

billycoder的专栏

01-24

2828

34-Figma-项目组件库搭建与整理-组件命名规范-组件放置位置 1. 组件命名规范页面/类型/具体名称 2.组件放到统一页面中 3.组件和实例之间跳转 4.组件共享

快速搭建Figma插件开发环境：figma-plugin-react-template教程

资源摘要信息:"figma-plugin-react-template是一个专门用于快速启动Figma插件开发的React模板。它提供了一套结构化的代码示例，帮助...通过遵循这个模板，开发者可以更专注于创意和功能实现，而无需从头搭建项目结构。

网页设计原型框架_figma.zip

12-28

在"网页设计原型框架_figma.zip"中，我们找到了"Fabrx Web Design System (Adobe XD Signle License)"，这表明这个压缩包可能包含一个适用于Adobe XD的Web设计系统，但同时也可能与Figma相关，因为设计系统通常会被...

Figma生成代码、生成小程序代码、生成vue代码、codefun插件

热门推荐

weixin_46265708的博客

08-23

1万+

figma生成微信小程序代码、figma生成vue代码、figma生成react代码、figma生成taro代码

24-Figma-APP首页排版（上）

billycoder的专栏

01-23

921

24-Figma-APP首页排版（上）效果 1.头部背景采用线性渐变填充文字位置控制用自动布局,shift+a创建自动布局文字和头像位置用自动布局 Unsplash添加头像新建颜色样式 2.搜索框图标和文字位置,通过自动布局搜索框,通过自动布局设置填充和圆角 3.顶部菜单（图片+文字）套了一个自动布局 4个（图片+文字）又套了一个自动布局选中自动布局里面的元素，可以ctrl+d快速复制元素 4.点部切换变体组件 ...

【Figma学习】组件管理

weixin_47050107的博客

08-12

3378

Figma学习

Figma如何实现移动端预览及溢出滚动

masonqiang的博客

11-09

1万+

简单几个步骤实现在Figma预览时有手机外框，以及溢出内容滚动。

分享一个简单的iphone自定义状态栏例子

KylinBL的专栏

10-19

2914

不多说，上例子： #import //自定义状态栏，状态栏显示灰色背景并【indicator message】。用于耗时操作的状态栏信息提示 //例如：访问网络时，提示正在获取网络数据，或者正在提交数据至服务器等提示 @interface CHStatusBar : UI

【Figma】component set 组件组以导航栏 icon 选中状态为例

JU_OLG的博客

10-10

2028

本文以底部导航栏图标的选中和非选中状态为例简单介绍一下 component set 的用法和效果。

新手进阶指南：Figma全功能解析，开启设计新征程

2403_89603523的博客

12-15

3810

Figma 是一款基于浏览器的在线协作设计工具，它打破了传统设计软件的限制，允许多人实时协作设计项目。无论你是在 Windows、Mac 还是 Linux 系统上，只要有浏览器和网络连接，就可以随时随地使用 Figma 进行设计工作。注册与登录访问 Figma 官方网站，点击“Sign Up”按钮进行注册。你可以使用邮箱注册，也可以通过 Google 或 Slack 账号快速登录。注册成功后，登录到 Figma 平台，你将看到个人工作区页面。创建新项目。