Design Systems in Framer X

Project files

Warning: ⚠️☢️☣️ The code above is extremely experimental. I’m not responsible if it eats your cat or burns down your laptop, or both. 🙃

Key points

  • Building and using a design system in Framer X means the use of Team Store
  • DS Workflow 1: No Code
    • This would be similar to some of the other design tools, which means that you mostly work on the design canvas to build out and use the design system.
    • I think this is good for designing non-web projects, such as iOS/Android native, MacOS native etc. This means that design and development are still separate and need to be manually synced up in the traditional sense.
    • But of course, if your team uses React Native, there’s chance that you could use the other two workflows below.
    • This requires the support for shared styles, which is reportedly coming soon.
    • I’ve shown two demos on building an icon library and components with states that can be edited visually and shared as part of a DS
  • DS Workflow 2: Import Code
    • This workflow is ideal for teams that build a React-based web product and that already has a codified design system in place.
    • I’ve experimented with RMWC, a React wrapper for the official Material components.
      • a centralized theme.js file that can be used to customize the styles of all imported components
      • This theme.js file can be easily picked and used by development, making sure the styling is consistent between design and development
      • A button component that can include standard Material icons or icons on the canvas
      • A tab and card component that allows custom content
      • The imported components can be used to build interactive prototypes via code overrides
      • Copy JSX code from design and use it to build bigger components (HotelCard)
    • I briefly showed an integration with Ant Design as well
      • Ant Design is special since its theming is done via LESS, which is not supported by Framer X yet.
      • To support theming, I used a hack that loads and compiles LESS code on the client side.
      • Similar to RMWC, the styles can be customized via a centralized theme.js file
  • DS Workflow 3: New Code
    • Create, use and evolve a DS from scratch, in code
    • I’ve demoed a simple system based on styled-system.
    • This workflow looks pretty much the same as the previous one. However, this is the point. No matter if we already have a DS or are building a new one, we should able to enjoy the same experience that blends design and development together.

Thanks! I’m personally very excited after doing these experiments. With the recent evolvement of component-based design and development practices, and advanced tools like Framer X, the gap between design and development is shrinking quickly. Great time to be a designer!

© 2020 jimu Labs, Inc.