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. 基于Java+SpringBoot+Vue宠物咖啡馆平台设计和实现

    \n文末获取源码联系 感兴趣的可以先收藏起来,大家在毕设选题,项目以及论文编写等相关问题都可以给我加好友咨询 系统介绍: 随着信息技术在管理上越来越深入而广泛的应用,管理信息系统的实施在技术上已逐步成 ...

  2. 领域驱动设计(DDD)分层架构的三种模式

    模式一:四层架构 1.User Interface为用户界面层(或表示层),负责向用户显示信息和解释用户命令.这里指的用户可以是另一个计算机系统,不一定是使用用户界面的人.2.Application为 ...

  3. char字符_C

    字符的表示  字符类型由单引号' '包围,字符串由双引号" "包围. //正确的写法 char a = '1'; char b = '$'; char c = 'X'; char ...

  4. Django 文件导入实现方案

    Django文件导入实现方案 by:授客 QQ:1033553122 开发环境   Win 10   Python 3.5.4   Django-2.0.13.tar.gz 官方下载地址: https ...

  5. 题解：CF1957A Stickogon

    CF1957A Stickogon 题意 题意十分简单,给予你 \(n\) 个棍子,问这些棍子可以构成多少个正多边形. 思路 说是可以构成多少个正多边形,所以我们可以用边最少的正多边形等边三角形来计数 ...

  6. OpenGL 三角形颜色插值

    1.最懒的方法--Nearest Neighbor对于三角形内的点,离三个顶点谁最近,就赋值为那个顶点对应的颜色. 2.最天真的方法--Distance三角形内一点的值应该来自于三个顶点. 计算距离: ...

  7. centos7 扩展硬盘

    新增硬盘后 fdisk -l fdisk /dev/sdb (以后再加改成c) 阿里云叫vdb fdisk -l 注意,最好跟第一块硬盘一样! df -T 查看硬盘分区格式 注意,文件夹不能已存在的! ...

  8. python获取引用对象的个数

    python获取引用对象的个数 使用sys.getrefcount()来获取当前对象被引用了多少次,返回的结果比实际大1 import sys class A: pass a = A() #创建实例对 ...

  9. 【RabbitMQ】07 SpringBoot整合RabbitMQ

    生产者和消费者的依赖基本一致: 注意工程名称不是一样的 <?xml version="1.0" encoding="UTF-8"?> <pro ...

  10. 【Android】看安卓代码的一点笔记

    最近项目需要把安卓项目拉下来看了 简单来说的话,网页是HTML + CSS + JS 组成的,运行环境是浏览器上面 安卓APP应用是 Java + XML 组成的,运行环境是这个安卓系统中 构成结构 ...