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. ctfshow sql-labs(笔记)

    这是当时做题的时候记得笔记有些乱看不懂的可以私我 判断闭合方式: id=1' and 1=1–+ *正常回显* id=1' and 1=2–+ *异常回显* id=1 and 1=1 *正常回显* i ...

  2. 双指针 & 双向搜索

    双指针 根据人类直觉这个东西需要满足单调性,所以预处理的时候大概率需要排序. 好像常与二分结合使用? 可以用在序列.链表(存储位置)或者树.图上(存储结点). 或者用于其他算法(eg:单调队列.差分) ...

  3. 题解：CF1971D Binary Cut

    题解:CF1971D Binary Cut 题意 给予你一个 \(01\) 字符串,你可以将它分割,分割后必须排成先 \(0\) 后 \(1\) 的格式. 求最少分割为几部分. 思路 将 \(0\) ...

  4. nacos一个奇怪的问题：找不到正确的应用名-环境.后缀名配置文件

    spring: profiles: active: dev application: name: system-api cloud: nacos: server-addr: 192.168.101.6 ...

  5. macOS 常用键盘快捷键

    macOS 常用键盘快捷键大全 - 最值得你记住的 Mac 常用快捷键组合 Pertim 与 Windows 的差异 一切开始前,我们先来认识一下苹果 Mac 键盘上几个陌生的按键,比如 ⌘ (Com ...

  6. Scrapy模块入门与实战：笔趣阁小说网爬取

    scrapy框架基本使用 创建项目(爬取笔趣阁小说网) scrapy startproject novels 创建spider cd novels scrapy genspider bqgui.cc ...

  7. Java---杂记

    1. 当System.out.println()方法的参数是Object类型时,println()方法会自动调用Object对象的toString()方法,然后显示toString()方法返回的字符串 ...

  8. 【DataBase】SQL优化问题

    在DAO层的动态SQL: //订单新增,查询配件主数据 @SuppressWarnings("rawtypes") public PageInfoDto getPartsForPa ...

  9. 【转载】手动DIY制作机械臂

    相关链接: https://news.cnblogs.com/n/703664/ https://www.bilibili.com/video/BV12341117rG https://www.cnb ...

  10. C# 命名空间和程序集 小记

    前言 本文只是为了复习,巩固,和方便查阅,一些知识点的详细知识会通过相关链接和文献标记出来. 命名空间 1.1 概念 可以把命名空间看做字符串,他加在类名或类型名前面并且通过点进行分割 既然看做是字符 ...