こんにちは、LINE Growth Technology UITチームの keishima です。普段はフロントエンドエンジニアとして LINEポイントクラブの開発に携わっています。
本記事では、この半年間で LINE Growth Technology のエンジニア・プロジェクトマネージャーと、 LINE のデザイナーがタッグを組んで作成した、LDSG Figma Plugin についてご紹介します。
LDSGとは？
Figma Plugin の話に入る前に、まずは LDSG と、LDSG が提供している Figma Library についてご紹介します。
LDSG とは LINE Design System for Global Family Service の略です。LINEのファミリーサービス間で、一貫したユーザーエクスペリエンス（UX)を提供するためのデザインシステムです。
LDSG は Color, Typography, Icon, Components などから構成され、ファミリーサービスを担当するデザイナーは、これらを利用してサービスのUIデザインを作り上げていきます。
LDSG をベースにしたUIを構成することで、簡単に一貫性のあるユーザー体験と「LINEらしい」トーン＆マナーを提供することができるようになります。
また、LDSG では Web Components も提供しており、フロントエンドエンジニアは簡単にLDSGの仕様に準拠した UIコンポーネントを、サービスで利用できるようになります。
LINE Design System について、もっと詳しく知りたい方は https://creative.line.me/ja/blog/59 や https://designsystem.line.me/LDSG をご覧ください。
Figma でUIデザインを行う際には、 LINE社内向けに提供している Team Library を利用することで、
LDSG で定義されている Typography, Component や Icon などを簡単に呼び出すことができるようになります。
LDSG × Figma の課題
Typographyの変更に手間がかかる
LDSG の特徴的な要素に Language Pack というものがあります。
これは、グローバルにサービスを展開しているLINEならではと言えるものだと思います。
各言語ごとにフォントの見え方は異なるため、例えば "40pt の Bold" を並べても同じようには見えない、といったことがあります。
これをLanguage Packでは、異なる言語でも同じような見え方になるように Typography の定義を工夫しています。
以下のGIFで、Language Packを使う/使わない場合での見え方の違いをわかりやすく確認することができます。
そんな便利な Language Pack ですが、
- ある言語で作成した画面を他言語で表示した際にどう見えるのか
- 今あるテキストをもう少し大きくしたらどう見えるのか
など、Text Style を一部・全体で変更したい場合に、今まではデザイナーがFigma上に配置されたコンポーネントを一つずつ選択して Text Style を変更するしかありませんでした。
Figma の Text Style 選択機能はリストで表示されます。検索機能もありますが、目的の Style を探すためには時間がかかっていました。
Componentsなどを探しにくい
また、LDSG が Figma で提供している Components では、Variant を実現するために複数の子コンポーネントから構成されたコンポーネントがいくつも存在します。
それらは Figma の Assets view にも表示されるため、一覧性が悪いという課題がありました。
LDSG Figma Plugin の機能紹介
LDSG Figma Plugin ではこれまでに紹介した問題を解決するため、Typography, Component Finder, Icon Finder, Assets Finder の4つの機能を提供します。
Typography
Typographyタブでは、以下を提供しています。
- 現在開いているページまたはファイル単位で、一括で言語を変更する機能
- 選択したひとつまたは複数のテキストスタイルを変更する機能
を提供しています。
特に後者の機能は、細かく調整をする際にとても便利な機能です。
選択したテキストを、LDSG で定義されている文字のタイプをベースに、自由自在に変更できるため、言語間の調整の他に
「ここの文字をもう少し大きくしたらどうなるだろう…？」といったデザイン中のあらゆる検証をスピーディーに行うことができます。
Component Finder / Icon Finder / Asset Finder
欲しい Component, Icon, Asset がすぐに見つかるように、Component Finder, Icon Finder, Asset Finder という機能を提供しています。
Component や Icon はとにかく種類が多く、目的のものがすぐに見つけられるように Component / Icon / Asset ごとにタブが独立しています。
それぞれのタブの中で、さらに大カテゴリごとに分類されているので、目的コンポーネントがすぐに見つかるようになっています。
Figma が提供する機能では Variants を構成するための子コンポーネントも表示や検索の対象となってしまいますが、LDSG Figma Pluginではそれらを除外しています。
欲しいコンポーネントの名前がわかっているケースなどでは、自分でワードを入力して、欲しいコンポーネントを探し出すこともできます。
ドラッグアンドドロップで配置することもできますが、キーボードから手を離さなくてもいいように矢印キーで目的のコンポーネントを選択して、Enter(return)キーでそのままコンポーネントを配置することもできます。
まとめ
本記事では LINE の デザインシステムである LDSG と、Figma で利用する際に便利な LDSG Figma Pluginについて紹介しました。
Figma Pluginを作るのは初めてでチャレンジングでしたが、楽しく作ることができました！
また、社内のデザイナーからは「Component を探すのが容易になった」「Typography を簡単に変更できるようになった」と、従来の課題を解決したという嬉しい声も届いています。
技術的な内容（どんな技術選定をしたのかや、ハマりどころ）については、同時に公開した「社内のデザイナーの業務をサポートする LDSG Figma Plugin の工夫したところ、ハマりどころ」という記事をぜひご覧ください！
採用情報
LINE Growth Technology では、このような LINEグループ全体の課題を解決していくプロジェクトマネージャーやエンジニアを募集しています。