Tagbangers Blog

Abeng Sylvester

Figma の auto layout の紹介

こんにちは、久しぶり、シルベスターです。 最近デザインのタスクが多く、Figma しか触っていない日々が結構多かったんですね笑 デザイン、またはワイヤーフレームを作ってる時って画面が増えていくと修正するのも面倒くさくなるのが自分だけじゃないと思います、 だけど Figma は便利な機能がいっぱいあってすごく助かります笑 そして今日紹介したいのは auto layout です! 目次 Auto Layout とは なぜ Auto Layout を使うのか Auto Layout はどうやって作るの? Auto Layout とは アイテムの間のスペースを保ってくれるグループ的な?笑 アイテムの位...

React map gl と styled component で custom marker を作ってみました

こんにちは、フロントエンドチームのシルベスターです。 React で custom marker を作りたいなーと思っていろいろ調べた結果、 uber の react-map-gl と styled-components を使うと簡単に作れるねってことがわかりました なぜかと言うと、react component として import できて、必要な props を渡すだけでできるから?笑 早速やってみましょう Getting Started React-map-gl npm i react-map-gl Styled-components npm i styled-components マッ...

Mapbox Studioの紹介

Mapbox Studioとは? Mapbox Studio is the Mapbox application for managing your geospatial data and designing custom map styles. Use Mapbox Studio to build and design a map to your exact specifications by uploading and editing your own data, utilizing Mapbox-provided tilesets, adding custom fonts and ico...

簡単な gulp-sass の設定

Read the English article here gulp, gulp-sass のインストール $ npm install gulp gulp-sass -D サンプルのディレクトリ構成 必要なもの:  ソースディレクトリ アウトプットディレクトリ gulpfile.js 今回の場合,  ソースディレクトリとアウトプットディレクトリはそれぞれ、./sass と ./css となる。  gulpfile.js の設定 gulpfile.js を以下のように設定する gulpfile.js const gulp = require('gulp') const sass = requi...