Designer & Developer Relationship (WIP)
You might be asking yourself
how does the relationship between designers and developers look like?
What tools are they using?
How can we ensure both teams are aligned and deliver fast?
if you asked these questions or you are new to the organization as a developer or designer then you're in the right place!
In this article post I'll try to answer these questions from a developer point of view but first we need to know how the teams are structured.
Starting with actors, you might be wondering what's there to this section other than Developers and Designers but then you'd be generalizing a little because DevLaunchers is big enough to have two type of teams:
- Platform Governance teams (consistency/standard creators, internal audience focused)
- Platform Products teams (platforms/apps creators, external audience focused)
This team is all about creating a stable, well-defined framework for other teams in the organization to utilize. This is done via developing shared components and functionalities, along with providing support and guidance to other teams in order to assist them in getting up to speed using the framework, some of their objectives include:
- Collaborate with our product and feature teams
- Ensure the platform is developed in line with customer requirements. Build the platform incrementally
- Build and deploy in increments and secure frequent feedback and validation from users and other cross-functional teams. Focus on usability
- Provide platforms that are easy to use via self-service capabilities and supporting documentation. Commit to support and maintenance
- Ensure the platform’s sustainability and uptime, and commit to appropriate service-level agreements. Lead by example
Basically a team that creates standards and develop shared functionalities.
is an Example of a team in this category/type that helps internal teams by designing/documenting/improve shared UI components for Platform Product teams to eventually be incorporated in their full fledged pages design with consistency and a feel of DevLaunchers ethos. More about the team can be found here
Another team in this category that is focused on maximizing the development experience (DX) and manages the implementation of the shared UI components designed by Universal Design Team while documentation each variant and how,where,why a component should be used code wise to ensure Platform Product developers can implement pages designed by their teams with these building blocks/components. More about the team can be found here
There are more teams in this category and while they are not very relevant to the title of this article I'm still listing them here for exposure!
- Site Backend
- DevLaunchers Social Media (Twitter, Instagram Linkedin)
Teams that build parts of an online platform democratizing access to learning tech-ready skills by acting as a one-stop-shop for starting and joining software projects intended to better the world, and helping members to contribute meaningfully while gaining industry experience, The platform in question is DevLaunchers!
These teams should always be following the standards set by Platform Governance teams and ask them to build functionalities other teams within the same category might benefit from.
Platform Products include:
Almost every feature a Platform Product team works on starts with Figma.
Figma is a collaborative web application for interface design, with additional offline features enabled by desktop applications for macOS and Windows. The feature set of Figma focuses on user interface and user experience design, with an emphasis on real-time collaboration, utilising a variety of vector graphics editor and prototyping tools.
Where a design lead from said team uses a Library of designed components from Figma to create user interfaces/pages with a sprinkle of design tokens to manage layouts of the page. I'll be explaining these two in bold and how to use them whether you're a designer or developer.
Design tokens are name and value pairings that represent small, repeatable design decisions. A token can be a color, font style, unit of white space, or even a motion animation designed for a specific need.
For example, instead of choosing one of many shades of green for an icon, we can apply a design token that is consistent with all similar usages across our products: color.icon.success.
- Features like global theming (dark mode), responsive design, and user customization are possible with tokens.
- Design tokens simplify the design and development by streamlining decision making and handover between crafts.
- As DevLaunchers visual language evolves, changes can be made once across the system and products. No more finding and replacing hard-coded values everywhere.
- We have automated tooling to help designers and developers start using tokens faster.
- Tokens are how we'll implement our newest visual foundations. This will deliver visual consistency and other improvements to DevLaunchers UI.
Design Tokens are stored in JSON file on Github to ensure one single source of truth of tokens between developers and designers and ONLY get modified by Universal Design Team.
To use the tokens you need to install Tokens Studio plugin on Figma, this step is also mandatory for developers in Figma dev-mode to inspect applied tokens to the selected layer.
As a Designer
If you launch the plugin for the very first time, you won't have any tokens defined just yet. Click on `New empty file` to get started.
Then you need to link the plugin to the JSON file containing the tokens hosted on github following these simple steps.
| Field | Value |
|---|---|
| Name | design-team |
| Personal Access Token | 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 |
| Repository (owner/repo) | dev-launchers/dev-launchers-platform |
| Branch | development/design-team |
| File Path (e.g. tokens.json) or Folder Path (e.g. tokens) | packages/tailwind-constructor/tokens.json |
You'll be prompted with
Pull from GitHub?
Your repo already contains tokens, do you want to pull these now?
Click Yes and...
CONGRATULATIONS! You now have linked your Tokens Studio Plugin with the single source of tokens everyone uses in the organization. a step that will surely be appreciated by developers trying to implement your amazing designs 🚀
Now all you have to do is follow these two fundemental rules
- Don't use Figma UI to style your elements and only use Figma-tokens widget
- When using a component from the Figma library make sure to read its usage documentation
As a Developer
The designer will be giving you a link to a page designed fully using tokens studio plugin with the tokens located in the orgs monorepo.
That file strictly follows a schema provided by the maintainers of the plugin but it doesn't make sense for developers to use a json file to style the apps so instead Platform Enablement team built a transformer package that takes the json tokens file and spits out a tailwind compatible version of it!
Let's backtrack a little and see how we can inspect a designed page and know what tokens were applied to its layers/nodes in order for us to implement it:
- Follow this guide
- Click on the layer you want the tokens applied to
- Use them in your code as tailwind classes
Example:
The layer here has sizing: "Size.32"; token applied which is size-32 in tailwind
<div className='size-32' />
Platform Enablement team is working towards solidifying the experience by generating tailwind classes right within Figma, keep an eye on this issue [insert issue here]!
Every team in DevLaunchers has access to a library of designed components that follow the best practices of accessibility with the design tokens we talked about above being applied to them.
Increased Efficiency and Speed:
- Reusability: Components can be used and reused across various designs, eliminating the need to recreate them from scratch each time. This saves designers significant time and effort, allowing them to focus on more complex design aspects.
- Rapid Prototyping: By having readily available components, designers can quickly build out prototypes and mockups, accelerating the design process.
Enhanced Consistency and Quality:
- Centralized Source of Truth: A component library acts as a single source for design elements, ensuring everyone on the team uses the latest and consistent versions. This leads to a more unified and visually appealing final product.
- Reduced Errors: Updates made to a single component automatically propagate throughout all instances, minimizing the risk of inconsistencies and errors across designs.
Improved Collaboration and Communication:
- Shared Design Language: A well-defined component library establishes a shared design language, fostering better communication and understanding between designers and other stakeholders.
- Streamlined Collaboration: Team members can work collaboratively on designs, knowing they are using the same components and adhering to established design guidelines.
Components are firstly designed on Figma by Universal Design Team and get added to an internal Figma library here, Platform Enablement team takes it from there and implement the designed component in React and write usage docs and tests in our Storybook app
Storybook provides a workshop to build/document/test UIs in isolation. It helps develop hard-to-reach states and edge cases without needing to run the whole app, fuss with data, APIs, or business logic.
As a designer making pages for Platform Product teams
You need to be part of Dev Launchers Design Figma team in order to use components in your team designs, if you can't see "Dev Launchers Design" on the left sidebar Teams list section then ask Universal Design team on [discord](https://discord.com/channels/829463953087660083/1083477852042821743) to give you access.By clicking on "Dev Launchers Design" you'll see list of files within the organization categorized by which team owns them:
- Click on the category that belongs to your team
- Pick the file you want to design a page at
- Click on the assets in the top left tabs of the left sidebar
- You'll see a list of libraries, we're interested in "DL Universal Design System"
- Unfolding it reveals Atoms, Molecules, Organisms, Templates and Pages categories following Atomic Design Methodology
- Drag the component you want to the canvas
- See its usage guide and accessibility best practices by right clicking on the component in canvas and choosing "Go to main component"
As a developer implementing pages from Figma
Figma components are already implemented in @devlaunchers/components package in the monorepo as react components.
All you have to do is learn how to use them in your app by reading documentation on Storybook, here's the steps:
- Run a local version of storybook on your machine
yarn workspace @devlaunchers/components storybook - Compile tailwind css file and watch for changes (this process will run forever unless terminated)
yarn workspace @devlaunchers/tailwind dev - Go to the design file and click on the components used in the page in Figma dev mode
- Under dev resources section you'll see a link to the selected component in Storybook
- Copy the link and paste it in your browser to see documentation for how to use the same designed component in your react app
