<commit_before>+++
title = "デザインアセットを管理・共有してSketchですぐ使えるLINGOが便利。デザインシステムとの相性も抜群"
date = "2018-02-10T00:46:13+10:00"
update = ""
draft = true
categories = ["design"]
tags = ["App"]
description = ""
id = "201802_lingo"
css = false
js = false
contentlist = false

+++

## Lingo
{{< embed-card
    "https://www.lingoapp.com/"
    "https://static.lingoapp.com/assets/images/twitter/lingo-share-image-facebook-v2.jpg"
    "Lingo: A design library for everyone"
    "www.lingoapp.com"
>}}

Lingoはカラー、画像、ベクター素材、タイポグラフィ(フォントのスタイル)、テキスト情報などをライブラリとして登録し、かんたんに書き出したりSketchやPhotoshopにドラッグ・アンド・ドロップですぐに使えるようにする超便利ソフトです。

### 導入

### 使い方

### 値段


## 余談: デザインシステム
最近、<b>デザインシステム</b>に触れる機会があり、自分なりにいろいろ勉強してみています。デザインシステムは、あるサービスについてのビジュアルスタイル(色・タイポグラフィ・ロゴなどのアセット)、デザインの方向性、さらにはその根幹にある企業・プラットフォームの思想などを詳細なドキュメントにまとめたものです。日本でもだんだんと聞くようになってきた言葉ですが、明確な定義があるわけではなく、企業によって定義している内容・形式は様々です。重要なのは、ただのスタイルガイドではなく、デザインのねっこにある目的・企業が目指したい目的・ユーザーとのコミュニケーションまで考えて方向性を定めるものであることです。

例としては[Material Design](https://material.io)や[Atlassian Design](https://atlassian.design/)などがあります。

デザインシステムの概念については、以下のブログ記事がとても参考になります。

{{< embed-card
    "https://yory.design/note/dmm-designsystems/"
    "https://yory.design/wp-content/uploads/2017/12/20375ced40379f1e8ea26f8e6c287f04-3-1024x576.png"
    "「Atomic Design & Design Systems」をお話させて頂きました | よりデザイン"
    "yory.design"
>}}<commit_msg>modify lingo.md<commit_after>+++
title = "デザインアセットを管理・共有してSketchですぐ使えるLINGOが便利。デザインシステムとの相性も良さそう"
date = "2018-02-10T00:46:13+10:00"
update = ""
draft = true
categories = ["design"]
tags = ["App"]
description = ""
id = "201802_lingo"
css = false
js = false
contentlist = true

+++

## Lingo
{{< embed-card
    "https://www.lingoapp.com/"
    "https://static.lingoapp.com/assets/images/twitter/lingo-share-image-facebook-v2.jpg"
    "Lingo: A design library for everyone"
    "www.lingoapp.com"
>}}

Lingoは色、タイポグラフィ、画像、ベクターアイコン、テキスト情報などをアセットとして登録し、かんたんに書き出したりSketchにドラッグ・アンド・ドロップですぐに使えるようになるライブラリを作成できるMac用ソフトです。複数人で使うことを前提としており、GitのようにPull(ライブラリの変更をダウンロードする)とPush(ライブラリに変更をアップロードする)を行えます。Lingoアプリからすぐに画像を書き出したり、PhotoshopやIllustratorに直接配置することもできます。

## 導入
[トップページ](https://www.lingoapp.com/)から「Get The Mac App」をクリックしてdmgファイルをダウンロードし、ダブルクリックでインストールします。利用にはアカウント登録が必要なので、アプリ起動後「Create account instead」をクリックしてアカウントを作成しましょう。

Sketchで使用するためにはPluginがあると便利ですので、Lingo起動後に上部メニューから設定を開き、Advancedタブから「Install Sketch plugin」をクリックしましょう。

## 使い方
Lingoライブラリの構成には以下の階層があります。

- Space: もっとも大きいグループです。全然関係のない企業やサービスのライブラリは別のSpaceに分けるとよいでしょう。Slackのワークスペースに近い概念です。
- Kits: スペースの中でグループわけするための概念です。Slackのチャンネルに近いかもしれません。ひとつの企業・サービスの中で、デバイスやジャンルごとに整理したいときなどに使います。
- Section: Kitsの中でさらにグループ分けできます。
- Heading: 

たとえばですが、以下の画像のように分けるイメージです。

!

### アセットの登録

### アセットの利用

### デフォルトライブラリ




## 値段
無料版では登録できるアセットの上限が250までに制限されています。この制限を解除するためには有料プランに加入し、月額もしくは年額で料金を支払います。この料金は人数に応じて変化します。詳細は以下のリンクからご確認ください。

{{< embed-line
    "https://www.lingoapp.com/pricing/"
    "Lingo: Pricing"
>}}

なお、無料版では利用人数の制限がないのに対し、有料版になると人数制限が発生し、料金に応じて増加できる仕組みのようです。

## 余談: デザインシステム
最近、<b>デザインシステム</b>に触れる機会があり、自分なりにいろいろ勉強してみています。デザインシステムは、あるサービスについてのビジュアルスタイル(色・タイポグラフィ・ロゴなどのアセット)、デザインの方向性、さらにはその根幹にある企業・プラットフォームの思想などを詳細なドキュメントにまとめたものです。日本でもだんだんと聞くようになってきた言葉ですが、明確な定義があるわけではなく、企業によってまとめている内容・形式は様々です。重要なのは、ただのスタイルガイドではなく、デザインのねっこにある目的・企業が目指したい目的・ユーザーとのコミュニケーションまで考えて方向性を定めるものであることです。

例としては[U.S. Web Design System](https://designsystem.digital.gov/design-principles/)や[Atlassian Design](https://atlassian.design/)、[Material Design](https://material.io)などがあります。

デザインシステムの概念については、以下のブログ記事がとても参考になります。

<div>
{{< embed-card "https://yory.design/note/dmm-designsystems/" "https://yory.design/wp-content/uploads/2017/12/20375ced40379f1e8ea26f8e6c287f04-3-1024x576.png" "「Atomic Design & Design Systems」をお話させて頂きました | よりデザイン" "yory.design" >}}
</div>

デザインシステムにおいては、「生きているデザインシステム」にする( = 常に内容がアップデートされている、最新版の実装画面と内容が変わったりしない )  ことがとても大事です。そのためには
{'fraction_non_alphanumeric': 0.13078523140925638, 'fraction_numerical': 0.031981279251170044, 'mean_word_length': 8.07311320754717, 'pattern_counts': {'":': 0, '<': 14, '<?xml version=': 0, '>': 14, 'https://': 15, 'lorem ipsum': 0, 'www.': 6, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1754491', 'n_tokens_mistral': 2757, 'n_tokens_neox': 2536, 'n_words': 140}