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

最新推荐文章于 2023-11-02 17:31:04 发布
最新推荐文章于 2023-11-02 17:31:04 发布
阅读量1.1k 收藏
点赞数
分类专栏： ui设计 文章标签： figma ui设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/billycoder/article/details/122647118
版权

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)]

需要去社区搜索一个小程序组件,然后找到上面的的"胶囊部分"
billycoder
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
UI设计 - figma的使用和心得
2301_78360123的博客
06-27 691
一.Figma的优点1.作为一种交互设计工具，Figma在UI设计中有很多优点2.使用Figma进行UI设计的心得二.Figma的使用。
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来构建项目 去做 重构为功能组件 重构选择，更好地处理默认选项
23-Figma-标签栏组件制作
billycoder的专栏
01-23 1996
23-Figma-标签栏组件制作 效果 步骤 1.摆放位置 布局网格 2.控制图标和网格水平居中 通过绘制一个辅助矩形完成 3.几个图标水平对齐 选中5个图标,然后水平对齐 图标约束设置为居中 4.制作变体组件 绘制单个 定义颜色样式 复制方式创建另外3个,修改颜色 创建多个组件 批量修改组件名字,底部栏=首页、底部栏=发现、底部栏=消息、底部栏=我的 合并为变体 复制使用组件的实例，属性菜单栏可以完成切换 ...
24-Figma-APP首页排版（上）
billycoder的专栏
01-23 658
24-Figma-APP首页排版（上） 效果 1.头部 背景采用线性渐变填充 文字位置控制用自动布局,shift+a创建自动布局 文字和头像位置用自动布局 Unsplash添加头像 新建颜色样式 2.搜索框 图标和文字位置,通过自动布局 搜索框,通过自动布局设置填充和圆角 3.顶部菜单 （图片+文字）套了一个自动布局 4个（图片+文字）又套了一个自动布局 选中自动布局里面的元素，可以ctrl+d快速复制元素 4.点部切换 变体组件 ...
【Figma学习】组件管理
weixin_47050107的博客
08-12 2355
Figma学习
minvu-projects:敏武相关项目
07-21
3. **Maven 或 Gradle 构建工具**：在 Java 开发中，Maven 或 Gradle 是常见的构建工具，它们负责项目的依赖管理、构建过程和打包。项目名中的 "master" 可能意味着它是主分支，通常在 Git 版本控制系统中，这表示是...
TravelerSociaApp-UiKit：开源的UiKit
02-04
对于创业团队或希望快速验证产品概念的开发者来说，这样的UiKit是宝贵的资源，可以迅速搭建出应用的基本框架，进行早期的用户测试。 10. **持续更新**： 开源项目往往伴随着持续的维护和更新，随着设计趋势和技术...
网页设计原型框架_figma.zip
12-28
在"网页设计原型框架_figma.zip"中，我们找到了"Fabrx Web Design System (Adobe XD Signle License)"，这表明这个压缩包可能包含一个适用于Adobe XD的Web设计系统，但同时也可能与Figma相关，因为设计系统通常会被...
flato-lite.rar
05-18
文件名"flato-lite"很可能是指整个框架的主文件，可能包含了PSD、Sketch、Figma等多种格式的设计源文件，便于不同设计软件的用户使用。此外，还可能包含矢量图形、图标库、字体样式以及颜色代码等辅助设计资料，这些...
CUNY-Hackathon-2021
03-14
7. **云服务**：如AWS、Google Cloud或Azure，这些云服务提供计算、存储和部署解决方案，方便快速搭建和扩展项目。 8. **数据处理和分析**：对于数据驱动的项目，数据清洗、预处理和分析是必不可少的步骤，可能需要...
Figma如何实现移动端预览及溢出滚动
masonqiang的博客
11-09 8274
简单几个步骤实现在Figma预览时有手机外框，以及溢出内容滚动。
「从零开始学习Figma，成为高效设计师的秘诀揭晓！」
DevCorner的Pro技术博客
06-10 694
打开Figma后，我们会看到一个简洁而直观的界面。画布区域：位于中央区域，用于显示我们正在制作的设计作品；左侧面板：包含了各种图层、页面、组件等元素；右侧面板：包含了各种属性、样式、设置等选项；上方菜单栏：包含了各种功能和命令；下方状态栏：显示当前选中元素的信息和操作命令。本篇博客简单介绍了Figma的基础知识和高级应用，以及一些常见的设计原则。通过学习这些内容，我们可以更好地掌握Figma的使用方法，并创造出令人惊叹的设计作品。
figma-组件库建立
基本无害的博客
03-23 3513
组件库
分享一个简单的iphone自定义状态栏例子
KylinBL的专栏
10-19 2823
不多说，上例子： #import //自定义状态栏，状态栏显示灰色背景并【indicator message】。用于耗时操作的状态栏信息提示 //例如：访问网络时，提示正在获取网络数据，或者正在提交数据至服务器等提示 @interface CHStatusBar : UI
10个国内设计师都在用的Figma插件分享给你，超实用！
最新发布
2301_79733101的博客
11-02 801
随着设计工具的不断发展和持续创新，产生了许多实用的小插件，可以帮助设计师朋友们有效提高设计效率，节省不必要的设计时间和设计精力到意义和价值更高的设计部分上去。而Figma作为一个功能丰富有强大的专业设计工具，深受国内设计师的喜爱，拥有众多粉丝用户。那么你知道哪些Figma插件更好用吗？有哪些高效实用的Figma插件？今天本文总结了10个高效实用的Figma插件分享，可千万别错过了！
【Figma学习】App制作一
weixin_47050107的博客
08-16 916
Figma学习
Figma
weixin_47401619的博客
01-25 2480
figma
Figma高效工作秘笈:10个插件助你提效！
FourxiYuanzi的博客
08-11 613
Figma本质上是遵循特定接口规范开发的小程序,对设计师来说,合理选择和使用Figma插件,可以极大地优化工作流程。不同的插件具有不同的用途,设计师可以根据实际需求选择适合的插件。市面上存在各种各样的Figma插件,初学者可能会不知所措。本文将推荐10款广受设计师欢迎、功能实用的Figma插件,这些插件不仅能提升工作效率,也可应用于生活创作中。
从0到一开发微信小程序（7）—小程序组件库(提高开发效率)
zhouhengzhe的博客
09-22 3375
Vant 是一个轻量、可靠的移动端组件库，于 2017 年开源。目前 Vant 官方提供了Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护React 版本和支付宝小程序版本。
Figma-Low-Code
05-11
Figma-Low-Code是一种基于Figma设计工具的低代码平台，它允许用户通过可视化方式，快速创建Web和移动应用程序的原型和交互界面，无需编写代码。Figma-Low-Code平台提供了丰富的组件库、模板和插件，用户可以通过拖拽...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值