CivicTech
Design System
This Case Study is a first draft and is still being written.
More details and context can be provided in an interview.
Tokens![image](https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/fcd0a33d-e380-4059-bc6b-b73df2e27993/Untitled/w=3840,quality=90,fit=scale-down)
![image](https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/454d54e4-9c6a-4f47-85ee-5b3906da1f74/CleanShot_2024-07-09_at_16.08.362x/w=1920,quality=90,fit=scale-down)
Syncing Design with Code
4,000+ Component Variants & 700+ Styles
I created 761 tokens for colors, shadows, spacing, sizing, and more using the Figma plugin Tokens Studio for Figma. The tokens were applied to Figma components so that all component properties were controlled by tokens. The tokens were synced through GitLab to coded components visible in Storybook.
Styles![image](https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/6643a59e-86ff-4b65-9450-faf0230123fe/Colors/w=3840,quality=90,fit=scale-down)
Colors
Styles![image](https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/36f1cdc2-ef67-4e2d-888d-edf41516fb02/Typography/w=3840,quality=90,fit=scale-down)
Text
Styles![image](https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/ccb8559c-d138-4dc9-8859-14cf8a75ce90/Shadows/w=3840,quality=90,fit=scale-down)
Shadows
Components![image](https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/657fa4e6-9ef3-4e16-8905-a229c7fd7236/Buttons/w=3840,quality=90,fit=scale-down)
![image](https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/549e43b8-a75c-4a1f-bc64-b2791a4fdd8f/Input_Fields/w=3840,quality=90,fit=scale-down)
Molecules and Organisms
Buttons
Input Fields
Continuation
More Projects
ProjectsFixed PDF Ticket Scanning Issue for University Events, 15% Accuracy ↑Fixed PDF Ticket Scanning Issue for University Events, 15% Accuracy ↑
‣
‣
‣