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. [oeasy]python0073_进制转化_eval_evaluate_衡量_oct_octal_八进制

    进制转化 回忆上次内容 上次了解的是 整型数字类变量 integer 前缀为i   ​   添加图片注释,不超过 140 字(可选)   整型变量 和 字符串变量 不同 整型变量 是 直接存储二进制形 ...

  2. oeasy教您玩转vim - 5 - # 插入模式

    插入模式 回忆上节课内容 我们总结了,模式切换的方式 命令模式 Normal mode 底线命令行模式 Command mode 帮助文件的正确打开方式 :h 在文档中使用鼠标 set mouse=a ...

  3. 题解：P10723 [GESP202406 七级] 黑白翻转

    背景 汗流浃背了. 分析 容易想到一个显然的思路:以任意节点为根,开始遍历.如果一个节点的子树里面有黑点,那么它必须保留,否则如果它是白点,则可以删去. 但这个方法很容易举出反例: 在这颗树中,如果以 ...

  4. Day 3 - 单调栈、单调队列、凸包与斜率优化

    单调栈 引入 何为单调栈?顾名思义,单调栈即满足单调性的栈结构.与单调队列相比,其只在一端进行进出. 为了描述方便,以下举例及伪代码以维护一个整数的单调递增栈为例. 过程 插入 将一个元素插入单调栈时 ...

  5. 题解：P7482 不条理狂诗曲

    题解:P7482 不条理狂诗曲 本题解借鉴 blossom_j 大佬思路,但这位大佬的题解似乎没放正确代码. 题意 对于每一个 \(a\) 的子区间 \(a_{l\dots r}\),求选择若干个不连 ...

  6. Linux Kernel CFI机制简介及测试禁用

    PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 环境说明   无 前言   当我们为android移植linux ...

  7. 【Python】GUI开发笔记

    一.环境搭建: 1.Pycharm开发工具 pycharm历史版本 https://www.jetbrains.com/pycharm/download/other.html 破解插件 https:/ ...

  8. 【Java】SPI机制

    SPI全称: 服务供应商接口 Service Provider Interface 服务发现机制 入门概念视频来自于: https://www.bilibili.com/video/BV1E44y1N ...

  9. 【Java】Reflection 反射机制 03调用

    调用属性,方法,构造器 属性调用 @Test public void fieldCall() throws NoSuchFieldException, IllegalAccessException, ...

  10. 【Hibernate】Re08 加载策略配置

    一.关联查询的问题: 使用关联查询,例如简单的一对多关系查询,查出一个部门对象和对应的N个员工对象. 如果一般情况下,我们只是需要部门对象,并不关系关联的员工对象,那么Hibernate关联查询出来的 ...