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. 24 年 “年薪百万” 的 Java 程序员，都要学什么？

    大家好,我是程序员鱼皮.前几天我看了一篇由国外的 Java 架构师大佬分享的文章,主题是 "Java 架构师必会的 20 个技术". 光看这个标题,就知道在国外做 Java 开发, ...

  2. [oeasy]python0090_极客起源_wozniac_苹果公司_Jobs_Wozniac

    极客起源 回忆上次内容 上次回顾了 DEC公司的兴起 从IBM的大型机 到DEC的小型机Mini Computer 再到DEC的终端 VT-100 计算机基础元器件发生了进化 从ENIAC的 电子管 ...

  3. oeasy教您玩转vim - 91 - # vim脚本编程展望

    ​ vim脚本编程展望 回忆 上次我们彻底研究了vim高亮的原理 各种语法项syntax item 关键字keyword 匹配模式match 区域region 定义好了之后还可以设置链接成组 hi d ...

  4. 如何在 Vue 和 JavaScript 中截取视频任意帧图片

    如何在 Vue 和 JavaScript 中截取视频任意帧图片 大家好!今天我们来聊聊如何在 Vue 和 JavaScript 中截取视频的任意一帧图片.这个功能在很多场景下都非常有用,比如视频编辑. ...

  5. 【VMware VCF】VMware Cloud Foundation Part 01：概述。

    VMware Cloud Foundation(简称 VCF)是 VMware 打造的一套用于 Software Defined Data Center(SDDC)软件定义数据中心的全栈云平台解决方案 ...

  6. 学习笔记--Java中fpackage和import

    package和import 关于Java语言中的包机制: 包又称为package,Java中引入package主要是为了方便管理 怎么样定义 Java源程序的第一行编写package语句 packa ...

  7. Nuxt.js必读：轻松掌握运行时配置与 useRuntimeConfig

    title: Nuxt.js必读:轻松掌握运行时配置与 useRuntimeConfig date: 2024/7/29 updated: 2024/7/29 author: cmdragon exc ...

  8. 基于禅道数据库对bug进行不同维度统计

    工作中经常需要在周报.月报.年报对禅道bug数据进行不同维度统计导出,以下是我常用的统计sql 1.统计2022年每个月bug数(deleted='0'是查询未删除的bug) select DATE_ ...

  9. 【Maxwell】01 安装及入门

    官网地址: https://maxwells-daemon.io/ 下载地址(版本发行): https://github.com/zendesk/maxwell/releases 参考教程自尚硅谷视频 ...

  10. 【JDBC】Extra01 Oracle-JDBC

    关于驱动包依赖: 官网提供的地址: https://www.oracle.com/database/technologies/jdbc-drivers-12c-downloads.html Maven ...