ここでは、アフィンガーで下のようなステップの表示&色のカスタマイズのやり方を説明します。
こんな感じのものを表示する方法です。
step
1ステップの表示方法
step
2ステップの色のカスタマイズ
ステップの表示方法
step
1ステップのコードを挿入する

すると、下のコードが挿入されます。

step
2コードの間に任意のステップの数字・テキストを入れる

これで挿入できました。
ステップの色のカスタマイズ
step
1「カスタマイズ」を開く

step
2[オプションカラー]>[ステップ/ポイント]を開く

初期設定は下のようになっています。

好みに合わせてカスタマイズしてください。
プレビューで確認しながら調節して、OKなら公開して完了です。