Design – ソフトウェアエンジニアの技術ブログ：Software engineer tech blog

[Figma] colorのstyleの登録

Fillから「+」でstyleを選択して、登録したいstyle nameを入れる

フリーのアイコンサイト
https://www.flaticon.com/

■SVGのメリット
ベクター形式：拡大・縮小しても画質が劣化しない
編集可能：Figma上で色やサイズを自由に変更できる
軽量：同じ解像度のPNGよりファイルサイズが小さい場合が多い
デザインシステムとの相性：コンポーネント化して再利用しやすい

■PNGを使う場合
ラスタ形式：解像度に依存するので拡大するとぼやける
編集不可：Figma上で色や形を直接変更できない
適した用途：
写真やテクスチャを含むアイコン
細かいグラデーションや影付きアイコン

SVGもコンポーネント化される

なるほど〜　ちょいちょい勉強になるね！

[Figma] AutoLayoutとは？

1. Auto Layoutとは？
通常のFrameは固定配置ですが、AutoLayoutを設定すると、要素を自動整列できる
– 横並び(ボタン内のアイコン+テキスト)
– 縦並び(フォームのラベル+入力欄)

2. Auto Layoutの設定方法
要素を2つ選択してShift + A

うーん

[Figma] デザインを効率化・再利用する仕組みコンポーネント

### コンポーネントとは？
Figma内で再利用できる「部品テンプレート」です。
– 元（Main component）を変更すると、コピー（Instances）全てに反映される
– チームで一貫したデザインを維持できる
– 例えば「ボタン」「カード」「ヘッダー」などで使う

まずcomponentの作成

componentをフレームで利用する

テキスト内容は変更できる

### Variants
複数のデザインパターンを切り替えられるようにする
props = hover, default, … などと選択できるようにしていく

なるほど！なかなか奥が深い！

左ツールバーの Text (T) を選択
画面にクリックして文字入力（例：「メールアドレス」）
ステップ2：文字の属性を変更
右パネルの Text セクションで変更可能：
Font family：フォントの種類
Weight：太さ（Regular, Bold, etc.）
Size：フォントサイズ
Line height：行の高さ
Letter spacing：文字間隔
Text decoration：下線・打ち消し線など

毎日5~10分でも変わりそうやな

Figmaでフレームの操作から学ぶ

rectangleで背景色を作る
#F5F7FA

画像を配置する

ポイントととしては、フレームから作成するのね。勉強になりました。

Reactの環境構築 & AntDesign

$ node –version
v16.13.2
$ npx create-react-app react_app
$ yarn start
http://192.168.56.10:3000/
=>　問題なければstopする

ant designもインストール
$ npm install antd
$ npm audit fix –force

srcディレクトリ内で作業
App.js

function App(){
  return (
      <div className='App'>
        <header className='App-header'>
        </header>
      </div>
    )
}

import {
	BellFilled,
	CaretDownOutlined,
	FormOutlined,
	UserOutlined,
} from '@ant-design/icons/lib/icons';
import { Avatar, Col, Input, Row, Typography } from 'antd';

function App(){
  return (
      <div className='App'>
        <header className='App-header'>
        	<div>
        		<Title>Hpscript</Title>
        		<div>
        			<CaretDownOutlined />
        			<Input placeholder='キーワードを入力' />
        		</div>
        		<div>
        			<div>
        				<FormOutlined />
        				<Text>
        					投稿する
        				</Text>
        			</div>
        			<div>
        				<BellFilled />
        			</div>
        			<Avatar size='large' icon={<UserOutlined />} />
        		</div>
        	</div>
        </header>
      </div>
    );
}

export default App;

src/App.js
Line 14:12: ‘Title’ is not defined react/jsx-no-undef
Line 22:14: ‘Text’ is not defined react/jsx-no-undef

import { Breadcrumb } from 'antd';
import React from 'react';

const App: React.FC = () => (
	<Breadcrumb>
	    <Breadcrumb.Item>Topページ</Breadcrumb.Item>
	    <Breadcrumb.Item>
	      <a href="">ページタイトルA</a>
	    </Breadcrumb.Item>
	    <Breadcrumb.Item>
	      <a href="">ページタイトルB</a>
	    </Breadcrumb.Item>
	    <Breadcrumb.Item>ページタイトルC</Breadcrumb.Item>
	</Breadcrumb>
);

export default App;

Datepicker

import React from 'react';
import { DatePicker } from 'antd';

const App = () => {
	return <DatePicker />;
}

export default App;

First Example

import React from 'react';
import { Button, Space, DatePicker, version } from 'antd';

const App = () => (
	<div style={{padding: '0 24px '}}>
	<h1>antd version: {version}</h1>
	<Space>
		<DatePicker />
		<Button type="primary">Primary Button</Button>
	</Space>
	</div>
)

export default App;

getting start

import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';
import { DatePicker, message } from 'antd';
import './index.css';

const App = () => {
  const [date, setDate] = useState(null);
  const [messageApi, contextHolder] = message.useMessage();
  const handleChange = (value) => {
    messageApi.info(`Selected Date: ${value ? value.format('YYYY-MM-DD') : 'None'}`);
    setDate(value);
  };
  return (
    <div style={{ width: 400, margin: '100px auto' }}>
      <DatePicker onChange={handleChange} />
      <div style={{ marginTop: 16 }}>
        Selected Date: {date ? date.format('YYYY-MM-DD') : 'None'}
      </div>
      {contextHolder}
    </div>
  );
};

createRoot(document.getElementById('root')).render(<App />);
export default App;

import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';
import { DatePicker, message, Alert } from 'antd';
import './index.css';

const App = () => {
  const [date, setDate] = useState(null);
  const [messageApi, contextHolder] = message.useMessage();
  const handleChange = (value) => {
    messageApi.info(`Selected Date: ${value ? value.format('YYYY-MM-DD') : 'None'}`);
    setDate(value);
  };
  return (
    <div style={{ width: 400, margin: '100px auto' }}>
      <DatePicker onChange={value => this.handleChange(value)} />
      <div style={{ marginTop: 20 }}>
      	<Alert message="Selected Date" description={date ? date.format('YYYY-MM-DD') : 'None'} />
      </div>
      {contextHolder}
    </div>
  );
};

createRoot(document.getElementById('root')).render(<App />);
export default App;

import { ConfigProvider } from 'antd';
import React from 'react';


const App: React.FC = () => (
	<ConfigProvider theme={{ token: { colorPrimary: '#00b96b'} }}>
		<MyApp />
	</ConfigProvider>
);

export default App;