以下の記事は、TechCrunchJordan Crookさんが記述した「ウェブデザインから退屈な「調整」の繰り返しをなくすFigmaの「Auto Layout」機能」の紹介記事です

Index Ventures、Sequoia、Greylock、Kleiner Perkinsなどの投資家から、8300万ドル(約90億円)近くを調達したデザインツール開発会社のFigmaは、米国時間12月5日にデザイン作業から退屈な「調整」の繰り返しをなくす「Auto Layout」という新機能を発表した。

デザイナーなら、コンポーネントのコンテンツサイズを手動で変更しなければならない煩わしさを、嫌というほど味わっているだろう。例えばウェブページ用に新規でボタンを作成する場合、デザイナーはテキストがボタン内に収まるように手動でサイズ変更する必要がある。もしテキストやサイズが変わった場合、それに応じてすべてを調整しなければならない。この問題は、コンポーネントが多数ある場合には最悪のものとなる。そのすべてを手動で調整しなければならないからだ。

Autl Layoutの設定は、オンかオフか2択だ。オンにすれば、Figmaはデザイナーに代わってすべての調整を行い、コンテンツはコンポーネントの中央に配置される。また、もし新しいコンテンツが追加されたら、それに合わせてコンポーネントが自動調整される。フレーム内のアイテムのサイズが変更されたり、アイテム自体が変更されれば、周りにあるコンテンツはそれに合わせて動的に調整される。

Auto Layoutでは、リストに含まれるアイテムの向きをまとめて垂直から水平に変更したり、元に戻したりすることもできる。リストに含まれる個々のコンポーネントのサイズを調整したり、ワンクリックでリスト内のコンポーネントの順番を並び替えたりすることも可能だ。

Related posts:

【JavaScript】The webpack plugin I can't live without
【JavaScript】6 Reasons Why You Should Learn JavaScript
【Node.js】Node.jsでサーバーサイドJavascriptに挑戦
【JavaScript】Deploying an Image Classifier using JavaScript
【JavaScript】How to build a basic line in D3.js
【JavaScriipt】4 Steps to Get Started With Serverless Functions on Netlify
【JavaScript】JavaScript Clean Code: Error Handling
【Development】20 Augmented and Mixed Reality App Ideas and Inspiration
【JavaScript】GraphQL in JavaScript: An Introduction
【JavaScript】TwitterでYouTubeアプリを起動する
【JavaScript】JavaScript ベスト・オブ・ザ・イヤー 2019
【Docker】Dockerコンテナ内にJSの開発環境を構築し、VS Codeでリモート接続する
【フロントエンド】【Atomic Design入門】Todoアプリを作りながらAtomic Designを理解する
【JavaScript】Visual Studio Code+TypeScriptでJavaScriptの開発をしてみる(超入門)
【フロントエンド】保守性や堅牢性を高める!モダンフロントエンド開発に必要な周辺技術をまとめてみました
【Vue.js】Vue-CLI 4を使用したJavaScript開発環境構築(プロトタイプ版とプロジェクト版)
【フロントエンド】課題解決手法としてのAtomic Designの解釈と実装
【フロントエンド】超安価&超簡単にウェブサイト運用しよう。CircleCIで、GitHubプッシュ→自動でビルド→S3に自動デプロイ
【フロントエンド】3000人に聞いた、2019年最先端のフロントエンド開発者が使ってるツールはこれだ
【React】【業務】『何使ってもいいよ』と言われたプロジェクトにReactを導入して感じた事【利用経験者ゼロ】
【Next.js】Next.js + AWS Amplify + Graphqlで作るサーバーレスアプリケーション環境構築
【特集記事】2020年に身に付けておきたいトップ10のプログラム言語