2019年9月11日

デザイン

【Figma】OpenType機能のサポートを開始

目次

  1. はじめに
  2. OpenType機能とは
  3. Figmaで実装されたOpenType機能
  4. OpenType interactive playground
  5. まとめ

はじめに

本記事では2019年9月5日にFigmaに新しく導入されたOpenType機能についてご紹介します。

Figmaを開いた際に簡単な案内は出てきますが、いまいちどういった変更があったのかぴんと来てない方やOpenTypeについてもっと知りたい方に向けた記事になります。

なお、本記事はFigma Blogで発表された記事、「An ode to OpenType: Fall in love with the secret world of fonts」を参考にしております。
元の公式の記事を読みたい方はこちらからご覧ください。

1.png (76.7 kB)

OpenType機能とは

まずは、OpenType機能とはどういうものなのかを説明します。

すでにご存知の方は、Figmaで実装されたOpenType機能にスキップしてください。

OpenType機能とはOpen Typeフォントの機能の1つとして搭載されている、「合字」や「字体切替」「ペアカーニング」などの高度な機能を利用可能にする機能です。

文字だけだとわかりにくいので、実際にいくつか例を見ていきます。
Figmaの公式ブログでMarcin Wicharyさんが紹介している例が分かりやすく、感動するくらい綺麗なのでこちらを見ていきましょう。

OpenType機能を使えば、歴史的なレターフォームを表示することができます。

「An ode to OpenType: Fall in love with the secret world of fonts」より

中にはモダンなフォントの中に歴史的な合字を入れ込んだりすることもできます。

「An ode to OpenType: Fall in love with the secret world of fonts」より

エンジニアの方にも使えるOpenType!

「An ode to OpenType: Fall in love with the secret world of fonts」より

数字を使う方であれば、このように少しスパイスを加えることができます。

「An ode to OpenType: Fall in love with the secret world of fonts」より

グラフィックデザイナーの方であれば、こんなのが使えるでしょうか

「An ode to OpenType: Fall in love with the secret world of fonts」より

UIを向上させるOpenType機能ももちろんあります!

「An ode to OpenType: Fall in love with the secret world of fonts」より

設定を変えるだけで、全く違うフォントに見えるOpenTypeも…!

「An ode to OpenType: Fall in love with the secret world of fonts」より

このようにOpenType機能の世界は非常に広く、深いです。
Figmaがサポートを開始してくれたことにより、さらにこのような高度な文字組が身近になりました。

Figmaで実装されたOpenType機能

それでは、このOpenType機能がどのようにFigmaで実装されたのか見てみましょう。

テキストレイヤーを掴むと、右側のプロパティパネルに「Text」という項目が出てきます。
そちらの右下にある3つの点(ミートボールメニューとも呼ばれています)、をクリックすると「Type Details」というパネルが出てきます。

こちらのパネルでOpenType機能が使えます。

パネルの実際の使用動画です。

「An ode to OpenType: Fall in love with the secret world of fonts」より

OpenType機能は様々なバリエーションがあり、奥が深いですが、分かりやすいよう、Figmaの方でグループ分け、カテゴリ分けをしてくれています。

今選択しているテキストにどの変更が効くか、項目の文字色で確認することができます。項目の文字色がグレーアウトされている場合は、その項目を変更してもテキスト自体には見た目の変化はでないので、別の項目を見た方が良いでしょう。

ポイント

  • どのような見た目になるのか不安な場合は、プレビュー機能を使いましょう。変更箇所にホバーするだけで、どのような変更が適用されるのか上のプレビューエリアで確認することができます。

OpenType interactive playground

すごそうだけど、どこからはじめたら良いかわからない…。
そもそもどのフォントにどういうOpenType機能が備わっているかわからない、という方向けにFigmaが素敵なファイルを用意してくれています。

playground

「An ode to OpenType: Fall in love with the secret world of fonts」より

そのファイルはこちらのOpenType interactive playgroundです。
こちらのファイルを開くと、元のOpenType interactive playgroundファイルのコピーが作成されます

こちらでは全てのユーザーが使えるよう、Google Fontの中で遊べるOpen Type機能がまとめてあります。

1.gif (3.2 MB)

このように自由に項目を変更することで合字などで遊ぶことができます。

2.gif (2.6 MB)

この辺りも面白いです!
矢印がアイコンになったり、paper scissors stoneが実際のじゃんけんの手の形のアイコンで出てくるのはユーモアがあって良いなーと思いました。

まとめ

以上、今回は2019年9月5日にFigmaに新しく導入されたOpenType機能についてご紹介しました!

数字の見た目やカーニングなど、UIの役に立つものから、合字などグラフィックデザインで活かせるものなどfigmaのタイポグラフィでできることがさらに幅広くなったので、もしよければぜひチェックしてみてください。

また、ベーグリーでは他にもFigmaに関する記事があるので、ぜひご覧ください。

Figmaの基本【これからはじめるFigma】

さらに詳しく本アップデートについて知りたい方はFigmaの公式ブログをご覧ください。
「An ode to OpenType: Fall in love with the secret world of fonts」

0

0

AUTHOR

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

eishisでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

新しい技術が好きなWebエンジニアです。 元々インフラやPHPをやっていたのですが、最近はReact NativeとFirebaseを使って頑張ってます。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザイン・HTML/CSSマークアップ・JSアニメーション実装を担当しています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

CONTACT PAGE TOP