Tim Tries: Figma, Zeplin and Storybook. Mind is blown...

Summary

In this video, Tim explores how to integrate design systems with technology, demonstrating how to connect Figma, Zeppelin, and Storybook. He shows how to sync designs with a style guide and code editor, enhancing the workflow for developers and designers by linking components directly to their code and documentation.

Takeaways

• 🔧 The video series 'Tim Tries' explores new tools and technologies for design and development projects.
• 🧠 Tim was inspired by a colleague's demo on integrating creative work with interactive style guides and code editors.
• 🌐 The main tools discussed are Figma, Zeplin, Storybook, and VS Code.
• 🎨 Figma is highlighted as an excellent tool for creating modular and responsive web designs.
• 🔍 Zeplin is used for inspecting design elements and syncing them with various design tools.
• 📖 Storybook acts as a living style guide by showcasing front-end code components.
• 🔗 The integration process involves connecting Figma designs with Zeplin and then linking Zeplin components with Storybook and VS Code.
• 🛠️ Tim demonstrates creating a simple button in Figma, exporting it to Zeplin, and linking it to code in VS Code.
• 🖥️ The setup allows for seamless navigation between design elements in Zeplin, code in VS Code, and components in Storybook.
• 📚 Additional features include linking to external resources like GitHub repositories and Confluence pages for a comprehensive development workflow.

Q & A

What is the main focus of the video?

The main focus of the video is to demonstrate how to connect a design system to technology, specifically how to integrate Figma, Zeplin, and Storybook with a code editor like VS Code.

What is Figma and how is it beneficial for web development?

Figma is a web-based design tool that is often considered the new Photoshop or Sketch. It is beneficial for web development because it allows for the creation of modular, reusable, and responsive designs that can be easily shared and collaborated on in a browser.

What is Zeplin and how does it relate to Figma?

Zeplin is a tool that acts as a style guide and allows designers to sync their work from various platforms like Photoshop, Sketch, and Figma. It enables team members to view designs online, inspect elements, and see the associated code, making it a source of truth for design in a team.

How does Storybook differ from Zeplin?

While Zeplin is focused on design and style guides, Storybook is a tool that extends the concept of a style guide to include actual front-end code. It is referred to as a 'living style guide' and allows developers to see how designs translate into code.

What is the significance of connecting Figma and Zeplin?

Connecting Figma and Zeplin allows for seamless synchronization of design work. Designers can create components in Figma, which can then be viewed, inspected, and used as a reference in Zeplin, providing a consistent and accessible design resource for the team.

Why is it beneficial to connect Zeplin to Storybook?

Connecting Zeplin to Storybook enables developers to see how the designs from Zeplin are implemented in code. This direct link between design and code can help ensure that the final product matches the original design intent and can facilitate easier collaboration and debugging.

What is the role of the VS Code plugin in this setup?

The VS Code plugin acts as a bridge between Zeplin and the developer's codebase. It allows developers to view Zeplin components directly within their code editor, access related Storybook stories, and even link to external resources like GitHub, Confluence, or JIRA.

How does the video demonstrate the integration process?

The video demonstrates the integration process by showing the creation of a simple button in Figma, syncing it to Zeplin, and then connecting Zeplin to Storybook and VS Code. It also shows how to add links to GitHub and potentially other systems like Confluence.

What are the potential benefits of having a connected design and development workflow?

A connected design and development workflow can lead to increased efficiency, better communication between designers and developers, and a more accurate translation of designs into code. It also provides a single source of truth for design specifications and makes it easier to maintain consistency across a project.

What are some potential challenges in setting up this integrated workflow?

Some potential challenges include the initial setup and configuration of the various tools and plugins, ensuring that all team members are familiar with the workflow, and maintaining the synchronization between the tools as designs and code evolve.

Outlines

00:00

🌟 Exploring Design Systems

In this video, Tim explores connecting design systems with technology. He was inspired by a colleague's demo showing how to integrate creative work with interactive style guides and code editors. This video will cover tools like Figma, Zeplin, Storybook, and VS Code, illustrating their integration.

05:01

🔗 Connecting Figma and Zeplin

Tim demonstrates how to connect Figma with Zeplin. After designing a button in Figma, he exports it to Zeplin, showing how it becomes part of a style guide. This setup allows inspection of design elements, linking them to code components.

10:01

📘 Setting Up Storybook

The video continues with setting up Storybook, a tool for viewing components alongside actual front-end code. Tim walks through linking a Figma design to a Storybook component, emphasizing the seamless integration between design and development environments.

15:02

🛠️ Integrating with VS Code

Tim installs a Zeplin plugin for VS Code to connect code components directly with Zeplin. He sets up configuration files to link code with design elements, showcasing a streamlined workflow for developers to access and edit design-related code efficiently.

20:04

🎬 Final Thoughts and Wrap-Up

Tim concludes the video by summarizing the potential of these integrations. He reflects on the benefits of having a centralized hub for design and development, highlighting how these tools can improve collaboration and efficiency in design workflows.

Keywords

💡Design System

A design system is a set of guidelines, standards, and tools that help designers and developers create consistent, cohesive, and scalable user interfaces. In the video, the host discusses how to ensure that a project's design system connects effectively with its technology, highlighting the importance of consistency in design elements across different platforms and devices.

💡Figma

Figma is a web-based design tool that allows for collaborative work on user interface designs. It is often compared to Photoshop or Sketch but operates entirely in a browser environment. The video mentions Figma as a tool for creating modular, reusable, and responsive designs, emphasizing its utility in web development and design system creation.

💡Zeppelin

Zeppelin is a design tool that allows designers to sync their work across various platforms and view their designs online. It serves as a central hub for design assets and is described in the video as a 'source of truth' for design, enabling team members to inspect and access design details, such as code snippets, directly from the platform.

💡Storybook

Storybook is a tool used by front-end developers to build UI components and document them in an isolated environment. It is referred to in the video as a 'living style guide,' where designs are not only visualized but also implemented with actual front-end code, making it a bridge between design and development.

💡Component

In the context of design and development, a component refers to a reusable piece of UI, such as a button or a form input, that can be used across different parts of an application. The video discusses creating and syncing components from Figma to Zeppelin and then to Storybook, showcasing the process of making design elements modular and reusable.

💡Interactive Style Guide

An interactive style guide is a digital tool that allows users to explore and interact with design elements, such as colors, typography, and components. The video demonstrates how connecting an interactive style guide to a design system can help in maintaining consistency and accessibility of design elements across a project.

💡Code Editor

A code editor is a software application used for editing source code. The video mentions integrating a code editor, specifically Visual Studio Code (VS Code), with design tools like Zeppelin, to facilitate the process of developers accessing and implementing design components directly from their codebase.

💡Sync

Sync, in the context of the video, refers to the process of updating and aligning design elements across different tools and platforms. The host discusses syncing designs from Figma to Zeppelin and then to Storybook, ensuring that all design components are up-to-date and consistent across the design and development workflow.

💡Visual Studio Code (VS Code)

Visual Studio Code is a popular source-code editor developed by Microsoft. The video mentions using VS Code in conjunction with a Zeppelin plugin to connect design elements with their corresponding code, demonstrating how developers can access design details and implement them in their code directly from the editor.

💡Repository

A repository, in the context of software development, is a location where all the files for a project are stored and managed. The video discusses linking design components to a GitHub repository, allowing developers to access the source code and track changes, which is crucial for version control and collaboration.

💡Confluence

Confluence is a collaboration software that helps teams organize, discuss, and collaborate on projects. The video briefly mentions the possibility of linking Confluence pages to design components in Zeppelin, suggesting that this could facilitate better documentation and knowledge sharing within a team.

Highlights

Tim introduces the video series 'Tim Tries,' where he explores new things he's never done before.

Tim plans to explore connecting design systems to technology using tools like Figma, Zeppelin, Storybook, and VS Code.

Tim was inspired by a colleague's demo showing the integration of creative work with interactive style guides and code editors.

Figma is described as a modern web-based design tool that allows for modular and responsive design components.

Zeppelin is highlighted as a tool similar to InVision, where designs can be inspected and viewed online, showing components and style guides.

Storybook is introduced as a living style guide that contains actual front-end code, making it a bridge between design and development.

Tim explains how to connect Figma and Zeppelin using a native plugin, allowing web developers to sync designs with Zeppelin.

Tim demonstrates creating a simple button component in Figma and exporting it to Zeppelin.

Tim installs the Zeppelin plugin for VS Code to connect design components directly to code components.

Using the Zeppelin CLI, Tim connects the Figma component to his Storybook code component, creating a unified workflow.

Tim adds a repository link to GitHub in Zeppelin, allowing quick access to the source code from the design view.

Tim discovers the ability to add custom links in Zeppelin, such as to Confluence or Jira, enhancing the central hub functionality.

Tim showcases the seamless navigation between design components in Zeppelin and their corresponding code in VS Code and Storybook.

Tim highlights the potential of this integration to streamline collaboration between designers and developers.

Tim concludes by emphasizing the simplicity and efficiency of having a connected design and development workflow.

Transcripts

what is up welcome back to yet another

tim tries so in this video series i try

out stuff

that i never did before so i genuinely

look at something the first time

so this time i'm going to look into how

to make sure that your design system for

your project

really connect to your technology and so

a couple of weeks ago

i saw my colleague brian from new york

give this demo

on how to connect the creative work

to the interactive style guide and to

your code editor

and my mind was blown and i always

wanted to use this but i never really

saw it in practice it was really hard to

do

and now that the technology advanced a

little bit i'm more senior i kind of

know what i want now

i thought okay it's time i'm just gonna

try this

so after the intro we'll dive in what

you can do

with figma zepplin storybook and vs go

there we go

[Music]

all right so here in my browser i just

loaded a little image that i just

photoshopped together

and here you'll see we have figma

zeppelin

and storybook so basically let me just

go over what i think those are

figma is kind of the new photoshop the

new sketch but then

online it's all in a browser it's

really good it's really good for web

development it's really good for making

designs that are modular with components

and reusable stuff and

responsive stuff great stuff right so

then we have zeppelin

and zeppelin is similar to projects like

envision

where you can kind of look at your

designs

online and they're all synced there so

photoshop can sing their sketch can sing

their

figma can sync there probably more and

then

you can actually look at all the screens

and you can inspect so when you click on

a button you can actually see

the code or you can see whatever

it's really cool so it also has like a

style guide and you can see reusable

components in

it so zeppelin is kind of your source of

truth for your design for everybody in

your team

and then we have storybook which is

basically what sapling is but then with

actual front-end code so here this which

we call our living style

guide so apparently what my colleague

showed me you can connect

all of them up so figma and zeppelin

have a native connection there's like a

plugin you can use so when you design

something you can sync it with zeppelin

so then web developers would go to

zeppelin and actually have a look at

that design

but wouldn't it be cool if those designs

were directly also matched with your

storybook work

where you put your real code and

wouldn't it be cool

if i could also link to let's say

confluence or a wiki or

a ticketing system or my github

or my fiest code all from zeppelin so

this becomes like the hub

and this is possible so today i'm gonna

try that so when you have a look here

you actually have this connected

components

from zeppelin so this came out somewhere

last year you see six months ago

so this is pretty new and actually when

you

go over it you can see here in zeppelin

you have some really cool side panel

that actually shows me

like this i guess this is a react button

right and it has an opening github open

in storybook

i want this stuff so i already did

a bit of homework because i didn't want

you to

look at me creating projects and designs

and setting up everything so i have a

storybook running with one button

inside i already built it so how about

we go to figma

create a button and then sync that

to zeppelin and then connect zeppelin

to my vs code and how everything

connects basically

let's let's go for that so first let's

open figma so this is very simple we're

just going to make

like a really simple button okay

i'm going to make it black

and then inside i'm going to write

something

and that's going to have to be white

and let's maybe center it nicely okay

i'm just literally gonna

use it like this well this is a bit big

maybe can we

change the font size

um you know what let's not go there what

you can do though is actually connect

this and make this a component

so this is what i've learned so now that

i created a component out of this

we can actually look at the assets and

then here we have local components so

this thing you can reuse everywhere in

your design

so for now i'm not going to dive in and

do more this is literally it

we don't need more from figma so what

i've seen um

i already connected a zeppelin two figma

so we can actually go plugins

zeppelin let's see what it does

so it's loading my zeppelin so now i

have to select what i want

to sync and i want to do export

so now it's launching my zeppelin local

app

okay and so i have an amazing um web

design

thing already so you can see here this

is also amazing web design i just made

two projects

so i'm gonna be like okay let's just

export let's run with it

okay so now it opens zeppelin

imported component one so i think this

is going to be in the style guide

components yes i think yes

so now what we did when i click on this

i can actually click on this and inspect

it and it actually says i am a button

this is my class name

and it has like width and height and

font family and stuff like that

i can go into all the specifics that i

need

and this is also not a zeppelin video so

i'm not going to dive deeper into that

but this basically

has a local style light where i have a

button that is going to be able to be

reused

but then look here on the side connect

this component

to your components in code and see quick

links and stuff like that so that's what

we're going for

so basically this will be the heart this

page here

or maybe color palette or dashboard or

whatever but let's say

our style guide is the heart of our

project and i want to be able to link to

everywhere from here right so turns out

there is a video oh not video a vs code

plugin

for vs code that connects zeppelin and

then

in there you can actually do a whole

bunch so let's install that

oh before we go um why not i'll show you

um the button that i built in storybook

mdm run

story book

okay running running running

so now it's basically just opening

storybook

and there's my button so this i

pre-built

this is just a vgs button very simple

you have some props and

on click action there's nothing else or

you can look at the docs and you can see

like i did nothing else to this there's

no different variations of the button

nothing else it's just the same as in

figma basically

right and i've also already created a

git

repository because i want to later on

connect git

to my zeppelin okay so now let's go to

vs code and find this zeppelin

plugin

okay so zepplin this is this thing the

thing

we're just looking at so okay so let's

install

reload

okay we just got a little icon here

okay

this is my design project so um

i'm guilty here because a couple of

weeks ago

my colleague brian that showed me this

say hey you just installed that vs code

plugin

and so i'm already logged in to my

my zeppelin that doesn't mean that i

know what i'm doing

but that just i thought when i

uninstalled it and reinstalled it for

the video i would have to log in

but it's smart nice it's still there so

basically this is my amazing design

screens and components which is

basically

this is also the my amazing design

project there we go and this is the cell

guide with components

so let's have a look and then we can see

components here

component one um

let's just open it up oh and it just

opened from field code into this that is

pretty decent

that's a nice start right but i know and

i've seen you can actually connect

all of this code that we see here my um

my story file here you can connect this

also to zeppelin

and there is a documentation here so we

looked at this before right so

basically getting started so we are

using fjs in this case

so let's just open this tab and try to

install it

okay so um

yeah so they're talking about this

configuration file and i've seen that

before

so let's go to vs code and actually try

to just type zeppelin here

create zeppelin configuration file

so okay i've seen brian do this so

basically this is the components.json

that connects everything together and

i think what you can even do because

there's a zeppelin cli that i've also

previously installed

you can actually when you hit zeppelin

connect

you can connect this file to the files

in your code base right

to zeppelin so there's like an api

connection so

let's add a project so i am in my

personal workspace and you can see all

my projects here

so in my amazing design project i don't

think we have a style guide but we do

have components

and then actually now it finds oh yeah

this is my local

button.view yeah that's my component ok

and now so it's found a component with

the

path to my button and then we can

connect that to a zeppelin component

which is my

component one okay

so now i saved it and eslint or

prettier did something to it but

basically it now created

it knows the project and it knows my

components now um

i think however we can do more here

because what i saw

when we go back to that fuji s thing is

that this oh yeah

so prepare the configuration file we

just did that

um yeah we did all of this add

components from your code base we did

and then isn't there like okay so this

is zeppelin names

yeah so the cli thing i did that before

and then we have to install the plug-in

okay this we can do

and we have to turn off this and install

this

while we wait let's read a bit more okay

so we just have to add that plug-in

to the configuration

okay let's do it

okay so now it has the zeppelin cli

connect plug-in view

and then what they're saying oh here we

go

run the zeppelin cli so with the sapling

connect so

this is the thing i tried before so i'm

just gonna go and click that now

so i think what it did now is it

basically looked at

that connection thing that components

are json and connected it to zeppelin so

let's open zaplin click on that button

and now we can see

there's this my button thing so this is

basically an instance of my code

and it says to because it probably read

my

props so it knows this is a string and

that that's pretty decent

so it kind of okay so it's in storage

button.view

so when i click this i want to go to

visual studio code and

open

the magic this is actually my component

it's a pity that it didn't open it in my

open project already but you know it's

nice

let's get back because i think

okay so this we did let me see

this is the fuji s one right because i

saw here

look we can add repository links but

also storybook links

i think that's what we want to do first

so let's

open storybook and have a look

okay so we're going to have to install

that plugin also

to be honest it's a pity that it's

global installs i don't really like that

again you know whatever

i prefer that it's local so i don't

pollute my global scope or whatever

okay so it installed that it's really

fast that's nice

um so then i'm gonna have to add my

plug-in

okay we can do this so another plug-in

and they look at localhost 9009

but my thing i think it ran at 606

right yeah

okay let's see um what else because just

with this i don't think that's gonna be

enough oh we can also have a remote

instance okay so when i

um output my storybook maybe to

whatever versal or netlify we can link

there that's pretty cool

okay so the component stuff we did this

yes we did that too

ah but look there's actually a storybook

property

okay let's add this

to our zeppelin names actually i don't

like this component one but i never gave

it a nice name

in oh look whoa it actually has like a

nice view of it

imagine if this was like a proper

component that looks cool

so it is a design system button but

let's just call it component one because

well that's actually what it is right

and it

has different stories so i know i made

one story

right when we look at my stories i just

have the primary

the default one or when you look it's as

hilly as okay so let's call it primary

then that's the only one that i have

let's see do we need to do more

i don't think so i think we just aye we

sappling connect again

well we can do that

let's connect it ah detective storybook

at 6006

nice so it's found the story

okay

oh yeah opening storybook

yeah that's cool so now

we can actually go from

in this place we can now go to storybook

we can go to visual studio code and we

can see our component here

but i know there's more i know we can

also have links to github

and we can have links to let's say your

wiki and stuff like that so let's have a

look

so here repository links i think that's

what we want

let's have a look

i think this is probably not even a

plug-in they probably just

understand it already um

ah so we can literally just say okay oh

that's my mistake

github okay let's put that in

i said where did i want it below

components

and of course this is timpanics and i

made it

called i called it this one

would that that's it

wait let's read i never read i should

read

ah because probably it knows this path

so i i'm assuming it's just gonna work

ah branch yeah i actually have master

oops it's json not javascript

okay let's zaplin connect again and see

what it added for us

okay

okay there's the github let's click

beam there's my source stories

button.view

what i like this so much

man and it's you know what this is also

it's so simple

i want to know if there's more now okay

we did this one

custom links and then we have style

guidelines i don't use that so probably

not

so but let's have a look what the custom

links do

oh i can literally choose what it is

okay i can have a links property

and then say confluence and then have a

url okay

well i won't do that now because i don't

have a confluence page but potentially

that's pretty cool

oh and then you can add a confluence

property with the url

path okay so the link here for type

confluence

it's like the base url and then you add

the url

path it's basically like the path of

your code

with the github one yeah okay that kind

of makes sense

so with this we can open it in

confluence we can open it in

jira maybe we have some other systems

maybe we can

you know i'm liking it

um is there anything else we should dive

into i don't think so

i'm already talking for 18 minutes so

let's like this is awesome right now

my zeppelin and imagine this was a rich

experience right with a lot of content

imagine how easy it is for a developer

to actually have a look and say okay

this is my

my thing this is the props i need let's

open it in github or in storybook let's

open in storybook

let's see if my code is actually the

same right i can put that side by side

and actually have a look and i can see

now my padding is probably a little bit

off

but what's interesting to me is we also

have figma

and maybe what i want to do is this

oh red doesn't work okay

okay and then we're just gonna sync this

okay export complete

i don't think i did that right you know

what screw it doesn't matter

um i did too much anyways thank you for

watching and i'll see you next time