The Design Ops Cocktail

Creating no-code CSS classes with Figma + Tailwind + ClojureScript + Devcards

Transcript

1. 01 Figma + Tailwind + ClojureScript + Devcards The Design Ops Cocktail React Finland 2021. @riittagirl
2. 02 We want to make a path from Figma components to our actual UI components as short as possible Design handoff Sketch + CSS + Storybook Make Changes Save file Commit to Abstract Notify Developers Download a file Apply styles to a UI component Test the UI component Add styles to CSS library React Finland 2021. @riittagirl
3. 03 Design Tokens Were Very Much a Thing in 2018 https://didoo.medium.com/how-to-ma nage-your-design-tokens-with-style-di ctionary-98c795b938aa x values “fed” into a library like Style Dictionary and style assets are generated React Finland 2021. @riittagirl
4. 04 Figma API became an popularized tool https://blog.prototypr.io/design-t okens-with-figma-aef25c42430f React Finland 2021. @riittagirl
5. Figma + Style Dictionary + Storybook Make Changes Notify Developers Test the UI component Parse file via Figma API Generate new styles with Style Dictionary Apply styles to a UI component Design handoff Sketch + CSS + Storybook Make Changes Save file Commit to Abstract Notify Developers Download a file Apply styles to a UI component Test the UI component Add styles to CSS library React Finland 2021. @riittagirl
6. 05 Who am I? My tech stack Social Media Software Engineer at Nitor ReactJS, ClojureScript, Figma @riittagirl React Finland 2021. @riittagirl
7. 06 “Describe your lunch to me” Figma + Tailwind + Devcards (Storybook) Figma + Style Dictionary + Storybook Make Changes Notify Developers Test the UI component Parse file via Figma API Generate new styles with Style Dictionary Apply styles to a UI component Make Changes Describe UI components Test the UI component Parse file via Figma API in CI Generate new Tailwind styles React Finland 2021. @riittagirl
8. 07 Just Sketching and Thinking “Does this spark joy?” Reflective Journal Entry #2 My eyes are getting heavier tonight. I should sleep soon. It’s funny how I always think I have nothing to say but once I play with the start of ideas, it all starts to come down like rain. I needed this. To know I still have it in me. If I were to ever lose this part of myself… 29/10/2020 11:45 am 29/10/2020 04:20 pm 29/10/2020 Reflective Journal Entry #2 My eyes are getting heavier tonight. I should sleep soon. It’s funny how I always think I have nothing to say but once I play with the start of ideas, it all starts to come down like rain. I needed this. To know I still have it in me ... 29/10/2020 11:45 am 29/10/2020 04:20 pm 29/10/2020 #anxie| 01/09/2020 My eyes are getting heavier tonight. I should sleep soon. It’s funny how I always think I have nothing to say but once I play with the start of ideas, it all starts to come down like rain. 11:45 am 29/10/2020 #anxiety Add your daily Journal Entry September /20 React Finland 2021. @riittagirl
9. 08 Think in terms of “wireframes”. Reflective Journal Entry #2 My eyes are getting heavier tonight. I should sleep soon. It’s funny how I always think I have nothing to say but once I play with the start of ideas, it all starts to come down like rain. I needed this. To know I still have it in me. If I were to ever lose this part of myself… 29/10/2020 11:45 am 29/10/2020 04:20 pm 29/10/2020 post timestamp post title entry timestamp entry text modal “block text-lg text-gray-400 font-work-sans” “w-full text-normal text-4xl md:text-5xl my-4 h-12 font-butler” “w-full text-normal text-md text-gray-400 font-work-sans” “w-full text-normal text-lg text-gray-800 font-work-sans” “relative rounded shadow-lg my-2 px-2 py-4 md:px-8 md:py-8 overflow-auto h-screen/4 bg-white” Visual identity changes, hierarchy changes less. tailwind utility classes React Finland 2021. @riittagirl
10. 09 Step 1: Describe UI components React Finland 2021. @riittagirl
11. 10 Step 2: Make Changes in Figma React Finland 2021. @riittagirl
12. 11 Step 3: Parse file via Figma API in CI https://blog.prototypr.io/design-tokens-with-figma-aef 25c42430f React Finland 2021. @riittagirl
13. React Finland 2021. @riittagirl
14. React Finland 2021. @riittagirl
15. figma.js React Finland 2021. @riittagirl
16. base.json This file can either be used to generate style variables and classes for Style Doctionary, but it will not really work with our “descriptory” strategy” React Finland 2021. @riittagirl
17. Use base.json as a file that contains the values to extend our Tailwind classes. https://www.michaelmang.dev/blog/integrating-design-tokens-with-tailwind 12 Step 4: Generate new Tailwind styles React Finland 2021. @riittagirl
18. React Finland 2021. @riittagirl
19. 13 Step 5: Check your UI Components in Devcards R Because Tailwind offers utility classes, you only have to provide the config with the styles unique to your app R “Component classes” are just strings that contain a chain of utility classes React Finland 2021. @riittagirl
20. http://localhost:6969/#!/mytherapy.devcards_ui React Finland 2021. @riittagirl
21. Thank you! @riittagirl React Finland 2021. @riittagirl