Design System

我们做设计通常会 Follow 一个 Design System, 比如 Material Guide.

里头会定义 Font, Color, Effect (Elevation) 等规范.

Style 封装 & 复用

在 Figma 我们可以为我们调好的颜色, 字体命名, 然后通过选择的方式复用它们.

除了颜色, 字体, Effect 也可以用相同的方式来做.

如果想看所有的 Style 我们可以点击空白的画布, 所有封装的 Style 都会出现在右侧栏, 我们还可以移除或者修改它们.

Figma Team Library Style & Component

Component 和 Style 封装以后, 我们就会希望它能 sharing 到各个 page 甚至 project 里头.

但是 Figma 要 sharing component 是需要付费的, sharing style 则免费.

Figma 的收费方式是一个 Team, 里面每个 Designer 都要付费 1 个月大约 USD 15 块.

如果没有付费的话, 能创建的 Project 和 Page 都非常有限.

发布 Library Style & Component

导入 Library Style & Component

只要我是付费 Team Member 那么我就可以导入 Team 里面任何的 Library.

Figma 学习笔记 – Team Library Style and Component的更多相关文章

  1. Angular 学习笔记 ( 创建 library, 转换老旧的 library )

    更新 : 2018-10-28 不知道为什么在 ng 跑一直做不到 .d.ts 最后发现,如果有一个插件 propagating-hammerjs.ts 那么就在 root create 一个 pro ...

  2. vue学习笔记 样式 class style（五）

    使用v-bind数据绑定class和style,v-bind:class可以与传统的class属性共存,其中可以用{}设置多个class,根据条件判断的语法是class名:条件,带-的class名需要 ...

  3. Vue2学习笔记:class和style

    1.用法 <!DOCTYPE html> <html> <head> <title></title> <meta charset=&q ...

  4. [Android学习笔记]Android Library Project的使用

    RT http://developer.android.com/tools/projects/index.html

  5. AngularJs学习笔记--Understanding the Controller Component

    原版地址:http://docs.angularjs.org/guide/dev_guide.mvc.understanding_model 在angular中,controller是一个javasc ...

  6. Ionic2学习笔记（2）：自定义Component

    作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5536298.html                     上一篇提到,Ionic2提供了很多Co ...

  7. V-rep学习笔记：Reflexxes Motion Library 3

    路径规划 VS 轨迹规划 轨迹规划的目的是将输入的简单任务描述变为详细的运动轨迹描述.注意轨迹和路径的区别:Trajectory refers to a time history of positio ...

  8. V-rep学习笔记：Reflexxes Motion Library 2

    VREP中的simRMLMoveToPosition函数可以将静态物体按照设定的运动规律移动到指定的目标位置/姿态.If your object is dynamically enabled, it ...

  9. Solr学习笔记之5、Component（组件）与Handler（处理器）学习

    Solr学习笔记之5.Component(组件)与Handler(处理器)学习 一.搜索篇 拼写检查(spellCheck) 作用:用来检查用户输入的检索内容是否存在,如果不存在则给它提示出相近或相似 ...

  10. AngularJs学习笔记--Understanding the Model Component

    原版地址:http://docs.angularjs.org/guide/dev_guide.mvc.understanding_model 在angular文档讨论的上下文中,术语“model”可以 ...

随机推荐

  1. iOS开发基础99-内购in_app

    今天后台支付校验模块报错,拿到凭证去苹果校验返回的结果如下: { "receipt": { "receipt_type": "Production&q ...

  2. [oeasy]python0123_中文字符_文字编码_gb2312_激光照排技术_王选

    中文编码GB2312 回忆上次内容 上次回顾了 日韩各有 编码格式 日本 有假名 五十音 一字节 可以勉强放下   有日本汉字 字符数量超过20000+     韩国 有谚文 数量超过500 一个字节 ...

  3. SSH指定用户登录与限制

    环境准备 :::info 实验目标:ServerA通过用户ServerB(已发送密钥和指定端口) ::: 主机 IP 身份 ServerA 192.168.10.201 SSH客户端 ServerB ...

  4. Day 2 - 分治、倍增、LCA 与树链剖分

    分治的延伸应用 应用场景 优化合并 假设将两个规模 \(\frac{n}{2}\) 的信息合并为 \(n\) 的时间复杂度为 \(f(n)\),用主定理分析时间复杂度 \(T(n) = 2 \time ...

  5. js 做树形数组查询筛选功能

    对二级菜单进行搜索查询: watch: { librarySearch(val) { if(val == '') { this.libraryFiles = this.libraryFilesAll ...

  6. 【微信小程序】 列表查询功能

    对应本地生活案例: https://www.bilibili.com/video/BV1834y1676P?p=52 HTML代码部分: 就是普通的wx-for指令遍历 <!--pages/cl ...

  7. 【Vue】Re10 Webpack 第二部分(Loader)

    一.Loader解决的问题: Loader解决的问题是让webpack能够打包其他类型的文件 例如CSS.IMG等非JavaScript脚本文件 在后面我们使用Vue组件文件时也需要VueLoader ...

  8. 【Win10】找不到Telnet命令

    百度才发现原来我的Telnet程序就没启动... CMD终端就找不到命令... 但是有一点要注意!不能使用CMD之外的终端访问[GitBash访问无效] 打开控制面板,点卸载程序: 然后点击启动和关闭 ...

  9. 【Vue】15 VueX

    [什么是VueX?] VueX是一个专门为Vue.js应用程序开发的状态管理模式, 采用集中式存储管理应用的所有组件状态, 以相应的规则保证按照一种可预测的方式发生改变. 即把多个组件的变量统一放到一 ...

  10. 工业机器人的力控（Force Control）

    相关: https://baijiahao.baidu.com/s?id=1785676027803650068 机器人编程人员需要提前知道机器人的摩擦力.阻力.质量.重力,等数值,然后建立基于物理模 ...