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. FFmpeg开发笔记（三十九）给Visual Studio的C++工程集成FFmpeg

    ​<FFmpeg开发实战:从零基础到短视频上线>一书的"第11章  FFmpeg的桌面开发"介绍了如何在Windows环境对Qt结合FFmpeg实现桌面程序,那么Win ...

  2. ffmpeg中声音解码的流程

    声音解码流程: audio初始化 fifo初始化frame初始化init_resampler 解码: 如果有帧 初始化转码空间 做转码操作 resampler 放入fifo fifo是否大于 一帧数据 ...

  3. C# 12 新增功能实操！

    前言 今天咱们一起来探索并实践 C# 12 引入的全新功能! C#/.NET该如何自学入门? 注意:使用这些功能需要使用最新的 Visual Studio 2022 版本或安装 .NET 8 SDK ...

  4. SEO初学者指南之什么是SEO

    前言 Hi,大家好,我是听风.欢迎来到SEO基础入门指南.在这个博客中主要教大家SEO的基础知识,以谷歌SEO为主,重点放在实操方面. 虽然是基础入门教程,但我希望朋友们不要对"初学者&qu ...

  5. 优化 GitHub 体验的浏览器插件「GitHub 热点速览」

    上周,GitHub 有个"安全问题"--CFOR(Cross Fork Object Reference)冲上了热搜,该问题的表现是: 远程仓库的提交内容任何人可以访问,即使已被删 ...

  6. Fiddler的工作原理

    Fiddler是位于客户端和服务器端中间的HTTP代理,是目前最常用的http抓包工具之一 . Fiddler抓取客户端和服务器之间的所有HTTP请求后进行分析.断点.过滤等操作. Fiddler可以 ...

  7. 【Java】File 文件类

    File 文件类 File类的一个对象,代表了一个文件和一个文件目录/文件夹 File类所属在java.io 的包下 构造器部分 - 以parent为父文件,child为子路径创建File对象,可以理 ...

  8. 【Spring-Security】Re04 Matchers配置规则API

    一.使用antMatchers放行静态资源: package cn.zeal4j.configuration; import cn.zeal4j.handler.FarsAuthenticationF ...

  9. 智能机器人（双足机器人、四足机器人、人形机器人humanoid）与自动驾驶技术/FSD(Full Self-Drive)“完全自动驾驶”在技术领域的相关性？

    前文: https://www.cnblogs.com/devilmaycry812839668/p/18079439 前文中已经说了,对于能力强大的机器人公司来说,软件和AI技术并不是难点,真正的难 ...

  10. jax框架为例：求hession矩阵时前后向模式的自动求导的性能差别

    注意:本文相关基础知识不介绍. 给出代码: from jax import jacfwd, jacrev import jax.numpy as jnp def hessian_1(f): retur ...